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

body {
  font-family: "Inter", sans-serif;
  background: #f5f7f8;
  color: #111;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1400px;
  margin: auto;
  padding: 0px 30px;
  margin-bottom: 25px;
}

/* TOP BAR */

.topbar {
  background: #0b6b43;
}

.topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 10px 76px;
}

.top-links {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.top-links a {
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

.top-icons {
  display: flex;
  gap: 18px;
  align-items: center;
}

.top-icons a {
  color: #fff;
  font-size: 18px;
  transition: 0.3s;
}

.top-icons a:hover {
  color: #0a7b49;
}

/* HEADER */

.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
  width: 97%;
  margin: 0 auto;
  padding: 0 25px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  margin-bottom: 10px !important;
}

.logo {
  display: flex;
  align-items: center;
  gap: 4px;
}

.logo-box {
  width: 75px;
  height: 75px;
  background: #ffffff;
  border-radius: 8px;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-box img {
  width: 100%;
}

.logo-text h2 {
  font-size: 22px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.logo-text span {
  color: #666;
  font-size: 13px;
}

.nav-right {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 27px;
}

/* MENU */

.menu {
  display: flex;
  align-items: center;
  gap: 35px;
}

.menu > li {
  position: relative;
}

.menu > li > a {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  padding: 15px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* DROPDOWN */

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 320px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  padding: 15px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transition: 0.35s ease;
}

.menu li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown a {
  display: block;
  padding: 14px 16px;
  border-radius: 12px;
  color: #222;
  font-size: 15px;
  font-weight: 600;
  transition: 0.3s;
}

.dropdown a:hover {
  background: #f1f7f3;
  color: #0a7b49;
  padding-left: 22px;
}

/* BUTTONS */

.nav-btns {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: 0.3s;
}

.btn-green {
  background: #c38f41;
  color: #fff;
}

.btn-green:hover {
  background: #90191b;
}

.btn-red {
  background: #c38f41;
  color: #fff;
}

.btn-red:hover {
  background: #90191b;
}

/* HERO */

/* .hero {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.heroSwiper video {
  width: 100%;
  height: 100%;
  object-fit: cover;
} */

/* .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.92) 10%,
    rgba(255, 255, 255, 0.65) 35%,
    rgba(0, 0, 0, 0.08) 100%
  );
  z-index: 2;
} */

/* .hero-content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  z-index: 3;
}

.heroSwiper .swiper-slide{
    opacity:0;
    transform:scale(1.15);
    transition:
        transform 1.8s ease,
        opacity 1.2s ease;
}

.heroSwiper .swiper-slide-active{
    opacity:1;
    transform:scale(1);
    z-index:3;
}

.heroSwiper .swiper-slide-prev{
    opacity:0;
    transform:scale(.9);
}

.heroSwiper .swiper-slide-next{
    opacity:0;
    transform:scale(1.1);
}

.heroSwiper .swiper-slide video{
    width:100%;
    height:100%;
    object-fit:cover;

    clip-path:inset(0 100% 0 0);

    transition:
        clip-path 1.6s cubic-bezier(.77,0,.175,1),
        transform 2s ease;
}

.heroSwiper .swiper-slide-active video{
    clip-path:inset(0 0 0 0);
}

.heroSwiper .swiper-slide-prev video{
    clip-path:inset(0 0 0 0);
} */

/*==========================
 HERO
==========================*/

.hero {
  position: relative;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  background: #0b6b43;
  top: 0;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
  width: 100%;
  height: 100%;
}

/* .heroSwiper .swiper-wrapper {
  transform: none !important;
} */

/*==========================
 SLIDES
==========================*/

.heroSwiper .swiper-slide {
  /* position: absolute; */
  inset: 0;
  overflow: hidden;

  opacity: 0;

  transform: translateX(100%) scale(1);

  transition:
    transform 1s ease,
    opacity 1s ease;

  z-index: 1;
}

.heroSwiper .swiper-slide-active {
  z-index: 5;
  opacity: 1;

  transform: translateX(0) scale(1);

  clip-path: inset(0 0 0 0);

  transition:
    clip-path 0.8s ease,
    transform 1s ease,
    opacity 1s ease;
}

/*==========================
 VIDEO
==========================*/

.heroSwiper video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: scale(1.08);

  transition:
    transform 2s ease,
    clip-path 1.6s ease;
}

.heroSwiper .swiper-slide-active video {
  transform: scale(1);
}

/*==========================
 ENTER
==========================*/

.heroSwiper .swiper-slide.enter {
  z-index: 6;

  opacity: 1;

  clip-path: inset(0 0 0 100%);

  transform: translateX(0) scale(1);
}

.heroSwiper .swiper-slide.enter.enter-active {
  clip-path: inset(0 0 0 0);

  transition: clip-path 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.heroSwiper .swiper-slide.enter video {
  transform: scale(1.12);
}

.heroSwiper .swiper-slide.enter.enter-active video {
  transform: scale(1);

  transition: transform 2s ease;
}

/*==========================
 EXIT
==========================*/

.heroSwiper .swiper-slide.exit {
  z-index: 5;

  opacity: 1;

  transform: translateX(0) scale(1);
}

.heroSwiper .swiper-slide.exit.exit-active {
  opacity: 0;

  transform: translateX(70px) scale(0.82);

  transition:
    transform 1s ease,
    opacity 1s ease;
}

.heroSwiper .swiper-slide.exit video {
  transform: scale(1);
}

.heroSwiper .swiper-slide.exit.exit-active video {
  transform: scale(0.9);

  transition: transform 1s ease;
}

/*==========================
 OVERLAY
==========================*/

.hero-overlay {
  position: absolute;

  inset: 0;

  z-index: 2;

  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.45) 35%,
    rgba(0, 0, 0, 0.2) 60%,
    rgba(0, 0, 0, 0.1) 100%
  );
}

.hero-content .container {
  width: 100%;
  max-width: 1400px;
  margin: 20px auto;
  padding: 0px 30px;
  margin-bottom: 25px;
}

/*==========================
 CONTENT
==========================*/

.hero-content {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  z-index: 10;
}

.hero-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.hero-left {
  max-width: 700px;
}

.hero-side-nav {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.hero-nav-item {
  cursor: pointer;
  transition: 0.35s;
  color: #fff;
}

.hero-nav-item.active {
  color: #c38f41;
  font-weight: 700;
}

.hero-nav-item:hover {
  color: #c38f41;
}

.hero-left {
  color: #fff;
}

.hero-left small {
  display: inline-block;

  margin-bottom: 20px;

  letter-spacing: 4px;

  text-transform: uppercase;
}

.hero-left h1 {
  margin-bottom: 25px;
}

.hero-left p {
  max-width: 560px;

  margin-bottom: 35px;
}

.hero-btns {
  display: flex;

  gap: 18px;
}

/*==========================
 GSAP READY
==========================*/

.hero-left > * {
  will-change: transform, opacity;
}

/* ===========================
   HERO TEXT
=========================== */

.hero-left {
  max-width: 920px;
  color: #fff;
}

.hero-left small {
  display: inline-block;
  margin-bottom: 20px;
  padding-left: 18px;
  position: relative;

  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}

.hero-left small::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 2px;
  background: #c38f41;
  transform: translateY(-50%);
}

.hero-left h1 {
  margin: 0;
  margin-bottom: 28px;

  font-size: 52px;
  line-height: 1.08;
  font-weight: 700;
  color: #fff;
}

.hero-left h1 span {
  color: #c38f41;
}

.hero-left p {
  max-width: 620px;

  margin-bottom: 45px;

  font-size: 18px;
  line-height: 1.8;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.82);
}

.hero-btns {
  display: flex;
  gap: 18px;
  align-items: center;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 17px 34px;

  border-radius: 60px;

  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;

  text-decoration: none;

  transition: 0.4s;

  overflow: hidden;

  position: relative;
}

/* Primary */

.hero-btn.primary {
  background: #fff;
  color: #000;
}

.hero-btn.primary:hover {
  transform: translateY(-5px);

  box-shadow: 0 15px 40px rgba(255, 180, 0, 0.35);
}

/* Secondary */

.hero-btn.secondary {
  border: 1px solid rgba(255, 255, 255, 0.35);

  color: #fff;

  background: rgba(255, 255, 255, 0.06);

  backdrop-filter: blur(12px);
}

.hero-btn.secondary:hover {
  background: #fff;

  color: #111;

  transform: translateY(-5px);
}

/* Arrow */

.hero-btn i {
  transition: 0.35s;
}

.hero-btn:hover i {
  transform: translateX(5px);
}

@media (max-width: 991px) {
  .hero-left h1 {
    font-size: 52px;
  }

  .hero-left p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .hero-left {
    max-width: 100%;
  }

  .hero-left h1 {
    font-size: 42px;
  }

  .hero-btns {
    flex-direction: column;

    align-items: flex-start;
  }

  .hero-btn {
    width: 220px;

    justify-content: center;
  }
}

/* STATS */

.stats {
  margin-top: 55px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}

.stat-box {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  padding: 20px 25px;
  border-radius: 18px;
  min-width: 180px;
  box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 25px;
}

.stat-box h3 {
  font-size: 30px;
  color: rgb(11, 107, 67);
  margin-bottom: 8px;
}

.stat-box p {
  font-size: 14px;
  color: #555;
}

.commited-flex {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* RIGHT CARD */

.commitment-card {
  background: rgba(7, 43, 27, 0.9);
  color: rgb(255, 255, 255);
  padding: 45px;
  border-radius: 30px;
  backdrop-filter: blur(10px);
  box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 60px;
  position: relative;
  top: 42%;
}

.commitment-card i {
  width: 47px;
  height: 47px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 23px;
  margin-bottom: 25px;
}

.commitment-card h2 {
  font-size: 28px;
  margin-bottom: 20px;
}

.commitment-card p {
  font-size: 15px;
  line-height: 1.8;
  color: #d7e6de;
}

/* FEATURE BOXES */

.features {
  position: relative;
  z-index: 5;

  /* Background */
  background: url("../images/banner/fr-bg.png") no-repeat center center;
  background-size: cover;

  /* Optional */
  overflow: hidden;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

.feature-flex {
  display: flex;
  align-items: center;
  gap: 0px;
  flex-direction: column;
  justify-content: center;
}
.feature-box {
  background: #fff;
  padding: 35px 30px;
  border-radius: 24px;
  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.07);
  transition: 0.35s;
}

.feature-box:hover {
  transform: translateY(-10px);
}

.feature-icon i {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgb(11, 107, 67);
  color: rgb(255, 255, 255);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
}

.feature-box h3 {
  font-size: 14px;
  margin-bottom: 15px;
}

.feature-box p {
  color: #666;
  line-height: 1.8;
  font-size: 14px;
}

/* FOOTER */

.footer {
  background: linear-gradient(135deg, #06261a, #0b6b43);
  color: #fff;
  padding: 90px 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 40px;
}

.footer h3 {
  font-size: 26px;
  margin-bottom: 25px;
}

.footer p {
  color: #d4ddd8;
  line-height: 1.8;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.footer ul a {
  color: #d4ddd8;
  transition: 0.3s;
}

.footer ul a:hover {
  color: #fff;
  padding-left: 5px;
}

.news-box {
  background: rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: 20px;
}

.news-box img {
  width: 100%;
  border-radius: 15px;
  margin-bottom: 20px;
}

.news-box h4 {
  font-size: 20px;
  margin-bottom: 10px;
}

.subscribe {
  display: flex;
  margin-top: 20px;
}

.subscribe input {
  flex: 1;
  border: none;
  padding: 18px;
  border-radius: 12px 0 0 12px;
  outline: none;
}

.subscribe button {
  border: none;
  background: #c38f41;
  color: #fff;
  padding: 0 25px;
  border-radius: 0 12px 12px 0;
  font-weight: 700;
}

/* MOBILE */

.mobile-toggle {
  display: none;
}

@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .commitment-card {
    max-width: 500px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 991px) {
  .mobile-toggle {
    display: block;
    font-size: 30px;
    cursor: pointer;
  }

  .nav-right {
    position: fixed;
    top: 0;
    right: -100%;
    width: 350px;
    height: 100vh;
    background: #fff;
    padding: 40px 25px;
    transition: 0.4s;
    overflow: auto;
  }

  .nav-right.active {
    right: 0;
  }

  .menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .menu > li {
    width: 100%;
  }

  .menu > li > a {
    width: 100%;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
  }

  .dropdown {
    position: relative;
    width: 100%;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    box-shadow: none;
    padding: 10px 0;
  }

  .menu li.active .dropdown {
    display: block;
  }

  .nav-btns {
    margin-top: 30px;
    flex-direction: column;
    width: 100%;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-left h1 {
    font-size: 52px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .container {
    padding: 0 18px;
  }

  .hero {
    min-height: auto;
  }

  .hero video,
  .hero img {
    height: 950px;
  }

  .hero-left h1 {
    font-size: 42px;
  }

  .hero-left p {
    font-size: 17px;
  }

  .stats {
    flex-direction: column;
  }

  .stat-box {
    width: 100%;
  }

  .top-links {
    gap: 12px;
  }

  .top-links a {
    font-size: 12px;
  }
}

/* =========================
ABOUT SECTION
========================= */

.about-section {
  position: relative;
  padding: 120px 0;
  background: #ffffff;
  overflow: hidden;
}

.about-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 90px;
  align-items: center;
}

/* =========================
LEFT SIDE
========================= */

.about-image-side {
  position: relative;
}

.about-image-main {
  position: relative;
  border-radius: 35px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.about-image-main img {
  width: 100%;
  height: 720px;
  object-fit: cover;
  display: block;
}

/* EXPERIENCE BOX */

.experience-box {
  position: absolute;
  bottom: 35px;
  left: -30px;

  width: 260px;

  background: linear-gradient(135deg, #0a5f3c, #063a25);

  color: #fff;

  padding: 35px 30px;

  border-radius: 26px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}

.experience-box h2 {
  font-size: 68px;
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 800;
}

.experience-box p {
  font-size: 18px;
  line-height: 1.7;
  color: #d9e8df;
}

/* FLOATING CARD */

.floating-card {
  position: absolute;
  top: 45px;
  right: -40px;

  background: #fff;

  padding: 20px 24px;

  border-radius: 22px;

  display: flex;
  align-items: center;
  gap: 18px;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);

  min-width: 280px;
}

.floating-icon {
  width: 68px;
  height: 68px;

  border-radius: 50%;

  background: #0b6b43;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 26px;
}

.floating-card h4 {
  font-size: 22px;
  margin-bottom: 6px;
}

.floating-card span {
  font-size: 15px;
  color: #666;
}

/* =========================
RIGHT CONTENT
========================= */

.about-content {
  position: relative;
}

.section-tag {
  display: inline-block;

  color: #0b6b43;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 18px;
}

.about-content h2 {
  font-size: 31px;
  line-height: 1.15;
  margin-bottom: 28px;
  font-weight: 800;
  /* letter-spacing: -2px; */
  color: #111;
}

.about-text {
  font-size: 16px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 40px;
}

/* =========================
FEATURES
========================= */

.about-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.about-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-check {
  width: 54px;
  height: 54px;

  min-width: 54px;

  border-radius: 14px;

  background: #0b6b43;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;
}

.about-feature-item h4 {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 700;
}

.about-feature-item p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
}

/* =========================
BUTTONS
========================= */

.about-btns {
  margin-top: 45px;
  display: flex;
  gap: 18px;
}

.about-btn {
  height: 62px;
  padding: 0 34px;

  border-radius: 14px;

  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 17px;
  font-weight: 700;

  transition: 0.3s;
}

.primary-btn {
  background: #0b6b43;
  color: #fff;
}

.primary-btn:hover {
  background: #08472d;
}

.secondary-btn {
  border: 2px solid #d9d9d9;
  color: #111;
  background: #fff;
}

.secondary-btn:hover {
  border-color: #0b6b43;
  color: #0b6b43;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .about-content h2 {
    font-size: 54px;
  }
}

@media (max-width: 1100px) {
  .about-wrapper {
    grid-template-columns: 1fr;
  }

  .floating-card {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .about-section {
    padding: 90px 0;
  }

  .about-image-main img {
    height: 500px;
  }

  .about-content h2 {
    font-size: 42px;
  }

  .about-text {
    font-size: 18px;
  }

  .about-features {
    grid-template-columns: 1fr;
  }

  .experience-box {
    width: 220px;
    padding: 25px;
    left: 15px;
    bottom: 15px;
  }

  .experience-box h2 {
    font-size: 48px;
  }

  .floating-card {
    position: relative;
    top: auto;
    right: auto;
    margin-top: 20px;
    width: 100%;
  }

  .about-btns {
    flex-direction: column;
  }

  .about-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
CORE SERVICES
========================= */

.core-services {
  position: relative;
  padding: 120px 0;
  background: #f8faf9;
  overflow: hidden;
}

/* HEADING */

.service-heading {
  text-align: center;
  max-width: 950px;
  margin: auto auto 70px;
}

.section-tag {
  display: inline-block;
  color: #0b6b43;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.service-heading h2 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 800;
  /* letter-spacing: -2px; */
  margin-bottom: 24px;
  color: #111;
}

.service-heading p {
  font-size: 20px;
  line-height: 1.9;
  color: #666;
}

/* GRID */

.service-grid {
  display: flex;
  flex-direction: column;
  gap: 45px;
}

/* CARD */

.service-card {
  display: grid;
  grid-template-columns: 42% 58%;
  align-items: stretch;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #ececec;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.06);
  transition: 0.4s;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.1);
}
/* IMAGE */
.service-image {
  height: 100%;
}

.service-image img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  transition: 0.5s;
}

.service-content {
  padding: 45px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.service-card:nth-child(even) {
  grid-template-columns: 58% 42%;
}

.service-card:nth-child(even) .service-image {
  order: 2;
}

.service-card:nth-child(even) .service-content {
  order: 1;
}
/* ICON */

.service-icon {
  width: 47px;
  height: 47px;
  border-radius: 22px;
  background: #0b6b43;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 19px;
  box-shadow: 0 15px 30px rgba(11, 107, 67, 0.25);
  border-radius: 50%;
}

.service-content-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

.service-content h3 {
  font-size: 28px;
  line-height: 1.2;
  margin-bottom: 18px;
  font-weight: 800;
  color: #111;
}

.service-content p {
  font-size: 18px;
  line-height: 1.9;
  color: #666;
  margin-bottom: 28px;
}

/* LIST */

.service-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 35px;
}

.service-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 600;
  color: #222;
}

.service-list li i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f5ef;
  color: #0b6b43;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

/* BUTTON */

.service-btn {
  height: 58px;
  padding: 0 30px;
  border-radius: 14px;
  background: #0b6b43;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: 200px;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s;
}

.service-btn:hover {
  background: #08492e;
  transform: translateY(-3px);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .service-heading h2 {
    font-size: 54px;
  }

  .service-content h3 {
    font-size: 34px;
  }
}

@media (max-width: 1100px) {
  .service-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .core-services {
    padding: 90px 0;
  }

  .service-heading h2 {
    font-size: 40px;
  }

  .service-heading p {
    font-size: 18px;
  }

  .service-image img {
    height: 260px;
  }

  .service-content {
    padding: 30px;
  }

  .service-content h3 {
    font-size: 30px;
  }

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

  .service-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
LIFE AT GODAVARI
========================= */

.life-godavari {
  position: relative;
  padding: 120px 0;
  background: #ffffff;
  overflow: hidden;
}

.life-wrapper {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 90px;
  align-items: center;
}

/* =========================
LEFT VIDEO
========================= */

.life-video-side {
  position: relative;
}

.video-box {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.video-box iframe {
  width: 100%;
  height: 650px;
  display: block;
  border: none;
}

/* FLOATING CARD */

.life-floating-card {
  position: absolute;
  bottom: 35px;
  right: -35px;

  background: #fff;

  padding: 22px 24px;

  border-radius: 24px;

  display: flex;
  align-items: center;
  gap: 18px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);

  width: 320px;
}

.life-icon {
  width: 72px;
  height: 72px;

  min-width: 72px;

  border-radius: 20px;

  background: #0b6b43;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 28px;
}

.life-floating-card h4 {
  font-size: 22px;
  margin-bottom: 6px;
  color: #111;
}

.life-floating-card p {
  font-size: 15px;
  line-height: 1.7;
  color: #666;
}

/* =========================
RIGHT CONTENT
========================= */

.life-content {
  position: relative;
}

.section-tag {
  display: inline-block;

  color: #0b6b43;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 18px;
}

.life-content h2 {
  font-size: 28px;
  line-height: 1.12;
  margin-bottom: 28px;
  font-weight: 800;
  /* letter-spacing: -2px; */
  color: #111;
}

.life-text {
  font-size: 18px;
  line-height: 1.9;
  color: #555;
  margin-bottom: 45px;
}

/* =========================
FEATURE ITEMS
========================= */

.life-features {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.life-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.life-feature-icon {
  width: 62px;
  height: 62px;

  min-width: 62px;

  border-radius: 18px;

  background: #0b6b43;

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 24px;
}

.life-feature-item h4 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #111;
}

.life-feature-item p {
  font-size: 17px;
  line-height: 1.8;
  color: #666;
}

/* =========================
BUTTON
========================= */

.life-btns {
  margin-top: 45px;
}

.life-btn {
  height: 54px;
  padding: 0 34px;
  border-radius: 14px;
  background: #0b6b43;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 700;
  transition: 0.3s;
}

.life-btn:hover {
  background: #08482e;
  transform: translateY(-3px);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .life-content h2 {
    font-size: 54px;
  }
}

@media (max-width: 1100px) {
  .life-wrapper {
    grid-template-columns: 1fr;
  }

  .life-floating-card {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .life-godavari {
    padding: 90px 0;
  }

  .video-box iframe {
    height: 400px;
  }

  .life-content h2 {
    font-size: 42px;
  }

  .life-text {
    font-size: 18px;
  }

  .life-floating-card {
    position: relative;
    right: auto;
    bottom: auto;
    margin-top: 20px;
    width: 100%;
  }

  .life-feature-item {
    flex-direction: column;
  }

  .life-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
VIDEO BOX
========================= */

.video-box {
  position: relative;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
  height: 650px;
}

/* THUMBNAIL */

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OVERLAY */

.video-box::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.35));
}

/* PLAY BUTTON */

.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  width: 110px;
  height: 110px;

  border-radius: 50%;

  background: #ffffff;

  color: #0b6b43;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 34px;

  z-index: 2;

  transition: 0.35s ease;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}

/* PLAY ICON */

.video-play-btn i {
  margin-left: 6px;
}

/* HOVER */

.video-play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
  background: #0b6b43;
  color: #fff;
}

/* RIPPLE EFFECT */

.video-play-btn::before,
.video-play-btn::after {
  content: "";
  position: absolute;

  width: 100%;
  height: 100%;

  border-radius: 50%;

  border: 2px solid rgba(255, 255, 255, 0.7);

  animation: ripple 2s infinite;
}

.video-play-btn::after {
  animation-delay: 1s;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }

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

/* MOBILE */

@media (max-width: 768px) {
  .video-box {
    height: 400px;
  }

  .video-play-btn {
    width: 85px;
    height: 85px;
    font-size: 28px;
  }
}

/* =========================
OUR BUSINESS SECTION
========================= */

.our-business {
  position: relative;
  padding: 120px 0;
  background: #f8faf9;
  overflow: hidden;
}

/* HEADING */

.business-heading {
  text-align: center;
  max-width: 950px;
  margin: auto auto 75px;
}

.section-tag {
  display: inline-block;
  color: #0b6b43;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.business-heading h2 {
  font-size: 28px;
  line-height: 1.12;
  font-weight: 800;
  /* letter-spacing: -2px; */
  margin-bottom: 24px;
  color: #111;
}

.business-heading p {
  font-size: 18px;
  line-height: 1.9;
  color: #666;
}

/* GRID */

.business-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* CARD */

.business-card {
  position: relative;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid #ececec;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
  transition: 0.4s ease;
}

.business-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

/* IMAGE */

.business-image {
  position: relative;
  overflow: hidden;
}

.business-image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  transition: 0.5s;
}

.business-card:hover .business-image img {
  transform: scale(1.08);
}

.business-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.35));
}

/* CONTENT */

.business-content {
  position: relative;
  padding: 38px;
}

.business-content-flex {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ICON */

.business-icon i {
  width: 47px;
  height: 47px;
  border-radius: 22px;
  background: #0b6b43;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  margin-bottom: 19px;
  box-shadow: 0 15px 30px rgba(11, 107, 67, 0.25);
  border-radius: 50%;
}

/* TITLE */

.business-content h3 {
  font-size: 21px;
  line-height: 1.2;
  margin-bottom: 18px;
  font-weight: 800;
  color: #111;
}
/* TEXT */

.business-content p {
  font-size: 16px;
  line-height: 1.9;
  color: #666;
  margin-bottom: 30px;
}
/* LIST */

.business-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 35px;
}

.business-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

.business-list li i {
  width: 28px;
  height: 28px;

  border-radius: 50%;

  background: #e8f5ef;

  color: #0b6b43;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
}

/* BUTTON */

.business-btn {
  height: 56px;
  padding: 0 30px;
  border-radius: 14px;
  background: #0b6b43;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  transition: 0.3s;
}

.business-btn:hover {
  background: #08492e;
  transform: translateY(-3px);
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .business-heading h2 {
    font-size: 54px;
  }

  .business-content h3 {
    font-size: 32px;
  }
}

@media (max-width: 1100px) {
  .business-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .our-business {
    padding: 90px 0;
  }

  .business-heading h2 {
    font-size: 40px;
  }

  .business-heading p {
    font-size: 18px;
  }

  .business-image img {
    height: 260px;
  }

  .business-content {
    padding: 30px;
  }

  .business-content h3 {
    font-size: 28px;
  }

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

  .business-btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================
MODERN THINK TANK
========================= */

.modern-think-tank {
  position: relative;
  padding: 100px 0;
  background: #f7f9f8;
}

/* WRAPPER */

.think-wrapper {
  background: #fff;
  border: 1px solid #dfe9e3;
  border-radius: 40px;
  padding: 60px;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 50px;
  align-items: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

/* LEFT */

.think-left {
  position: relative;
}

.think-tag {
  display: inline-block;
  color: #0b6b43;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.red-line {
  width: 42px;
  height: 4px;
  background: #d22c2c;
  border-radius: 20px;
  margin-bottom: 25px;
}

.think-left h2 {
  font-size: 36px;
  line-height: 0.95;
  font-weight: 900;
  color: #0d2342;
  margin-bottom: 30px;
  /* letter-spacing: -4px; */
}

.think-left h2 span {
  color: #0b6b43;
}

.think-left p {
  font-size: 15px;
  line-height: 1.5;
  color: #364152;
  max-width: 360px;
}

/* STATS */

.stat-item-flex {
  display: flex;
  align-items: center;
  gap: 12px;
}
.think-stats {
  margin-top: 55px;
  background: linear-gradient(135deg, #063924, #0b6b43);
  border-radius: 28px;
  padding: 1px 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.stat-item {
  flex: 1;
}

.stat-icon {
  font-size: 24px;
  margin-bottom: 13px;
}

.stat-item h3 {
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}

.stat-item span {
  font-size: 12px;
  line-height: 1.7;
  color: #dcebe4;
}

.divider {
  width: 1px;
  height: 120px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 30px;
}

/* MEMBERS */

.think-members {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

/* CARD */

.member-card {
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border: 1px solid #edf0ef;
  position: relative;
  transition: 0.4s ease;
}

.member-card:hover {
  transform: translateY(-10px);
}

/* IMAGE */

.member-image {
  position: relative;
  overflow: hidden;
}

.member-image img {
  width: 100%;
  /* height: 320px; */
  object-fit: cover;
  display: block;
}

/* ICON */

.member-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #063924, #0b6b43);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: 4px solid #fff;
  position: absolute;
  left: 50%;
  top: 148px;
  transform: translateX(-50%);
}

/* CONTENT */

.member-content {
  padding: 60px 25px 30px;
  text-align: center;
}

.member-content h3 {
  font-size: 16px;
  line-height: 1.5;
  color: #12233d;
  font-weight: 800;
  margin-bottom: 14px;
}
.member-content p {
  font-size: 16px;
  color: #555;
  margin-bottom: 18px;
  min-height: 45px;
}

.member-line {
  width: 42px;
  height: 3px;
  background: #d22c2c;
  border-radius: 20px;
  margin: 0 auto 24px;
}

/* LINKEDIN */

.member-content a {
  width: 58px;
  height: 58px;

  border-radius: 50%;

  border: 1px solid #cfd9d3;

  color: #0b6b43;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 22px;

  transition: 0.3s;
}

.member-content a:hover {
  background: #0b6b43;
  color: #fff;
}

/* BOTTOM */

.think-bottom-text {
  text-align: center;
  margin-top: 45px;
  font-size: 28px;
  color: #24364d;
  font-weight: 500;
}

.think-bottom-text span {
  color: #0b6b43;
  font-weight: 700;
}

.quote {
  color: #7da996 !important;
  font-size: 38px;
  margin: 0 14px;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .think-wrapper {
    grid-template-columns: 1fr;
  }

  .think-members {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .modern-think-tank {
    padding: 80px 0;
  }

  .think-wrapper {
    padding: 30px;
    border-radius: 30px;
  }

  .think-left h2 {
    font-size: 62px;
  }

  .think-left p {
    font-size: 17px;
  }

  .think-stats {
    flex-direction: column;
    gap: 30px;
  }

  .divider {
    width: 100%;
    height: 1px;
  }

  .think-members {
    grid-template-columns: 1fr;
  }

  .member-image img {
    height: 280px;
  }

  .think-bottom-text {
    font-size: 20px;
    line-height: 1.8;
  }
}

/* =========================
OUR VALUES SECTION
========================= */

.our-values {
  position: relative;
  padding: 120px 0;
  background: linear-gradient(180deg, #f8faf9 0%, #ffffff 100%);

  overflow: hidden;
}

/* HEADING */

.values-heading {
  text-align: center;
  max-width: 920px;
  margin: auto auto 80px;
}

.values-tag {
  display: inline-block;

  color: #0b6b43;

  font-size: 16px;
  font-weight: 700;

  letter-spacing: 1px;

  margin-bottom: 18px;
}

.values-heading h2 {
  font-size: 30px;
  line-height: 1.12;
  font-weight: 800;
  /* letter-spacing: -2px; */
  color: #111;
  margin-bottom: 24px;
}
.values-heading p {
  font-size: 17px;
  line-height: 1.9;
  color: #666;
}

/* GRID */

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

/* CARD */

.value-card {
  position: relative;

  background: #fff;

  border-radius: 34px;

  padding: 50px 42px;

  overflow: hidden;

  border: 1px solid #ececec;

  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.05);

  transition: 0.4s ease;
}

.value-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.1);
}

/* ACTIVE CARD */

.active-card {
  background: linear-gradient(135deg, #063924, #0b6b43);

  color: #fff;
}

.active-card p {
  color: #dcebe4 !important;
}

.active-card .value-number {
  color: rgba(255, 255, 255, 0.2);
}

.active-card .value-line {
  background: #fff;
}

.active-card .value-bg-text {
  color: rgba(255, 255, 255, 0.05);
}

/* NUMBER */

.value-number {
  position: absolute;
  top: 30px;
  right: 35px;

  font-size: 70px;
  font-weight: 900;

  line-height: 1;

  color: #eef2f1;
}

/* ICON */

.value-icon2 {
  width: 71px;
  height: 69px;
  border-radius: 28px;
  /* background: #0b6b43; */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 35px;
  box-shadow: 0 15px 35px rgba(83, 107, 11, 0.2);
}

.active-card .value-icon2 {
  background: #fff;
  color: #0b6b43;
}
.value-icon2 i {
  color: #000;
}
/* TITLE */

.value-card h3 {
  font-size: 35px;
  line-height: 1.2;
  margin-bottom: 20px;
  font-weight: 800;
}

/* LINE */

.value-line {
  width: 48px;
  height: 4px;

  border-radius: 20px;

  background: #d22c2c;

  margin-bottom: 26px;
}

/* TEXT */

.value-card p {
  font-size: 18px;
  line-height: 1.95;
  color: #666;
  position: relative;
  z-index: 2;
}

/* BACKGROUND TEXT */

.value-bg-text {
  position: absolute;
  bottom: 15px;
  right: 21px;
  font-size: 67px;
  font-weight: 900;
  color: #f7f7f7;
  line-height: 1;
  letter-spacing: -3px;
  pointer-events: none;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1400px) {
  .values-heading h2 {
    font-size: 54px;
  }

  .value-card h3 {
    font-size: 38px;
  }
}

@media (max-width: 1100px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .our-values {
    padding: 90px 0;
  }

  .values-heading h2 {
    font-size: 40px;
  }

  .values-heading p {
    font-size: 18px;
  }

  .value-card {
    padding: 40px 30px;
  }

  .value-card h3 {
    font-size: 32px;
  }

  .value-card p {
    font-size: 16px;
  }

  .value-number {
    font-size: 52px;
  }

  .value-bg-text {
    font-size: 60px;
  }
}

/* =========================
FOOTER
========================= */

.footer {
  position: relative;
  background: linear-gradient(135deg, #041f15, #0b6b43);

  color: #fff;

  padding: 90px 0 35px;

  overflow: hidden;
}

/* GRID */

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 50px;
  padding-bottom: 60px;
}

/* =========================
LOGO
========================= */

.footer-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
  background-color: #ffffff26;
  border-radius: 2px;
  padding: 5px;
}

.footer-logo img {
  width: 48px;
}
.footer-logo h2 {
  font-size: 15px;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
  margin-top: 9px;
}

.footer-logo span {
  color: #cdded6;
  font-size: 14px;
}

.footer-about {
  font-size: 17px;
  line-height: 1.95;
  color: #d7e0db;
  max-width: 420px;
}

/* =========================
SOCIAL
========================= */

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.footer-social a {
  width: 48px;
  height: 48px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 18px;

  transition: 0.35s ease;
}

.footer-social a:hover {
  background: #fff;
  color: #0b6b43;
  transform: translateY(-5px);
}

/* =========================
TITLE
========================= */

.footer h3 {
  font-size: 28px;
  margin-bottom: 28px;
  font-weight: 700;
}

/* =========================
TEXT
========================= */

.footer p {
  color: #d7e0db;
  line-height: 1.9;
  font-size: 17px;
}

/* =========================
LIST
========================= */

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.footer ul a {
  color: #d7e0db;
  transition: 0.3s;
  font-size: 17px;
  position: relative;
}

.footer ul a:hover {
  color: #fff;
  padding-left: 8px;
}

/* =========================
NEWSLETTER
========================= */

.subscribe {
  display: flex;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 14px;
}

.subscribe input {
  flex: 1;
  border: none;
  height: 60px;
  padding: 0 20px;
  outline: none;
  font-size: 16px;
}

.subscribe button {
  border: none;
  background: #be1e24;
  color: #fff;
  padding: 0 28px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.subscribe button:hover {
  background: #98171c;
}

/* =========================
BOTTOM
========================= */

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);

  padding-top: 30px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.footer-bottom p {
  font-size: 15px;
  color: #c8d5cf;
}

.footer-bottom-links {
  display: flex;
  gap: 24px;
}

.footer-bottom-links a {
  color: #c8d5cf;
  font-size: 15px;
  transition: 0.3s;
}

.footer-bottom-links a:hover {
  color: #fff;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 80px 0 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .footer-logo {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-logo h2 {
    font-size: 24px;
  }

  .footer h3 {
    font-size: 24px;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    gap: 16px;
  }

  .subscribe {
    flex-direction: column;
    border-radius: 0;
    gap: 12px;
  }

  .subscribe input {
    border-radius: 12px;
  }

  .subscribe button {
    height: 55px;
    border-radius: 12px;
  }
}

/* =========================
MODERN COUNTER SECTION
========================= */

.modern-counter-section {
  padding: 90px 0;
  background: #f3f5f4;
}

/* WRAPPER */

.modern-counter-wrapper {
  position: relative;

  height: 260px;

  border-radius: 40px;

  overflow: hidden;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  background: linear-gradient(135deg, #012e1d 0%, #075433 45%, #0b6b43 100%);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
}

/* GLOW EFFECT */

.modern-counter-wrapper::before {
  content: "";
  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at top left,
      rgba(0, 255, 150, 0.15),
      transparent 30%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 255, 150, 0.12),
      transparent 35%
    );

  pointer-events: none;
}

/* DOTS */

.modern-counter-wrapper::after {
  content: "";
  position: absolute;

  width: 420px;
  height: 420px;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );

  background-size: 12px 12px;

  opacity: 0.4;

  top: -80px;
  left: 240px;
}

/* BOX */

.modern-counter-box {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  color: #fff;

  z-index: 2;
}

/* DIVIDER */

.modern-counter-box::after {
  content: "";

  position: absolute;

  right: 0;
  top: 50%;

  transform: translateY(-50%);

  width: 1px;
  height: 120px;

  background: rgba(255, 255, 255, 0.12);
}

.modern-counter-box:last-child::after {
  display: none;
}

/* ICON */

.modern-counter-icon {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 150, 0.18),
    rgba(255, 255, 255, 0.04)
  );
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  box-shadow: 0 0 25px rgba(0, 255, 150, 0.18);
}

.modern-counter-icon i {
  font-size: 26px;
  color: #fff;
}
/* NUMBER */

.modern-counter-box h2 {
  font-size: 39px;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 18px;
  /* letter-spacing: -2px; */
}
.modern-counter-box h2 span:last-child {
  color: #3cff9f;
}

/* SMALL LINE */

.counter-line {
  width: 52px;
  height: 4px;

  border-radius: 20px;

  background: #2cff96;

  margin-bottom: 18px;

  box-shadow: 0 0 12px rgba(44, 255, 150, 0.5);
}

/* TEXT */

.modern-counter-box p {
  font-size: 22px;
  color: #e1efe8;
  font-weight: 500;
}

/* =========================
RESPONSIVE
========================= */

@media (max-width: 1200px) {
  .modern-counter-wrapper {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
  }

  .modern-counter-box {
    padding: 50px 20px;
  }

  .modern-counter-box:nth-child(2)::after {
    display: none;
  }
}

@media (max-width: 768px) {
  .modern-counter-wrapper {
    grid-template-columns: 1fr;
    border-radius: 28px;
  }

  .modern-counter-box {
    padding: 45px 20px;
  }

  .modern-counter-box::after {
    width: 80%;
    height: 1px;

    top: auto;
    bottom: 0;
    left: 50%;

    transform: translateX(-50%);
  }

  .modern-counter-box:last-child::after {
    display: none;
  }

  .modern-counter-box h2 {
    font-size: 58px;
  }

  .modern-counter-box p {
    font-size: 20px;
  }

  .modern-counter-icon {
    width: 78px;
    height: 78px;
  }

  .modern-counter-icon i {
    font-size: 30px;
  }
}

.feature-box,
.service-card,
.business-card,
.member-card,
.value-card,
.modern-counter-box,
.about-image-side,
.life-video-side {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.feature-icon {
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-8px);
  }

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

.gqx-section {
  position: relative;
  padding: 50px 0;
  overflow: hidden;
  z-index: 1;
  background-color: #f2f4f6;
}

/* BACKGROUND IMAGE */

.gqx-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/banner/ab-background.png");
  background-repeat: no-repeat;
  background-position: center;
  transform: scale(1.08) translate(-35px, -17px);
  z-index: -2;
}

/* WHITE OVERLAY */

.gqx-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 20%);
  z-index: -1;
}

/* CONTENT */

.gqx-container {
  position: relative;
  z-index: 5;
}

.gqx-container {
  position: relative;
  z-index: 2;
}

.gqx-container {
  width: 92%;
  max-width: 1450px;
  margin: auto;
  position: relative;
  z-index: 2;
}

/* TOP IMAGE */

.gqx-heading-img {
  text-align: center;
  margin-bottom: 15px;
}

.gqx-heading-img img {
  width: 100%;
  max-width: 850px;
}

/* CONTENT */

.gqx-content {
  text-align: center;
}

.gqx-content h2 {
  font-size: 25px;
  line-height: 1.4;
  color: #1d2430;
  font-weight: 600;
  max-width: 826px;
  margin: auto;
}

.gqx-content h2 span {
  color: #0ba7b5;
}

.gqx-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
}

.gqx-divider span {
  width: 130px;
  height: 2px;
  background: #0ba7b5;
}

.gqx-divider i {
  color: #0ba7b5;
  font-size: 19px;
}

/* CARDS */

.gqx-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  margin-top: 40px;
}

.gqx-card {
  background: #fff;
  border-radius: 28px;
  padding: 55px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  min-height: 391px;
}

.gqx-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #0b6b43, #009ca9);
}

.gqx-card-icon-wrap {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: auto;
  /* border: 3px dashed #0b6b43; */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}

/* .gqx-card-icon-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px dashed #0b6b43;

    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 30px;

    animation: rotateBorder 12s linear infinite;
}

@keyframes rotateBorder {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
} */

/* .gqx-card-icon{
    width: 70px;
    height: 70px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    animation: rotateBorderReverse 12s linear infinite;
}

@keyframes rotateBorderReverse {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
} */

.gqx-card-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gqx-card-icon i {
  color: #fff;
  font-size: 25px;
}

.gqx-card h3 {
  font-size: 17px;
  line-height: 1.4;
  color: #1e2630;
  font-weight: 800;
  margin-bottom: 10px;
}

.gqx-small-line {
  width: 70px;
  height: 2px;
  background: #aab0b7;
  margin: auto auto 25px;
}

.gqx-card p {
  font-size: 14px;
  line-height: 2;
  color: #4e5561;
}

/* RESPONSIVE */

@media (max-width: 1200px) {
  .gqx-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .gqx-stats-wrapper {
    flex-wrap: wrap;
  }

  .gqx-bottom-bar {
    flex-wrap: wrap;
  }

  .gqx-bottom-line,
  .gqx-stat-line {
    display: none;
  }
}

@media (max-width: 768px) {
  .gqx-content h2 {
    font-size: 21px;
  }

  .gqx-card-grid {
    grid-template-columns: 1fr;
  }

  .gqx-stats-wrapper {
    padding: 25px;
  }

  .gqx-stat-item {
    width: 100%;
  }

  .gqx-bottom-item {
    width: 100%;
  }

  .gqx-card p {
    font-size: 17px;
    line-height: 1.8;
  }

  .gqx-bottom-item p {
    font-size: 16px;
  }
}

/* CAROUSEL SPACING */

.gqx-card-carousel .owl-stage-outer {
  padding: 15px 0 20px;
}

.gqx-card-carousel .item {
  padding: 10px;
}

/* OWL DOTS */

.gqx-card-carousel .owl-dots {
  text-align: center;
  margin-top: 25px;
}

.gqx-card-carousel .owl-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #c7d0d5 !important;
  margin: 0 6px;
  transition: 0.4s;
}

.gqx-card-carousel .owl-dot.active {
  width: 40px;
  border-radius: 30px;
  background: #0b6b43 !important;
}

/* NAV */

.gqx-card-carousel .owl-nav {
  margin-top: 20px;
  text-align: center;
}

.gqx-card-carousel .owl-nav button {
  width: 55px;
  height: 55px;
  border-radius: 50% !important;
  background: #0b6b43 !important;
  color: #fff !important;
  font-size: 24px !important;
  margin: 0 8px;
  transition: 0.4s;
}

.gqx-card-carousel .owl-nav button:hover {
  background: #15202b !important;
}
.gqx-card-icon i {
  animation: iconPulse 2s infinite;
  display: inline-block;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.18);
  }
}
.gqx-card-icon {
  width: 150px;
  height: 150px;
  padding: 4px;
  overflow: hidden;
}
.gqx-card-icon img {
  width: 128px !important;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.network-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background: #fff;
}

.network-container {
  width: min(1320px, 92%);
  margin: auto;

  display: grid;
  grid-template-columns: 480px 1fr;
  align-items: center;
  gap: 90px;
}

/*==============================
        LEFT SIDE
==============================*/

.network-left {
  position: relative;
  z-index: 2;
}

.network-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #888;
  text-transform: uppercase;

  margin-bottom: 18px;
}

.network-subtitle::before {
  content: "";
  width: 55px;
  height: 2px;
  background: #0b6b43;
}

.line {
  width: 85px;
  height: 2px;
  background: #0b6b43;
  margin: 8px 0 28px;
}

.line-bottom {
  margin-top: 35px;
  margin-bottom: 35px;
}

.network-title {
  font-size: 58px;
  line-height: 1.08;
  font-weight: 800;
  color: #101010;
}

.network-title span {
  color: #0b6b43;
}

.network-description {
  width: 90%;
  font-size: 17px;
  line-height: 1.9;
  color: #666;
}

/*==============================
       COUNTER
==============================*/

.counter-wrapper {
  margin-top: 55px;

  display: flex;
  gap: 24px;
}

.counter-card {
  flex: 1;

  background: #fff;

  border-radius: 20px;

  padding: 22px;

  display: flex;

  align-items: center;

  gap: 18px;

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

  transition: 0.35s;
}

.counter-card:hover {
  transform: translateY(-8px);
  border: 1px solid rgba(11, 107, 67, 0.15);

  box-shadow: 0 20px 50px rgba(11, 107, 67, 0.12);
}

.counter-icon {
  width: 62px;
  height: 62px;

  border-radius: 16px;

  background: #0b6b4305;

  display: flex;
  justify-content: center;
  align-items: center;

  color: #08472d;

  flex-shrink: 0;
}

.counter-icon svg {
  width: 28px;
  height: 28px;
}

.counter-content h3 {
  font-size: 30px;
  font-weight: 800;
  color: #111;

  margin-bottom: 4px;
}

.counter-content span {
  color: #777;
  font-size: 15px;
}

/*==============================
        RIGHT SIDE
==============================*/

.network-right {
  position: relative;
  height: 760px;
}

.globe-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

/*==============================
      WHITE GLOW
==============================*/

.globe-glow {
  position: absolute;

  width: 640px;
  height: 640px;

  border-radius: 50%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  /* background: radial-gradient(
    circle,
    rgba(255, 228, 165, 0.45),
    rgba(255, 255, 255, 0)
  ); */

  background: radial-gradient(
    circle,
    rgba(11, 107, 67, 0.22),
    rgba(255, 255, 255, 0)
  );
  filter: blur(20px);
}

/*==============================
      GLOBE PLACEHOLDER
==============================*/

.globe {
  position: absolute;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background: linear-gradient(180deg, #ffffff, #f8fdfb);

  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    inset 0 25px 80px rgba(255, 255, 255, 0.9),
    0 25px 70px rgba(11, 107, 67, 0.1),
    0 0 120px rgba(11, 107, 67, 0.08),
    0 0 180px rgba(11, 107, 67, 0.05);

  overflow: hidden;
}

.india-map {
  position: absolute;

  width: 72%;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  opacity: 0.95;
}

/*=====================================
        ORBIT RINGS
======================================*/

.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(11, 107, 67, 0.3);
  animation: orbitRotate linear infinite;
}

.orbit-1 {
  width: 580px;
  height: 580px;
  animation-duration: 30s;
}

.orbit-2 {
  width: 670px;
  height: 670px;
  animation-duration: 42s;
  animation-direction: reverse;
}

.orbit-3 {
  width: 760px;
  height: 760px;
  animation-duration: 55s;
}

@keyframes orbitRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/*=====================================
        LOCATION MARKERS
======================================*/

.marker {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: pulse 2.2s infinite;
  background: #0b6b43;

  box-shadow:
    0 0 8px rgba(11, 107, 67, 0.6),
    0 0 18px rgba(11, 107, 67, 0.35);
}

.marker::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 2px solid rgba(11, 107, 67, 0.35);
  border-radius: 50%;
}

.marker-1 {
  top: 41%;
  left: 49%;
}

.marker-2 {
  top: 42%;
  left: 66%;
}

.marker-3 {
  top: 58%;
  left: 47%;
}

.marker-4 {
  top: 51%;
  left: 52%;
}
.marker-5 {
  top: 47%;
  left: 42%;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(11, 107, 67, 0.45);
  }

  70% {
    box-shadow: 0 0 0 22px rgba(11, 107, 67, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(11, 107, 67, 0);
  }
}

/*=====================================
        LOCATION CARDS
======================================*/

.location-card {
  position: absolute;

  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 210px;

  background: rgba(255, 255, 255, 0.88);

  backdrop-filter: blur(14px);

  padding: 14px 18px;

  border-radius: 18px;

  border: 1px solid rgba(255, 255, 255, 0.9);

  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);

  transition: 0.35s;

  animation: floating 6s ease-in-out infinite;
}

.location-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.12);
}

.location-dot {
  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: #0b6b43;

  flex-shrink: 0;

  position: relative;
}

.location-dot::after {
  content: "";

  position: absolute;

  inset: -6px;

  border-radius: 50%;

  border: 2px solid rgba(11, 107, 67, 0.3);
}

.location-card h5 {
  font-size: 14px;
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.location-card p {
  font-size: 13px;
  color: #0b6b43;
}

/*=====================================
        CARD POSITIONS
======================================*/

.card-1 {
  left: 0;
  top: 140px;
}

.card-2 {
  right: 10px;
  top: 110px;
}

.card-3 {
  right: -10px;
  top: 315px;
}

.card-4 {
  left: 15px;
  bottom: 150px;
}

.card-5 {
  right: 70px;
  bottom: 70px;
}

/*=====================================
      FLOATING ANIMATION
======================================*/

@keyframes floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

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

/*=====================================
     CONNECTING GLOW
======================================*/

.globe::before {
  content: "";

  position: absolute;

  width: 220px;
  height: 220px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: radial-gradient(circle, rgba(11, 107, 67, 0.18), transparent 75%);

  filter: blur(12px);
}

.globe::after {
  content: "";

  position: absolute;

  inset: 20px;

  border-radius: 50%;

  border: 1px solid rgba(11, 107, 67, 0.15);
}

/*==================================
        GLOBE ANIMATION
==================================*/

.globe {
  animation: globeFloat 8s ease-in-out infinite;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.globe:hover {
  transform: translate(-50%, -50%) rotateY(12deg) rotateX(8deg) scale(1.03);
}

@keyframes globeFloat {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }

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

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

/*==================================
      LOCATION CARD DELAY
==================================*/

.card-1 {
  animation-delay: 0.2s;
}

.card-2 {
  animation-delay: 0.8s;
}

.card-3 {
  animation-delay: 1.4s;
}

.card-4 {
  animation-delay: 2s;
}

.card-5 {
  animation-delay: 2.6s;
}

/*==================================
        HOVER EFFECT
==================================*/

.location-card:hover .location-dot {
  transform: scale(1.15);
}

.location-dot {
  transition: 0.35s;
}

.location-card:hover h5 {
  color: #d8a12d;
}

.location-card h5 {
  transition: 0.35s;
}

/*==================================
        SCROLL ANIMATION READY
==================================*/

.network-left,
.network-right {
  transition: 1s ease;
}

/*==================================
        LARGE SCREEN
==================================*/

@media (max-width: 1400px) {
  .network-container {
    width: 92%;

    grid-template-columns: 430px 1fr;

    gap: 60px;
  }

  .network-title {
    font-size: 50px;
  }

  .globe {
    width: 470px;
    height: 470px;
  }

  .orbit-1 {
    width: 540px;
    height: 540px;
  }

  .orbit-2 {
    width: 620px;
    height: 620px;
  }

  .orbit-3 {
    width: 700px;
    height: 700px;
  }
}

/*==================================
        LAPTOP
==================================*/

@media (max-width: 1200px) {
  .network-container {
    grid-template-columns: 1fr;
    gap: 70px;
  }

  .network-left {
    max-width: 760px;
    margin: auto;
    text-align: center;
  }

  .network-description {
    width: 100%;
  }

  .counter-wrapper {
    justify-content: center;
  }

  .network-right {
    height: 700px;
  }

  .line,
  .network-subtitle::before {
    margin-left: auto;
    margin-right: auto;
  }
}

/*==================================
        TABLET
==================================*/

@media (max-width: 992px) {
  .network-section {
    padding: 80px 0;
  }

  .network-title {
    font-size: 42px;
  }

  .network-right {
    height: 620px;
  }

  .globe {
    width: 390px;
    height: 390px;
  }

  .orbit-1 {
    width: 470px;
    height: 470px;
  }

  .orbit-2 {
    width: 540px;
    height: 540px;
  }

  .orbit-3 {
    width: 610px;
    height: 610px;
  }

  .location-card {
    min-width: 180px;

    padding: 12px 14px;
  }

  .location-card h5 {
    font-size: 13px;
  }

  .location-card p {
    font-size: 12px;
  }
}

/*==================================
        MOBILE
==================================*/

@media (max-width: 768px) {
  .network-section {
    padding: 60px 20px;
  }

  .network-container {
    width: 100%;
  }

  .network-title {
    font-size: 34px;
  }

  .network-description {
    font-size: 15px;
  }

  .counter-wrapper {
    flex-direction: column;
  }

  .counter-card {
    width: 100%;
  }

  .network-right {
    height: 500px;
  }

  .globe {
    width: 300px;
    height: 300px;
  }

  .orbit-1 {
    width: 360px;
    height: 360px;
  }

  .orbit-2 {
    width: 410px;
    height: 410px;
  }

  .orbit-3 {
    display: none;
  }

  .location-card {
    min-width: 150px;
    padding: 10px 12px;
    gap: 10px;
  }

  .location-card h5 {
    font-size: 11px;
  }

  .location-card p {
    display: none;
  }

  /* Card Position */

  .card-1 {
    left: 0;
    top: 70px;
  }

  .card-2 {
    right: 0;
    top: 80px;
  }

  .card-3 {
    right: -10px;
    top: 230px;
  }

  .card-4 {
    left: 0;
    bottom: 110px;
  }

  .card-5 {
    right: 20px;
    bottom: 20px;
  }
}

/*==================================
      SMALL MOBILE
==================================*/

@media (max-width: 480px) {
  .network-title {
    font-size: 28px;
  }

  .network-right {
    height: 420px;
  }

  .globe {
    width: 250px;
    height: 250px;
  }

  .orbit-1 {
    width: 300px;
    height: 300px;
  }

  .orbit-2 {
    width: 340px;
    height: 340px;
  }

  .location-card {
    transform: scale(0.85);
  }
}

.mining-scene {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;
  background: #f6f5f1;
  display: flex;
  align-items: flex-end;
}

.mining-scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mining-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 8, 8, 0.82) 0%,
    rgba(8, 8, 8, 0.45) 40%,
    rgba(255, 255, 255, 0.15) 70%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 2;
}

.mining-content {
  position: relative;
  z-index: 5;
  max-width: 700px;
  color: #fff;
  padding: 70px;
}

.mining-content span {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4c19a;
  margin-bottom: 18px;
}

.mining-content h2 {
  font-size: 48px;
  line-height: 1.15;
  font-weight: 700;
  margin-bottom: 18px;
}

.mining-content p {
  color: #d9d9d9;
  line-height: 1.8;
  font-size: 17px;
  margin-bottom: 35px;
}

.mining-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 38px;
  background: #0b6b43;
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.4s;
}

.mining-btn:hover {
  background: #d39a38;
}

.mining-scene {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #f7f7f7;
}

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

/* about css */

/*==================================================
CHAIRMAN EMERITUS
==================================================*/

.chairman-hero {
  position: relative;
  padding: 170px 0 120px;
  overflow: hidden;
  background:
    linear-gradient(rgba(6, 38, 26, 0.72), rgba(6, 38, 26, 0.72)),
    url("../images/banner/slide3.webp") center/cover;
}

.chairman-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at top right,
    rgba(255, 255, 255, 0.12),
    transparent 45%
  );
}

.chairman-hero .container {
  position: relative;
  z-index: 2;
}

.chairman-breadcrumb {
  display: flex;
  gap: 12px;
  align-items: center;
  color: #d6d6d6;
  margin-bottom: 35px;
  font-size: 15px;
}

.chairman-breadcrumb a {
  color: #fff;
  text-decoration: none;
  transition: 0.3s;
}

.chairman-breadcrumb a:hover {
  color: #0ba360;
}

.chairman-hero-content {
  max-width: 700px;
}

.chairman-hero-content .section-tag {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.chairman-hero h1 {
  color: #fff;
  font-size: 62px;
  line-height: 1.08;
  font-weight: 800;
  margin: 0;
}

/*==================================================
PHILOSOPHY
==================================================*/

.chairman-philosophy {
  padding: 110px 0;
  background: #fff;
}

.chairman-philosophy-header {
  text-align: center;
  margin-bottom: 70px;
}

.chairman-philosophy-header .section-tag {
  color: #0b6b43;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
}

.chairman-philosophy-header h2 {
  margin-top: 18px;
  font-size: 46px;
  color: #111;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
}

.philosophy-card {
  background: #fff;
  border: 1px solid #ececec;
  padding: 50px 35px;
  text-align: center;
  transition: 0.4s;
  position: relative;
  overflow: hidden;
}

.philosophy-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.philosophy-card.active {
  background: #0b6b43;
  color: #fff;
}

.philosophy-number {
  position: absolute;
  right: 25px;
  top: 20px;
  font-size: 55px;
  color: #efefef;
  font-weight: 800;
}

.active .philosophy-number {
  color: rgba(255, 255, 255, 0.12);
}

.philosophy-icon {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  margin: auto;
  background: #eef8f2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: #0b6b43;
}

.active .philosophy-icon {
  background: #fff;
}

.philosophy-card h3 {
  margin-top: 30px;
  font-size: 28px;
}

/*=========================================
QUOTE SECTION
=========================================*/

.chairman-quote {
  position: relative;
  padding: 100px 0;
  overflow: hidden;
  background: linear-gradient(135deg, #0b6b43, #084d33);
}

.chairman-quote::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  top: -180px;
  left: -120px;
}

.chairman-quote::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  bottom: -140px;
  right: -80px;
}

.quote-wrapper {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: auto;
  text-align: center;
}

.quote-wrapper i {
  font-size: 42px;
  color: rgba(255, 255, 255, 0.25);
}

.quote-wrapper h2 {
  color: #fff;
  font-size: 56px;
  font-weight: 800;
  margin: 25px 0;
  letter-spacing: 1px;
}

/*=========================================
CLOSING SECTION
=========================================*/

.chairman-closing {
  padding: 90px 0;
  background: #f8f8f8;
}

.closing-content {
  text-align: center;
}

.closing-content h2 {
  font-size: 38px;
  color: #111;
  margin-bottom: 12px;
}

.closing-content span {
  display: inline-block;
  font-size: 18px;
  color: #666;
  letter-spacing: 2px;
}

/*=========================================
IMAGE EFFECT
=========================================*/

.chairman-image-box {
  border-radius: 8px;
}

.chairman-image-box img {
  border-radius: 8px;
}

.chairman-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  box-shadow:
    0 35px 80px rgba(0, 0, 0, 0.08),
    0 10px 25px rgba(0, 0, 0, 0.05);
  pointer-events: none;
}

/*=========================================
TEXT EFFECT
=========================================*/

.chairman-content h2 {
  position: relative;
}

.chairman-content h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 3px;
  background: #0b6b43;
  margin-top: 20px;
}

.chairman-text p:last-child {
  margin-bottom: 0;
}

/*=========================================
HOVER
=========================================*/

.philosophy-card {
  border-radius: 12px;
}

.philosophy-card:hover {
  border-color: #0b6b43;
}

.philosophy-icon {
  transition: 0.4s;
}

.philosophy-card:hover .philosophy-icon {
  transform: rotate(8deg) scale(1.08);
}

.philosophy-card h3 {
  transition: 0.3s;
}

.philosophy-card:hover h3 {
  color: #0b6b43;
}

/* .active:hover h3 {
  color: #fff;
} */

/*=========================================
SMOOTH ANIMATION
=========================================*/

.chairman-image,
.chairman-content,
.philosophy-card,
.quote-wrapper {
  animation: fadeUp 0.8s ease both;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(35px);
  }

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

/*=========================================
TABLET
=========================================*/

@media (max-width: 991px) {
  .chairman-wrapper {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .chairman-image {
    max-width: 520px;
    margin: auto;
  }

  .chairman-hero {
    padding: 140px 0 90px;
  }

  .chairman-hero h1 {
    font-size: 48px;
  }

  .chairman-content h2 {
    font-size: 34px;
  }

  .philosophy-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .quote-wrapper h2 {
    font-size: 40px;
  }
}

/*=========================================
MOBILE
=========================================*/

@media (max-width: 767px) {
  .chairman-message {
    padding: 70px 0;
  }

  .chairman-philosophy {
    padding: 70px 0;
  }

  .chairman-quote {
    padding: 70px 0;
  }

  .chairman-closing {
    padding: 70px 0;
  }

  .chairman-hero {
    padding: 120px 0 80px;
  }

  .chairman-hero h1 {
    font-size: 38px;

    line-height: 1.2;
  }

  .chairman-content h2 {
    font-size: 30px;
  }

  .chairman-text p {
    font-size: 16px;

    line-height: 1.9;
  }

  .quote-wrapper h2 {
    font-size: 30px;

    line-height: 1.4;
  }

  .quote-wrapper i {
    font-size: 30px;
  }

  .closing-content h2 {
    font-size: 28px;
  }

  .philosophy-card {
    padding: 35px 25px;
  }

  .philosophy-icon {
    width: 70px;
    height: 70px;
    font-size: 28px;
  }

  .philosophy-number {
    font-size: 42px;
  }
}
.chairman-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 20px;
}

.grid-item {
  overflow: hidden;
  border-radius: 18px;
  position: relative;
  min-height: 260px;
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.5s;
}

.grid-item:hover img {
  transform: scale(1.08);
}

.info {
  background: linear-gradient(135deg, #0b6b43, #0e7d4f);
  color: #fff;
  padding: 35px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info span {
  letter-spacing: 2px;
  font-size: 13px;
  text-transform: uppercase;
  opacity: 0.8;
}

.info h3 {
  font-size: 34px;
  margin: 18px 0;
  line-height: 1.2;
}

.info p {
  line-height: 1.8;
  opacity: 0.9;
}

.info-bottom {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}

.info-bottom strong {
  display: block;
  font-size: 30px;
}

.info-bottom small {
  opacity: 0.8;
}

.chairman-philosophy {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.chairman-philosophy::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  top: 40px;
  left: -80px;
  opacity: 0.35;
  background-image: radial-gradient(#0b6b43 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

.chairman-philosophy::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  bottom: 40px;
  right: -80px;
  opacity: 0.35;
  background-image: radial-gradient(#0b6b43 1.5px, transparent 1.5px);
  background-size: 18px 18px;
}

/*=========================================
OUR JOURNEY
=========================================*/

.journey-section {
  position: relative;
  background: #f7f7f4;
  overflow: hidden;
  padding: 120px 0 0;
}

/*==============================
Heading
==============================*/

.journey-header {
  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;
}

.journey-subtitle {
  display: inline-block;

  color: #0b6b43;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 3px;

  text-transform: uppercase;

  margin-bottom: 18px;
}

.journey-header h2 {
  font-size: 64px;

  line-height: 1.05;

  font-weight: 700;

  color: #111;

  margin-bottom: 25px;
}

.journey-header p {
  max-width: 620px;

  margin: auto;

  color: #666;

  line-height: 1.9;

  font-size: 18px;
}

/*==============================
Timeline
==============================*/

.timeline-nav-wrapper {
  position: sticky;

  top: 0;

  z-index: 100;

  background: #fff;

  border-top: 1px solid #eee;

  border-bottom: 1px solid #eee;
}

.timeline-nav {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 80px;

  height: 90px;

  position: relative;
}

.timeline-progress {
  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 3px;

  background: #0b6b43;

  transition: 0.3s;
}

.timeline-progress {
  transform-origin: left center;
  transform: scaleX(0);
}

.timeline-year {
  background: none;

  border: none;

  cursor: pointer;

  color: #888;

  font-size: 18px;

  font-weight: 600;

  transition: 0.35s;

  position: relative;
}

.timeline-year::after {
  content: "";

  position: absolute;

  left: 50%;

  bottom: -30px;

  transform: translateX(-50%);

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: #d5d5d5;

  transition: 0.35s;
}

.timeline-year.active {
  color: #0b6b43;

  transform: scale(1.12);
}

.timeline-year.active::after {
  background: #0b6b43;

  transform: translateX(-50%) scale(1.4);
}

/*==============================
Horizontal Area
==============================*/

.journey-pin {
  position: relative;

  height: 100vh;

  overflow: hidden;
}

.journey-track {
  display: flex;

  height: 100%;
}

.journey-slide {
  width: 100vw;

  min-width: 100vw;

  display: grid;

  grid-template-columns: 58% 42%;

  align-items: center;

  gap: 80px;

  padding: 0 8%;
}

/*==============================
Image
==============================*/

.journey-image {
  border-radius: 28px;

  overflow: hidden;

  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}

.journey-image img {
  width: 100%;

  height: 428px;

  object-fit: cover;

  transition: 1s;
}

.journey-slide:hover .journey-image img {
  transform: scale(1.05);
}

/*==============================
Content
==============================*/

.journey-content {
  max-width: 520px;
}

.journey-year {
  display: inline-block;

  color: #0b6b43;

  font-size: 16px;

  font-weight: 700;

  letter-spacing: 3px;

  margin-bottom: 25px;
}

.journey-content h2 {
  font-size: 35px;

  line-height: 1;

  color: #111;

  margin-bottom: 25px;
}

.journey-content p {
  color: #666;

  font-size: 20px;

  line-height: 2;
}

/*==============================
Responsive
==============================*/

@media (max-width: 1200px) {
  .journey-slide {
    grid-template-columns: 1fr;

    text-align: center;

    gap: 50px;

    padding: 80px 40px;
  }

  .journey-content {
    margin: auto;
  }

  .journey-image img {
    height: 450px;
  }

  .timeline-nav {
    gap: 40px;

    overflow-x: auto;

    padding: 0 25px;

    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .journey-header h2 {
    font-size: 42px;
  }

  .journey-content h2 {
    font-size: 42px;
  }

  .journey-content p {
    font-size: 17px;
  }

  .timeline-nav {
    height: 75px;

    gap: 30px;
  }

  .timeline-year {
    font-size: 15px;
  }
}

/*=====================================================
TRADING & LOGISTICS PAGE
=====================================================*/

.trade-hero {
  position: relative;
  height: 720px;
  overflow: hidden;
}

.trade-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trade-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(6, 33, 22, 0.88) 0%,
    rgba(6, 33, 22, 0.78) 35%,
    rgba(6, 33, 22, 0.35) 70%,
    rgba(6, 33, 22, 0.15) 100%
  );
}

.trade-hero .container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*=========================================
Breadcrumb
=========================================*/

.trade-breadcrumb {
  display: flex;
  align-items: center;
  gap: 14px;

  margin-bottom: 35px;

  color: #fff;
}

.trade-breadcrumb a {
  color: #fff;

  font-size: 15px;

  opacity: 0.85;

  transition: 0.35s;
}

.trade-breadcrumb a:hover {
  color: #d6ab55;
}

.trade-breadcrumb span {
  color: #fff;

  font-size: 15px;
}

/*=========================================
Hero Content
=========================================*/

.trade-content {
  max-width: 760px;
}

.trade-content small {
  display: inline-block;

  letter-spacing: 2px;

  font-size: 15px;

  font-weight: 700;

  color: #d6ab55;

  margin-bottom: 22px;
}

.trade-content h1 {
  font-size: 76px;

  line-height: 1.05;

  color: #fff;

  font-weight: 800;

  margin-bottom: 30px;
}

.trade-content p {
  font-size: 20px;

  line-height: 1.9;

  color: #eef5ef;

  max-width: 650px;
}

.trade-btns {
  display: flex;

  gap: 20px;

  margin-top: 45px;

  flex-wrap: wrap;
}

.trade-btns .hero-btn {
  height: 62px;

  padding: 0 34px;

  border-radius: 15px;

  display: flex;

  align-items: center;

  gap: 12px;

  font-size: 15px;

  font-weight: 700;

  transition: 0.35s;
}

.trade-btns .primary {
  background: #0b6b43;

  color: #fff;
}

.trade-btns .primary:hover {
  background: #08452b;

  transform: translateY(-4px);
}

.trade-btns .secondary {
  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(8px);

  border: 2px solid rgba(255, 255, 255, 0.35);

  color: #fff;
}

.trade-btns .secondary:hover {
  background: #fff;

  color: #111;
}

/*=========================================
INTRO SECTION
=========================================*/

.trade-intro {
  padding: 110px 0;

  background: #fff;
}

.intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: center;
}

.intro-left .section-tag {
  color: #0b6b43;

  letter-spacing: 1px;

  font-size: 15px;

  font-weight: 700;

  display: inline-block;

  margin-bottom: 18px;
}

.intro-left h2 {
  font-size: 48px;

  line-height: 1.2;

  font-weight: 800;

  color: #111;
}

.intro-right p {
  font-size: 18px;

  line-height: 2;

  color: #666;
}

/*=========================================
Floating Glass Card
=========================================*/

.trade-hero::after {
  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  right: -140px;

  top: -120px;

  border-radius: 50%;

  background: rgba(214, 171, 85, 0.15);

  filter: blur(10px);
}

.trade-hero::before {
  content: "";

  position: absolute;

  width: 300px;

  height: 300px;

  left: -80px;

  bottom: -80px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.18);

  filter: blur(15px);
}

/*=========================================
Responsive
=========================================*/

@media (max-width: 1100px) {
  .trade-content h1 {
    font-size: 60px;
  }

  .intro-grid {
    grid-template-columns: 1fr;

    gap: 45px;
  }
}

@media (max-width: 768px) {
  .trade-hero {
    height: 650px;
  }

  .trade-content h1 {
    font-size: 46px;
  }

  .trade-content p {
    font-size: 17px;
  }

  .trade-btns {
    flex-direction: column;
  }

  .trade-btns .hero-btn {
    width: 100%;

    justify-content: center;
  }

  .intro-left h2 {
    font-size: 36px;
  }

  .intro-right p {
    font-size: 17px;
  }
}

/*==================================================
ABOUT SECTION
==================================================*/

.trade-about {
  padding: 120px 0;

  background: #f8faf9;
}

.trade-about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

/* LEFT */

.trade-about-image {
  position: relative;
}

.main-image {
  border-radius: 35px;

  overflow: hidden;

  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
}

.main-image img {
  width: 100%;

  height: 650px;

  object-fit: cover;

  display: block;
}

.floating-image {
  position: absolute;

  width: 260px;

  right: -35px;

  bottom: 50px;

  border-radius: 25px;

  overflow: hidden;

  border: 8px solid #fff;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

.floating-image img {
  width: 100%;

  display: block;
}

.experience-card {
  position: absolute;

  top: 40px;

  left: -40px;

  background: #0b6b43;

  color: #fff;

  padding: 30px;

  border-radius: 22px;

  width: 230px;

  box-shadow: 0 20px 45px rgba(11, 107, 67, 0.3);
}

.experience-card h2 {
  font-size: 55px;

  margin-bottom: 8px;
}

.experience-card span {
  line-height: 1.7;

  display: block;
}

/* RIGHT */

.trade-about-content h2 {
  font-size: 46px;

  line-height: 1.2;

  margin: 18px 0 25px;

  font-weight: 800;
}

.trade-about-content p {
  font-size: 17px;

  line-height: 1.9;

  color: #666;

  margin-bottom: 22px;
}

/* FEATURES */

.trade-feature-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;

  margin-top: 35px;
}

.trade-feature {
  display: flex;

  align-items: center;

  gap: 15px;

  font-weight: 600;
}

.trade-feature i {
  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: #0b6b43;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;
}

/* STATS */

.trade-stats {
  display: flex;

  gap: 25px;

  margin-top: 45px;
}

.trade-stat {
  flex: 1;

  background: #fff;

  border-radius: 18px;

  padding: 28px;

  text-align: center;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
}

.trade-stat h3 {
  font-size: 36px;

  color: #0b6b43;

  margin-bottom: 10px;
}

.trade-stat span {
  color: #666;

  font-size: 15px;
}

/* RESPONSIVE */

@media (max-width: 1100px) {
  .trade-about-grid {
    grid-template-columns: 1fr;
  }

  .floating-image {
    right: 20px;
  }
}

@media (max-width: 768px) {
  .main-image img {
    height: 420px;
  }

  .floating-image {
    position: relative;

    width: 100%;

    right: 0;

    bottom: 0;

    margin-top: 20px;
  }

  .experience-card {
    position: relative;

    left: 0;

    top: 0;

    margin-bottom: 20px;
  }

  .trade-about-content h2 {
    font-size: 34px;
  }

  .trade-feature-grid {
    grid-template-columns: 1fr;
  }

  .trade-stats {
    flex-direction: column;
  }
}

/*=============================================
LOGISTICS SECTION
=============================================*/

.logistics-section {
  padding: 120px 0;

  background: #fff;
}

.logistics-card {
  display: grid;

  grid-template-columns: 42% 58%;

  background: #fff;

  border-radius: 30px;

  overflow: hidden;

  margin-top: 55px;

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);

  transition: 0.4s;
}

.logistics-card:hover {
  transform: translateY(-10px);
}

.reverse {
  grid-template-columns: 58% 42%;
}

.reverse .logistics-image {
  order: 2;
}

.reverse .logistics-content {
  order: 1;
}

.logistics-image img {
  width: 100%;

  height: 100%;

  min-height: 420px;

  object-fit: cover;

  transition: 0.6s;
}

.logistics-card:hover img {
  transform: scale(1.08);
}

.logistics-content {
  padding: 55px;
}

.logistics-icon {
  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: #0b6b43;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 26px;

  margin-bottom: 25px;
}

.logistics-content h3 {
  font-size: 34px;

  margin-bottom: 18px;

  font-weight: 800;
}

.logistics-content p {
  font-size: 17px;

  line-height: 1.9;

  color: #666;

  margin-bottom: 28px;
}

.logistics-content ul {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 18px;
}

.logistics-content ul li {
  display: flex;

  align-items: center;

  gap: 12px;

  font-weight: 600;
}

.logistics-content ul i {
  color: #0b6b43;
}

/* Hover */

.logistics-card:hover .logistics-icon {
  transform: rotate(360deg);

  transition: 1s;
}

/* Responsive */

@media (max-width: 1100px) {
  .logistics-card {
    grid-template-columns: 1fr;
  }

  .reverse {
    grid-template-columns: 1fr;
  }

  .reverse .logistics-image {
    order: 1;
  }

  .reverse .logistics-content {
    order: 2;
  }
}

@media (max-width: 768px) {
  .logistics-content {
    padding: 35px;
  }

  .logistics-content h3 {
    font-size: 28px;
  }

  .logistics-content ul {
    grid-template-columns: 1fr;
  }
}

/*==========================================
COMMODITY SECTION
==========================================*/

.commodity-section {
  padding: 120px 0;

  background: #f8faf9;
}

.commodity-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;

  margin-top: 70px;
}

.commodity-card {
  background: #fff;

  border-radius: 28px;

  padding: 45px 35px;

  transition: 0.4s;

  position: relative;

  overflow: hidden;

  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
}

.commodity-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 5px;

  background: #0b6b43;

  transform: scaleX(0);

  transition: 0.4s;

  transform-origin: left;
}

.commodity-card:hover::before {
  transform: scaleX(1);
}

.commodity-card:hover {
  transform: translateY(-12px);
}

.commodity-icon {
  width: 70px;

  height: 70px;

  border-radius: 22px;

  background: #0b6b43;

  color: #fff;

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 28px;

  margin-bottom: 28px;

  transition: 0.4s;
}

.commodity-card:hover .commodity-icon {
  background: #d4a247;

  transform: rotateY(180deg);
}

.commodity-card h3 {
  font-size: 28px;

  margin-bottom: 18px;

  font-weight: 800;
}

.commodity-card p {
  color: #666;

  line-height: 1.9;

  font-size: 16px;

  margin-bottom: 28px;
}

.commodity-card a {
  color: #0b6b43;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 12px;
}

.commodity-card a i {
  transition: 0.35s;
}

.commodity-card:hover a i {
  transform: translateX(8px);
}

/*============================*/

@media (max-width: 1200px) {
  .commodity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .commodity-grid {
    grid-template-columns: 1fr;
  }

  .commodity-card {
    padding: 35px;
  }
}

/*=========================================
PROCESS SECTION
=========================================*/

.process-section {
  padding: 120px 0;

  background: #fff;
}

.process-wrapper {
  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: 70px;

  flex-wrap: wrap;
}

.process-item {
  text-align: center;
}

.process-icon {
  width: 95px;

  height: 95px;

  border-radius: 50%;

  background: #0b6b43;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 34px;

  margin: auto;

  transition: 0.4s;
}

.process-item:hover .process-icon {
  transform: translateY(-10px) rotate(360deg);

  background: #d4a247;
}

.process-item h4 {
  margin-top: 22px;

  font-size: 18px;

  font-weight: 700;
}

.process-line {
  width: 100%;

  height: 3px;

  background: #0b6b43;

  margin: 0 20px;

  opacity: 0.25;
}

/*=========================================
WHY
=========================================*/

.why-section {
  padding: 120px 0;

  background: #f8faf9;
}

.why-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;

  margin-top: 70px;
}

.why-card {
  background: #fff;

  padding: 45px;

  border-radius: 28px;

  text-align: center;

  transition: 0.4s;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.why-card:hover {
  transform: translateY(-10px);

  background: #0b6b43;

  color: #fff;
}

.why-card i {
  font-size: 38px;

  margin-bottom: 22px;

  color: #0b6b43;

  transition: 0.4s;
}

.why-card:hover i {
  color: #d4a247;
}

.why-card h3 {
  font-size: 24px;

  margin-bottom: 16px;
}

.why-card p {
  line-height: 1.9;

  color: #666;

  transition: 0.4s;
}

.why-card:hover p {
  color: #fff;
}

/*=========================================
Responsive
=========================================*/

@media (max-width: 1100px) {
  .process-wrapper {
    gap: 30px;
  }

  .process-line {
    display: none;
  }

  .why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .why-grid {
    grid-template-columns: 1fr;
  }

  .process-icon {
    width: 80px;

    height: 80px;

    font-size: 28px;
  }
}

/*=========================================
COUNTER
=========================================*/

.counter-section {
  padding: 110px 0;

  background: #0b6b43;
}

.counter-grid {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 30px;
}

.counter-box {
  text-align: center;

  color: #fff;
}

.counter-box h2 {
  font-size: 65px;

  font-weight: 800;

  margin-bottom: 12px;

  color: #d4a247;
}

.counter-box span {
  font-size: 18px;

  opacity: 0.9;
}

/*=========================================
CTA
=========================================*/

.trade-cta {
  padding: 120px 0;

  background: #f8faf9;
}

.cta-wrapper {
  background: linear-gradient(135deg, #0b6b43, #075032);

  border-radius: 35px;

  padding: 90px;

  text-align: center;

  color: #fff;

  position: relative;

  overflow: hidden;
}

.cta-wrapper::before {
  content: "";

  position: absolute;

  width: 450px;

  height: 450px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.06);

  right: -150px;

  top: -180px;
}

.cta-wrapper::after {
  content: "";

  position: absolute;

  width: 320px;

  height: 320px;

  border-radius: 50%;

  background: rgba(212, 162, 71, 0.12);

  left: -80px;

  bottom: -120px;
}

.cta-wrapper small {
  display: block;

  letter-spacing: 2px;

  color: #d4a247;

  margin-bottom: 20px;

  font-weight: 700;
}

.cta-wrapper h2 {
  font-size: 52px;

  font-weight: 800;

  line-height: 1.2;

  margin-bottom: 25px;

  position: relative;

  z-index: 2;
}

.cta-wrapper p {
  max-width: 760px;

  margin: auto;

  font-size: 18px;

  line-height: 1.9;

  margin-bottom: 40px;

  position: relative;

  z-index: 2;
}

.cta-wrapper .trade-btns {
  justify-content: center;

  position: relative;

  z-index: 2;
}

/*=========================================
RESPONSIVE
=========================================*/

@media (max-width: 992px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cta-wrapper {
    padding: 60px 35px;
  }

  .cta-wrapper h2 {
    font-size: 40px;
  }
}

@media (max-width: 768px) {
  .counter-grid {
    grid-template-columns: 1fr;
  }

  .cta-wrapper h2 {
    font-size: 32px;
  }

  .counter-box h2 {
    font-size: 50px;
  }
}

/*=====================================================
MINERAL BENEFICIATION PAGE
=====================================================*/

/*=========================================
HERO
=========================================*/

.mineral-hero {
  position: relative;
  height: 720px;
  overflow: hidden;
}

.mineral-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mineral-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(6, 33, 22, 0.88) 0%,
    rgba(6, 33, 22, 0.75) 40%,
    rgba(6, 33, 22, 0.3) 100%
  );
}

.mineral-hero .container {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/*=========================================
Breadcrumb
=========================================*/

.mineral-breadcrumb {
  display: flex;
  align-items: center;
  gap: 15px;

  color: #fff;

  margin-bottom: 35px;
}

.mineral-breadcrumb a {
  color: #fff;
  opacity: 0.85;
  transition: 0.3s;
}

.mineral-breadcrumb a:hover {
  color: #d6ab55;
}

/*=========================================
Hero Content
=========================================*/

.mineral-content {
  max-width: 820px;
}

.mineral-content small {
  display: inline-block;

  color: #d6ab55;

  letter-spacing: 2px;

  font-weight: 700;

  margin-bottom: 20px;
}

.mineral-content h1 {
  color: #fff;

  font-size: 72px;

  line-height: 1.08;

  font-weight: 800;
}

/*=========================================
INTRO
=========================================*/

.mineral-intro {
  padding: 120px 0;

  background: #fff;
}

.intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 80px;

  align-items: start;
}

.intro-left h2 {
  font-size: 48px;

  line-height: 1.2;

  margin-top: 15px;

  font-weight: 800;
}

.section-tag {
  color: #0b6b43;

  letter-spacing: 2px;

  font-weight: 700;
}

.intro-right p {
  color: #666;

  line-height: 2;

  font-size: 18px;

  margin-bottom: 28px;
}

/*=========================================
ABOUT
=========================================*/

.mineral-about {
  padding: 120px 0;

  background: #f8faf9;
}

.mineral-about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

.mineral-image {
  position: relative;
}

.mineral-image img {
  width: 100%;

  border-radius: 30px;

  display: block;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.mineral-about-content h2 {
  font-size: 48px;

  line-height: 1.2;

  margin: 18px 0 28px;

  font-weight: 800;
}

.mineral-about-content p {
  color: #666;

  line-height: 2;

  font-size: 18px;

  margin-bottom: 24px;
}

/*=========================================
Decoration
=========================================*/

.mineral-about {
  position: relative;
}

.mineral-about::before {
  content: "";

  position: absolute;

  width: 350px;

  height: 350px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.05);

  left: -120px;

  top: 80px;
}

.mineral-about::after {
  content: "";

  position: absolute;

  width: 260px;

  height: 260px;

  border-radius: 50%;

  background: rgba(214, 171, 85, 0.08);

  right: -80px;

  bottom: 50px;
}

/*=========================================
Responsive
=========================================*/

@media (max-width: 1100px) {
  .intro-grid,
  .mineral-about-grid {
    grid-template-columns: 1fr;

    gap: 50px;
  }

  .mineral-content h1 {
    font-size: 56px;
  }
}

@media (max-width: 768px) {
  .mineral-hero {
    height: 620px;
  }

  .mineral-content h1 {
    font-size: 40px;
  }

  .intro-left h2,
  .mineral-about-content h2 {
    font-size: 34px;
  }

  .intro-right p,
  .mineral-about-content p {
    font-size: 17px;
  }
}

/*=========================================
PROCESS SECTION
=========================================*/

.beneficiation-process {
  padding: 120px 0;

  background: #fff;
}

.process-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

.process-image {
  overflow: hidden;

  border-radius: 30px;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.process-image img {
  width: 100%;

  display: block;

  transition: 0.6s;
}

.process-image:hover img {
  transform: scale(1.08);
}

.process-content h2 {
  font-size: 48px;

  margin: 18px 0 25px;

  line-height: 1.2;
}

.process-content p {
  font-size: 18px;

  color: #666;

  line-height: 2;

  margin-bottom: 25px;
}

/*=========================================
HIGHLIGHT
=========================================*/

.mineral-highlight {
  padding: 120px 0;

  background: #f8faf9;
}

.highlight-wrapper {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

.highlight-content h2 {
  font-size: 48px;

  margin: 18px 0 25px;

  line-height: 1.2;
}

.highlight-content p {
  color: #666;

  line-height: 2;

  font-size: 18px;

  margin-bottom: 24px;
}

.highlight-image {
  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.highlight-image img {
  width: 100%;

  display: block;

  transition: 0.6s;
}

.highlight-image:hover img {
  transform: scale(1.08);
}

/*=========================================
Responsive
=========================================*/

@media (max-width: 1100px) {
  .process-grid,
  .highlight-wrapper {
    grid-template-columns: 1fr;

    gap: 50px;
  }
}

@media (max-width: 768px) {
  .process-content h2,
  .highlight-content h2 {
    font-size: 34px;
  }

  .process-content p,
  .highlight-content p {
    font-size: 17px;
  }
}

/*====================================================
HERO
====================================================*/

.civil-hero {
  position: relative;
  width: 100%;
  height: 720px;
  overflow: hidden;
}

.civil-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.civil-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(5, 22, 15, 0.9) 0%,
    rgba(5, 22, 15, 0.7) 45%,
    rgba(5, 22, 15, 0.3) 100%
  );
}

.civil-hero::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background: rgba(212, 162, 71, 0.1);

  right: -160px;
  top: -180px;

  filter: blur(25px);

  z-index: 1;
}

.civil-hero::after {
  content: "";

  position: absolute;

  width: 340px;
  height: 340px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.18);

  left: -120px;
  bottom: -120px;

  filter: blur(25px);

  z-index: 1;
}

.civil-hero .container {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  z-index: 5;
}

/*====================================================
BREADCRUMB
====================================================*/

.civil-breadcrumb {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 28px;
}

.civil-breadcrumb a {
  color: rgba(255, 255, 255, 0.85);

  font-size: 15px;

  transition: 0.3s;
}

.civil-breadcrumb a:hover {
  color: #d4a247;
}

.civil-breadcrumb span {
  color: #ffffff;

  font-size: 15px;
}

/*====================================================
HERO CONTENT
====================================================*/

.civil-content {
  max-width: 760px;
}

.civil-content small {
  display: inline-block;

  color: #d4a247;

  font-size: 15px;

  letter-spacing: 2px;

  font-weight: 700;

  margin-bottom: 20px;
}

.civil-content h1 {
  color: #ffffff;

  font-size: 74px;

  line-height: 1.08;

  font-weight: 800;

  margin-bottom: 25px;
}

.civil-content p {
  color: rgba(255, 255, 255, 0.85);

  font-size: 20px;

  line-height: 1.8;

  max-width: 650px;
}

/*====================================================
INTRO
====================================================*/

.civil-intro {
  padding: 120px 0;

  background: #ffffff;

  overflow: hidden;
}

.civil-intro::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.05);

  top: -120px;
  left: -120px;
}

.civil-intro::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background: rgba(212, 162, 71, 0.08);

  right: -90px;
  bottom: -120px;
}

.intro-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;

  position: relative;

  z-index: 2;
}

.intro-left h2 {
  font-size: 50px;

  font-weight: 800;

  line-height: 1.15;

  margin-top: 15px;

  position: relative;

  display: inline-block;

  padding-bottom: 18px;
}

.intro-left h2::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 80px;
  height: 4px;

  border-radius: 10px;

  background: #d4a247;
}

.intro-right p {
  font-size: 18px;

  color: #666666;

  line-height: 2;

  margin-bottom: 28px;
}

.intro-right p:last-child {
  margin-bottom: 0;
}

.intro-right strong {
  color: #0b6b43;
}

/*====================================================
ABOUT
====================================================*/

.civil-about {
  padding: 120px 0;
  background: #f8faf9;
  position: relative;
  overflow: hidden;
}

.civil-about::before {
  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.05);

  left: -120px;
  top: 80px;
}

.civil-about::after {
  content: "";

  position: absolute;

  width: 260px;
  height: 260px;

  border-radius: 50%;

  background: rgba(212, 162, 71, 0.08);

  right: -80px;
  bottom: 60px;
}

.civil-about-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;

  position: relative;

  z-index: 2;
}

/*=========================================
ABOUT IMAGE
=========================================*/

.civil-image {
  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.civil-image img {
  width: 100%;

  transition: 0.6s;
}

.civil-image:hover img {
  transform: scale(1.08);
}

/*=========================================
ABOUT CONTENT
=========================================*/

.civil-about-content h2 {
  font-size: 48px;

  line-height: 1.2;

  margin: 18px 0 25px;

  font-weight: 800;
}

.civil-about-content p {
  color: #666;

  font-size: 18px;

  line-height: 2;
}

/*====================================================
PROCESS
====================================================*/

.civil-process {
  padding: 120px 0;

  background: #ffffff;
}

.civil-process-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;
}

/*=========================================
PROCESS IMAGE
=========================================*/

.civil-process-image {
  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

.civil-process-image img {
  width: 100%;

  transition: 0.6s;
}

.civil-process-image:hover img {
  transform: scale(1.08);
}

/*=========================================
PROCESS CONTENT
=========================================*/

.civil-process-content h2 {
  font-size: 48px;

  line-height: 1.2;

  margin: 18px 0 25px;

  font-weight: 800;
}

.civil-process-content p {
  color: #666;

  font-size: 18px;

  line-height: 2;

  margin-bottom: 22px;
}

.civil-process-content p:last-child {
  margin-bottom: 0;
}

/*====================================================
SUPPLY CHAIN
====================================================*/

.civil-highlight {
  padding: 120px 0;
  background: #f8faf9;
  position: relative;
  overflow: hidden;
}

.civil-highlight::before {
  content: "";

  position: absolute;

  width: 300px;
  height: 300px;

  border-radius: 50%;

  background: rgba(11, 107, 67, 0.05);

  right: -120px;
  top: -100px;
}

.civil-highlight::after {
  content: "";

  position: absolute;

  width: 240px;
  height: 240px;

  border-radius: 50%;

  background: rgba(212, 162, 71, 0.08);

  left: -80px;
  bottom: -80px;
}

.civil-highlight-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 90px;

  align-items: center;

  position: relative;

  z-index: 2;
}

/*=========================================
SUPPLY CHAIN CONTENT
=========================================*/

.civil-highlight-content h2 {
  font-size: 48px;

  line-height: 1.2;

  margin: 18px 0 25px;

  font-weight: 800;
}

.civil-highlight-content p {
  color: #666;

  font-size: 18px;

  line-height: 2;

  margin-bottom: 24px;
}

.civil-highlight-content p:last-child {
  margin-bottom: 0;
}

/*=========================================
SUPPLY CHAIN IMAGE
=========================================*/

.civil-highlight-image {
  overflow: hidden;

  border-radius: 30px;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.1);
}

.civil-highlight-image img {
  width: 100%;

  transition: 0.6s;
}

.civil-highlight-image:hover img {
  transform: scale(1.08);
}

/*====================================================
FUTURE
====================================================*/

.civil-future {
  padding: 120px 0;

  background: #ffffff;

  text-align: center;
}

.future-wrapper {
  max-width: 900px;

  margin: auto;
}

.future-wrapper h2 {
  font-size: 52px;

  line-height: 1.2;

  margin: 20px 0 30px;

  font-weight: 800;
}

.future-wrapper p {
  color: #666;

  font-size: 18px;

  line-height: 2;

  margin-bottom: 24px;
}

.future-wrapper p:last-child {
  margin-bottom: 0;
}

/*=========================================
SECTION ANIMATION READY
=========================================*/

.civil-image,
.civil-process-image,
.civil-highlight-image {
  will-change: transform;
}

.civil-about-content,
.civil-process-content,
.civil-highlight-content,
.future-wrapper {
  will-change: transform, opacity;
}

/*====================================================
RESPONSIVE
====================================================*/

@media (max-width: 1200px) {
  .civil-content h1 {
    font-size: 64px;
  }

  .civil-about-grid,
  .civil-process-grid,
  .civil-highlight-grid {
    gap: 60px;
  }
}

@media (max-width: 992px) {
  .civil-hero {
    height: 620px;
  }

  .intro-grid,
  .civil-about-grid,
  .civil-process-grid,
  .civil-highlight-grid {
    grid-template-columns: 1fr;

    gap: 60px;
  }

  .civil-highlight-image {
    order: -1;
  }

  .civil-content h1 {
    font-size: 52px;
  }

  .intro-left h2,
  .civil-about-content h2,
  .civil-process-content h2,
  .civil-highlight-content h2 {
    font-size: 40px;
  }

  .future-wrapper h2 {
    font-size: 44px;
  }
}

@media (max-width: 768px) {
  .civil-hero {
    height: 520px;
  }

  .civil-hero .container {
    padding: 0 20px;
  }

  .civil-content h1 {
    font-size: 38px;
  }

  .civil-content p {
    font-size: 17px;
  }

  .civil-breadcrumb {
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 20px;
  }

  .civil-intro,
  .civil-about,
  .civil-process,
  .civil-highlight,
  .civil-future {
    padding: 80px 0;
  }

  .intro-left h2,
  .civil-about-content h2,
  .civil-process-content h2,
  .civil-highlight-content h2 {
    font-size: 32px;
  }

  .future-wrapper h2 {
    font-size: 34px;
  }

  .intro-right p,
  .civil-about-content p,
  .civil-process-content p,
  .civil-highlight-content p,
  .future-wrapper p {
    font-size: 16px;

    line-height: 1.9;
  }

  .civil-image,
  .civil-process-image,
  .civil-highlight-image {
    border-radius: 20px;
  }
}

@media (max-width: 576px) {
  .civil-content h1 {
    font-size: 30px;
  }

  .section-tag {
    font-size: 13px;

    letter-spacing: 1.5px;
  }

  .intro-left h2,
  .civil-about-content h2,
  .civil-process-content h2,
  .civil-highlight-content h2 {
    font-size: 28px;
  }

  .future-wrapper h2 {
    font-size: 30px;
  }
}

/*====================================================
COMMON TRANSITION
====================================================*/

.civil-image,
.civil-process-image,
.civil-highlight-image,
.civil-image img,
.civil-process-image img,
.civil-highlight-image img,
.civil-breadcrumb a {
  transition: 0.4s ease;
}

/*====================================================
TEXT SELECTION
====================================================*/

::selection {
  background: #0b6b43;

  color: #fff;
}

/*====================================================
SMOOTH SCROLL
====================================================*/

html {
  scroll-behavior: smooth;
}

.main-image {
  width: 100%;
  height: 620px;
  overflow: hidden;
  border-radius: 12px; /* Optional */
}

.main-image video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/*==========================
   Chairman Section
==========================*/

.chairman-area {
  position: relative;
  padding: 120px 0;
  background: #fbfaf7;
  overflow: hidden;
}

/*==========================
Container
==========================*/

/* .chairman-area .container {
  width: 1320px;
  max-width: 92%;
  margin: auto;
} */

/*==========================
Grid
==========================*/

.chairman-wrapper {
  display: grid;
  grid-template-columns: 520px 1fr;

  gap: 100px;

  align-items: center;

  position: relative;
}

/*==========================
Left
==========================*/

.chairman-left {
  position: relative;

  min-height: 720px;
}

/*==========================
Right
==========================*/

.chairman-right {
  position: relative;
}

/*==========================
Image
==========================*/

.chairman-photo {
  position: relative;

  width: 100%;
  height: 712px;
  z-index: 5;
}

.chairman-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 0;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
}

/*==========================
Green Block
==========================*/

.chairman-bg-box {
  position: absolute;

  left: -40px;

  top: -40px;

  width: 240px;

  height: 380px;

  background: #0d6b45;

  z-index: 1;
}

/*==========================
Gold Border
==========================*/

.chairman-border {
  position: absolute;

  right: -28px;

  bottom: -28px;

  width: 100%;

  height: 100%;

  border: 1px solid #c9ab74;

  z-index: 2;
}

/*==========================
Dot Pattern
==========================*/

.chairman-dots {
  position: absolute;

  left: 0;

  bottom: -55px;

  width: 110px;

  height: 70px;

  background-image: radial-gradient(#0d6b45 1.8px, transparent 1.8px);

  background-size: 14px 14px;
}

/*==========================
Background Shape
==========================*/

.chairman-area::before {
  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  right: -300px;

  top: -300px;

  border-radius: 50%;

  border: 1px solid rgba(15, 95, 70, 0.08);
}

.chairman-area::after {
  content: "";

  position: absolute;

  width: 700px;

  height: 700px;

  left: -380px;

  bottom: -420px;

  border-radius: 50%;

  border: 1px solid rgba(15, 95, 70, 0.08);
}

/*==========================
Subtitle
==========================*/

.chairman-subtitle {
  display: inline-block;

  font-family: "Inter", sans-serif;

  font-size: 15px;

  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: #0d6b45;

  margin-bottom: 18px;
}

/*==========================
Small Line
==========================*/

.chairman-small-line {
  display: block;

  width: 60px;

  height: 2px;

  background: #0d6b45;

  margin-bottom: 30px;
}

/*==========================
Heading
==========================*/

.chairman-title {
  font-family: "Cormorant Garamond", serif;

  font-size: 53px;

  line-height: 0.95;

  font-weight: 700;

  color: #1d1d1d;

  margin: 0;

  max-width: 780px;
}

.chairman-title span {
  display: block;

  color: #0d6b45;
}

/*==========================
Divider
==========================*/

.chairman-divider {
  display: flex;

  align-items: center;

  margin: 45px 0 55px;
}

.chairman-divider span {
  width: 8px;

  height: 8px;

  background: #0d6b45;

  transform: rotate(45deg);

  margin: 0 14px;
}

/*==========================
Paragraph
==========================*/

.chairman-text p {
  margin: 0;

  font-family: "Inter", sans-serif;

  font-size: 19px;

  line-height: 2;

  color: #555;

  font-weight: 400;
}

/*==========================
Spacing
==========================*/

.chairman-right {
  padding-top: 10px;
}

/*==============================
Timeline Items
==============================*/

.chairman-item {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 32px;

  margin-bottom: 42px;

  padding-left: 10px;
}

/*==============================
Vertical Line
==============================*/

.chairman-item::before {
  content: "";

  position: absolute;

  left: 53px;

  top: 20px;

  width: 1px;

  height: calc(100% + 45px);

  background: #d8c39a;
}

.chairman-item:last-child::before {
  display: none;
}

/*==============================
Golden Dot
==============================*/

.chairman-item::after {
  content: "";

  position: absolute;

  left: 72px;

  top: 26px;

  width: 7px;

  height: 7px;

  background: #c8a86a;

  border-radius: 50%;
}

/*==============================
Icon Circle
==============================*/

.chairman-icon {
  width: 80px;

  min-width: 80px;

  height: 80px;

  border-radius: 50%;

  background: #0d6b45;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-size: 30px;

  position: relative;

  z-index: 5;

  transition: 0.4s;

  box-shadow: 0 12px 30px rgba(13, 107, 69, 0.18);
}

/*==============================
Gold Icon
==============================*/

.chairman-icon.gold {
  background: #c6a061;
}

/*==============================
Hover
==============================*/

.chairman-item:hover .chairman-icon {
  transform: translateY(-8px);

  box-shadow: 0 20px 40px rgba(13, 107, 69, 0.25);
}

.chairman-item:hover .chairman-text {
  transform: translateX(8px);
}

.chairman-text {
  transition: 0.35s;
}

/*==============================
Paragraph Width
==============================*/

.chairman-text {
  flex: 1;

  padding-top: 6px;
}

/*==============================
Spacing
==============================*/

.chairman-item:last-child {
  margin-bottom: 0;
}

/*=========================================
 Signature Section
=========================================*/

.chairman-sign {
  margin-top: 70px;

  padding-top: 40px;

  border-top: 1px solid #e4dccd;

  display: flex;

  align-items: center;

  gap: 28px;
}

/*=========================================
 Quote Circle
=========================================*/

.quote-icon {
  width: 82px;

  height: 82px;

  min-width: 82px;

  border-radius: 50%;

  background: #0d6b45;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-size: 34px;

  box-shadow: 0 15px 40px rgba(13, 107, 69, 0.18);

  transition: 0.4s;
}

/* Hover */

.chairman-sign:hover .quote-icon {
  transform: rotate(-10deg) scale(1.08);
}

/*=========================================
 Name
=========================================*/

.chairman-name h4 {
  margin: 0;

  font-family: "Cormorant Garamond", serif;

  font-size: 38px;

  font-weight: 700;

  color: #1c1c1c;

  line-height: 1.1;
}

/*=========================================
 Position
=========================================*/

.chairman-name span {
  display: block;

  margin-top: 10px;

  font-size: 16px;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #0d6b45;

  font-weight: 600;

  font-family: "Inter", sans-serif;
}

/*=========================================
 Decorative Line
=========================================*/

.chairman-name::before {
  content: "";

  display: block;

  width: 70px;

  height: 2px;

  background: #c8a86a;

  margin-bottom: 18px;
}

/*=========================================
 Signature Hover
=========================================*/

.chairman-sign {
  transition: 0.35s;
}

.chairman-sign:hover {
  transform: translateY(-6px);
}

/*=========================================
 Responsive
=========================================*/

@media (max-width: 1200px) {
  .chairman-wrapper {
    grid-template-columns: 460px 1fr;

    gap: 70px;
  }

  .chairman-title {
    font-size: 64px;
  }
}

/*=========================================
 Tablet
=========================================*/

@media (max-width: 991px) {
  .chairman-area {
    padding: 90px 0;
  }

  .chairman-wrapper {
    grid-template-columns: 1fr;

    gap: 80px;
  }

  .chairman-left {
    max-width: 550px;

    margin: auto;

    min-height: auto;
  }

  .chairman-right {
    text-align: center;
  }

  .chairman-title {
    font-size: 52px;

    max-width: 100%;
  }

  .chairman-small-line {
    margin: 0 auto 30px;
  }

  .chairman-divider {
    justify-content: center;
  }

  .chairman-item {
    text-align: left;
  }

  .chairman-sign {
    justify-content: center;
  }
}

/*=========================================
 Mobile
=========================================*/

@media (max-width: 768px) {
  .chairman-area {
    padding: 70px 0;
  }

  .chairman-wrapper {
    gap: 60px;
  }

  .chairman-title {
    font-size: 42px;
  }

  .chairman-subtitle {
    font-size: 13px;

    letter-spacing: 2px;
  }

  .chairman-item {
    gap: 18px;
  }

  .chairman-icon {
    width: 65px;

    height: 65px;

    min-width: 65px;

    font-size: 22px;
  }

  .chairman-item::before {
    left: 58px;
  }

  .chairman-item::after {
    left: 55px;
  }

  .chairman-text p {
    font-size: 16px;

    line-height: 1.9;
  }

  .quote-icon {
    width: 65px;

    height: 65px;

    min-width: 65px;

    font-size: 26px;
  }

  .chairman-name h4 {
    font-size: 28px;
  }

  .chairman-name span {
    font-size: 14px;

    letter-spacing: 2px;
  }
}

/*=========================================
 Small Mobile
=========================================*/

@media (max-width: 576px) {
  .chairman-title {
    font-size: 34px;

    line-height: 1.15;
  }

  .chairman-item {
    flex-direction: column;

    text-align: center;

    padding-left: 0;
  }

  .chairman-item::before,
  .chairman-item::after {
    display: none;
  }

  .chairman-icon {
    margin: auto;
  }

  .chairman-text {
    padding-top: 0;
  }

  .chairman-sign {
    flex-direction: column;

    text-align: center;

    gap: 20px;
  }

  .chairman-name::before {
    margin: 0 auto 18px;
  }

  .chairman-bg-box {
    width: 160px;

    height: 250px;

    left: -15px;

    top: -15px;
  }

  .chairman-border {
    right: -15px;

    bottom: -15px;
  }
}

/*==================================
    GX SHOWCASE SECTION
==================================*/

.gx-showcase-section {
  padding: 57px 81px;
  overflow: hidden;
  background: #f8f8f8;
}

.gx-showcase-track {
  display: flex;
  align-items: center;
}

/*==================================
    CARD
==================================*/

.gx-showcase-card {
  position: relative;
  flex: 1;
  height: 700px;
  overflow: hidden;
  cursor: pointer;
  transition: 0.5s ease;
}

.gx-showcase-card:hover {
  flex: 2.25;
}

/*==================================
    IMAGE
==================================*/

.gx-image {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.gx-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gx-showcase-card:hover .gx-image img {
  transform: scale(1.15);
}

/*==================================
    OVERLAY
==================================*/

.gx-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.88),
    rgba(0, 0, 0, 0.35),
    rgba(0, 0, 0, 0.08)
  );

  transition: 0.5s;
}

.gx-showcase-card:hover .gx-overlay {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.92),
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.15)
  );
}

/*==================================
    CONTENT
==================================*/

/* .gx-content {
  position: absolute;

  left: 35px;
  right: 35px;
  bottom: 35px;

  color: #fff;

  z-index: 5;
} */
.gx-content {
  position: absolute;
  left: 35px;
  right: 35px;
  bottom: 35px;
  z-index: 5;

  color: #fff;

  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s;
}
.gx-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;

  margin-bottom: 18px;

  color: #fff;
}

.gx-subtitle i {
  width: 42px;
  height: 42px;

  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(10px);
}

.gx-content h3 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 15px;
  font-weight: 700;
}

.gx-content p {
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);

  margin-bottom: 25px;
}

/*==================================
    LIST
==================================*/

.gx-list {
  list-style: none;
  padding: 0;
  margin: 0 0 25px;
}

.gx-list li {
  margin-bottom: 12px;
  position: relative;
  padding-left: 24px;
}

.gx-list li::before {
  content: "✔";

  position: absolute;
  left: 0;
  color: #29d26b;
}

/*==================================
    BUTTON
==================================*/

.gx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 15px 28px;

  border-radius: 50px;

  background: #fff;
  color: #111;

  text-decoration: none;
  font-weight: 600;

  transition: 0.35s;
}

.gx-btn:hover {
  background: #ffc107;
  color: #111;
}

.gx-btn i {
  transition: 0.35s;
}

.gx-btn:hover i {
  transform: translateX(5px);
}

/*==================================
    HOVER ANIMATION
==================================*/

.gx-content p,
.gx-list,
.gx-btn {
  opacity: 0;
  transform: translateY(30px);

  transition: 0.45s ease;
}

.gx-showcase-card:hover .gx-content p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.gx-showcase-card:hover .gx-list {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.gx-showcase-card:hover .gx-btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
.gx-showcase-card:hover .gx-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gx-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.85),
    rgba(0, 0, 0, 0.35),
    transparent
  );

  opacity: 0;

  transition: 0.45s ease;
}
.gx-showcase-card:hover .gx-overlay {
  opacity: 1;
}

.gx-image {
  overflow: hidden;
}

.gx-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: scale(1);

  transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.gx-showcase-card:hover .gx-image img {
  transform: scale(1.12);
}
/*==================================
    RESPONSIVE
==================================*/

@media (max-width: 992px) {
  .gx-showcase-track {
    flex-direction: column;
  }

  .gx-showcase-card {
    width: 100%;
    height: 600px;
  }

  .gx-showcase-card:hover {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .gx-showcase-card {
    height: 480px;
  }

  .gx-content {
    left: 20px;
    right: 20px;
    bottom: 20px;
  }

  .gx-content h3 {
    font-size: 28px;
  }
}

/*==============================
 MODERN ENTERPRISE
==============================*/

.enterprise-section {
  padding: 120px 0 0;
  background: #faf8f4;
  overflow: hidden;
}

.enterprise-wrapper {
  width: 90%;
  max-width: 1450px;
  margin: auto;
  display: grid;
  grid-template-columns: 45% 55%;
  align-items: center;
  gap: 60px;
}

.enterprise-tag {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 4px;
  color: #b48a42;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 25px;
  position: relative;
}

.enterprise-title {
  font-family: "Cormorant Garamond", serif;
  font-size: 60px;
  line-height: 0.92;
  font-weight: 600;
  color: #13243d;
  margin-bottom: 35px;
}

.enterprise-title span {
  color: #b48a42;
}

.enterprise-divider {
  width: 170px;
  height: 2px;
  background: #b48a42;
  margin: 30px 0;
}

.enterprise-quote {
  font-family: "Cormorant Garamond", serif;
  font-size: 36px;
  line-height: 1.25;
  font-style: italic;
  color: #1d1d1d;
  margin-bottom: 35px;
}

.enterprise-description {
  font-size: 18px;
  line-height: 2;
  color: #555;
}

/*==========================
RIGHT SIDE
==========================*/

.enterprise-right {
  position: relative;
}

.hero-image {
  width: 100%;
  height: 580px;
  overflow: hidden;
  border-radius: 0 180px 0 0;
  clip-path: ellipse(100% 100% at 100% 0%);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* transition:.7s; */
}

/* .hero-image:hover img{
    transform:scale(1.08);
} */

.bottom-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 15px;
  gap: 15px;
}

.gallery-item {
  position: relative;
  height: 240px;
  overflow: hidden;
  clip-path: polygon(18% 0%, 100% 0%, 82% 100%, 0% 100%);
  cursor: pointer;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.6s;
}

.gallery-item:hover img {
  transform: scale(1.15);
}

.gallery-item span {
  position: absolute;
  left: 20px;
  bottom: 18px;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 15px;
  z-index: 5;
}

.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.05));
}

/*==============================
VALUES
==============================*/

.enterprise-values {
  width: 90%;
  max-width: 1450px;
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

.value-box {
  background: #fff;
  text-align: center;
  padding: 45px 25px;
  border: 1px solid #ececec;
  transition: 0.4s;
}

.value-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.value-icon {
  width: 85px;
  height: 85px;
  border: 2px solid #c79c52;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  color: #c79c52;
  font-size: 30px;
  margin-bottom: 25px;
}

.value-box h4 {
  font-size: 28px;
  color: #13243d;
  font-family: "Cormorant Garamond", serif;
  margin-bottom: 15px;
}

.value-box p {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}

/*==============================
Responsive
==============================*/

@media (max-width: 1200px) {
  .enterprise-wrapper {
    grid-template-columns: 1fr;
  }

  .enterprise-title {
    font-size: 70px;
  }

  .hero-image {
    height: 500px;
  }

  .enterprise-values {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .enterprise-section {
    padding: 80px 20px;
  }

  .enterprise-wrapper {
    width: 100%;
  }

  .enterprise-title {
    font-size: 52px;
  }

  .enterprise-quote {
    font-size: 30px;
  }

  .enterprise-description {
    font-size: 16px;
    line-height: 1.8;
  }

  .hero-image {
    height: 380px;
    border-radius: 30px;
    clip-path: none;
  }

  .bottom-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .gallery-item {
    height: 180px;
    clip-path: none;
    border-radius: 15px;
  }

  .enterprise-values {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .value-box {
    padding: 35px 20px;
  }
}

/*==========================
Hero
==========================*/

.career-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.career-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.career-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.45));
  z-index: -1;
}

.career-container {
  position: relative;
  z-index: 2;
  text-align: center;
  width: min(900px, 90%);
}

.career-subtitle {
  display: inline-flex;

  padding: 12px 24px;

  border-radius: 100px;

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(14px);

  color: #fff;

  font-size: 14px;

  letter-spacing: 2px;

  margin-bottom: 28px;

  border: 1px solid rgba(255, 255, 255, 0.12);
}

.career-container h1 {
  color: #fff;

  font-size: 68px;

  line-height: 1.1;

  font-weight: 800;

  margin-bottom: 22px;
}

.career-container p {
  max-width: 700px;

  margin: auto;

  color: #ddd;

  font-size: 19px;

  line-height: 1.8;
}

.career-btn {
  display: flex;
  margin-top: 45px;
  height: 39px;
  width: 250px;
  align-items: center;
  padding: 0 27px;
  border: none;
  border-radius: 60px;
  cursor: pointer;
  background: #0d8b5a;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  transition: 0.35s;
  box-shadow: 0 20px 45px rgba(13, 139, 90, 0.35);
}
.career-btn:hover {
  transform: translateY(-5px);

  background: #086846;

  box-shadow: 0 30px 55px rgba(13, 139, 90, 0.45);
}

/*==========================
Modal
==========================*/

.career-modal {
  position: fixed;

  inset: 0;

  background: rgba(10, 10, 10, 0.55);

  backdrop-filter: blur(8px);

  display: flex;

  justify-content: center;

  align-items: center;

  opacity: 0;

  visibility: hidden;

  transition: 0.35s;

  z-index: 9999;
}

.career-modal.active {
  opacity: 1;

  visibility: visible;
}

.career-modal-box {
  width: min(720px, 92%);

  max-height: 90vh;

  overflow-y: auto;

  background: #fff;

  border-radius: 28px;

  padding: 35px;

  transform: translateY(60px);

  transition: 0.4s;

  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.25);
}

.career-modal.active .career-modal-box {
  transform: translateY(0);
}

.career-modal-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 35px;
}

.career-modal-header h3 {
  font-size: 30px;

  font-weight: 800;
}

.career-close {
  width: 46px;

  height: 46px;

  border: none;

  border-radius: 50%;

  background: #f4f4f4;

  cursor: pointer;

  font-size: 28px;

  transition: 0.3s;
}

.career-close:hover {
  background: #0d8b5a;

  color: #fff;
}

.career-search-group {
  margin-bottom: 22px;
}

.career-search-group label {
  display: block;

  margin-bottom: 10px;

  font-weight: 700;

  color: #444;
}

.career-input,
.career-select {
  width: 100%;

  height: 58px;

  border: 1px solid #e4e4e4;

  border-radius: 14px;

  padding: 0 18px;

  font-size: 15px;

  transition: 0.3s;

  background: #fff;
}

.career-input:focus,
.career-select:focus {
  outline: none;

  border-color: #0d8b5a;

  box-shadow: 0 0 0 4px rgba(13, 139, 90, 0.12);
}

.career-search-btn {
  width: 100%;

  height: 60px;

  border: none;

  border-radius: 16px;

  margin-top: 12px;

  background: #0d8b5a;

  color: #fff;

  font-size: 17px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.3s;
}

.career-search-btn:hover {
  background: #086846;
}

.career-divider {
  width: 100%;

  height: 1px;

  background: #ececec;

  margin: 32px 0;
}

.career-heading {
  font-size: 20px;

  margin-bottom: 18px;

  font-weight: 800;
}

.career-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 12px;
}

.career-tags span {
  padding: 11px 18px;

  border-radius: 50px;

  background: #f2f2f2;

  cursor: pointer;

  transition: 0.3s;

  font-size: 14px;
}

.career-tags span:hover {
  background: #0d8b5a;

  color: #fff;
}

.career-opening-list {
  list-style: none;
}

.career-opening-list li {
  padding: 18px 0;

  border-bottom: 1px solid #efefef;

  transition: 0.3s;

  cursor: pointer;
}

.career-opening-list li:hover {
  color: #0d8b5a;

  padding-left: 10px;
}

/*==========================
Scrollbar
==========================*/

.career-modal-box::-webkit-scrollbar {
  width: 7px;
}

.career-modal-box::-webkit-scrollbar-thumb {
  background: #0d8b5a;

  border-radius: 30px;
}

/*==========================
Responsive
==========================*/

@media (max-width: 991px) {
  .career-container h1 {
    font-size: 52px;
  }
}

@media (max-width: 768px) {
  .career-container h1 {
    font-size: 40px;
  }

  .career-container p {
    font-size: 16px;
  }

  .career-modal-box {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .career-container h1 {
    font-size: 32px;
  }

  .career-subtitle {
    font-size: 12px;

    letter-spacing: 1px;
  }

  .career-btn {
    width: 100%;
  }

  .career-modal-box {
    border-radius: 20px;

    padding: 20px;
  }
}

/*==========================
Featured Jobs
==========================*/

.career-job-section {
  padding: 120px 0;

  background: #f7f8f7;
}

.career-job-container {
  width: min(1320px, 92%);

  margin: auto;
}

.career-job-heading {
  text-align: center;

  margin-bottom: 60px;
}

.career-job-heading span {
  color: #0d8b5a;

  font-weight: 700;

  letter-spacing: 1px;
}

.career-job-heading h2 {
  margin: 15px 0;

  font-size: 48px;
}

.career-job-heading p {
  color: #777;

  max-width: 700px;

  margin: auto;
}

.career-job-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 30px;
}

.career-job-card {
  background: #fff;

  border-radius: 22px;

  padding: 30px;

  transition: 0.35s;

  border: 1px solid #ececec;
}

.career-job-card:hover {
  transform: translateY(-8px);

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}

.job-type {
  display: inline-block;

  padding: 8px 16px;

  border-radius: 30px;

  background: #edf8f3;

  color: #0d8b5a;

  font-size: 13px;

  font-weight: 700;

  margin-bottom: 18px;
}

.career-job-card h3 {
  font-size: 24px;

  margin-bottom: 18px;
}

.job-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 15px;

  margin-bottom: 18px;

  color: #666;

  font-size: 15px;
}

.job-desc {
  color: #666;

  line-height: 1.7;

  margin-bottom: 28px;
}

.job-btn {
  width: 100%;

  height: 52px;

  border: none;

  border-radius: 14px;

  background: #0d8b5a;

  color: #fff;

  cursor: pointer;

  transition: 0.3s;
}

.job-btn:hover {
  background: #086846;
}

@media (max-width: 992px) {
  .career-job-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .career-job-grid {
    grid-template-columns: 1fr;
  }

  .career-job-heading h2 {
    font-size: 36px;
  }
}

/*=========================
Contact Hero
=========================*/

.contact-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
}

.contact-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.48));
}

.contact-container {
  position: relative;
  z-index: 2;

  width: min(900px, 90%);

  text-align: center;
}

.contact-subtitle {
  display: inline-block;

  padding: 12px 22px;

  border-radius: 50px;

  background: rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(10px);

  color: #fff;

  letter-spacing: 2px;

  font-size: 14px;

  margin-bottom: 30px;
}

.contact-container h1 {
  color: #fff;

  font-size: 72px;

  line-height: 1.1;

  margin-bottom: 25px;

  font-weight: 800;
}

.contact-container p {
  color: #ddd;

  font-size: 18px;

  line-height: 1.8;

  max-width: 720px;

  margin: auto;
}

.contact-btn {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  margin-top: 45px;

  width: 220px;
  height: 60px;

  border-radius: 60px;

  background: #0d8b5a;

  color: #fff;

  text-decoration: none;

  font-weight: 700;

  transition: 0.35s;
}

.contact-btn:hover {
  background: #086846;

  transform: translateY(-5px);
}

@media (max-width: 768px) {
  .contact-container h1 {
    font-size: 48px;
  }

  .contact-container p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .contact-container h1 {
    font-size: 34px;
  }

  .contact-btn {
    width: 100%;
  }
}

/*=========================
Contact Section
=========================*/

.contact-section {
  padding: 120px 0;

  background: #f8f9f7;
}

.contact-wrapper {
  width: min(1320px, 92%);

  margin: auto;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 70px;

  align-items: center;
}

.section-tag {
  display: inline-block;

  color: #0d8b5a;

  font-weight: 700;

  letter-spacing: 2px;

  margin-bottom: 18px;
}

.contact-info h2 {
  font-size: 52px;

  margin-bottom: 20px;

  line-height: 1.15;
}

.contact-info > p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 40px;
}

.contact-card {
  display: flex;

  gap: 20px;

  align-items: flex-start;

  margin-bottom: 30px;
}

.contact-icon {
  width: 65px;

  height: 65px;

  background: #0d8b5a;

  border-radius: 18px;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #fff;

  font-size: 22px;
}

.contact-card h4 {
  margin-bottom: 8px;

  font-size: 20px;
}

.contact-card p {
  color: #666;

  line-height: 1.7;
}

/*=========================
Form
=========================*/

.contact-form-box {
  background: #fff;

  border-radius: 30px;

  padding: 45px;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.contact-form-box h3 {
  margin-bottom: 30px;

  font-size: 34px;
}

.form-grid {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
  width: 100%;

  border: 1px solid #e5e5e5;

  border-radius: 15px;

  padding: 18px 20px;

  font-size: 15px;

  transition: 0.3s;

  resize: none;

  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;

  border-color: #0d8b5a;

  box-shadow: 0 0 0 4px rgba(13, 139, 90, 0.12);
}

.contact-submit {
  width: 100%;

  height: 58px;

  border: none;

  border-radius: 16px;

  background: #0d8b5a;

  color: #fff;

  font-size: 16px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.35s;
}

.contact-submit:hover {
  background: #086846;

  transform: translateY(-3px);
}

/*=========================
Responsive
=========================*/

@media (max-width: 991px) {
  .contact-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .contact-info h2 {
    font-size: 38px;
  }

  .contact-form-box {
    padding: 30px;
  }
}

/*====================================
SECTION HEADING
====================================*/

.section-heading {
  width: min(700px, 90%);
  margin: auto;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading span {
  color: #0d8b5a;
  font-weight: 700;
  letter-spacing: 2px;
}

.section-heading h2 {
  font-size: 50px;
  margin: 15px 0;
}

.section-heading p {
  color: #666;
  line-height: 1.8;
}

/*====================================
OFFICES
====================================*/

.office-section {
  padding: 120px 0;
  background: #fff;
}

.office-grid {
  width: min(1320px, 92%);
  margin: auto;

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.office-card {
  background: #fff;

  border-radius: 25px;

  padding: 45px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);

  transition: 0.4s;
}

.office-card:hover {
  transform: translateY(-12px);

  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.12);
}

.office-icon {
  width: 75px;
  height: 75px;

  background: #0d8b5a;

  color: #fff;

  border-radius: 18px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 28px;

  margin-bottom: 30px;
}

.office-card h3 {
  margin-bottom: 15px;
}

.office-card p {
  color: #666;

  line-height: 1.8;

  margin-bottom: 30px;
}

.office-card a {
  color: #0d8b5a;

  text-decoration: none;

  font-weight: 700;
}

.office-card a i {
  margin-left: 8px;
}

/*====================================
BUSINESS
====================================*/

.business-section {
  padding: 120px 0;

  background: #f7f8f7;
}

.business-grid {
  width: min(1320px, 92%);
  margin: auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 25px;
}

.business-card {
  background: #fff;

  border-radius: 25px;

  text-align: center;

  padding: 45px 25px;

  transition: 0.35s;

  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
}

.business-card:hover {
  background: #0d8b5a;

  color: #fff;

  transform: translateY(-10px);
}

.business-card i {
  font-size: 38px;

  margin-bottom: 25px;
}

.business-card h3 {
  margin-bottom: 15px;
}

.business-card p {
  opacity: 0.85;
}

/*====================================
Responsive
====================================*/

@media (max-width: 991px) {
  .office-grid {
    grid-template-columns: 1fr;
  }

  .business-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .business-grid {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    font-size: 36px;
  }

  .office-card,
  .business-card {
    padding: 35px 25px;
  }
}

/*====================================
MAP
====================================*/

.contact-map {
  padding: 120px 0;

  background: #fff;
}

.map-wrapper {
  width: min(1320px, 92%);

  margin: auto;

  border-radius: 30px;

  overflow: hidden;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.map-wrapper iframe {
  width: 100%;

  height: 550px;

  border: none;
}

/*====================================
FAQ
====================================*/

.faq-section {
  padding: 120px 0;

  background: #f8f9f7;
}

.faq-wrapper {
  width: min(900px, 92%);

  margin: auto;
}

.faq-item {
  background: #fff;

  border-radius: 18px;

  margin-bottom: 20px;

  overflow: hidden;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
}

.faq-question {
  display: flex;

  justify-content: space-between;

  align-items: center;

  cursor: pointer;

  padding: 25px 30px;
}

.faq-question h3 {
  font-size: 20px;
}

.faq-question i {
  color: #0d8b5a;

  transition: 0.3s;
}

.faq-answer {
  max-height: 0;

  overflow: hidden;

  transition: 0.4s;
}

.faq-answer p {
  padding: 0 30px 25px;

  color: #666;

  line-height: 1.8;
}

.faq-item.active .faq-answer {
  max-height: 250px;
}

.faq-item.active i {
  transform: rotate(45deg);
}

@media (max-width: 768px) {
  .map-wrapper iframe {
    height: 420px;
  }

  .faq-question {
    padding: 22px;
  }

  .faq-question h3 {
    font-size: 18px;
  }
}

.life-section {
  width: 100%;
  height: 80vh;
  position: relative;
  overflow: hidden;
  cursor: pointer;
      margin-bottom: 30px;
}

.life-video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transition: 1s;
  transform: scale(1.1);
}

.life-overlay {
  position: absolute;
  inset: 0;

  overflow: hidden;

  transition: 0.8s;
}

.life-overlay img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: blur(12px);
  transform: scale(1.08);

  transition: 1s;
}

.overlay-dark {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: brightness(0.7);

  transition: 0.8s;
}

.life-content {
  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
  text-align: center;

  color: #fff;

  transition: 0.7s;
}

.life-content h5 {
  font-size: 34px;
  font-family: serif;
  font-weight: 300;
  letter-spacing: 1px;
}

.life-content h1 {
  font-size: 90px;
  font-weight: 500;
  letter-spacing: 5px;
  color: #d9b46d;
}

.play-btn {
  width: 95px;
  height: 95px;

  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 40px auto 0;

  font-size: 34px;

  transition: 0.5s;
}

.play-btn:hover {
  transform: scale(1.15);
}

.life-section:hover .life-overlay {
  opacity: 0;
  visibility: hidden;
}

.life-section:hover .life-video {
  opacity: 1;
  transform: scale(1);
}

.trade-quote {
  font-size: 28px;
  line-height: 1.5;
  font-weight: 500;
  color: #222;
  font-style: italic;
  border-left: 5px solid #d89c28;
  padding-left: 22px;
  margin-bottom: 30px;
}

.trade-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 40px;
  margin-top: 35px;
}

.trade-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ececec;
}

.trade-feature i {
  color: #fff;
  font-size: 17px;
}

.trade-feature span {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}

@media (max-width: 768px) {
  .trade-feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .trade-feature-grid {
    grid-template-columns: 1fr;
  }
}

/*==============================
GROWTH SECTION
==============================*/

.commodity-growth {
  padding: 100px 0;
  background: #f7f8fa;
}

.growth-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.growth-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 18px;
  text-align: center;
  transition: 0.35s;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.growth-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.growth-icon {
  width: 80px;
  height: 80px;
  margin: auto;
  border-radius: 50%;
  background: #0f5b3d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  margin-bottom: 25px;
}

.growth-card h3 {
  margin-bottom: 15px;
}

.growth-card p {
  line-height: 1.8;
  color: #666;
}

/*==============================
COMMODITY SECTION
==============================*/

.commodity-section {
  padding: 100px 0;
}

.commodity-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.commodity-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
}

.commodity-card:hover {
  transform: translateY(-10px);
}

.commodity-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.commodity-content {
  padding: 28px;
}

.commodity-content h3 {
  margin-bottom: 15px;
}

.commodity-content p {
  line-height: 1.7;
  color: #666;
}

@media (max-width: 992px) {
  .growth-grid,
  .commodity-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .growth-grid,
  .commodity-grid {
    grid-template-columns: 1fr;
  }
}

.trade-cta {
  background:
    linear-gradient(rgba(0, 0, 0, 0.72), rgba(0, 0, 0, 0.72)),
    url("../images/domestic-trade/cta-bg.jpg");

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.loader-wrapper {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.loader {
  position: relative;
  width: 170px;
  height: 170px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader img {
  width: 80px;
  z-index: 5;
  animation: pulse 2s ease-in-out infinite;
}

.ring {
  position: absolute;
  border-radius: 50%;
}

.ring1 {
  width: 140px;
  height: 140px;
  border: 3px solid #0b5d41;
  border-top-color: transparent;
  animation: rotate 2s linear infinite;
}

.ring2 {
  width: 110px;
  height: 110px;
  border: 2px dashed #b68d40;
  animation: rotateReverse 3s linear infinite;
}

.loader-wrapper h4 {
  margin-top: 35px;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #444;
  font-weight: 500;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

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

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

/*==============================
      SECTION
===============================*/

.nova-block {
  position: relative;
  padding: 100px 0;
  background: url("../images/banner/slide6.jpeg") center/cover no-repeat;
  overflow: hidden;
}

.nova-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.nova-wrap {
  position: relative;
  z-index: 2;
}

/*==============================
      OWL
===============================*/

.nova-slider .owl-stage {
  display: flex;
}

/* .nova-slider .owl-item{
    display:flex;
} */
.nova-slider .owl-item {
  padding: 15px;
}

.nova-box {
  width: 100%;
}
.nova-slider .owl-dots {
  margin-top: 45px;
  text-align: center;
}

.nova-slider .owl-dot span {
  width: 12px;
  height: 12px;
  background: #fff;
  opacity: 0.3;
  transition: 0.3s;
}

.nova-slider .owl-dot.active span {
  width: 35px;
  border-radius: 50px;
  background: #18d3df;
  opacity: 1;
}

/*==============================
      CARD
===============================*/

.nova-box {
  position: relative;
  height: 442px;
  border-radius: 28px;
  overflow: hidden;
  transition: 0.45s;
  cursor: pointer;
}

.nova-box:hover {
  transform: translateY(-12px);
}

.nova-media {
  position: absolute;
  inset: 0;
}

.nova-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.7s;
}

.nova-box:hover .nova-media img {
  transform: scale(1.12);
}

/*==============================
      OVERLAY
===============================*/

.nova-layer {
  position: absolute;
  inset: 0;
  z-index: 2;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82),
    rgba(0, 0, 0, 0.45),
    rgba(0, 0, 0, 0.08)
  );

  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.5);
}

/*==============================
      ICON
===============================*/

.nova-badge {
  position: absolute;
  top: 35px;
  left: 35px;

  width: 82px;
  height: 82px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  backdrop-filter: blur(12px);

  font-size: 32px;

  z-index: 5;
}

.nova-badge.teal {
  border: 2px solid #18d3df;
  color: #18d3df;
}

.nova-badge.sky {
  border: 2px solid #2494ff;
  color: #2494ff;
}

/*==============================
      CONTENT
===============================*/

.nova-info {
  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;

  padding: 40px;

  color: #fff;

  z-index: 5;
}

.nova-info h3 {
  font-size: 27px;

  font-weight: 700;

  margin-bottom: 18px;
}

.nova-bar {
  width: 70px;

  height: 4px;

  border-radius: 20px;

  margin-bottom: 25px;
}

.teal-fill {
  background: #18d3df;
}

.sky-fill {
  background: #2494ff;
}

.nova-info p {
  color: #e5e5e5;

  line-height: 1.6;

  font-size: 18px;

  margin-bottom: 30px;
}

/*==============================
      LIST
===============================*/

.nova-items {
  list-style: none;

  padding: 0;

  margin: 0 0 35px;
}

.nova-items li {
  margin-bottom: 18px;

  color: #fff;

  font-size: 16px;
}

.nova-items i {
  color: #18d3df;

  margin-right: 10px;
}

.sky-items i {
  color: #2494ff;
}

/*==============================
      BUTTON
===============================*/

.nova-link {
  display: inline-flex;

  align-items: center;

  gap: 12px;

  padding: 16px 34px;

  border-radius: 60px;

  text-decoration: none;

  color: #fff;

  font-weight: 600;

  transition: 0.35s;
}

.teal-btn {
  background: #18d3df;
}

.sky-btn {
  background: #2494ff;
}

.nova-link:hover {
  color: #fff;

  transform: translateY(-4px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/*==============================
      RESPONSIVE
===============================*/

@media (max-width: 991px) {
  .nova-box {
    height: 600px;
  }

  .nova-info {
    padding: 30px;
  }

  .nova-info h3 {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .nova-box {
    height: 560px;
  }

  .nova-info h3 {
    font-size: 24px;
  }

  .nova-info p {
    font-size: 15px;
  }
}

.nova-subtitle {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #18d3df;
  margin-bottom: 15px;
}

.nova-media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nova-media img {
  display: block;
}
.text-white {
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 15px;
  line-height: 1;
}
.text-light {
  color: #cfcfcf;
  font-size: 20px;
  max-width: 850px;
  line-height: 1;
  margin-bottom: 25px;
}

.mining-container {
  max-width: 1320px;
  margin: auto;
  padding: 0 15px;
}

.mining-top {
  display: grid;

  grid-template-columns: 380px 1fr;

  gap: 40px;

  align-items: center;
}

.mining-left {
  display: flex;

  flex-direction: column;
}

.mining-right {
  width: 100%;
}

.container {
  width: 92%;
  max-width: 1450px;
  margin: auto;
}

.mining-section {
  padding: 70px 0;
  overflow: hidden;
}

.mining-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 35px;
  align-items: start;
}

/*=========================
LEFT
=========================*/

.section-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #245638;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.dot {
  width: 9px;
  height: 9px;
  background: #245638;
  border-radius: 50%;
}

.left-content h1 {
  font-size: 72px;
  font-weight: 800;
  color: #202020;
  line-height: 1;
}

.heading-line {
  width: 70px;
  height: 4px;
  background: #245638;
  margin: 22px 0;
  border-radius: 50px;
}

.intro-text {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

.description {
  font-size: 15px;
  color: #666;
  line-height: 1.9;
}

/*=========================
BADGE
=========================*/

.info-badge {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 35px;
  background: #fff;
  padding: 15px 22px;
  border-radius: 50px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.badge-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #eef6f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.badge-icon img {
  width: 25px;
}

.info-badge h5 {
  font-size: 17px;
  margin-bottom: 5px;
}

.info-badge span {
  font-size: 13px;
  color: #777;
}

/*=========================
HERO
=========================*/

.hero-video {
  position: relative;
}

.video-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.video-wrapper img {
  width: 100%;
  height: 520px;
  object-fit: cover;
}

/*=========================
PLAY BUTTON
=========================*/

.play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #245638;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.3s;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.08);
}

/*=========================
VIDEO CONTROL
=========================*/

.video-controls {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.progress {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  overflow: hidden;
}

.progress-fill {
  width: 40%;
  height: 100%;
  background: #6dd47e;
}

.controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  margin-top: 12px;
  font-size: 14px;
}

.left-controls,
.right-controls {
  display: flex;
  gap: 16px;
  align-items: center;
}

.bottom-wrapper {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 35px;
  margin-top: 35px;
}

@media (max-width: 1200px) {
  .mining-grid {
    grid-template-columns: 1fr;
  }

  .bottom-wrapper {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .container {
    width: 94%;
  }

  .left-content h1 {
    font-size: 48px;
  }

  .video-wrapper img {
    height: 320px;
  }

  .play-btn {
    width: 70px;
    height: 70px;
  }
}

/*=====================================
FEATURE GRID
======================================*/

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 35px;
}

.feature-card {
  background: #fff;
  border-radius: 22px;
  padding: 35px 28px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 0;
  background: #245638;
  transition: 0.35s;
}

.feature-card:hover::before {
  height: 100%;
}

.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}

.feature-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eef6ef;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 22px;
}

.feature-icon img {
  width: 34px;
}

.feature-card h3 {
  font-size: 22px;
  color: #1f1f1f;
  margin-bottom: 16px;
  line-height: 1.4;
  font-weight: 700;
}

.feature-card p {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}

/*=====================================
STAT GRID
======================================*/

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.stat-box {
  background: #fff;
  border-radius: 20px;
  padding: 25px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: 0.35s;
}

.stat-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

.stat-icon {
  width: 62px;
  height: 62px;
  background: #245638;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.stat-icon img {
  width: 30px;
  filter: brightness(0) invert(1);
}

.stat-box h2 {
  font-size: 34px;
  color: #245638;
  font-weight: 800;
  margin-bottom: 6px;
}

.stat-box h5 {
  font-size: 18px;
  color: #222;
  margin-bottom: 8px;
}

.stat-box p {
  font-size: 14px;
  color: #777;
  line-height: 1.7;
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width: 1200px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .feature-card {
    padding: 28px 22px;
  }

  .feature-card h3 {
    font-size: 20px;
  }

  .stat-box {
    padding: 20px;
  }

  .stat-box h2 {
    font-size: 28px;
  }
}

/*=====================================
RIGHT SIDE
======================================*/

.right-bottom {
  display: flex;
  flex-direction: column;
  gap: 35px;
}

/*=====================================
GALLERY
======================================*/

.gallery {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gallery-top {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.gallery-top img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  transition: 0.5s;
}

.gallery-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.gallery-row img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: 0.5s;
}

.gallery img:hover {
  transform: scale(1.05);
}

/*=====================================
RESOURCE CONTENT
======================================*/

.resource-content {
  background: #fff;
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.small-title {
  display: inline-block;
  color: #245638;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 15px;
}

.resource-content h2 {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.2;
  color: #222;
  margin-bottom: 18px;
}

.resource-content > p {
  color: #666;
  line-height: 1.9;
  margin-bottom: 30px;
}

/*=====================================
RESOURCE ITEM
======================================*/

.resource-item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid #ececec;
}

.resource-item:first-of-type {
  border-top: none;
}

.resource-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: #eef6ef;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.resource-icon img {
  width: 28px;
}

.resource-item h4 {
  font-size: 20px;
  color: #222;
  margin-bottom: 8px;
  font-weight: 700;
}

.resource-item p {
  font-size: 15px;
  color: #666;
  line-height: 1.8;
}

/*=====================================
HOVER EFFECT
======================================*/

.resource-item {
  transition: 0.3s;
}

.resource-item:hover {
  transform: translateX(8px);
}

.resource-item:hover .resource-icon {
  background: #245638;
}

.resource-item:hover .resource-icon img {
  filter: brightness(0) invert(1);
}

/*=====================================
RESPONSIVE
======================================*/

@media (max-width: 1200px) {
  .gallery-top img {
    height: 220px;
  }

  .gallery-row img {
    height: 170px;
  }

  .resource-content {
    padding: 35px;
  }
}

@media (max-width: 768px) {
  .gallery-row {
    grid-template-columns: 1fr;
  }

  .gallery-top img,
  .gallery-row img {
    height: 240px;
  }

  .resource-content {
    padding: 28px 22px;
  }

  .resource-content h2 {
    font-size: 30px;
  }

  .resource-item {
    gap: 15px;
  }

  .resource-icon {
    width: 50px;
    height: 50px;
  }

  .resource-item h4 {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .resource-content h2 {
    font-size: 26px;
  }

  .resource-content > p {
    font-size: 15px;
  }

  .gallery-top img,
  .gallery-row img {
    height: 200px;
  }
}
.feature-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: #eef6ef;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}

.feature-icon i {
  font-size: 30px;
  color: #fff;
}

.irrigation-overview {
  padding: 100px 0;
  background: #f7faf9;
}

.overview-grid {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 50px;
  align-items: center;
}

.overview-left h2 {
  font-size: 60px;
  color: #0d1b40;
  margin: 15px 0;
}

.overview-left p {
  color: #6b7280;
  line-height: 1.8;
}

.badge {
  margin-top: 30px;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;

  background: #fff;

  border-radius: 60px;

  box-shadow: 0 10px 35px rgba(0, 0, 0, 0.08);

  color: #0b6d4f;

  font-weight: 600;
}

.overview-video {
  border-radius: 25px;

  overflow: hidden;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.overview-video video {
  width: 100%;

  display: block;
}

.feature-grid {
  margin-top: 40px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 20px;
}

.feature-card {
  background: #fff;

  padding: 30px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

  transition: 0.35s;
}

.feature-card:hover {
  transform: translateY(-8px);
}

.feature-card i {
  width: 65px;

  height: 65px;

  background: #eef8f3;

  border-radius: 50%;

  display: flex;

  justify-content: center;

  align-items: center;

  color: #0b6d4f;

  font-size: 24px;

  margin-bottom: 20px;
}

.progress-card {
  background: #fff;

  padding: 35px;

  border-radius: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.progress-list {
  margin-top: 20px;

  display: flex;

  flex-direction: column;

  gap: 18px;
}

.progress-list div {
  display: flex;

  align-items: center;

  gap: 15px;

  font-weight: 600;
}

.gallery-grid {
  margin-top: 35px;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 18px;
}

.gallery-grid img {
  width: 100%;

  height: 220px;

  object-fit: cover;

  border-radius: 18px;
}

@media (max-width: 991px) {
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .overview-left h2 {
    font-size: 42px;
  }
}

.career-about {
  padding: 110px 0;
  background: #fff;
}

.career-about .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

.section-tag {
  display: inline-block;
  color: #118b50;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.career-about h2 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 25px;
}

.career-about h2 span {
  color: #118b50;
}

.career-about p {
  color: #666;
  line-height: 1.9;
  margin-bottom: 20px;
}

.career-about-right img {
  width: 100%;
  border-radius: 24px;
  object-fit: cover;
}

.career-values {
  padding: 110px 0;
  background: #fafafa;
}

.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title span {
  color: #118b50;
  font-weight: 700;
  letter-spacing: 2px;
}

.section-title h2 {
  font-size: 32px;
  margin-top: 15px;
}

.section-title strong {
  color: #118b50;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 25px;
}

.value-card {
  background: #fff;
  border-radius: 20px;
  padding: 40px 28px;
  border: 1px solid #e8e8e8;
  transition: 0.4s;
}

.value-card i {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f3f7f3;
  color: #118b50;
  font-size: 28px;
  margin-bottom: 30px;
}

.value-card h3 {
  margin-bottom: 15px;
  font-size: 18px;
}

.value-card p {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
}

.value-card:hover,
.value-card.active {
  transform: translateY(-8px);
  border-color: #118b50;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.work-culture {
  padding: 110px 0;
  background: #fff;
}

.work-culture .container {
  display: grid;
  grid-template-columns: 430px 1fr;
  gap: 70px;
  align-items: center;
}

.culture-item {
  display: flex;
  gap: 20px;
  margin-top: 35px;
}

.culture-item i {
  width: 60px;
  height: 60px;
  background: #eef8f1;
  color: #118b50;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  font-size: 22px;
}

.culture-item h4 {
  margin-bottom: 8px;
}

.culture-item p {
  color: #666;
  line-height: 1.7;
}

.culture-right img {
  width: 100%;
  border-radius: 24px;
  height: 433px;
  object-fit: cover;
}

@media (max-width: 991px) {
  .career-about .container,
  .work-culture .container {
    grid-template-columns: 1fr;
  }

  .value-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .career-about h2,
  .section-title h2 {
    font-size: 36px;
  }
}

@media (max-width: 600px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

/*==========================
GV Mining Layout
===========================*/

.gv-mining-section {
  display: grid;
  grid-template-columns: 727px 1fr;
  gap: 80px;
  align-items: start;
  padding: 100px 0;
}
.gv-container {
  width: 92%;
  max-width: 1450px;
  margin: auto;
}

/*==========================
LEFT
===========================*/

.gv-mining-left {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.gv-mining-card {
  display: flex;
  gap: 22px;
  align-items: flex-start;

  padding: 32px;

  background: #ffffff;

  border: 1px solid #ececec;

  border-radius: 24px;

  transition: 0.35s ease;
}

.gv-mining-card:hover {
  transform: translateY(-8px);

  border-color: #c69a52;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}

.gv-mining-card-icon {
  width: 72px;
  height: 72px;

  min-width: 72px;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 18px;

  background: #f7f7f7;
}

.gv-mining-card-icon i {
  font-size: 28px;

  color: #086f3e;
}

.gv-mining-card-title {
  font-size: 28px;

  line-height: 1.25;

  font-weight: 600;

  margin-bottom: 15px;

  color: #1b1b1b;
}

.gv-mining-card-text {
  font-size: 16px;

  line-height: 1.9;

  color: #666;
}

/*==========================
RIGHT
===========================*/

.gv-mining-gallery {
  display: flex;

  flex-direction: column;

  gap: 22px;
}

.gv-mining-gallery-main {
  overflow: hidden;

  border-radius: 26px;
}

.gv-mining-gallery-main img {
  width: 100%;

  height: 310px;

  object-fit: cover;

  display: block;

  transition: 0.6s;
}

.gv-mining-gallery-main:hover img {
  transform: scale(1.05);
}

.gv-mining-gallery-bottom {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 22px;
}

.gv-mining-gallery-item {
  overflow: hidden;

  border-radius: 20px;
}

.gv-mining-gallery-item img {
  width: 100%;

  height: 220px;

  object-fit: cover;

  display: block;

  transition: 0.6s;
}

.gv-mining-gallery-item:hover img {
  transform: scale(1.08);
}

/*========================================
Bottom Section
========================================*/

.gv-mining-bottom {
  grid-column: 1/-1;

  margin-top: 90px;

  padding-top: 70px;

  border-top: 1px solid #ececec;
}

/* Heading */

.gv-mining-heading-wrap {
  max-width: 760px;

  margin: 0 auto 70px;

  text-align: center;
}

.gv-mining-subtitle {
  display: inline-block;

  font-size: 13px;

  letter-spacing: 4px;

  text-transform: uppercase;

  color: #09703f;

  font-weight: 600;

  margin-bottom: 18px;
}

.gv-mining-heading {
  font-size: 58px;

  line-height: 1.15;

  color: #171717;

  font-weight: 700;

  margin-bottom: 24px;
}

.gv-mining-description {
  font-size: 18px;

  line-height: 1.9;

  color: #666;
}

/*========================
Feature Grid
========================*/

.gv-mining-feature-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 35px;
}

.gv-mining-feature-box {
  padding: 40px;

  border: 1px solid #ececec;

  border-radius: 24px;

  transition: 0.35s;

  background: #fff;
}

.gv-mining-feature-box:hover {
  transform: translateY(-10px);

  border-color: #c69a52;

  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}

.gv-mining-feature-icon {
  width: 72px;

  height: 72px;

  border-radius: 18px;

  background: #fafafa;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 28px;
}

.gv-mining-feature-icon img {
  width: 34px;
}

.gv-mining-feature-title {
  font-size: 26px;

  line-height: 1.3;

  margin-bottom: 18px;

  color: #171717;
}

.gv-mining-feature-text {
  font-size: 16px;

  line-height: 1.9;

  color: #666;
}


.gv-mining-feature-icon{
    width:72px;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:18px;
    background:#f8f8f8;
    transition:.35s ease;
}

.gv-mining-feature-icon i{
    font-size:30px;
    color:#09703f;
    transition:.35s ease;
}

.gv-mining-feature-box:hover .gv-mining-feature-icon{
    background:#086f3e;
}

.gv-mining-feature-box:hover .gv-mining-feature-icon i{
    color:#fff;
}

/* =========================
           MAIN SECTION
        ========================== */

 /* =========================================================
   OMC SECTION
========================================================= */

.omc-section {
    width: 100%;
    min-height: 818px;

    position: relative;
    overflow: hidden;

    background-image: url("../images/mining-bg.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    margin-top:25px;
}


/* VERY LIGHT WHITE OVERLAY
   Keeps text readable but preserves mining image */
.omc-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.94) 0%,
        rgba(255,255,255,0.84) 38%,
        rgba(255,255,255,0.28) 68%,
        rgba(255,255,255,0.04) 100%
    );

    z-index: 1;
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.omc-container {

    width: 1260px;
    max-width: calc(100% - 60px);

    margin: 0 auto;

    position: relative;
    z-index: 5;

    display: grid;

    grid-template-columns: 680px 537px;

    column-gap: 43px;

    padding-top: 80px;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.omc-content {
    width: 680px;
}


.omc-text {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 19px;

    line-height: 1.82;

    font-weight: 400;

    color: #18202a;

    text-align: left;
}


/* =========================================================
   RIGHT CARD AREA
========================================================= */

.omc-cards {

    width: 537px;

    display: grid;

    grid-template-columns: 258px 279px;

    grid-template-rows: 189px 189px 189px;

    column-gap: 0;

    row-gap: 54px;

    align-items: start;
}


/* =========================================================
   CARD
========================================================= */

.omc-card {

    height: 189px;

    box-sizing: border-box;

    padding: 20px 21px;

    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    box-shadow: 0 12px 35px rgba(0,0,0,0.06);

    border-radius: 0;

}


/* WHITE CARD */

.white-card {
    background: rgba(255,255,255,0.94);

    color: #222;
}


/* GREEN CARD */

.green-card {

    background: #187b4e;

    color: #fff;

}


/* =========================================================
   CARD HEADING
========================================================= */

.omc-card-heading {

    display: flex;

    align-items: center;

    gap: 14px;

    min-height: 48px;

    margin-bottom: 13px;
}


/* ICON */

.omc-icon {

    width: 38px;
    height: 38px;

    flex: 0 0 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    font-size: 31px;

    line-height: 1;

    color: #c18d55;
}


/* GREEN CARD ICON */

.green-card .omc-icon {

    color: #fff;

}


/* =========================================================
   CARD TITLE
========================================================= */

.omc-icon-title {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 22px;

    line-height: 1;

    font-weight: 400;

    color: #c18d55;

    white-space: nowrap;
}


.green-card .omc-icon-title {

    color: #fff;

}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.omc-card-text {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 15px;

    line-height: 1.48;

    font-weight: 400;

    color: #222;
}


.green-card .omc-card-text {

    color: #fff;

}


/* =========================================================
   CARD POSITIONING
========================================================= */

/* Trust */
.omc-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

/* Integration */
.omc-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

/* Growth */
.omc-card:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

/* Responsibility */
.omc-card:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}


/* =========================================================
   VISION
========================================================= */

.omc-card.vision-card {

    grid-column: 1 / 3;

    grid-row: 3;

    width: 537px;

    height: 189px;

    padding: 20px 21px;
}


/* =========================================================
   FONT AWESOME
========================================================= */

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1600px) {

    .omc-container {

        width: 1260px;

        grid-template-columns: 680px 537px;

        column-gap: 43px;

        padding-top: 80px;
    }

    .omc-text {
        font-size: 19px;
    }

}


/* =========================================================
   1200 - 1500
========================================================= */

@media (max-width: 1500px) {

    .omc-container {

        width: 1100px;

        grid-template-columns: 590px 470px;

        column-gap: 40px;
    }


    .omc-content {
        width: 590px;
    }


    .omc-text {
        font-size: 17px;
    }


    .omc-cards {

        width: 470px;

        grid-template-columns: 225px 245px;

        grid-template-rows: 175px 175px 175px;

        row-gap: 40px;
    }


    .omc-card {

        height: 175px;

        padding: 17px;
    }


    .omc-card.vision-card {

        width: 470px;

        height: 175px;
    }


    .omc-icon-title {
        font-size: 32px;
    }


    .omc-card-text {
        font-size: 16px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .omc-section {

        min-height: auto;

        padding-bottom: 80px;
    }


    .omc-container {

        width: calc(100% - 60px);

        grid-template-columns: 1fr;

        row-gap: 50px;

        padding-top: 60px;
    }


    .omc-content {

        width: 100%;

        max-width: 700px;
    }


    .omc-cards {

        width: 100%;

        max-width: 537px;

        margin: 0 auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .omc-section {

        min-height: auto;

        background-position: 68% center;

        padding-bottom: 50px;
    }


    .omc-overlay {

        background: rgba(255,255,255,0.88);
    }


    .omc-container {

        width: calc(100% - 30px);

        max-width: none;

        display: block;

        padding-top: 35px;
    }


    .omc-content {

        width: 100%;

        margin-bottom: 35px;
    }


    .omc-text {

        font-size: 14px;

        line-height: 1.7;
    }


    .omc-cards {

        width: 100%;

        display: grid;

        grid-template-columns: 1fr 1fr;

        grid-template-rows: auto auto auto;

        column-gap: 10px;

        row-gap: 15px;
    }


    .omc-card {

        width: 100% !important;

        height: 155px;

        padding: 14px;

    }


    .omc-card.vision-card {

        grid-column: 1 / 3;

        width: 100% !important;

        height: 145px;
    }


    .omc-card-heading {

        gap: 8px;

        margin-bottom: 10px;
    }


    .omc-icon {

        width: 27px;

        height: 27px;

        flex-basis: 27px;

        font-size: 21px;
    }


    .omc-icon-title {

        font-size: 23px;
    }


    .omc-card-text {

        font-size: 12px;

        line-height: 1.45;
    }

}



/* =========================================================
   PROJECTS / VALUES SECTION
========================================================= */

/* =========================================================
   PROJECTS / VALUES SECTION
========================================================= */

.projects-section {
    position: relative;
    width: 100%;
    min-height: 650px;
    overflow: hidden;

    background: #ffffff;

    font-family: "Poppins", sans-serif;
}


/* =========================================================
   RIGHT GREEN BACKGROUND
========================================================= */

.projects-bg {
    position: absolute;

    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    background:
        linear-gradient(
            rgba(18, 88, 61, 0.88),
            rgba(18, 88, 61, 0.88)
        ),
        url("../images/banner/slide2.webp")
        center center / cover no-repeat;

    z-index: 0;
}


/* =========================================================
   VERTICAL DECORATIVE LINE
========================================================= */

.projects-bg::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 30%;

    width: 1px;
    height: 55%;

    background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.projects-container {
    position: relative;

    width: 100%;
    max-width: 1250px;

    min-height: 650px;

    margin: 0 auto;

    z-index: 2;
}


/* =========================================================
   FADED INDUSTRIAL IMAGE
========================================================= */

.projects-faded-image {
    position: absolute;

    left: -190px;
    bottom: -25px;

    width: 500px;
    height: 300px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.84),
            rgba(255, 255, 255, 0.84)
        ),
        url("../images/banner/slide1.webp")
        center / cover no-repeat;

    opacity: 0.55;

    filter: grayscale(100%);

    z-index: 0;
}


/* =========================================================
   HEADING
========================================================= */

.projects-heading {
    position: relative;

    width: 500px;

    padding-top: 65px;

    margin-left: 0;

    z-index: 5;
}


.projects-heading h2 {
    margin: 0 0 14px;

    font-size: 38px;
    line-height: 1.15;

    font-weight: 700;

    color: #17251f;

    letter-spacing: -0.5px;

    text-transform: uppercase;
}


.projects-heading p {
    margin: 0;

    max-width: 480px;

    font-size: 13px;
    line-height: 1.75;

    font-weight: 400;

    color: #4d5752;

    margin-bottom: 15px;
}


/* =========================================================
   CAROUSEL WRAPPER
========================================================= */

.projects-carousel-wrapper {
    position: relative;

    width: 100%;

    margin-top: 15px;

    z-index: 5;
}


/* =========================================================
   OWL CAROUSEL
========================================================= */

.project-carousel {
    position: relative;

    width: 100%;
}


.project-carousel .owl-stage-outer {
    overflow: visible;
}


.project-carousel .owl-stage {
    display: flex;

    align-items: center;
}


/* =========================================================
   PROJECT SLIDE
========================================================= */

.project-slide {
    position: relative;

    width: 100%;

    height: 415px;

    /*
       The image + information card
       are positioned as one centered composition.
    */

    display: block;
}


/* =========================================================
   MAIN PROJECT IMAGE
========================================================= */

.project-image {
    display: block;

    width: 675px !important;
    height: 385px;

    object-fit: cover;

    margin: 0;

    /*
       Center the complete image + info composition
    */

    position: absolute;

    left: calc(50% - 453px);
    top: 0;

    z-index: 2;

    transition: transform 0.6s ease;
}


/* =========================================================
   PROJECT INFO CARD
========================================================= */

.project-info {
    position: absolute;

    /*
       Image position:
       left  = center - 453px
       width = 675px

       Image right:
       center + 222px

       Card starts:
       center + 165px

       Therefore approximately
       57px overlap.
    */

    top: 85px;

    left: calc(50% + 165px);

    width: 385px;

    min-height: 240px;

    padding: 30px 30px 28px;

    background: #ffffff;

    box-sizing: border-box;

    z-index: 10;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.08);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}


/* =========================================================
   PROJECT TITLE
========================================================= */

.project-info h3 {
    margin: 0 0 19px;

    font-size: 19px;

    line-height: 1.3;

    font-weight: 700;

    color: #17251f;
}


/* =========================================================
   PROJECT DESCRIPTION
========================================================= */

.project-label {
    display: block;

    width: 100%;

    font-size: 14px;

    line-height: 1.7;

    font-weight: 400;

    color: #59635e;
}


/* =========================================================
   GREEN ARROW BOX
========================================================= */

.project-arrow-box {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 80px;
    height: 62px;

    background:
        linear-gradient(
            135deg,
            #4d9b72 0%,
            #16734b 100%
        );

    clip-path: polygon(
        100% 0,
        100% 100%,
        0 100%
    );
}


/* =========================================================
   PROJECT CARD ARROW
========================================================= */

.project-arrow {
    position: absolute;

    right: 17px;
    bottom: 16px;

    width: 23px;
    height: 20px;
}


/* Horizontal line */

.project-arrow::before {
    content: "";

    position: absolute;

    top: 9px;
    left: 0;

    width: 22px;
    height: 1.5px;

    background: #ffffff;
}


/* Arrow head */

.project-arrow::after {
    content: "";

    position: absolute;

    top: 5px;
    right: 0;

    width: 8px;
    height: 8px;

    border-top: 1.5px solid #ffffff;
    border-right: 1.5px solid #ffffff;

    transform: rotate(45deg);
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.project-slide:hover .project-image {
    transform: scale(1.015);
}


.project-slide:hover .project-info {
    transform: translateY(-5px);

    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.13);
}


/* =========================================================
   OWL NAVIGATION
========================================================= */

.project-carousel .owl-nav {
    margin: 0 !important;
}


/* =========================================================
   PREVIOUS / NEXT BUTTON
========================================================= */

.project-carousel .owl-nav button.owl-prev,
.project-carousel .owl-nav button.owl-next {

    position: absolute;

    top: 50%;

    width: 52px;
    height: 52px;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    align-items: center;
    justify-content: center;

    background: transparent !important;

    border: none !important;

    font-size: 0 !important;

    z-index: 50;

    opacity: 0.85;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* =========================================================
   LEFT / PREVIOUS
========================================================= */

.project-carousel .owl-nav button.owl-prev {

    left: 110px;

    transform: translateY(-50%);
}


.project-carousel .owl-nav button.owl-prev::before {

    content: "";

    display: block;

    width: 19px;
    height: 19px;

    border-left: 1.5px solid #26332d;
    border-bottom: 1.5px solid #26332d;

    transform: rotate(45deg);
}


/* =========================================================
   RIGHT / NEXT
========================================================= */

.project-carousel .owl-nav button.owl-next {

    right: 25px;

    transform: translateY(-50%);
}


.project-carousel .owl-nav button.owl-next::before {

    content: "";

    display: block;

    width: 19px;
    height: 19px;

    border-right: 1.5px solid #ffffff;
    border-top: 1.5px solid #ffffff;

    transform: rotate(45deg);
}


/* =========================================================
   ARROW HOVER
========================================================= */

.project-carousel .owl-nav button.owl-prev:hover {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(-4px);
}


.project-carousel .owl-nav button.owl-next:hover {

    opacity: 1;

    transform:
        translateY(-50%)
        translateX(4px);
}


/* =========================================================
   REMOVE DEFAULT OWL FOCUS
========================================================= */

.project-carousel .owl-nav button:focus {

    outline: none !important;

    box-shadow: none !important;
}


/* =========================================================
   OWL DOTS
========================================================= */

.project-carousel .owl-dots {

    margin-top: 20px;
}


.project-carousel .owl-dot span {

    width: 7px;
    height: 7px;

    margin: 5px;

    background: #b9c8c0 !important;
}


.project-carousel .owl-dot.active span {

    background: #16734b !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

    .projects-container {

        max-width: 100%;

        padding: 0 40px;

        box-sizing: border-box;
    }


    .projects-heading {

        width: 450px;
    }


    .project-slide {

        height: 400px;
    }


    .project-image {

        width: 62% !important;

        height: 360px;

        left: 4%;
    }


    .project-info {

        top: 65px;

        left: calc(4% + 55%);

        width: 320px;

        min-height: 225px;

        padding: 28px;
    }


    .project-carousel .owl-nav button.owl-prev {

        left: 5px;
    }


    .project-carousel .owl-nav button.owl-next {

        right: 5px;
    }

}


/* =========================================================
   TABLET SMALL
========================================================= */

@media (max-width: 991px) {

    .projects-section {

        min-height: 620px;
    }


    .projects-container {

        padding: 0 30px;
    }


    .projects-heading {

        width: 430px;

        padding-top: 55px;
    }


    .projects-heading h2 {

        font-size: 34px;
    }


    .projects-heading p {

        font-size: 12px;
    }


    .project-slide {

        height: 380px;
    }


    .project-image {

        width: 62% !important;

        height: 345px;

        left: 3%;
    }


    .project-info {

        top: 60px;

        left: 53%;

        width: 290px;

        min-height: 220px;

        padding: 27px;
    }


    .project-info h3 {

        font-size: 18px;
    }


    .project-label {

        font-size: 11px;
    }


    .project-carousel .owl-nav button.owl-prev {

        left: 0;
    }


    .project-carousel .owl-nav button.owl-next {

        right: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .projects-section {

        min-height: auto;

        padding-bottom: 70px;

        background: #ffffff;
    }


    /* Background */

    .projects-bg {

        width: 100%;

        height: 450px;

        opacity: 0.12;
    }


    .projects-bg::after {

        display: none;
    }


    /* Container */

    .projects-container {

        min-height: auto;

        padding: 0 20px;
    }


    /* Heading */

    .projects-heading {

        width: 100%;

        padding-top: 45px;

        margin-bottom: 30px;
    }


    .projects-heading h2 {

        font-size: 28px;

        margin-bottom: 12px;
    }


    .projects-heading p {

        width: 100%;

        max-width: 100%;

        font-size: 12px;

        line-height: 1.7;
    }


    /* Carousel */

    .projects-carousel-wrapper {

        margin-top: 0;
    }


    .project-carousel .owl-stage-outer {

        overflow: hidden;
    }


    /* Slide */

    .project-slide {

        height: 470px;

        display: block;
    }


    /* Image */

    .project-image {

        position: absolute;

        left: 0;

        top: 0;

        width: 100% !important;

        height: 290px;

        object-fit: cover;
    }


    /* Info box */

    .project-info {

        top: 235px;

        left: 15px;

        width: calc(100% - 30px);

        min-height: 215px;

        padding: 24px;

        transform: none;
    }


    .project-info h3 {

        font-size: 18px;

        margin-bottom: 13px;
    }


    .project-label {

        font-size: 11px;

        line-height: 1.65;

        padding-right: 10px;
    }


    /* Card arrow */

    .project-arrow-box {

        width: 68px;

        height: 54px;
    }


    .project-arrow {

        right: 15px;

        bottom: 14px;
    }


    /* Mobile navigation */

    .project-carousel .owl-nav button.owl-prev,
    .project-carousel .owl-nav button.owl-next {

        top: 145px;

        width: 42px;

        height: 42px;
    }


    .project-carousel .owl-nav button.owl-prev {

        left: 5px;

        transform: translateY(-50%);
    }


    .project-carousel .owl-nav button.owl-next {

        right: 5px;

        transform: translateY(-50%);
    }


    .project-carousel .owl-nav button.owl-prev::before,
    .project-carousel .owl-nav button.owl-next::before {

        width: 15px;

        height: 15px;
    }


    /* Faded image */

    .projects-faded-image {

        display: none;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .projects-container {

        padding: 0 15px;
    }


    .projects-heading {

        padding-top: 40px;
    }


    .projects-heading h2 {

        font-size: 25px;
    }


    .projects-heading p {

        font-size: 11px;
    }


    .project-slide {

        height: 430px;
    }


    .project-image {

        height: 250px;
    }


    .project-info {

        top: 200px;

        left: 10px;

        width: calc(100% - 20px);

        min-height: 205px;

        padding: 22px;
    }


    .project-info h3 {

        font-size: 17px;
    }


    .project-label {

        font-size: 10.5px;
    }


    .project-arrow-box {

        width: 62px;

        height: 50px;
    }


    .project-carousel .owl-nav button.owl-prev {

        left: 0;
    }


    .project-carousel .owl-nav button.owl-next {

        right: 0;
    }

}

.mining-grid2{
        display: grid;
    grid-template-columns: 722px 1fr;
    gap: 35px;
    align-items: start
}


/* ================================
   OUR JOURNEY
================================ */

/* =========================================================
   MINING ROAD ANIMATION
========================================================= */

/* =========================================================
   MAIN MINING ROAD
========================================================= */

.mining-road {
  position: relative;

  width: 100%;
  height: 226px;

  overflow: hidden;

  background: #dfe7f5;

  isolation: isolate;
}

/* =========================================================
   FIXED BACKGROUND
========================================================= */

.mining-bg {
  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background-image: url("../images/anim-vid/oj-bg.png");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  z-index: 1;

  pointer-events: none;
}

/* =========================================================
   TRUCK COMMON
========================================================= */

.mining-truck {
  position: absolute;

  width: 185px;

  bottom: 28px;

  z-index: 5;

  pointer-events: none;

  will-change: transform;
}

/* =========================================================
   TRUCK IMAGE
========================================================= */

.mining-truck img {
  display: block;

  width: 100%;
  height: auto;

  object-fit: contain;
}

/* =========================================================
   LEFT TRUCK
   SVG FACE = LEFT
   MOVEMENT = LEFT → RIGHT

   তাই এখানে SVG flip করতে হবে
========================================================= */

.truck-left {
  left: -220px;

  bottom: 28px;

  animation: truckLeftToRight 19s linear infinite;
}

/* =========================================================
   LEFT TRUCK SHADOW
========================================================= */

.truck-left::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 120%;

  height: 15px;

  background-image: url("../images/anim-vid/truck-shadow.4e0eb14….svg");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  opacity: 0.3;

  z-index: -1;

  pointer-events: none;
}

/* =========================================================
   RIGHT TRUCK
   SVG FACE = LEFT
   MOVEMENT = RIGHT → LEFT

   তাই এখানে কোনো scaleX(-1) লাগবে না
========================================================= */

.truck-right {
  right: -220px;

  left: auto;

  bottom: 28px;

  animation: truckRightToLeft 19s linear infinite;
}

/* =========================================================
   RIGHT TRUCK SHADOW
========================================================= */

.truck-right::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -2px;

  width: 120%;

  height: 15px;

  background-image: url("../images/anim-vid/truck-shadow.4e0eb14….svg");

  background-repeat: no-repeat;

  background-position: center;

  background-size: contain;

  opacity: 0.3;

  z-index: -1;

  pointer-events: none;
}

/* =========================================================
   LEFT → RIGHT
========================================================= */

@keyframes truckLeftToRight {
  0% {
    transform: translateX(0) scaleX(-1);
  }

  100% {
    transform: translateX(calc(100vw + 440px)) scaleX(-1);
  }
}

/* =========================================================
   RIGHT → LEFT
========================================================= */

@keyframes truckRightToLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-100vw - 440px));
  }
}

/* =========================================================
   TRUCK DUST / GROUND EFFECT
========================================================= */

.mining-truck::before {
  content: "";

  position: absolute;

  left: 5%;

  bottom: 0;

  width: 90%;

  height: 12px;

  background: radial-gradient(
    ellipse,
    rgba(80, 90, 105, 0.18),
    transparent 70%
  );

  filter: blur(3px);

  z-index: -2;

  pointer-events: none;
}

/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1200px) {
  .mining-road {
    height: 226px;
  }

  .mining-truck {
    width: 185px;
  }

  .truck-left,
  .truck-right {
    bottom: 28px;
  }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {
  .mining-road {
    height: 190px;
  }

  .mining-truck {
    width: 150px;
  }

  .truck-left,
  .truck-right {
    bottom: 24px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {
  .mining-road {
    height: 130px;
  }

  .mining-truck {
    width: 105px;
  }

  .truck-left {
    left: -130px;
    bottom: 18px;
  }

  .truck-right {
    right: -130px;
    bottom: 18px;
  }

  /* LEFT → RIGHT */

  @keyframes truckLeftToRight {
    0% {
      transform: translateX(0) scaleX(-1);
    }

    100% {
      transform: translateX(calc(100vw + 260px)) scaleX(-1);
    }
  }

  /* RIGHT → LEFT */

  @keyframes truckRightToLeft {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-100vw - 260px));
    }
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .mining-road {
    height: 110px;
  }

  .mining-truck {
    width: 85px;
  }

  .truck-left {
    left: -105px;
    bottom: 14px;
  }

  .truck-right {
    right: -105px;
    bottom: 14px;
  }

  /* LEFT → RIGHT */

  @keyframes truckLeftToRight {
    0% {
      transform: translateX(0) scaleX(-1);
    }

    100% {
      transform: translateX(calc(100vw + 210px)) scaleX(-1);
    }
  }

  /* RIGHT → LEFT */

  @keyframes truckRightToLeft {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(calc(-100vw - 210px));
    }
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .mining-truck {
    animation: none;
  }
}



/* =========================================
   CSR INTRO SECTION
========================================= */

.csr-intro-section {
  padding: 110px 6%;
  background: #fff;
}

.csr-intro-container {
  max-width: 1450px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
  align-items: center;
}

.csr-subtitle {
  display: inline-block;
  color: #167749;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.csr-intro-left h2 {
  font-size: 35px;
  line-height: 1.15;
  color: #111;
  margin-bottom: 30px;
}

.csr-intro-left h2 span {
  color: #167749;
}

.csr-intro-left p {
  color: #666;
  font-size: 17px;
  line-height: 2;
  margin-bottom: 20px;
}

.csr-points {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.csr-point {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #fafafa;
  border: 1px solid #ececec;
  border-radius: 18px;
  padding: 18px 22px;
  transition: 0.4s;
}

.csr-point:hover {
  transform: translateY(-5px);
  border-color: #167749;
}

.csr-point i {
  width: 55px;
  height: 55px;
  border-radius: 14px;
  background: #fff;
  color: #167749;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.csr-point span {
  font-size: 17px;
  font-weight: 600;
  color: #222;
}

.csr-intro-right {
  position: relative;
}

.csr-intro-right img {
  width: 100%;
  height: 650px;
  object-fit: cover;
  border-radius: 35px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.csr-badge {
  position: absolute;
  bottom: 30px;
  left: -30px;
  background: rgba(255, 255, 255, 0.95);
  padding: 35px;
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.csr-badge h3 {
  font-size: 60px;
  color: #167749;
  margin-bottom: 10px;
}

.csr-badge p {
  color: #555;
  font-size: 18px;
}



/* =========================================
   COMMON HEADING
========================================= */

.csr-heading {
  text-align: center;
  max-width: 850px;
  margin: auto;
  margin-bottom: 70px;
}

.csr-heading span {
  color: #167749;
  letter-spacing: 2px;
  font-size: 14px;
  font-weight: 700;
}

.csr-heading h2 {
  font-size: 54px;
  color: #111;
  margin: 18px 0;
  line-height: 1.2;
}

.csr-heading h2 span {
  color: #167749;
}

.csr-heading p {
  color: #666;
  line-height: 1.9;
  font-size: 17px;
}



/* =========================================
   CSR INITIATIVE SECTION
========================================= */

.csr-initiative-section {
  padding: 110px 6%;
  background: #fafafa;
}

.csr-initiative-grid {
  max-width: 1450px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.csr-card {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 28px;
  padding: 45px 35px;
  transition: 0.4s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.csr-card:hover {
  transform: translateY(-10px);
  border-color: #167749;
}

.csr-icon {
  width: 85px;
  height: 85px;
  border-radius: 24px;
  background: #fff;
  color: #167749;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.csr-card h3 {
  font-size: 28px;
  color: #111;
  margin-bottom: 18px;
}

.csr-card p {
  color: #666;
  line-height: 1.9;
  font-size: 16px;
}



/* =========================================
   CSR IMPACT SECTION
========================================= */

.csr-impact-section {
  padding: 110px 6%;
  background: #fff;
}

.csr-impact-container {
  max-width: 1450px;
  margin: auto;
}

.csr-impact-content {
  text-align: center;
  max-width: 850px;
  margin: auto;
  margin-bottom: 70px;
}

.csr-impact-content span {
  color: #167749;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: 14px;
}

.csr-impact-content h2 {
  font-size: 54px;
  line-height: 1.2;
  margin: 20px 0;
  color: #111;
}

.csr-impact-content h2 span {
  color: #167749;
}

.csr-impact-content p {
  color: #666;
  font-size: 17px;
  line-height: 1.9;
}

.csr-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.impact-box {
  background: linear-gradient(135deg, #fff, #ffffff);
  border-radius: 28px;
  padding: 50px 30px;
  text-align: center;
  border: 1px solid #ececec;
  transition: 0.4s;
}

.impact-box:hover {
  transform: translateY(-8px);
  border-color: #167749;
}

.impact-box h3 {
  font-size: 58px;
  color: #167749;
  margin-bottom: 15px;
}

.impact-box p {
  font-size: 18px;
  color: #444;
}



/* =========================================
   CSR GALLERY
========================================= */

.csr-gallery-section {
  padding: 110px 6%;
  background: #fafafa;
}

.csr-gallery-grid {
     max-width: 1450px;
    margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
    grid-auto-rows: 260px;
}

.gallery-item {
  overflow: hidden;
  border-radius: 28px;
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  transition: 0.5s;
}
.csr-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}
.gallery-item:hover img {
  transform: scale(1.08);
}



/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1200px) {

  .csr-intro-container,
  .csr-initiative-grid,
  .csr-impact-grid,
  .csr-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:991px) {

  .csr-intro-container {
    grid-template-columns: 1fr;
  }

  .csr-intro-left h2,
  .csr-heading h2,
  .csr-impact-content h2 {
    font-size: 42px;
  }

  .csr-intro-right img {
    height: 550px;
  }
}


.csr-gallery-heading h2 {
    font-size: 42px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 18px;
    line-height: 1.3;
}
.csr-gallery-heading{
    text-align:center;
}
.csr-gallery-item.large {
    grid-column: span 2;
    grid-row: span 2;
}

.csr-gallery-item:hover img {
    transform: scale(1.08);
}

.csr-gallery-item img{
    border-radius:15px;
}


/* =========================================================
   MAIN SECTION
========================================================= */

.mdo-section {
    position: relative;
    width: 100%;
    min-height: 777px;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 48% 52%,
            rgba(213, 232, 224, 0.55) 0,
            rgba(237, 245, 241, 0) 42%
        ),
        #f1f7f4;

    padding: 50px 0 48px;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.circle {
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(74, 135, 117, 0.15);
    border-radius: 50%;
}

.circle-one {
    width: 310px;
    height: 310px;
    right: -70px;
    top: -125px;
    background: rgba(213, 230, 223, 0.30);
}

.circle-two {
    width: 210px;
    height: 210px;
    right: -20px;
    top: -28px;
    background: transparent;
}


/* =========================================================
   CONTAINER
========================================================= */

.mdo-container {
    position: relative;
    z-index: 2;

    width: calc(100% - 156px);
    max-width: 1444px;

    margin: 0 auto;
}


/* =========================================================
   TOP SECTION
========================================================= */

.mdo-top {
    display: grid;
    grid-template-columns: 1.22fr 0.94fr;
    column-gap: 78px;
    align-items: start;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.mdo-content {
    padding-left: 22px;
    padding-top: 0;
}

.section-label {
    font-size: 13px;
    line-height: 1;
    letter-spacing: 3.2px;
    font-weight: 700;

    color: #397866;

    margin-bottom: 17px;
}

.label-line {
    width: 59px;
    height: 4px;

    border-radius: 10px;

    background: #78aa99;

    margin-bottom: 24px;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.mdo-content h1 {
    font-size: 58px;
    line-height: 0.99;

    letter-spacing: -1.8px;

    font-weight: 700;

    color: #102c31;

    margin-bottom: 18px;
}

.mdo-content h1 span {
    display: block;

    font-size: 32px;
    line-height: 1.15;

    letter-spacing: -0.5px;

    color: #4c9278;

    margin-top: 14px;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.intro-text {
    max-width: 690px;

    font-size: 18px;
    line-height: 1.55;

    font-weight: 400;

    color: #617477;

    margin-top: 19px;
    margin-bottom: 38px;
}


/* =========================================================
   DIVIDER
========================================================= */

.content-divider {
    width: 100%;
    max-width: 683px;

    height: 1px;

    background: #c4d1cd;

    margin-bottom: 12px;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.description {
    max-width: 690px;

    font-size: 16px;
    line-height: 1.5;

    font-weight: 400;

    color: #53686b;
}


/* =========================================================
   RIGHT MEDIA
========================================================= */

.mdo-media {
    padding-top: 10px;
}

.media-image {
    position: relative;

    width: 100%;
    height: 391px;

    overflow: hidden;

    border-radius: 22px;

    background: #162f32;
}

.media-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(5, 20, 22, 0.08) 0%,
            rgba(5, 20, 22, 0.02) 45%,
            rgba(5, 20, 22, 0.68) 100%
        );

    pointer-events: none;
}


/* =========================================================
   MEDIA TAG
========================================================= */

.media-tag {
    position: absolute;

    top: 27px;
    left: 30px;

    padding: 9px 18px;

    border-radius: 30px;

    background: rgba(12, 42, 43, 0.86);

    color: #ffffff;

    font-size: 11px;
    line-height: 1;

    letter-spacing: 2px;

    font-weight: 700;
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.play-button {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 82px;
    height: 82px;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.5);

    background: rgba(18, 74, 60, 0.88);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition: 0.3s ease;
}

.play-button:hover {
    transform: translate(-50%, -50%) scale(1.08);

    background: rgba(18, 87, 68, 0.96);
}

.play-button span {
    width: 0;
    height: 0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid #ffffff;

    margin-left: 4px;
}


/* =========================================================
   MEDIA BOTTOM
========================================================= */

.media-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 53px;

    padding: 0 29px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    border-top: 3px solid #78aa99;

    background: rgba(8, 34, 37, 0.87);

    color: #ffffff;
}

.media-bottom strong {
    font-size: 16px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.2px;
}

.media-bottom strong:last-child {
    font-size: 15px;
}


/* =========================================================
   FULL CYCLE BOX
========================================================= */

.cycle-box {
    position: relative;

    width: 100%;

    margin-top: 41px;

    padding: 24px 35px 30px;

    border-radius: 22px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(16, 54, 57, 0.97),
            rgba(15, 52, 55, 0.97)
        );

    color: #ffffff;
}


/* subtle grid */
.cycle-box::before {
    content: "";

    position: absolute;
    inset: 0;

    opacity: 0.10;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.20) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.20) 1px,
            transparent 1px
        );

    background-size: 34px 34px;

    pointer-events: none;
}

.cycle-header,
.cycle-divider,
.cycle-items {
    position: relative;
    z-index: 2;
}


/* =========================================================
   CYCLE HEADER
========================================================= */

.cycle-label {
    font-size: 12px;
    line-height: 1;

    letter-spacing: 2.5px;

    font-weight: 700;

    color: #7ab49e;

    margin-bottom: 9px;
}

.cycle-title {
    font-size: 19px;
    line-height: 1.35;

    font-weight: 400;

    color: #edf4f2;
}


/* =========================================================
   CYCLE DIVIDER
========================================================= */

.cycle-divider {
    width: 100%;
    height: 1px;

    margin-top: 15px;
    margin-bottom: 19px;

    background: rgba(190, 211, 204, 0.18);
}


/* =========================================================
   CYCLE ITEMS
========================================================= */

.cycle-items {
    display: grid;

    grid-template-columns:
        repeat(6, 1fr);

    gap: 29px;
}

.cycle-item {
    min-width: 0;

    padding-right: 4px;
}


/* =========================================================
   ITEM HEADING
========================================================= */

.item-heading {
    display: flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 10px;
}

.number {
    width: 25px;
    height: 25px;

    flex: 0 0 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #57a487;

    color: #ffffff;

    font-size: 10px;
    line-height: 1;

    font-weight: 700;
}

.item-heading h3 {
    font-size: 18px;
    line-height: 1;

    font-weight: 700;

    color: #ffffff;
}


/* =========================================================
   ITEM DESCRIPTION
========================================================= */

.cycle-item p {
    font-size: 12.5px;
    line-height: 1.45;

    font-weight: 400;

    color: #b7c8c4;
}


/* =========================================================
   LEGACY NUMBER
========================================================= */

.legacy-item .number {
    background: #d9a54c;
    color: #16383a;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1400px) {

    .mdo-container {
        width: calc(100% - 100px);
    }

    .mdo-top {
        column-gap: 55px;
    }

    .mdo-content h1 {
        font-size: 52px;
    }

    .mdo-content h1 span {
        font-size: 29px;
    }

    .media-image {
        height: 360px;
    }

    .cycle-items {
        gap: 20px;
    }
}


@media (max-width: 1100px) {

    .mdo-section {
        padding: 45px 0;
    }

    .mdo-container {
        width: calc(100% - 60px);
    }

    .mdo-top {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .mdo-content {
        padding-left: 0;
    }

    .mdo-content h1 {
        font-size: 52px;
    }

    .mdo-media {
        padding-top: 0;
    }

    .media-image {
        height: 430px;
    }

    .cycle-items {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 30px;
    }
}


@media (max-width: 768px) {

    .mdo-section {
        min-height: auto;
        padding: 38px 0 35px;
    }

    .mdo-container {
        width: calc(100% - 36px);
    }

    .section-label {
        font-size: 11px;
        letter-spacing: 2.5px;
    }

    .mdo-content h1 {
        font-size: 42px;
        line-height: 1.02;
        letter-spacing: -1px;
    }

    .mdo-content h1 span {
        font-size: 25px;
        margin-top: 11px;
    }

    .intro-text {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .description {
        font-size: 14px;
    }

    .media-image {
        height: 330px;
        border-radius: 18px;
    }

    .media-tag {
        top: 18px;
        left: 18px;
        font-size: 9px;
        padding: 8px 13px;
    }

    .play-button {
        width: 68px;
        height: 68px;
    }

    .media-bottom {
        height: 48px;
        padding: 0 18px;
    }

    .media-bottom strong {
        font-size: 13px;
    }

    .media-bottom strong:last-child {
        font-size: 12px;
    }

    .cycle-box {
        margin-top: 30px;
        padding: 22px 20px 25px;
        border-radius: 18px;
    }

    .cycle-title {
        font-size: 16px;
    }

    .cycle-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
}


@media (max-width: 480px) {

    .mdo-container {
        width: calc(100% - 28px);
    }

    .mdo-content h1 {
        font-size: 34px;
    }

    .mdo-content h1 span {
        font-size: 21px;
    }

    .intro-text {
        font-size: 14px;
        line-height: 1.6;
    }

    .description {
        font-size: 13px;
        line-height: 1.55;
    }

    .media-image {
        height: 260px;
        border-radius: 15px;
    }

    .media-tag {
        font-size: 8px;
        letter-spacing: 1.5px;
    }

    .play-button {
        width: 58px;
        height: 58px;
    }

    .play-button span {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 12px;
    }

    .media-bottom {
        padding: 0 14px;
    }

    .media-bottom strong {
        font-size: 11px;
    }

    .cycle-items {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .cycle-title {
        font-size: 15px;
    }

    .cycle-item p {
        font-size: 12px;
    }
}




/* =========================================================
   GVR DELIVERY ENGINE SECTION
   ========================================================= */

.gvr-engine-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fbfdfc;
    padding: 52px 30px 38px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   BACKGROUND DOTTED TEXTURE
   ========================================================= */

.gvr-engine-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;

    background-image: radial-gradient(
        rgba(31, 128, 108, 0.16) 0.75px,
        transparent 0.75px
    );

    background-size: 22px 22px;
}


/* =========================================================
   BACKGROUND CURVED LINES
   ========================================================= */

.gvr-engine-bg-line {
    position: absolute;
    left: -5%;
    width: 110%;
    height: 180px;
    border-top: 2px solid rgba(41, 137, 117, 0.12);
    border-radius: 50%;
    pointer-events: none;
}

.gvr-engine-bg-line-top {
    top: 70px;
    transform: rotate(1deg);
}

.gvr-engine-bg-line-bottom {
    bottom: 20px;
    transform: rotate(-1deg);
}


/* =========================================================
   CONTAINER
   ========================================================= */

.gvr-engine-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.gvr-engine-header {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.gvr-engine-eyebrow {
    color: #087c69;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    line-height: 1.4;
}

.gvr-engine-eyebrow span {
    margin: 0 6px;
    color: #72a99c;
}

.gvr-engine-heading-line {
    width: 70px;
    height: 4px;
    background: #efa72f;
    border-radius: 5px;
    margin: 17px auto 13px;
}

.gvr-engine-title {
    margin: 0;
    color: #0b252d;
    font-size: clamp(34px, 3.2vw, 50px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -1px;
}

.gvr-engine-description {
    max-width: 1030px;
    margin: 20px auto 0;
    color: #58727a;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
}


/* =========================================================
   MAIN SYSTEM
   ========================================================= */

.gvr-engine-system {
    position: relative;
    height: 590px;
    margin-top: 40px;
}


/* =========================================================
   CENTRAL ORBIT
   ========================================================= */

.gvr-engine-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 480px;
    height: 480px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(225, 240, 235, 0.62);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gvr-engine-orbit-inner {
    position: absolute;
    width: 360px;
    height: 360px;
    border: 1px dashed rgba(37, 145, 121, 0.18);
    border-radius: 50%;
}


/* =========================================================
   CONNECTOR LINES
   ========================================================= */

.gvr-engine-connector {
    position: absolute;
    width: 410px;
    height: 1px;
    border-top: 2px dashed rgba(64, 181, 157, 0.48);
    transform-origin: center;
    z-index: 1;
}

.gvr-engine-connector::before,
.gvr-engine-connector::after {
    content: "";
    position: absolute;
    top: -5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #55c2a6;
}

.gvr-engine-connector::before {
    left: -3px;
}

.gvr-engine-connector::after {
    right: -3px;
}


.gvr-engine-connector-1 {
    left: -350px;
    top: 150px;
    transform: rotate(19deg);
}

.gvr-engine-connector-2 {
    right: -350px;
    top: 150px;
    transform: rotate(-19deg);
}

.gvr-engine-connector-3 {
    left: -350px;
    bottom: 150px;
    transform: rotate(-19deg);
}

.gvr-engine-connector-4 {
    right: -350px;
    bottom: 150px;
    transform: rotate(19deg);
}


/* =========================================================
   CENTRAL DELIVERY ENGINE
   ========================================================= */

.gvr-engine-center-ring {
    position: relative;
    z-index: 5;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(202, 230, 221, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.gvr-engine-center {
    width: 210px;
    height: 210px;
    border-radius: 50%;

    background: radial-gradient(
        circle at 35% 30%,
        #087e6b 0%,
        #006656 55%,
        #004d45 100%
    );

    border: 3px solid #a7d4c7;

    box-shadow:
        0 0 0 12px rgba(5, 108, 91, 0.08),
        0 15px 35px rgba(0, 71, 62, 0.14);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    color: #ffffff;
    position: relative;
}

.gvr-engine-center::before {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.24);
    border-radius: 50%;
}

.gvr-engine-center-small {
    position: relative;
    z-index: 2;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #b5e1d5;
}

.gvr-engine-center-title {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gvr-engine-center-line {
    position: relative;
    z-index: 2;
    margin-top: 11px;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #d1eee7;
}

.gvr-engine-center-line span {
    margin: 0 4px;
}

.gvr-engine-center-trust {
    position: relative;
    z-index: 2;
    margin-top: 6px;
    font-size: 12px;
    letter-spacing: 2px;
    color: #d1eee7;
}


/* =========================================================
   CARDS
   ========================================================= */

.gvr-engine-card {
    position: absolute;
    width: 375px;
    min-height: 208px;
    box-sizing: border-box;

    background: rgba(255, 255, 255, 0.96);
    border: 1.5px solid #cfe4dc;
    border-radius: 18px;

    padding: 26px 30px 24px 35px;

    box-shadow: 0 10px 0 rgba(15, 103, 87, 0.09);

    display: flex;
    gap: 18px;

    z-index: 10;
}


/* =========================================================
   ORANGE FIRST CARD
   ========================================================= */

.gvr-engine-card-1 {
    left: 20px;
    top: 50px;
    border-color: #efa72f;
}

.gvr-engine-card-1::before {
    background: #efa72f;
}


/* =========================================================
   OTHER CARDS
   ========================================================= */

.gvr-engine-card-2 {
    right: 20px;
    top: 50px;
}

.gvr-engine-card-3 {
    left: 20px;
    bottom: 45px;
}

.gvr-engine-card-4 {
    right: 20px;
    bottom: 45px;
}


/* =========================================================
   VERTICAL ACCENT
   ========================================================= */

.gvr-engine-card::before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    bottom: -1px;
    width: 6px;
    background: #58bfa4;
    border-radius: 18px 0 0 18px;
}


/* Fourth card darker accent */

.gvr-engine-card-4::before {
    background: #248e7d;
}


/* =========================================================
   CARD ICON
   ========================================================= */

.gvr-engine-card-icon {
    flex: 0 0 50px;
    width: 50px;
    height: 50px;

    border-radius: 50%;
    background: #e8f5f1;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gvr-engine-card-icon svg {
    width: 29px;
    height: 29px;
    fill: none;
    stroke: #087c69;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.gvr-engine-card-content {
    flex: 1;
    min-width: 0;
}

.gvr-engine-card-label {
    margin-top: 4px;
    color: #087c69;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.gvr-engine-card-1 .gvr-engine-card-label {
    color: #c87800;
}

.gvr-engine-card-title {
    margin: 7px 0 0;
    color: #0b252d;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}

.gvr-engine-card-text {
    margin: 21px 0 0;
    color: #58727a;
    font-size: 15px;
    line-height: 1.5;
}


/* =========================================================
   BOTTOM TEXT
   ========================================================= */

.gvr-engine-bottom-text {
    text-align: center;
    color: #607b81;
    font-size: 14px;
    letter-spacing: 0.2px;
    margin-top: -2px;
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1250px) {

    .gvr-engine-card {
        width: 330px;
        padding: 24px 25px 22px 30px;
    }

    .gvr-engine-card-title {
        font-size: 22px;
    }

    .gvr-engine-card-text {
        font-size: 14px;
    }

    .gvr-engine-connector {
        width: 350px;
    }

    .gvr-engine-connector-1,
    .gvr-engine-connector-3 {
        left: -300px;
    }

    .gvr-engine-connector-2,
    .gvr-engine-connector-4 {
        right: -300px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {

    .gvr-engine-section {
        padding: 50px 20px 40px;
    }

    .gvr-engine-description {
        font-size: 16px;
        max-width: 750px;
    }

    .gvr-engine-system {
        height: auto;
        margin-top: 45px;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .gvr-engine-orbit {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 360px;
        height: 360px;
        grid-column: 1 / -1;
        grid-row: 1;

        margin: 0 auto 15px;
    }

    .gvr-engine-orbit-inner {
        width: 270px;
        height: 270px;
    }

    .gvr-engine-center-ring {
        width: 205px;
        height: 205px;
    }

    .gvr-engine-center {
        width: 170px;
        height: 170px;
    }

    .gvr-engine-center-title {
        font-size: 21px;
    }

    .gvr-engine-card {
        position: relative;
        inset: auto !important;
        width: 100%;
        min-height: 195px;
    }

    .gvr-engine-connector {
        display: none;
    }

    .gvr-engine-bottom-text {
        margin-top: 30px;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gvr-engine-section {
        padding: 42px 15px 35px;
    }

    .gvr-engine-eyebrow {
        font-size: 11px;
        letter-spacing: 2.5px;
    }

    .gvr-engine-heading-line {
        width: 55px;
        height: 3px;
        margin: 13px auto 12px;
    }

    .gvr-engine-title {
        font-size: 29px;
        line-height: 1.2;
        letter-spacing: -0.5px;
    }

    .gvr-engine-description {
        margin-top: 16px;
        font-size: 14px;
        line-height: 1.55;
    }

    .gvr-engine-system {
        display: flex;
        flex-direction: column;
        gap: 18px;
        margin-top: 35px;
    }

    .gvr-engine-orbit {
        order: -1;
        width: 290px;
        height: 290px;
        margin-bottom: 12px;
    }

    .gvr-engine-orbit-inner {
        width: 220px;
        height: 220px;
    }

    .gvr-engine-center-ring {
        width: 175px;
        height: 175px;
    }

    .gvr-engine-center {
        width: 145px;
        height: 145px;
    }

    .gvr-engine-center::before {
        inset: 11px;
    }

    .gvr-engine-center-small {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .gvr-engine-center-title {
        font-size: 18px;
        margin-top: 5px;
    }

    .gvr-engine-center-line,
    .gvr-engine-center-trust {
        font-size: 9px;
    }

    .gvr-engine-card {
        min-height: auto;
        padding: 21px 20px 21px 25px;
        border-radius: 15px;
        gap: 14px;
    }

    .gvr-engine-card::before {
        border-radius: 15px 0 0 15px;
    }

    .gvr-engine-card-icon {
        flex: 0 0 43px;
        width: 43px;
        height: 43px;
    }

    .gvr-engine-card-icon svg {
        width: 25px;
        height: 25px;
    }

    .gvr-engine-card-label {
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .gvr-engine-card-title {
        font-size: 20px;
        margin-top: 6px;
    }

    .gvr-engine-card-text {
        margin-top: 13px;
        font-size: 13px;
        line-height: 1.5;
    }

    .gvr-engine-bottom-text {
        font-size: 12px;
        line-height: 1.5;
        margin-top: 25px;
    }

    .gvr-engine-bg-line {
        display: none;
    }
}



/* =========================================================
   GVR COMMODITY SECTION
   ========================================================= */

.gvr-commodity-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fbfdfc;
    padding: 70px 40px 45px;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   DOT PATTERN
   ========================================================= */

.gvr-commodity-section::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.52;

    background-image: radial-gradient(
        rgba(31, 128, 108, 0.15) 0.75px,
        transparent 0.75px
    );

    background-size: 22px 22px;
}


/* =========================================================
   DECORATIVE TOP LEFT CIRCLE
   ========================================================= */

.gvr-commodity-section::after {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    left: -150px;
    top: -170px;

    border-radius: 50%;
    border: 1px solid rgba(43, 132, 114, 0.13);
    background: rgba(220, 237, 231, 0.55);

    pointer-events: none;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.gvr-commodity-container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1550px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 36% 64%;
}


/* =========================================================
   LEFT INTRO
   ========================================================= */

.gvr-commodity-intro {
    position: relative;
    z-index: 3;
    padding: 0 20px 0 25px;
}


.gvr-commodity-eyebrow {
    color: #087c69;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    line-height: 1.4;
}


.gvr-commodity-orange-line {
    width: 65px;
    height: 4px;
    margin-top: 17px;

    background: #efa72f;
    border-radius: 4px;
}


.gvr-commodity-title {
    margin: 31px 0 0;

    color: #0b252d;
    font-size: clamp(40px, 3.5vw, 55px);
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -1.5px;
}


.gvr-commodity-description {
    max-width: 500px;

    margin: 30px 0 0;

    color: #58727a;
    font-size: 18px;
    line-height: 1.55;
}


.gvr-commodity-divider {
    width: 100%;
    max-width: 470px;
    height: 1px;

    margin-top: 62px;

    background: #cfe4dc;
}


.gvr-commodity-subtitle {
    margin-top: 38px;

    color: #0b252d;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
}


.gvr-commodity-subtext {
    margin-top: 14px;

    color: #58727a;
    font-size: 15px;
    line-height: 1.5;
}


.gvr-commodity-scroll {
    margin-top: 150px;

    color: #087c69;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}


.gvr-commodity-scroll span {
    display: inline-block;
    margin-left: 5px;
    font-size: 16px;
}


/* =========================================================
   RIGHT FLOW
   ========================================================= */

.gvr-commodity-flow {
    position: relative;
    min-width: 0;
}


.gvr-commodity-flow-header {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 14px 25px 0;
}


.gvr-commodity-flow-title {
    width: 100%;
    text-align: center;

    color: #087c69;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
}


.gvr-commodity-hover {
    position: absolute;
    right: 25px;
    top: 15px;

    color: #76918f;
    font-size: 12px;
    letter-spacing: 1.5px;
}


/* =========================================================
   FLOW LINE
   ========================================================= */

.gvr-commodity-flow-line {
    position: relative;

    height: 65px;
    margin: 35px 15px 0;

    display: flex;
    align-items: center;
}


.gvr-commodity-flow-line::before {
    content: "";
    position: absolute;

    left: 0;
    right: 0;
    top: 32px;

    border-top: 2px dashed rgba(38, 137, 117, 0.55);
}


.gvr-flow-step {
    position: relative;

    flex: 1;
    height: 65px;

    display: flex;
    justify-content: center;
}


.gvr-flow-label {
    position: absolute;
    top: 0;

    color: #71908c;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


.gvr-flow-dot {
    position: absolute;

    top: 21px;

    width: 23px;
    height: 23px;

    box-sizing: border-box;

    background: #f8fcfa;
    border: 3px solid #61c4a9;

    border-radius: 50%;

    z-index: 2;
}


.gvr-flow-step-1 .gvr-flow-dot {
    border-color: #efa72f;
}


.gvr-flow-step-4 .gvr-flow-dot {
    border-color: #248e7d;
}


/* =========================================================
   COMMODITY CARDS
   ========================================================= */

.gvr-commodity-cards {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 8px;

    margin-top: -1px;
}


.gvr-commodity-card {
    position: relative;

    min-height: 500px;

    box-sizing: border-box;

    padding: 25px 20px 23px;

    background: rgba(249, 252, 250, 0.96);

    border: 1px solid #cfe4dc;

    border-radius: 0 22px 22px 0;

    box-shadow: 0 5px 0 rgba(18, 108, 91, 0.04);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        background 0.35s ease;
}


/* First card orange border */

.gvr-commodity-card-orange {
    border: 1.5px solid #efa72f;
}


.gvr-commodity-card-orange::before {
    background: #efa72f !important;
}


/* Card left accent */

.gvr-commodity-card::before {
    content: "";

    position: absolute;

    left: -1px;
    top: -1px;
    bottom: -1px;

    width: 6px;

    background: #58bfa4;

    border-radius: 8px 0 0 8px;
}


.gvr-commodity-card-dark::before {
    background: #248e7d;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.gvr-commodity-card:hover {
    transform: translateY(-8px);

    background: #ffffff;

    box-shadow:
        0 18px 35px rgba(18, 104, 88, 0.12);
}


.gvr-commodity-card:hover .gvr-commodity-image img {
    transform: scale(1.06);
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.gvr-commodity-image {
    width: 100%;
    height: 185px;

    overflow: hidden;

    border-radius: 15px;
}


.gvr-commodity-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.gvr-commodity-card-content {
    padding-top: 22px;
}


.gvr-commodity-card-label {
    color: #087c69;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}


.gvr-commodity-card-orange .gvr-commodity-card-label {
    color: #c87800;
}


.gvr-commodity-card-title {
    margin: 9px 0 0;

    color: #0b252d;

    font-size: 29px;
    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -0.4px;
}


.gvr-commodity-card-text {
    margin: 22px 0 0;

    color: #58727a;

    font-size: 14px;
    line-height: 1.55;
}


/* =========================================================
   TAG
   ========================================================= */

.gvr-commodity-tag {
    display: inline-flex;
    align-items: center;

    margin-top: 42px;

    padding: 6px 10px;

    border-radius: 14px;

    background: #e4f3ee;

    color: #087c69;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
    white-space: nowrap;
}


.gvr-commodity-tag-orange {
    background: #fff0d5;
    color: #bd7100;
}


/* =========================================================
   FLOW FOOTER
   ========================================================= */

.gvr-commodity-flow-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    padding: 15px 0 0;

    border-top: 1px solid #cfe4dc;

    margin-top: 39px;
}


.gvr-commodity-flow-caption {
    color: #58727a;

    font-size: 15px;
    line-height: 1.4;
}


.gvr-commodity-view-all {
    color: #bd7100;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.3px;

    text-decoration: none;

    white-space: nowrap;

    transition: color 0.3s ease;
}


.gvr-commodity-view-all:hover {
    color: #087c69;
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1350px) {

    .gvr-commodity-container {
        grid-template-columns: 34% 66%;
        gap: 25px;
    }


    .gvr-commodity-title {
        font-size: 43px;
    }


    .gvr-commodity-description {
        font-size: 16px;
    }


    .gvr-commodity-card {
        min-height: 480px;
        padding: 22px 16px 20px;
    }


    .gvr-commodity-image {
        height: 170px;
    }


    .gvr-commodity-card-title {
        font-size: 25px;
    }


    .gvr-commodity-card-text {
        font-size: 13px;
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .gvr-commodity-section {
        padding: 55px 25px 40px;
    }


    .gvr-commodity-container {
        grid-template-columns: 1fr;
    }


    .gvr-commodity-intro {
        padding: 0;
        text-align: center;
    }


    .gvr-commodity-orange-line {
        margin-left: auto;
        margin-right: auto;
    }


    .gvr-commodity-title {
        font-size: 44px;
    }


    .gvr-commodity-description {
        margin-left: auto;
        margin-right: auto;
    }


    .gvr-commodity-divider {
        margin-left: auto;
        margin-right: auto;
    }


    .gvr-commodity-scroll {
        margin-top: 40px;
    }


    .gvr-commodity-flow-header {
        padding-left: 0;
        padding-right: 0;
    }


    .gvr-commodity-hover {
        right: 0;
    }


    .gvr-commodity-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }


    .gvr-commodity-card {
        min-height: 500px;
    }


    .gvr-commodity-flow-line {
        margin-left: 0;
        margin-right: 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .gvr-commodity-section {
        padding: 45px 15px 35px;
    }


    .gvr-commodity-section::after {
        width: 300px;
        height: 300px;
        left: -150px;
        top: -140px;
    }


    .gvr-commodity-eyebrow {
        font-size: 11px;
        letter-spacing: 2.5px;
    }


    .gvr-commodity-orange-line {
        width: 55px;
        height: 3px;
        margin-top: 13px;
    }


    .gvr-commodity-title {
        margin-top: 23px;

        font-size: 34px;
        line-height: 1.1;
        letter-spacing: -0.8px;
    }


    .gvr-commodity-description {
        margin-top: 20px;

        font-size: 14px;
        line-height: 1.55;
    }


    .gvr-commodity-divider {
        margin-top: 38px;
    }


    .gvr-commodity-subtitle {
        margin-top: 28px;
        font-size: 13px;
        letter-spacing: 1.5px;
    }


    .gvr-commodity-subtext {
        font-size: 13px;
    }


    .gvr-commodity-scroll {
        margin-top: 30px;
        font-size: 11px;
    }


    .gvr-commodity-flow-header {
        padding: 0;
    }


    .gvr-commodity-flow-title {
        font-size: 11px;
        letter-spacing: 2px;
    }


    .gvr-commodity-hover {
        display: none;
    }


    .gvr-commodity-flow-line {
        height: 55px;
        margin-top: 25px;
    }


    .gvr-commodity-flow-line::before {
        top: 28px;
    }


    .gvr-flow-step {
        height: 55px;
    }


    .gvr-flow-label {
        top: 0;

        font-size: 8px;
        letter-spacing: 1px;
    }


    .gvr-flow-dot {
        top: 18px;

        width: 20px;
        height: 20px;

        border-width: 2px;
    }


    .gvr-commodity-cards {
        display: flex;

        overflow-x: auto;

        gap: 12px;

        padding: 5px 3px 18px;

        scroll-snap-type: x mandatory;

        scrollbar-width: none;
    }


    .gvr-commodity-cards::-webkit-scrollbar {
        display: none;
    }


    .gvr-commodity-card {
        flex: 0 0 82%;

        min-height: 475px;

        scroll-snap-align: start;

        padding: 20px 18px;
    }


    .gvr-commodity-image {
        height: 175px;
    }


    .gvr-commodity-card-content {
        padding-top: 19px;
    }


    .gvr-commodity-card-label {
        font-size: 9px;
        letter-spacing: 1.5px;
    }


    .gvr-commodity-card-title {
        font-size: 25px;
    }


    .gvr-commodity-card-text {
        margin-top: 17px;
        font-size: 13px;
    }


    .gvr-commodity-tag {
        margin-top: 30px;
        font-size: 8px;
    }


    .gvr-commodity-flow-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;

        margin-top: 22px;
        padding-top: 15px;
    }


    .gvr-commodity-flow-caption {
        font-size: 12px;
    }


    .gvr-commodity-view-all {
        font-size: 10px;
    }

}







/* =========================================================
   GVR IMPACT / JOURNEY SECTION
   ========================================================= */

.gvr-impact-section {
    position: relative;
    width: 100%;
    overflow: hidden;

    background: #f8fafb;

    padding: 58px 35px 42px;

    box-sizing: border-box;

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   BACKGROUND DOT PATTERN
   ========================================================= */

.gvr-impact-section::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: 0.42;

    background-image: radial-gradient(
        rgba(24, 125, 108, 0.13) 0.75px,
        transparent 0.75px
    );

    background-size: 26px 26px;
}


/* =========================================================
   BACKGROUND CIRCLES
   ========================================================= */

.gvr-impact-circle {
    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(36, 133, 115, 0.10);

    pointer-events: none;
}


.gvr-impact-circle-left {
    width: 145px;
    height: 145px;

    left: 35px;
    top: 48px;
}


.gvr-impact-circle-right {
    width: 180px;
    height: 180px;

    right: -5px;
    bottom: -10px;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.gvr-impact-container {
    position: relative;

    z-index: 2;

    width: 100%;

    max-width: 1550px;

    margin: 0 auto;
}


/* =========================================================
   HEADER
   ========================================================= */

.gvr-impact-header {
    text-align: center;

    max-width: 850px;

    margin: 0 auto;
}


.gvr-impact-eyebrow {
    color: #087c69;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 4px;

    line-height: 1.4;
}


.gvr-impact-title {
    margin: 21px 0 0;

    color: #090d0f;

    font-size: clamp(40px, 4vw, 52px);

    line-height: 1.08;

    font-weight: 700;

    letter-spacing: -1.5px;
}


.gvr-impact-description {
    max-width: 650px;

    margin: 24px auto 0;

    color: #607581;

    font-size: 17px;

    line-height: 1.65;
}


/* =========================================================
   JOURNEY
   ========================================================= */

.gvr-impact-journey {
    position: relative;

    margin-top: 38px;

    min-height: 445px;
}


/* =========================================================
   CURVED JOURNEY LINE
   ========================================================= */

.gvr-impact-journey-line {
    position: absolute;

    left: 2%;

    right: 2%;

    top: 0;

    height: 180px;

    z-index: 2;
}


.gvr-impact-curve {
    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 180px;

    overflow: visible;
}


.gvr-impact-curve-base {
    fill: none;

    stroke: #d8e9e4;

    stroke-width: 12;

    stroke-linecap: round;
}


.gvr-impact-curve-dash {
    fill: none;

    stroke: #087f6c;

    stroke-width: 2;

    stroke-dasharray: 2 10;

    stroke-linecap: round;
}


/* =========================================================
   JOURNEY STEPS
   ========================================================= */

.gvr-impact-step {
    position: absolute;

    top: 0;

    width: 90px;

    height: 100px;

    transform: translateX(-50%);

    text-align: center;
}


.gvr-impact-step-1 {
    left: 13%;
}


.gvr-impact-step-2 {
    left: 50%;
}


.gvr-impact-step-3 {
    left: 88%;
}


.gvr-impact-step-label {
    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    top: -8px;

    white-space: nowrap;

    color: #087c69;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.gvr-impact-step-1 .gvr-impact-step-label {
    color: #b87316;
}


.gvr-impact-step-dot {
    position: absolute;

    left: 50%;

    top: 18px;

    transform: translateX(-50%);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    box-sizing: border-box;

    background: #f8fafb;

    border: 4px solid #087f6c;

    display: flex;

    align-items: center;

    justify-content: center;
}


.gvr-impact-step-1 .gvr-impact-step-dot {
    border-color: #d18a2f;
}


.gvr-impact-step-3 .gvr-impact-step-dot {
    border-color: #178d80;
}


.gvr-impact-step-dot span {
    display: block;

    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #087f6c;
}


.gvr-impact-step-1 .gvr-impact-step-dot span {
    background: #d18a2f;
}


.gvr-impact-step-3 .gvr-impact-step-dot span {
    background: #178d80;
}


/* =========================================================
   CARDS
   ========================================================= */

.gvr-impact-cards {
    position: absolute;

    left: 0;
    right: 0;

    top: 105px;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 6.5%;

    align-items: stretch;
}


.gvr-impact-card {
    position: relative;

    min-height: 275px;

    box-sizing: border-box;

    padding: 35px 35px 28px;

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid #d7e3e0;

    border-radius: 20px;

    box-shadow:
        0 10px 0 rgba(26, 104, 91, 0.08);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


/* =========================================================
   CARD LEFT ACCENT
   ========================================================= */

.gvr-impact-card::before {
    content: "";

    position: absolute;

    left: -1px;

    top: -1px;

    bottom: -1px;

    width: 7px;

    background: #148e7d;

    border-radius: 20px 0 0 20px;
}


.gvr-impact-card-build::before {
    background: #d18a2f;
}


.gvr-impact-card-power {
    border-color: #b8ddd2;

    border-top: 7px solid #087f6c;

    padding-top: 28px;
}


.gvr-impact-card-restore::before {
    background: #178d80;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.gvr-impact-card:hover {
    transform: translateY(-7px);

    box-shadow:
        0 18px 35px rgba(28, 105, 91, 0.13);
}


/* =========================================================
   CARD NUMBER
   ========================================================= */

.gvr-impact-card-number {
    position: absolute;

    top: 18px;

    right: 25px;

    color: rgba(8, 127, 108, 0.14);

    font-size: 40px;

    line-height: 1;

    font-weight: 700;
}


.gvr-impact-card-build .gvr-impact-card-number {
    color: rgba(209, 138, 47, 0.16);
}


.gvr-impact-card-power .gvr-impact-card-number {
    color: rgba(8, 127, 108, 0.14);
}


.gvr-impact-card-restore .gvr-impact-card-number {
    color: rgba(23, 141, 128, 0.15);
}


/* =========================================================
   ACTIVE IMPACT
   ========================================================= */

.gvr-impact-active {
    position: absolute;

    top: 42px;

    right: 35px;

    padding: 6px 9px;

    border-radius: 15px;

    background: #e5f3ef;

    color: #087c69;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   CARD ICON
   ========================================================= */

.gvr-impact-card-icon {
    width: 66px;

    height: 66px;

    border-radius: 15px;

    background: #e9f5f1;

    display: flex;

    align-items: center;

    justify-content: center;
}


.gvr-impact-card-build .gvr-impact-card-icon {
    background: #fcf3e8;
}


.gvr-impact-card-icon svg {
    width: 40px;

    height: 40px;

    fill: none;

    stroke: #087f6c;

    stroke-width: 2.2;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.gvr-impact-card-build .gvr-impact-card-icon svg {
    stroke: #d18a2f;
}


.gvr-impact-card-restore .gvr-impact-card-icon svg {
    stroke: #178d80;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.gvr-impact-card-content {
    margin-top: 28px;
}


.gvr-impact-card-label {
    color: #087f6c;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.gvr-impact-card-build .gvr-impact-card-label {
    color: #b87316;
}


.gvr-impact-card-title {
    margin: 11px 0 0;

    color: #090d0f;

    font-size: 24px;

    line-height: 1.18;

    font-weight: 700;

    letter-spacing: -0.3px;
}


.gvr-impact-card-text {
    max-width: 400px;

    margin: 14px 0 0;

    color: #607581;

    font-size: 15px;

    line-height: 1.6;
}


/* =========================================================
   CARD BOTTOM
   ========================================================= */

.gvr-impact-card-line {
    width: 72px;

    height: 3px;

    margin-top: 17px;

    border-radius: 5px;

    background: #087f6c;
}


.gvr-impact-card-build .gvr-impact-card-line {
    background: #d18a2f;
}


.gvr-impact-card-restore .gvr-impact-card-line {
    background: #178d80;
}


/* =========================================================
   ACTIVE CARD BOTTOM
   ========================================================= */

.gvr-impact-card-bottom {
    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-top: 10px;
}


.gvr-impact-card-bottom .gvr-impact-card-line {
    margin-top: 0;
}


.gvr-impact-arrow {
    width: 44px;

    height: 44px;

    border-radius: 50%;

    background: #087f6c;

    color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 28px;

    line-height: 1;

    transition:
        transform 0.3s ease,
        background 0.3s ease;
}


.gvr-impact-card:hover .gvr-impact-arrow {
    transform: translateX(5px);

    background: #066c5c;
}


/* =========================================================
   FOOTER
   ========================================================= */

.gvr-impact-footer {
    position: relative;

    z-index: 3;

    text-align: center;

    margin-top: 26px;
}


.gvr-impact-footer-title {
    color: #087c69;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;
}


.gvr-impact-footer-title span {
    margin: 0 6px;

    color: #5e9e91;
}


.gvr-impact-footer-text {
    margin: 10px 0 0;

    color: #607581;

    font-size: 14px;
}


/* =========================================================
   LARGE LAPTOP
   ========================================================= */

@media (max-width: 1250px) {

    .gvr-impact-section {
        padding-left: 25px;
        padding-right: 25px;
    }


    .gvr-impact-cards {
        gap: 4%;
    }


    .gvr-impact-card {
        padding-left: 28px;
        padding-right: 28px;
    }


    .gvr-impact-card-title {
        font-size: 21px;
    }


    .gvr-impact-card-text {
        font-size: 14px;
    }


    .gvr-impact-step-1 {
        left: 14%;
    }


    .gvr-impact-step-3 {
        left: 86%;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .gvr-impact-section {
        padding: 55px 20px 40px;
    }


    .gvr-impact-title {
        font-size: 42px;
    }


    .gvr-impact-description {
        font-size: 15px;
    }


    .gvr-impact-journey {
        min-height: auto;

        margin-top: 40px;
    }


    .gvr-impact-journey-line {
        position: relative;

        left: auto;
        right: auto;

        height: 110px;
    }


    .gvr-impact-curve {
        height: 110px;
    }


    .gvr-impact-step {
        transform: translateX(-50%) scale(0.85);
    }


    .gvr-impact-cards {
        position: relative;

        top: auto;
        left: auto;
        right: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 20px;

        margin-top: 0;
    }


    .gvr-impact-card {
        min-height: 250px;
    }


    .gvr-impact-card-power {
        order: 1;
    }


    .gvr-impact-card-build {
        order: 0;
    }


    .gvr-impact-card-restore {
        order: 2;
    }


    .gvr-impact-footer {
        margin-top: 35px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gvr-impact-section {
        padding: 45px 15px 35px;
    }


    .gvr-impact-circle-left {
        width: 100px;
        height: 100px;

        left: 15px;
        top: 35px;
    }


    .gvr-impact-circle-right {
        width: 120px;
        height: 120px;

        right: -40px;
        bottom: 40px;
    }


    .gvr-impact-eyebrow {
        font-size: 10px;

        letter-spacing: 2.5px;
    }


    .gvr-impact-title {
        margin-top: 17px;

        font-size: 33px;

        line-height: 1.12;

        letter-spacing: -0.8px;
    }


    .gvr-impact-description {
        margin-top: 18px;

        font-size: 14px;

        line-height: 1.55;
    }


    .gvr-impact-journey {
        margin-top: 35px;
    }


    .gvr-impact-journey-line {
        height: 85px;

        margin-bottom: 10px;
    }


    .gvr-impact-curve {
        height: 85px;
    }


    .gvr-impact-step {
        transform: translateX(-50%) scale(0.7);
    }


    .gvr-impact-step-1 {
        left: 12%;
    }


    .gvr-impact-step-2 {
        left: 50%;
    }


    .gvr-impact-step-3 {
        left: 88%;
    }


    .gvr-impact-cards {
        gap: 17px;
    }


    .gvr-impact-card {
        min-height: 265px;

        padding: 25px 23px 22px;

        border-radius: 16px;
    }


    .gvr-impact-card::before {
        width: 5px;

        border-radius: 16px 0 0 16px;
    }


    .gvr-impact-card-power {
        border-top-width: 5px;
    }


    .gvr-impact-card-number {
        top: 15px;

        right: 18px;

        font-size: 34px;
    }


    .gvr-impact-card-icon {
        width: 56px;

        height: 56px;

        border-radius: 13px;
    }


    .gvr-impact-card-icon svg {
        width: 34px;

        height: 34px;
    }


    .gvr-impact-card-content {
        margin-top: 22px;
    }


    .gvr-impact-card-label {
        font-size: 9px;

        letter-spacing: 1.5px;
    }


    .gvr-impact-card-title {
        font-size: 21px;

        line-height: 1.2;
    }


    .gvr-impact-card-text {
        margin-top: 12px;

        font-size: 13px;

        line-height: 1.55;
    }


    .gvr-impact-active {
        top: 34px;

        right: 22px;

        font-size: 7px;

        padding: 5px 7px;
    }


    .gvr-impact-footer {
        margin-top: 30px;
    }


    .gvr-impact-footer-title {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .gvr-impact-footer-title span {
        margin: 0 3px;
    }


    .gvr-impact-footer-text {
        font-size: 12px;
    }

}


/* =========================================================
   STRAIGHT INDUSTRIAL JOURNEY LINE
   ========================================================= */

.gvr-impact-journey-line {
    position: relative;

    width: 100%;
    height: 115px;

    margin: 0 auto;

    z-index: 5;
}


/* =========================================================
   MAIN SOFT LINE
   ========================================================= */

.gvr-impact-straight-line {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 58px;

    height: 10px;

    background: #dcebe7;

    border-radius: 20px;

    z-index: 1;
}


/* =========================================================
   INNER DASHED LINE
   ========================================================= */

.gvr-impact-straight-line::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 4px;

    height: 2px;

    background-image: repeating-linear-gradient(
        to right,
        #087f6c 0,
        #087f6c 3px,
        transparent 3px,
        transparent 12px
    );

    border-radius: 10px;
}


/* =========================================================
   POINT
   ========================================================= */

.gvr-impact-point {
    position: absolute;

    top: 0;

    width: 80px;

    height: 100px;

    transform: translateX(-50%);

    z-index: 10;
}


/* =========================================================
   POINT POSITIONS
   ========================================================= */

.gvr-impact-point-build {
    left: 13%;
}

.gvr-impact-point-power {
    left: 50%;
}

.gvr-impact-point-restore {
    left: 87%;
}


/* =========================================================
   LABEL
   ========================================================= */

.gvr-impact-point-label {
    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    white-space: nowrap;

    color: #087c69;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.gvr-impact-point-build .gvr-impact-point-label {
    color: #b87316;
}


.gvr-impact-point-power .gvr-impact-point-label {
    color: #087c69;
}


.gvr-impact-point-restore .gvr-impact-point-label {
    color: #178d80;
}


/* =========================================================
   CIRCLE
   ========================================================= */

.gvr-impact-point-circle {
    position: absolute;

    left: 50%;

    top: 38px;

    transform: translateX(-50%);

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: #f8fafb;

    border: 4px solid #087f6c;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 15;
}


/* Inner dot */

.gvr-impact-point-circle span {
    width: 11px;

    height: 11px;

    border-radius: 50%;

    background: #087f6c;

    display: block;
}


/* BUILD */

.gvr-impact-point-build .gvr-impact-point-circle {
    border-color: #d18a2f;
}

.gvr-impact-point-build .gvr-impact-point-circle span {
    background: #d18a2f;
}


/* POWER */

.gvr-impact-point-power .gvr-impact-point-circle {
    border-color: #087f6c;
}

.gvr-impact-point-power .gvr-impact-point-circle span {
    background: #087f6c;
}


/* RESTORE */

.gvr-impact-point-restore .gvr-impact-point-circle {
    border-color: #178d80;
}

.gvr-impact-point-restore .gvr-impact-point-circle span {
    background: #178d80;
}


/* =========================================================
   SMALL GLOW AROUND POINT
   ========================================================= */

.gvr-impact-point-circle::after {
    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 50%;

    border: 1px solid rgba(8, 127, 108, 0.08);

    pointer-events: none;
}


.gvr-impact-point-build .gvr-impact-point-circle::after {
    border-color: rgba(209, 138, 47, 0.12);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .gvr-impact-journey-line {
        height: 90px;
    }

    .gvr-impact-straight-line {
        left: 7%;
        right: 7%;

        top: 48px;

        height: 8px;
    }

    .gvr-impact-straight-line::after {
        top: 3px;

        height: 2px;

        background-image: repeating-linear-gradient(
            to right,
            #087f6c 0,
            #087f6c 2px,
            transparent 2px,
            transparent 9px
        );
    }

    .gvr-impact-point-build {
        left: 10%;
    }

    .gvr-impact-point-power {
        left: 50%;
    }

    .gvr-impact-point-restore {
        left: 90%;
    }

    .gvr-impact-point-label {
        font-size: 8px;

        letter-spacing: 1.2px;
    }

    .gvr-impact-point-circle {
        top: 33px;

        width: 32px;

        height: 32px;

        border-width: 3px;
    }

    .gvr-impact-point-circle span {
        width: 8px;

        height: 8px;
    }

}


.hero-video {
    width: 100%;
    height: 100%;
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
}

.video-wrapper video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


.mdo-media {
    width: 100%;
    height: 100%;
}

.media-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.media-image video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}


/* Bottom text over video */

.media-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 20px 25px;

    color: #ffffff;

    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65),
        rgba(0, 0, 0, 0)
    );
}

.media-bottom strong {
    font-size: 13px;
    letter-spacing: 1px;
}



.civil-image {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.civil-image video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.career-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.career-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.career-container {
  position: relative;
  z-index: 2;
}

.career-about-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mobile-menu-close{
    display:none;
}


.csr-intro-right video {
  width: 100%;
  height: 800px;
  display: block;
  object-fit: cover;
  border-radius: 0;
}

/* =========================
   NO CURRENT OPENINGS
========================= */

.career-no-jobs {
    width: 100%;
    max-width: 720px;
    margin: 40px auto 20px;
    padding: 48px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 91, 67, 0.12);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.career-no-jobs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00875a;
}

.career-no-jobs::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -80px;
    background: rgba(0, 135, 90, 0.05);
    border-radius: 50%;
}

.career-no-jobs h3 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #111111;
}

.career-no-jobs p {
    max-width: 520px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #6d7471;
    font-weight: 400;
}


/* Small accent above heading */

.career-no-jobs h3::before {
    content: "✦";
    display: block;
    margin-bottom: 14px;
    font-size: 24px;
    color: #00875a;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .career-no-jobs {
        width: calc(100% - 30px);
        margin: 30px auto 10px;
        padding: 38px 22px;
        border-radius: 15px;
    }

    .career-no-jobs h3 {
        font-size: 22px;
    }

    .career-no-jobs p {
        font-size: 14px;
        line-height: 1.6;
    }

}

.career-job-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.career-no-jobs {
    width: 100%;
    max-width: 720px;
    margin: 40px auto 20px;
    padding: 48px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid rgba(0, 91, 67, 0.12);
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.career-no-jobs::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00875a;
}

.career-no-jobs::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -100px;
    right: -80px;
    background: rgba(0, 135, 90, 0.05);
    border-radius: 50%;
}

.career-no-jobs h3 {
    margin: 0 0 12px;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    color: #111111;
}

.career-no-jobs h3::before {
    content: "✦";
    display: block;
    margin-bottom: 14px;
    font-size: 24px;
    color: #00875a;
}

.career-no-jobs p {
    max-width: 520px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.7;
    color: #6d7471;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 767px) {

    .career-job-grid {
        display: flex;
        justify-content: center;
    }

    .career-no-jobs {
        width: calc(100% - 30px);
        margin: 30px auto 10px;
        padding: 38px 22px;
        border-radius: 15px;
    }

    .career-no-jobs h3 {
        font-size: 22px;
    }

    .career-no-jobs p {
        font-size: 14px;
        line-height: 1.6;
    }

}

.contact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}