/* @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap");

body {
    font-family: "DM Sans", sans-serif !important;
    text-transform: capitalize;
}
:root {
  --primary: #cdfad0;
  --secondary: #eaf7ef;
  --text: #000;
  --btn: #2aa14d;
}
/* 
body {
  font-family: "Manrope", sans-serif !important;
  text-transform: capitalize;
} */

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

body {
  background: #ffffff;
  transition:
    background-color 0.6s ease,
    color 0.6s ease;
}

/* 
.scroll-section{
    position: relative;
    z-index: 2;
    transition: color .5s;
}

body.dark-theme{
    background: #0d3b2a;
    color: #fff;
}
*/
/* body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6,
body.dark-theme p,
body.dark-theme span{
    color:#fff;
}  */

img {
  width: 100%;
}

.container {
  max-width: 1320px !important;
  width: 100%;
}

.logo-bg {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.logo-bg::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 650px;
  height: 650px;

  background: url("../image/bg-logo.png") no-repeat center;
  background-size: contain;

  transform: translate(-50%, -50%) rotate(-12deg);
  opacity: 0.06;

  filter: grayscale(20%) brightness(1.1);

  z-index: -1;
  pointer-events: none;
}

.navbar-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 15px 0px;
}

.navbar {
  padding: 0 40px;
}

.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.navbar ul li {
  position: relative;
}

.navbar ul li a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
}

.navbar ul li a {
  display: block;
  padding: 1px 9px;
  color: #000;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}

.navbar ul li a:hover {
  color: var(--btn);
}

.dropdown {
  position: relative;
}

.tab-uls {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: flex-start;
  align-items: start !important;
}

.dropdown:hover .mega-menu {
     display: grid;
  grid-template-columns: 0.7fr 1.15fr 1.15fr;
}

.mega-menu {
  display: flex;
  /*  display: grid;*/
  /*grid-template-columns: 0.7fr 1.15fr 1.15fr;*/
  width: 1080px;
  position: absolute;
  top: 100%;
  left: -410px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 999 !important;
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(42, 161, 77, 0.2) 0%,
      rgba(42, 161, 77, 0.12) 20%,
      rgba(42, 161, 77, 0.06) 40%,
      transparent 65%
    ),
    linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #f8fffa 100%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.dropdown:hover .mega-menu {
  opacity: 1;
  visibility: visible;
}

.tabs {
  border-right: 1px solid #eee;
  padding: 12px;
}

.content {
  border-right: 1px solid #eee;
  padding: 59px;
}

.tabs li {
  padding: 12px 14px;
  cursor: pointer;
  transition: 0.25s ease;
  border-radius: 8px;
  margin: 6px 10px;
  font-size: 14px;
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(42, 161, 77, 0.15) 0%,
    rgba(42, 161, 77, 0.08) 35%,
    rgba(255, 255, 255, 1) 100%
  );
}

.tabs li:hover {
  background: rgba(42, 161, 77, 0.1);
  color: #2aa14d;
}

.tabs li.active {
  background: #2aa14d;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 6px 18px rgba(42, 161, 77, 0.25);
}
a {
  text-decoration: none !important;
}
.tabs li a {
  color: #333 !important;
  font-size: 14px !important;
}
.tabs li a:hover {
  color: #fff !important;
}
.tabs li.active a {
  color: #fff !important;
  text-decoration: none;
}
.tabs li.active::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: #2aa14d;
  border-radius: 5px;
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease;
}

.tab-content.active {
  display: block;
}

.img-box {
  display: none;
  animation: fadeIn 0.3s ease;
  padding: 20px;
  border-radius: 16px;
}

.img-box img {
  width: 100%;
  border-radius: 12px;
  object-fit: contain;
  height: 400px;
}

.img-box.active {
  display: block;
}

.tab-content h3 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: #2aa14d;
  margin-bottom: 12px;
  font-family: "Poppins", sans-serif;
}

.tab-content p {
  font-size: 16px;
  line-height: 1.8;
  color: #6b7280;
  margin-bottom: 18px;
  font-family: "Inter", sans-serif;
}

.tab-content ul {
  padding-left: 20px;
  margin: 0;
}

.tab-content ul li {
  font-size: 15px;
  color: #374151;
  line-height: 1.9;
  margin-bottom: 6px;
  font-family: "Inter", sans-serif;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

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

.menu-toggle {
  display: none;
  font-size: 30px;
  cursor: pointer;
  font-weight: bold;
}
/* 
.btn-get-touch {
  background-color: #2aa14d;
  border: 2px solid #2aa14d;
  border-radius: 25px;
  padding: 8px 12px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  z-index: 1;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: color 0.4s ease;
}

.btn-get-touch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: #fff;
  z-index: -1;
  transition: height 0.4s ease;
}

.btn-get-touch:hover::before {
  height: 100%;
}

.btn-get-touch:hover {
  color: #000;
} */

.btn-get-touch {
  background: #2aa14d;
  border: 2px solid #2aa14d;
  border-radius: 30px;

  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;

  position: relative;
  overflow: hidden;
  z-index: 1;

  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  text-decoration: none !important;

  box-shadow: 0 6px 18px rgba(42, 161, 77, 0.25);

  transition:
    color 0.4s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.btn-get-touch::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;

  width: 0;
  height: 0;

  background: #fff;
  border-radius: 50%;

  transform: translate(-50%, -50%);
  transition:
    width 0.55s ease,
    height 0.55s ease;

  z-index: -1;
}
.btn-get-touch::after {
  content: "";
  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );

  transform: skewX(-20deg);

  transition: left 0.7s ease;
}
.btn-get-touch:hover {
  color: #2aa14d !important;

  transform: translateY(-4px) scale(1.03);

  box-shadow: 0 12px 28px rgba(42, 161, 77, 0.35);
}
.btn-get-touch:hover::before {
  width: 350px;
  height: 350px;
}
.btn-get-touch:hover::after {
  left: 140%;
}
.btn-get-touch:active {
  transform: translateY(-1px) scale(0.97);
}

.logo img {
  max-width: 70%;
}
/* 
.btn-black {
  display: inline-block;
  position: relative;
  background: #000;
  border-radius: 25px;
  padding: 8px 12px;
  font-weight: 700;
  border: 2px solid #000;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  z-index: 1;
  font-size: 14px;
}

.btn-black::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: #fff;
  z-index: -1;
  transition: 0.4s ease;
}

.btn-black:hover::before {
  height: 100%;
}

.btn-black:hover {
  color: #000;
} */
.btn-black {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  padding: 15px 20px;

  background: #000;
  border: 2px solid #000;
  border-radius: 50px;

  color: #fff !important;
  text-decoration: none !important;

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

  overflow: hidden;
  isolation: isolate;

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}
.btn-black::before {
  content: "";

  position: absolute;
  inset: 0;

  background: #fff;

  transform: translateY(100%);

  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);

  z-index: -1;
}
.btn-black::after {
  content: "";

  position: absolute;

  top: -30%;
  left: -100%;

  width: 45%;
  height: 160%;

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

  transform: rotate(20deg);

  transition: left 0.7s ease;
}
.btn-black:hover {
  color: #000 !important;

  transform: translateY(-4px);

  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
}
.btn-black:hover::before {
  transform: translateY(0);
}
.btn-black:hover::after {
  left: 140%;
}
.btn-black i {
  transition: transform 0.35s ease;
}
.btn-black:hover i {
  transform: translateX(6px);
}
.btn-black:active {
  transform: translateY(-1px) scale(0.97);
}
.button-nav {
  display: flex;
  gap: 10px;
}

.banner-section {
  position: relative;

}

.cards {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin-bottom: 90px;
  width: 100%;
}

.swiper {
  margin-left: 0px !important;
}

.custom-card {
  position: absolute;
  width: 100%;
  top: 0px;
  height: 100vh;
  background:
    radial-gradient(
      circle at 75% 45%,
      rgba(42, 161, 77, 0.2) 0%,
      rgba(42, 161, 77, 0.12) 20%,
      rgba(42, 161, 77, 0.06) 40%,
      transparent 65%
    ),
    linear-gradient(90deg, #ffffff 0%, #ffffff 45%, #f8fffa 100%);
  color: #000;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  /* box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2); */
}

/* .card1 {
}
.card2 {
  top: 30px;
}
.card3 {
  top: 60px;
}
.card4 {
  top: 90px;
}
.card4 {
  top: 120px;
} */

.opacity {
  -moz-transition: 0.4s ease;
  -ms-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  opacity: 0.6;
}

.scale {
  moz-transition: 0.4s ease;
  -ms-transition: 0.4s ease;
  -o-transition: 0.4s ease;
  transition: 0.4s ease;
  -webkit-transition: 0.4s ease;
  width: 95%;
}
.slider-heading {
    max-width: 720px;
    margin: 0;

    font-size: 48px;
    line-height: 1.08;

    font-weight: 700;
    letter-spacing: -2px;

    color: #111827;
}

.slider-heading span {
    color: #2aa14d;
}

.hero-description {
    max-width: 600px;

    margin-bottom: 0;

    color: #667085;

    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
}

.hero-rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 9px 15px;

    border: 1px solid rgba(42, 161, 77, 0.15);
    border-radius: 50px;

    background: rgba(42, 161, 77, 0.05);

    color: #667085;

    font-size: 13px;
    font-weight: 500;

    transition: all 0.3s ease;
}

.hero-rating img {
    width: 90px !important;
    height: auto;
    display: block;
}

.hero-rating strong {
    color: #111827;
    font-weight: 700;
}

.hero-rating:hover {
    border-color: rgba(42, 161, 77, 0.35);

    background: rgba(42, 161, 77, 0.09);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(42, 161, 77, 0.10);
}

/* body.dark-theme .slider-heading {
    color: #ffffff;
} */

body.dark-theme .hero-description {
    color: #aebdca;
}

body.dark-theme .hero-rating {
    background: rgba(42, 161, 77, 0.08);
    border-color: rgba(42, 161, 77, 0.20);
    color: #b8c5cf;
}

body.dark-theme .hero-rating strong {
    color: #ffffff;
}


/* Mobile */

@media (max-width: 768px) {

    .slider-heading {
        font-size: 42px;
        line-height: 1.12;
        letter-spacing: -1.2px;
    }

    .hero-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-rating {
        font-size: 12px;
        padding: 8px 12px;
    }

    .hero-rating img {
        width: 78px !important;
    }
}

@media (max-width: 480px) {

    .slider-heading {
        font-size: 35px;
    }

    .hero-rating {
        gap: 8px;
    }
}

.logoSwiper {
  width: 100%;
  max-width: 500px;
}

.logoSwiper img {
  width: 100%;
  height: 100px;
  object-fit: contain;
}

.slider-heading span {
  background: linear-gradient(90deg, #14532d, #15803d, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-section {
  overflow: hidden;
  background: #fff;
}

.logo-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  padding: 10px 0 40px;
}

.logo-track {
  display: flex;
  gap: 40px;
  align-items: center;
  width: max-content;
}

.partner-logo {
  flex: 0 0 auto;
  width: 180px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: 0.4s;
}

.partner-logo:hover {
  transform: translateY(-12px) scale(1.08);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.18);
}

.partner-logo img {
  max-width: 140px;
  max-height: 80px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: 0.4s;
}

.partner-logo:hover img {
  filter: grayscale(0%);
}

.logo-heading {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 60px;
  overflow: hidden;
  background: linear-gradient(90deg, #14532d, #15803d, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.pd-101 {
  padding: 80px 0px;
  position: relative;
}

.number-count {
  border: 2px solid #22c55e;
  border-radius: 25px;
  padding: 25px;
  /*width: 1200px;*/
  margin: 0 auto;
}

.counter-con {
  padding: 12px 14px;
  cursor: pointer;
  transition: 0.25s ease;
  border-radius: 8px;
  margin: 56px 0px;
  background: linear-gradient(
    90deg,
    rgba(42, 161, 77, 0.15) 0%,
    rgba(42, 161, 77, 0.08) 35%,
    rgba(255, 255, 255, 1) 100%
  );
}

.counter-box {
  background: linear-gradient(90deg, #14532d, #15803d, #22c55e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  border-radius: 10px;
  margin: 20px 0;
}

.counter {
  font-size: 36px;
  font-weight: bold;
  color: #22c55e;
}

.btn-mg {
  margin-top: -25px;
  float: right;
}

.founder-section {
  padding: 100px 0;
  background: #f8fbff;
  position: relative;
  overflow: hidden;
}

.founder-section::before {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  background: #2aa14d15;
  border-radius: 50%;
  top: -120px;
  right: -120px;
}

.founder-image-box {
  position: relative;
  text-align: center;
}

.founder-shape {
  position: absolute;
  width: 90%;
  height: 105%;
  left: 1%;
  top: -1%;
  border: 3px dashed #2aa14d;
  border-radius: 25px;
  transform: rotate(-6deg);
}
.founder-img {
  width: 100%;
  /* max-width:430px; */
  border-radius: 25px;
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 10px;
  height: 600px;
  object-fit: cover;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.founder-badge {
  position: absolute;
  bottom: 25px;
  right: 20px;
  background: #2aa14d;
  color: #fff;
  padding: 12px 22px;
  border-radius: 50px;
  font-weight: 600;
  z-index: 3;
  box-shadow: 0 15px 35px rgba(42, 161, 77, 0.35);
}

.founder-badge i {
  margin-right: 8px;
}

.head-span {
  align-items: center;
  gap: 8px;
  color: #2aa14d;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.logo-heading {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 20px;
}

.founder-content {
  position: relative;
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

.quote-icon {
  font-size: 55px;
  color: #2aa14d20;
  position: absolute;
  top: 18px;
  right: 25px;
}

.founder-content p {
  color: #555;
  line-height: 1.9;
  margin-bottom: 18px;
  text-align: justify;
}

.signature-box {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #eee;
}

.signature-box h5 {
  margin: 0;
  font-weight: 700;
}

.signature-box span {
  font-weight: 600;
}

.work-process-section {
  position: relative;

  padding: 140px 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at top left,
      rgba(42, 161, 77, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 180, 255, 0.08),
      transparent 35%
    ),
    #07131f;
}

.work-process-section::before {
  content: "";

  position: absolute;

  width: 450px;

  height: 450px;

  left: -180px;

  top: -180px;

  border-radius: 50%;

  background: #2aa14d;

  filter: blur(180px);

  opacity: 0.12;
}

.work-process-section::after {
  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

  right: -180px;

  bottom: -180px;

  border-radius: 50%;

  background: #00bfff;

  filter: blur(180px);

  opacity: 0.08;
}

.section-heading {
  text-align: center;

  max-width: 760px;

  margin: auto;

  margin-bottom: 90px;
}

.sub-title {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 28px;

  border-radius: 50px;

  background: rgba(42, 161, 77, 0.12);

  border: 1px solid rgba(42, 161, 77, 0.35);

  color: #2aa14d;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: 2px;

  text-transform: uppercase;
}

.section-heading h2 {
  margin-top: 28px;

  font-size: 48px;

  font-weight: 800;

  line-height: 1.3;
}

.section-heading h2 span {
  color: #2aa14d;
}

.section-heading p {
  margin-top: 20px;

  color: #9fb2c3;

  font-size: 18px;
}

.workflow-wrapper {
  display: grid;

  grid-template-columns: 280px 1fr;

  gap: 80px;

  align-items: start;
}

.workflow-left {
  position: sticky;

  top: 120px;
}

.timeline {
  position: relative;

  padding-left: 40px;
}

.timeline::before {
  content: "";

  position: absolute;

  left: 8px;

  top: 0;

  width: 2px;

  height: 100%;

  background: #213649;
}

.timeline-fill {
  position: absolute;

  left: 8px;

  top: 0;

  width: 2px;

  height: 0;

  background: #2aa14d;

  box-shadow: 0 0 18px #2aa14d;
}

.timeline-step {
  position: relative;

  margin-bottom: 45px;

  color: #8396a8;

  font-size: 18px;

  font-weight: 600;

  transition: 0.35s;
}

.timeline-step:last-child {
  margin-bottom: 0;
}

.timeline-step span {
  position: absolute;

  left: -40px;

  top: 5px;

  width: 18px;

  height: 18px;

  border-radius: 50%;

  border: 3px solid #2aa14d;

  background: #07131f;

  transition: 0.35s;
}

.timeline-step.active {
  color: #fff;
}

.timeline-step.active span {
  background: #2aa14d;

  box-shadow:
    0 0 18px #2aa14d,
    0 0 35px rgba(42, 161, 77, 0.45);
}

.workflow-right {
  position: relative;
  width: 100%;
}

.process-card {
  position: absolute;

  inset: 0;

  width: 100%;

  min-height: 500px;

  padding: 55px;

  border-radius: 32px;

  overflow: hidden;

  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.08),
    rgba(255, 255, 255, 0.03)
  );

  backdrop-filter: blur(18px);

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

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px rgba(255, 255, 255, 0.08);

  opacity: 0;

  visibility: hidden;

  transform: translateY(120px);

  will-change: transform, opacity;
}

.process-card:first-child {
  opacity: 1;

  visibility: visible;

  transform: translateY(0);
}

.process-card::before {
  content: "";

  position: absolute;

  width: 340px;

  height: 340px;

  right: -140px;

  top: -140px;

  border-radius: 50%;

  background: #2aa14d;

  filter: blur(120px);

  opacity: 0.15;
}

.process-card::after {
  content: "";

  position: absolute;

  left: -120px;

  bottom: -120px;

  width: 260px;

  height: 260px;

  border-radius: 50%;

  background: #00c2ff;

  filter: blur(120px);

  opacity: 0.08;
}

.number {
  position: absolute;

  right: 35px;

  top: 25px;

  font-size: 110px;

  font-weight: 900;

  color: rgba(255, 255, 255, 0.05);

  line-height: 1;
}

.icon {
  width: 90px;

  height: 90px;

  border-radius: 24px;
  margin: auto;
  display: flex;

  align-items: center;

  justify-content: start;

  margin-bottom: 35px;

  font-size: 34px;

  color: #2aa14d;

  background: rgba(42, 161, 77, 0.12);

  border: 1px solid rgba(42, 161, 77, 0.3);

  box-shadow: 0 10px 30px rgba(42, 161, 77, 0.15);
}
.icon i {
  margin: auto;
}
.process-card h3 {
  font-size: 40px;

  font-weight: 800;

  margin-bottom: 20px;
  text-align: center;

  line-height: 1.2;
  color: #fff;
}

.process-card p {
  color: #aebdca;

  font-size: 18px;

  line-height: 1.9;
  text-align: center;

  max-width: 100%;

  margin-bottom: 35px;
}

.process-card ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 35px;
  padding: 0;
}

.process-card li {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px 18px;

  border-radius: 50px;

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

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

  color: #e8eef5;

  font-size: 15px;

  font-weight: 500;

  transition: 0.35s ease;

  cursor: default;
}

.process-card li::before {
  content: "";

  width: 28px;

  height: 28px;

  border-radius: 50%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #2aa14d, #39d96b);

  color: #fff;

  font-family: "Font Awesome 6 Free";

  font-weight: 900;

  content: "\f00c";

  box-shadow: 0 5px 15px rgba(42, 161, 77, 0.35);
}

.process-card li:hover {
  transform: translateY(-4px);

  border-color: #2aa14d;

  background: rgba(42, 161, 77, 0.12);

  box-shadow: 0 12px 30px rgba(42, 161, 77, 0.18);
}

.process-card li:hover::before {
  transform: scale(1.08);
}

.process-card.active {
  border-color: rgba(42, 161, 77, 0.45);

  box-shadow:
    0 35px 90px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(42, 161, 77, 0.12);
}

.process-card:hover {
  transform: translateY(-6px);

  transition: 0.35s;
}

.process-card:hover .icon {
  transform: rotate(-8deg) scale(1.06);

  transition: 0.35s;
}

.process-card,
.timeline-step,
.icon {
  transition:
    transform 0.45s ease,
    opacity 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #07131f;
}

::-webkit-scrollbar-thumb {
  background: #2aa14d;

  border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
  background: #38c45e;
}

.gsap-card {
  will-change: transform, opacity;

  backface-visibility: hidden;

  transform-style: preserve-3d;
}

::selection {
  background: #2aa14d;

  color: #fff;
}

button,
a {
  outline: none;

  text-decoration: none;
}

img {
  max-width: 100%;

  display: block;
}

.portfolio-section {
  padding: 80px 0;
  background: #f8f8f8;
  overflow: hidden;
}

.marquee {
  overflow: hidden;
  margin: 25px 0;
}

.marquee-content {
  display: flex;
  gap: 20px;
  width: max-content;
}

.marquee img {
  width: 300px;
  height: 220px;
  object-fit: cover;
  border-radius: 12px;
  transition: 0.3s;
  flex-shrink: 0;
}

.marquee img:hover {
  transform: scale(1.05);
}

.marquee:hover .marquee-content {
  animation-play-state: paused;
}

.marquee-left .marquee-content {
  animation: scrollLeft 25s linear infinite;
}

.marquee-right .marquee-content {
  animation: scrollRight 25s linear infinite;
}

@keyframes scrollLeft {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes scrollRight {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.pd-101 {
  padding: 80px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f2fbf5 100%);
}

.scroll-container {
  height: 500vh;

  position: relative;
}

.sticky-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.bg-text {
  position: absolute;
  font-size: 105px;
  font-weight: 900;
  color: 000;
  letter-spacing: 10px;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
  z-index: -1;
  opacity: 0.4;
}

.arc-carousel {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
}

.review-card {
  background: #fff;
  border: 2px solid #2aa14d20;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  width: 100% !important;
  padding: 25px !important;
  text-align: center;
}

.review-header h3 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: #222;
}

.review-header span {
  display: block;
  margin-top: 6px;
  color: #2aa14d;
  font-size: 15px;
  font-weight: 600;
}

.review-stars {
  color: #2aa14d;
  font-size: 22px;
  letter-spacing: 4px;
  margin: 20px 0 15px;
}

.review-text {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  font-style: italic;
}

.review-footer {
  margin-top: 25px;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.review-company {
  color: #2aa14d;
  font-weight: 700;
  font-size: 15px;
}

.card {
  position: absolute;
  width: 520px;
  height: 360px;
  border-radius: 24px;
  background: rgba(14, 45, 28, 0.92);
  /* Dark Green Glass */
  border: 1px solid rgba(42, 161, 77, 0.25);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.75),
    0 0 30px rgba(42, 161, 77, 0.35);

  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  backdrop-filter: blur(25px);
  will-change: transform, opacity;
  transform-origin: center bottom;
  transition:
    border-color 0.3s,
    box-shadow 0.3s;
}

.card.active {
  border: 1px solid rgba(42, 161, 77, 0.8);
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.9),
    0 0 20px rgba(42, 161, 77, 0.35),
    0 0 40px rgba(42, 161, 77, 0.45),
    0 0 70px rgba(42, 161, 77, 0.25);
}

.card-header {
  display: flex;
  gap: 10px;
  align-items: center;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 16px;
  border-radius: 30px;
  width: fit-content;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
}

.card-body {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin: 15px 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.card-desc {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.5;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-tag {
  font-size: 1.8rem;
  font-weight: 700;
  color: #ec4899;
}

.card {
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .card {
    width: 88vw;
    height: 350px;
  }
}

.technology-section {
  padding: 80px 5%;
  background: #fff;
}

.tech-header {
  text-align: center;
}

.sub-title {
  color: #2aa14d;
  font-weight: 600;
  letter-spacing: 2px;
}

.tech-header h2 {
  font-size: 45px;
  margin: 15px 0;
}

.tech-header h2 span {
  color: #2aa14d;
}

.tech-header p {
  max-width: 700px;
  margin: auto;
  color: #666;
}

/* Marquee */

.logo-marquee {
  overflow: hidden;
  margin: 40px auto;
}

.marquee-track {
  display: flex;
  gap: 50px;
  width: max-content;
  animation: scroll 18s linear infinite;
}

.marquee-track img {
  width: 45px;
  height: 45px;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.technology-wrapper {
  display: flex;
  gap: 30px;
  margin-top: 40px;
}

.tech-tabs {
  width: 230px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tech-tabs button {
  padding: 18px;
  border: none;
  background: linear-gradient(
    90deg,
    rgba(42, 161, 77, 0.15) 0%,
    rgba(42, 161, 77, 0.08) 35%,
    rgba(255, 255, 255, 1) 100%
  );
  border-radius: 14px;
  text-align: left;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
}

.tech-tabs button.active,
.tech-tabs button:hover {
  background: #2aa14d;
  color: #fff;
}

.tech-content {
  flex: 1;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 25px;
  padding: 30px;
}

.tech-grid {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.tech-grid.active {
  display: block;
}

.tech-card {
  height: 120px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  transition: 0.3s;
}

.tech-card img {
  width: 45px;
  height: 45px;
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(42, 161, 77, 0.25);
}

.tech-card span {
  color: #555;
}

@media (max-width: 768px) {
  .technology-wrapper {
    flex-direction: column;
  }

  .tech-tabs {
    width: 100%;
  }

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

.logo-marquee {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 15px 0;
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  gap: 40px;
  animation: marquee 25s linear infinite;
}

.marquee-track img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
  transition: transform 0.3s;
}

.marquee-track img:hover {
  transform: scale(1.1);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.client-review {
  background:
    radial-gradient(
      circle at top left,
      rgba(42, 161, 77, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(0, 180, 255, 0.08),
      transparent 35% 35%
    ),
    #07131f;
  height: 100%;
  display: flex;
  justify-content: center;
  /* align-items: center; */
  overflow: hidden;
}

.carousel-review {
  width: 100%;
  height: 55vh;
  position: relative;
  /* perspective: 1800px; */
  /* top: 118px; */
}

.card-review {
  position: absolute;

  width: 43%;
  /* height: 450px; */

  left: 50%;
  top: 50%;

  transform-style: preserve-3d;

  border-radius: 24px;
  overflow: hidden;

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.12),
    0 0 40px rgba(42, 161, 77, 0.18);

  border: 4px solid #2aa14d;

  background: white;
}

.card-review img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.card-review::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(to top, rgba(42, 161, 77, 0.25), transparent 40%);
}

@media (max-width: 768px) {
  .scroll-container {
    height: auto !important;
    position: relative;
  }

  .sticky-wrapper {
    position: relative !important;
    top: auto !important;

    width: 100%;
    height: auto !important;
    min-height: 0 !important;

    display: block;

    overflow: hidden;

    padding: 20px 0 50px;
  }

  .bg-text {
    display: none;
  }

  /* =========================================
       CAROUSEL
    ========================================= */

  .arc-carousel {
    position: relative !important;

    width: 100% !important;
    height: auto !important;

    display: flex !important;

    align-items: stretch;
    justify-content: flex-start;

    gap: 0;

    overflow: hidden;

    perspective: none !important;
  }

  /* =========================================
       ALL CARDS
    ========================================= */

  .arc-carousel .card {
    position: relative !important;

    top: auto !important;
    left: auto !important;

    flex: 0 0 100%;

    width: 100% !important;
    max-width: none !important;

    height: 285px !important;

    margin: 0;

    padding: 20px 16px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    pointer-events: auto;

    border-radius: 20px;

    box-sizing: border-box;

    transition: none !important;
  }

  /* =========================================
       REVIEW CARD
    ========================================= */

  .review-card {
    width: calc(100vw - 30px) !important;

    flex: 0 0 calc(100vw - 30px);

    margin: 0 15px;

    height: 285px !important;

    padding: 20px 16px !important;

    border-radius: 20px;

    text-align: center;
  }

  .review-header h3 {
    font-size: 20px;

    margin: 0;
  }

  .review-header span {
    font-size: 12px;

    margin-top: 5px;
  }

  .review-stars {
    font-size: 17px;

    letter-spacing: 2px;

    margin: 14px 0 10px;
  }

  .review-text {
    font-size: 13px;

    line-height: 1.65;
  }

  .review-footer {
    margin-top: 15px;

    padding-top: 10px;
  }

  .review-company {
    font-size: 12px;
  }
}

/* =========================================================
   430px
========================================================= */

@media (max-width: 430px) {
  .sticky-wrapper {
    padding: 15px 0 35px;
  }

  .arc-carousel .card {
    flex-basis: calc(100vw - 24px);

    width: calc(100vw - 24px) !important;

    height: 270px !important;
  }

  .review-card {
    flex-basis: calc(100vw - 24px);

    width: calc(100vw - 24px) !important;

    margin: 0 12px;

    height: 270px !important;

    padding: 18px 14px !important;
  }

  .review-header h3 {
    font-size: 18px;
  }

  .review-header span {
    font-size: 11px;
  }

  .review-stars {
    font-size: 15px;

    margin: 12px 0 9px;
  }

  .review-text {
    font-size: 12px;

    line-height: 1.6;
  }

  .review-company {
    font-size: 11px;
  }
}

/* =========================================================
   360px
========================================================= */

@media (max-width: 360px) {
  .arc-carousel .card {
    flex-basis: calc(100vw - 20px);

    width: calc(100vw - 20px) !important;

    height: 260px !important;
  }

  .review-card {
    flex-basis: calc(100vw - 20px);

    width: calc(100vw - 20px) !important;

    margin: 0 10px;

    height: 260px !important;

    padding: 16px 12px !important;
  }

  .review-header h3 {
    font-size: 17px;
  }

  .review-text {
    font-size: 11.5px;
  }
}

/* =========================================================
   DIGITAL MARKETING FORM SECTION
========================================================= */

.form-section {
  position: relative;

  padding: 120px 0;

  background:
    radial-gradient(
      circle at 10% 20%,
      rgba(42, 161, 77, 0.12),
      transparent 35%
    ),
    radial-gradient(circle at 90% 80%, rgba(42, 161, 77, 0.1), transparent 35%),
    #f8fbf9;

  overflow: hidden;
}

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

.form-intro {
  position: relative;

  padding-right: 35px;
}

.form-label {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 10px 18px;

  border-radius: 50px;

  background: rgba(42, 161, 77, 0.1);

  border: 1px solid rgba(42, 161, 77, 0.25);

  color: #2aa14d;

  font-size: 13px;

  font-weight: 700;

  letter-spacing: 1.5px;
}

.form-intro h2 {
  margin: 25px 0 20px;

  font-size: 52px;

  line-height: 1.15;

  font-weight: 800;

  color: #07131f;
}

.form-intro h2 span {
  display: block;

  background: linear-gradient(90deg, #14532d, #15803d, #22c55e);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;
}

.form-intro-text {
  max-width: 570px;

  color: #607080;

  font-size: 17px;

  line-height: 1.8;

  margin-bottom: 30px;
}

/* =========================================================
   FOUNDER MESSAGE
========================================================= */

.founder-message {
  position: relative;

  padding: 32px;

  border-radius: 25px;

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

  border: 1px solid rgba(42, 161, 77, 0.15);

  box-shadow: 0 20px 60px rgba(20, 83, 45, 0.08);

  overflow: hidden;
}

.founder-message::before {
  content: "";

  position: absolute;

  width: 140px;

  height: 140px;

  right: -60px;

  top: -60px;

  border-radius: 50%;

  background: rgba(42, 161, 77, 0.08);
}

.quote-mark {
  color: #2aa14d;

  font-size: 28px;

  margin-bottom: 12px;
}

.founder-message p {
  position: relative;

  color: #425466;

  font-size: 16px;

  line-height: 1.8;

  font-style: italic;

  margin: 0 0 25px;
}

.founder-info {
  display: flex;

  align-items: center;

  gap: 14px;

  border-top: 1px solid #e8eee9;

  padding-top: 20px;
}

.founder-avatar {
  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(135deg, #14532d, #22c55e);

  color: #fff;

  font-size: 14px;

  font-weight: 800;

  box-shadow: 0 8px 20px rgba(42, 161, 77, 0.25);
}

.founder-info h4 {
  margin: 0;

  color: #10231a;

  font-size: 16px;

  font-weight: 700;
}

.founder-info span {
  display: block;

  margin-top: 3px;

  color: #2aa14d;

  font-size: 13px;

  font-weight: 600;
}

/* =========================================================
   POINTS
========================================================= */

.form-points {
  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  margin-top: 25px;
}

.form-points div {
  display: flex;

  align-items: center;

  gap: 7px;

  color: #435466;

  font-size: 13px;

  font-weight: 600;
}

.form-points i {
  color: #2aa14d;

  font-size: 15px;
}

/* =========================================================
   FORM BOX
========================================================= */

.digital-form {
  position: relative;

  padding: 42px;

  border-radius: 30px;

  background: linear-gradient(145deg, #ffffff, #f7fcf8);

  border: 1px solid rgba(42, 161, 77, 0.18);

  box-shadow: 0 30px 80px rgba(7, 19, 31, 0.12);

  overflow: hidden;
}

.digital-form::before {
  content: "";

  position: absolute;

  width: 220px;

  height: 220px;

  right: -100px;

  top: -100px;

  border-radius: 50%;

  background: #2aa14d;

  opacity: 0.07;

  filter: blur(20px);
}

.form-header {
  position: relative;

  margin-bottom: 28px;
}

.form-header > span {
  color: #2aa14d;

  font-size: 12px;

  font-weight: 800;

  letter-spacing: 2px;
}

.form-header h3 {
  margin: 10px 0;

  color: #07131f;

  font-size: 30px;

  font-weight: 800;

  line-height: 1.25;
}

.form-header h3 strong {
  color: #2aa14d;
}

.form-header p {
  color: #718096;

  font-size: 14px;

  line-height: 1.6;

  margin: 0;
}

/* =========================================================
   FORM ROW
========================================================= */

.form-row {
  display: grid;

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

  gap: 15px;
}

.form-group {
  margin-bottom: 17px;
}

.form-group label,
.service-title label {
  display: block;

  margin-bottom: 8px;

  color: #25352c;

  font-size: 13px;

  font-weight: 700;
}

.input-box {
  position: relative;

  display: flex;

  align-items: center;

  border: 1px solid #dce8df;

  background: #fff;

  border-radius: 12px;

  transition: 0.3s ease;
}

.input-box:focus-within {
  border-color: #2aa14d;

  box-shadow: 0 0 0 4px rgba(42, 161, 77, 0.09);
}

.input-box > i {
  width: 45px;

  text-align: center;

  color: #2aa14d;

  font-size: 14px;
}

.input-box input,
.input-box textarea {
  width: 100%;

  border: none;

  outline: none;

  background: transparent;

  color: #1d2b23;

  font-size: 14px;

  padding: 14px 12px 14px 0;

  font-family: inherit;
}

.input-box input::placeholder,
.input-box textarea::placeholder {
  color: #9ba9a1;
}

.textarea-box {
  align-items: flex-start;
}

.textarea-box > i {
  padding-top: 16px;
}

.input-box textarea {
  resize: vertical;

  min-height: 105px;
}

/* =========================================================
   SERVICES RADIO
========================================================= */

.service-title {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin: 5px 0 12px;
}

.service-title label {
  margin: 0;
}

.service-title span {
  color: #8a9990;

  font-size: 11px;
}

.service-options {
  display: grid;

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

  gap: 10px;

  margin-bottom: 20px;
}

.service-option {
  position: relative;

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 11px 12px;

  border: 1px solid #dfe9e2;

  border-radius: 12px;

  background: #fff;

  color: #4a5a50;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

  transition: 0.3s ease;
}

.service-option input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}

.radio-design {
  width: 30px;

  height: 30px;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 8px;

  background: #f0f8f2;

  color: #2aa14d;

  font-size: 13px;

  transition: 0.3s ease;
}

.service-option:hover {
  border-color: rgba(42, 161, 77, 0.45);

  transform: translateY(-2px);
}

.service-option:has(input:checked) {
  border-color: #2aa14d;

  background: rgba(42, 161, 77, 0.07);

  color: #14532d;

  box-shadow: 0 7px 20px rgba(42, 161, 77, 0.1);
}

.service-option:has(input:checked) .radio-design {
  background: #2aa14d;

  color: #fff;

  box-shadow: 0 5px 15px rgba(42, 161, 77, 0.25);
}

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

.form-submit {
  width: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  border: none;

  border-radius: 14px;

  padding: 17px 25px;

  background: linear-gradient(90deg, #14532d, #15803d, #22c55e);

  color: #fff;

  font-size: 15px;

  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 15px 30px rgba(42, 161, 77, 0.25);

  transition: 0.3s ease;
}

.form-submit:hover {
  transform: translateY(-3px);

  box-shadow: 0 20px 40px rgba(42, 161, 77, 0.35);
}

.form-submit i {
  transition: 0.3s ease;
}

.form-submit:hover i {
  transform: translateX(5px);
}

.form-note {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  margin-top: 14px;

  color: #89968e;

  font-size: 11px;
}

.form-note i {
  color: #2aa14d;
}

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

/* .main-footer {
  position: relative;

  overflow: hidden;

  padding: 90px 0 0;

  color: #dce8e2;

  background:
    radial-gradient(
      circle at left top,
      rgba(42, 161, 77, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at right bottom,
      rgba(0, 180, 255, 0.08),
      transparent 35%
    ),
    rgb(7, 19, 31);
} */
.main-footer {
    position: relative;
    overflow: hidden;
    padding: 90px 0 0;
    color: #dce8e2;
    /* background: #07131f; */
}

.main-footer .footer-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.main-footer .footer-video-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at left top,
            rgba(42, 161, 77, 0.20),
            transparent 35%
        ),
        radial-gradient(
            circle at right bottom,
            rgba(0, 180, 255, 0.10),
            transparent 35%
        ),
        rgba(7, 19, 31, 0.50);
    z-index: 1;
}

.main-footer > *:not(.footer-bg-video):not(.footer-video-overlay) {
    position: relative;
    z-index: 2;
}
/* Background Glow */
/* 
.footer-glow {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(100px);

  opacity: 0.15;
}

.footer-glow-one {
  width: 300px;
  height: 300px;

  left: -150px;
  top: 150px;

  background: #2aa14d;
}

.footer-glow-two {
  width: 350px;
  height: 350px;

  right: -180px;
  bottom: 100px;

  background: #00bfff;
} */



.footer-location-section {
  position: relative;

  display: grid;

  grid-template-columns:
    1.25fr
    1fr
    1fr
    1fr;

  gap: 25px;

  padding-bottom: 45px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-brand {
  padding: 10px 20px 10px 0;
}

.footer-brand img {
  width: 170px;

  height: auto;

  object-fit: contain;

  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 300px;

  color: #fff;

  font-size: 14px;

  line-height: 1.8;

  margin-bottom: 20px;
}

.footer-contact {
  display: flex;

  flex-direction: column;

  gap: 10px;
}

.footer-contact a {
  color: #c9d8d1;

  font-size: 13px;

  display: flex;

  align-items: center;

  gap: 10px;

  transition: 0.3s;
}

.footer-contact a i {
  color: #2aa14d;

  width: 18px;
}

.footer-contact a:hover {
  color: #2aa14d;

  transform: translateX(4px);
}

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

.location-card {
  padding: 20px;

  border-radius: 20px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0.025)
  );

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

  backdrop-filter: blur(15px);

  transition: 0.35s ease;
}

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

  border-color: rgba(42, 161, 77, 0.45);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(42, 161, 77, 0.08);
}

.location-title {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 10px;
}

.location-title i {
  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  background: rgba(42, 161, 77, 0.12);

  color: #2aa14d;
}

.location-title h4 {
  margin: 0;

  color: #fff;

  font-size: 18px;

  font-weight: 700;
}

.location-card p {
  color: #fff;

  font-size: 14px;

  line-height: 1.6;

  min-height: 55px;

  margin-bottom: 15px;
}

/* Map */

.location-map {
  width: 100%;

  height: 120px;

  overflow: hidden;

  border-radius: 12px;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.location-map iframe {
  width: 100%;

  height: 100%;

  border: 0;

  filter: grayscale(0.25) contrast(1.05);
}

/* =====================================================
   CHANDIGARH
===================================================== */

.chandigarh-location {
  position: relative;

  margin-top: 30px;
  margin-bottom: 45px;

  padding: 25px;

  border-radius: 24px;

  background: linear-gradient(
    135deg,
    rgba(42, 161, 77, 0.08),
    rgba(255, 255, 255, 0.025)
  );

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.chandigarh-content {
  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: 18px;
}

.chandigarh-content p {
  margin: 0;

  color: #fff;

  font-size: 13px;
}

.large-map {
  height: 210px;

  overflow: hidden;

  border-radius: 16px;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

.large-map iframe {
  width: 100%;

  height: 100%;

  border: 0;

  filter: grayscale(0.25) contrast(1.05);
}

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

.footer-links-wrapper {
  display: grid;

  grid-template-columns:
    1.3fr
    0.8fr
    1fr
    1.3fr;

  gap: 50px;

  padding: 65px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-column h3 {
  color: #fff;

  font-size: 17px;

  font-weight: 700;

  margin: 0 0 10px;
}

.footer-line {
  display: block;

  width: 42px;

  height: 3px;

  border-radius: 10px;

  background: linear-gradient(90deg, #2aa14d, #22c55e);

  margin-bottom: 22px;
}

.footer-column p {
  color: #fff;

  font-size: 14px;

  line-height: 1.8;

  margin-bottom: 20px;
}
.footer-menu-1 {
  display: flex;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
}
.footer-menu-1 li a {
  color: #fff;
}
/* Contact List */

.footer-column ul {
  list-style: none;

  padding: 0;

  margin: 0;
}

.footer-about ul {
  display: flex;

  flex-direction: column;

  gap: 12px;
}

.footer-about li {
  display: flex;

  gap: 10px;

  color: #fff;

  font-size: 14px;

  line-height: 1.5;
}

.footer-about li i {
  color: #2aa14d;

  margin-top: 2px;
}

/* Menu */

.footer-menu {
  display: flex;

  flex-direction: column;

  gap: 11px;
}

.footer-menu li a {
  position: relative;
  text-decoration: none;
  color: #fff;

  font-size: 14px;

  transition: 0.3s;

  padding-left: 0;
}

.footer-menu li a::before {
  content: "→";

  color: #2aa14d;

  margin-right: 8px;

  opacity: 0;

  transform: translateX(-5px);

  display: inline-block;

  transition: 0.3s;
}

.footer-menu li a:hover {
  color: #2aa14d;

  padding-left: 4px;
}

.footer-menu li a:hover::before {
  opacity: 1;

  transform: translateX(0);
}

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

.footer-social {
  display: flex;

  gap: 10px;

  margin-top: 25px;
}

.footer-social a {
  width: 38px;

  height: 38px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: #cbd8d1;

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

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

  transition: 0.35s;
}

.footer-social a:hover {
  color: #fff;

  background: #2aa14d;

  border-color: #2aa14d;

  transform: translateY(-5px);

  box-shadow: 0 10px 25px rgba(42, 161, 77, 0.3);
}

.footer-bottom {
  min-height: 75px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;
}

.footer-bottom p {
  margin: 0;

  color: #718595;

  font-size: 12px;
}

.footer-bottom strong {
  color: #2aa14d;
}

.footer-bottom-links {
  display: flex;

  align-items: center;

  gap: 12px;
}

.footer-bottom-links a {
  color: #718595;

  font-size: 12px;

  transition: 0.3s;
}

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

.footer-bottom-links span {
  color: #344957;
}
.footer-brand-bg {
  width: 100%;
  text-align: center;

  font-size: 128px;
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -5px;

  color: rgba(42, 161, 77, 0.08);
  -webkit-text-stroke: 2px rgba(42, 161, 77, 0.35);

  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%);
  /* margin-top: 80px;
    margin-bottom: -10px; */
}

.serve-section {
  position: relative;
  overflow: hidden;
  padding: 120px 0;
  background: #ffffff;
  isolation: isolate;
}
.industries-bg-text {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  text-transform: uppercase;
  font-size: 148px;
  font-weight: 900;
  line-height: 1;
  color: rgb(42 161 78 / 12%);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

.industries-section {
  position: relative;
  min-height: 1000px;
  padding: 130px 0;
  overflow: hidden;
  background: #ffffff;
  isolation: isolate;
}

.industries-section::before {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  left: 50%;
  top: 55%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(42, 161, 77, 0.11) 0%,
    rgba(42, 161, 77, 0.045) 35%,
    transparent 70%
  );
  pointer-events: none;
}

.industry-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  pointer-events: none;
}

.orb-one {
  width: 180px;
  height: 180px;
  top: 15%;
  left: 5%;
  background: rgba(42, 161, 77, 0.07);
}

.orb-two {
  width: 240px;
  height: 240px;
  right: 2%;
  bottom: 10%;
  background: rgba(42, 161, 77, 0.06);
}

.industry-outline {
  position: absolute;
  border: 1px solid rgba(42, 161, 77, 0.08);
  border-radius: 50%;
  pointer-events: none;
}

.outline-one {
  width: 900px;
  height: 900px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.outline-two {
  width: 1100px;
  height: 1100px;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
}

.industry-top {
  position: relative;
  z-index: 5;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.industry-mini-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin-bottom: 22px;
  color: #2aa14d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
}

.industry-mini-title span {
  width: 30px;
  height: 1px;
  background: #2aa14d;
}

.industry-top h2 {
  margin: 0;
  color: #111111;
  font-size: clamp(42px, 5.5vw, 76px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -3px;
}

.industry-top h2 strong {
  display: block;
  color: #2aa14d;
  font-weight: 800;
}

.industry-top p {
  max-width: 650px;
  margin: 27px auto 0;
  color: #737373;
  font-size: 16px;
  line-height: 1.8;
}

.industry-stage {
  position: relative;
  width: 100%;
  max-width: 1250px;
  height: 650px;
  margin: 70px auto 0;
}

.industry-center {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index: 3;
}

.center-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(42, 161, 77, 0.22);
}

.ring-one {
  animation: rotateRing 18s linear infinite;
}

.ring-two {
  inset: 22px;
  border-style: dashed;
  border-color: rgba(42, 161, 77, 0.35);
  animation: rotateRingReverse 13s linear infinite;
}

.center-logo {
  position: absolute;
  inset: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(42, 161, 77, 0.2);
  box-shadow:
    0 20px 70px rgba(42, 161, 77, 0.12),
    inset 0 0 30px rgba(42, 161, 77, 0.04);
}

.center-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: #2aa14d;
  color: #ffffff;
  font-size: 22px;
  box-shadow: 0 10px 30px rgba(42, 161, 77, 0.25);
}

.center-logo small {
  color: #999999;
  font-size: 9px;
  letter-spacing: 3px;
}

.center-logo b {
  color: #171717;
  font-size: 17px;
  letter-spacing: 1px;
}

.center-logo em {
  margin-top: 3px;
  color: #2aa14d;
  font-size: 8px;
  font-style: normal;
  letter-spacing: 2px;
}

.industry-float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 255px;
  padding: 17px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(42, 161, 77, 0.14);
  border-radius: 18px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(12px);
  z-index: 5;
  cursor: pointer;
  transition:
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.industry-float:hover {
  border-color: rgba(42, 161, 77, 0.45);
  box-shadow: 0 20px 55px rgba(42, 161, 77, 0.14);
}

.float-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(42, 161, 77, 0.09);
  color: #2aa14d;
  font-size: 19px;
  transition: all 0.35s ease;
}

.industry-float:hover .float-icon {
  background: #2aa14d;
  color: #ffffff;
  transform: rotate(-8deg) scale(1.08);
}

.industry-float small {
  display: block;
  margin-bottom: 2px;
  color: #2aa14d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
}

.industry-float h3 {
  margin: 0;
  color: #181818;
  font-size: 18px;
  font-weight: 750;
}

.industry-float p {
  margin: 4px 0 0;
  color: #999999;
  font-size: 12px;
}

.float-arrow {
  position: absolute;
  top: 15px;
  right: 17px;
  color: #2aa14d;
  font-size: 18px;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: 0.35s ease;
}

.industry-float:hover .float-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.industry-1 {
  left: 3%;
  top: 7%;
}

.industry-2 {
  left: 0;
  top: 42%;
}

.industry-3 {
  left: 8%;
  bottom: 5%;
}

.industry-4 {
  left: 38%;
  bottom: 0;
}

.industry-5 {
  right: 3%;
  top: 7%;
}

.industry-6 {
  right: 0;
  top: 42%;
}

.industry-7 {
  right: 8%;
  bottom: 5%;
}

.industry-8 {
  right: 35%;
  top: 0;
}

@keyframes rotateRing {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateRingReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

#bg-canvas {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100% !important;
  height: 10vh;
  z-index: 1;
  pointer-events: none;
  display: none;
}
.hero-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.hero-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease;
}

.hero-bg-video.active {
    opacity: 1;
    visibility: visible;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background: rgba(0, 0, 0, 0.45); */
}

.hero-content {
    position: relative;
    z-index: 2;
}
  
.planet-thumbnails {
    position: absolute;
    right: 40px;
    bottom: 40px;
    z-index: 5;

    display: flex;
    gap: 15px;
}

.planet-thumb {
    width: 100px;
    padding: 0;
    border: 2px solid rgba(255,255,255,0.4);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(0,0,0,0.45);

    cursor: pointer;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.planet-thumb:hover {
    transform: translateY(-8px);
}

.planet-thumb.active {
    border-color: #fff;
    transform: translateY(-8px);
}

.planet-thumb img {
    width: 100%;
    height: 75px;
    object-fit: cover;
    display: block;
}

.planet-thumb span {
    display: block;
    padding: 8px 4px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}


/* MOBILE */

@media (max-width: 767px) {

    .planet-thumbnails {
        right: 50%;
        transform: translateX(50%);
        bottom: 25px;
    }

    .planet-thumb {
        width: 75px;
    }

    .planet-thumb img {
        height: 55px;
    }

}
/* Hero Content */
.hero-section {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  letter-spacing: -1px;
  color: #fff;
}

.hero-title span {
  color: #2aa14d; 
}

.hero-subtitle {
  color: #fff;
  font-size: 1.2rem;
  max-width: 600px;
  margin: 0 auto;
}

.btn-green {
  background-color: #2aa14d;
  color: #fff;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: 600;
  border: none;
  transition: all 0.3s ease;
}

.btn-green:hover {
  background-color: #23853f;
  color: #fff;
  box-shadow: 0 0 20px rgba(42, 161, 77, 0.4);
}
.marketing-scroll {
  height: 800vh; /* 8 services */
  position: relative;
}

.marketing-sticky {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    100px
    minmax(0, 1fr);

  align-items: center;

  padding: 70px 7%;
  overflow: hidden;
}

.marketing-left {
  height: 100%;
  position: relative;

  display: flex;
  align-items: center;
}

.content-wrapper {
  position: relative;
  width: 100%;
  height: 600px;
}
.marketing-content {
  position: absolute;

  left: 0;
  top: 0%;

  width: min(580px, 95%);

  opacity: 0;
  visibility: hidden;

  /* transform: translateY(-50%) translateY(50px); */

  pointer-events: none;

  transition:
    opacity 0.6s ease,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.6s ease;
}

.marketing-content.active {
  opacity: 1;
  visibility: visible;

  /* transform: translateY(-50%) translateY(0); */

  pointer-events: auto;
}

.content-number {
  display: block;

  font-size: 14px;
  font-weight: 800;

  color: #2aa14d;

  margin-bottom: 22px;
}

.content-tag {
  display: inline-block;

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

  letter-spacing: 2px;

  padding: 8px 14px;

  border: 1px solid #dddddd;

  border-radius: 30px;

  margin-bottom: 24px;

  color: #222;
}
.marketing-content h2 {
  font-size: clamp(40px, 4.5vw, 70px);

  line-height: 1;

  letter-spacing: -3px;

  margin: 0 0 26px;

  font-weight: 800;

  color: #111;
}

.marketing-content h2 span {
  color: #2aa14d;
}
.marketing-content p {
  max-width: 510px;

  font-size: 16px;

  line-height: 1.8;

  color: #666;

  margin: 0 0 28px;
}

.content-highlights {
  display: flex;

  flex-wrap: wrap;

  gap: 10px 20px;

  margin-bottom: 30px;
}

.content-highlights span {
  font-size: 13px;

  font-weight: 600;

  color: #333;
}

.content-highlights span::first-letter {
  color: #2aa14d;
}
.content-btn {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  font-size: 14px;

  font-weight: 700;

  padding-bottom: 8px;

  border-bottom: 1px solid #111;

  color: #111;

  text-decoration: none;

  transition: gap 0.3s ease;
}

.content-btn:hover {
  gap: 25px;
}

.content-btn span {
  font-size: 18px;
}
.marketing-line {
  height: 70%;
  position: relative;

  display: flex;
  justify-content: center;
}

.line-track {
  width: 1px;
  height: 100%;

  background: #dedede;

  position: absolute;

  left: 50%;
  top: 0;

  transform: translateX(-50%);
}

.line-progress {
  width: 3px;
  height: 0%;

  background: #2aa14d;

  position: absolute;

  left: 50%;
  top: 0;

  transform: translateX(-50%);

  transform-origin: top center;

  border-radius: 10px;
}

.line-arrow {
  position: absolute;

  left: 50%;
  top: 0;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: #2aa14d;
  color: #fff;

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

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

  z-index: 10;

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

  will-change: top, transform;

  box-shadow: 0 8px 25px rgba(42, 161, 77, 0.25);
}
.line-arrow:hover {
  transform: translate(-50%, -50%) scale(1.08);

  box-shadow: 0 12px 30px rgba(42, 161, 77, 0.35);
}
.whatsapp-dropdown {
  position: relative;
  display: inline-block;
}

.whatsapp-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);

  width: 220px;

  padding: 10px;

  background: #fff;

  border: 1px solid #eee;

  border-radius: 16px;

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

  opacity: 0;
  visibility: hidden;

  transform: translateY(10px);

  transition: all 0.3s ease;

  z-index: 999;
}

.whatsapp-menu.show {
  opacity: 1;
  visibility: visible;

  transform: translateY(0);
}

.whatsapp-menu-title {
  padding: 8px 10px 12px;

  font-size: 12px;

  font-weight: 700;

  color: #777;

  text-transform: uppercase;

  letter-spacing: 1px;
}

.whatsapp-menu a {
  display: flex;

  align-items: center;

  gap: 12px;

  padding: 12px;

  border-radius: 10px;

  color: #222;

  text-decoration: none;

  font-size: 14px;

  font-weight: 600;

  transition: all 0.25s ease;
}

.whatsapp-menu a:hover {
  background: #f1faf4;

  color: #2aa14d;

  transform: translateX(4px);
}

.whatsapp-menu a i {
  width: 20px;

  text-align: center;

  color: #2aa14d;
}
.marketing-right {
  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;
}
.image-wrapper {
  width: min(650px, 100%);

  height: 72%;

  position: relative;

  overflow: hidden;

  border-radius: 24px;

  background: #f2f2f2;

  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.08);
}
.marketing-image {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transform: translateX(80px) scale(1.08);

  pointer-events: none;

  transition:
    opacity 0.7s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.7s ease;
}

.marketing-image.active {
  opacity: 1;

  visibility: visible;

  transform: translateX(0) scale(1);

  pointer-events: auto;
}

.marketing-image img {
  width: 100%;

  height: 110%;

  display: block;

  object-fit: cover;

  transition: transform 1s ease;
}

.marketing-image.active img {
  transform: scale(1.02);
}
.image-overlay {
  position: absolute;

  left: 25px;

  bottom: 25px;

  padding: 10px 18px;

  border-radius: 50px;

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

  backdrop-filter: blur(10px);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  color: #111;
}

.final-section {
  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  padding: 100px 7%;

  background: #111;

  color: #fff;
}

.final-inner {
  max-width: 1000px;
}

.final-inner > span {
  font-size: 12px;

  font-weight: 700;

  letter-spacing: 3px;

  color: #2aa14d;
}

.final-inner h2 {
  font-size: clamp(45px, 6vw, 90px);

  line-height: 0.95;

  letter-spacing: -4px;

  margin: 30px 0 50px;

  font-weight: 800;
}

.final-inner h2 span {
  color: #2aa14d;
}

.final-btn {
  display: inline-flex;

  align-items: center;

  gap: 15px;

  padding: 17px 25px;

  background: #2aa14d;

  color: #fff;

  border-radius: 50px;

  font-size: 14px;

  font-weight: 700;

  text-decoration: none;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.final-btn:hover {
  transform: translateY(-4px);

  box-shadow: 0 15px 35px rgba(42, 161, 77, 0.3);
}

.final-btn span {
  font-size: 18px;
}

.our-image {
  padding: 90px 0;
  background: #ffffff;
  overflow: hidden;
}

.our-image .logo-heading {
  text-align: center;
  margin-bottom: 55px;
  line-height: 1.2;
}

.our-image .logo-heading span {
  color: #2aa14d;
}

.premium-gallery {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr !important;
  grid-template-rows: 260px 260px !important;
  gap: 18px;
}

.premium-gallery > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 / 3 !important;
}

.premium-gallery > div:nth-child(2) {
  grid-column: 2 !important;
  grid-row: 1 !important;
}

.premium-gallery > div:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 2 !important;
}
.premium-gallery-1 {
  display: grid !important;
  grid-template-columns: 1fr 1.5fr !important;
  grid-template-rows: 260px 260px !important;

  gap: 18px;

  width: 100%;
}
.premium-gallery-1 > div:first-child {
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.premium-gallery-1 > div:nth-child(2) {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.premium-gallery-1 > div:nth-child(3) {
  grid-column: 2 !important;
  grid-row: 1 / 3 !important;
}

.gallery-item {
  position: relative;

  overflow: hidden;

  border-radius: 24px;

  cursor: pointer;

  background: #eef8f1;

  box-shadow: 0 15px 45px rgba(42, 161, 77, 0.1);

  opacity: 0;

  transform: translateY(35px) scale(0.97);

  animation: galleryReveal 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.gallery-item:nth-child(1) {
  animation-delay: 0.1s;
}

.gallery-item:nth-child(2) {
  animation-delay: 0.18s;
}

.gallery-item:nth-child(3) {
  animation-delay: 0.26s;
}

.gallery-item:nth-child(4) {
  animation-delay: 0.34s;
}

.gallery-item:nth-child(5) {
  animation-delay: 0.42s;
}

.gallery-item:nth-child(6) {
  animation-delay: 0.5s;
}

@keyframes galleryReveal {
  to {
    opacity: 1;

    transform: translateY(0) scale(1);
  }
}
.gallery-big {
  grid-row: 1 / 3;

  grid-column: 1;
}
.gallery-small {
  grid-row: auto;
}
.gallery-item img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);

  filter: brightness(0.68) saturate(1.12);
}

.gallery-item::after {
  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(8, 34, 18, 0.82) 100%
  );

  opacity: 0.65;

  transition: opacity 0.5s ease;
}

.gallery-item:hover::after {
  opacity: 1;
}
.image-title {
  position: absolute;

  left: 22px;
  right: 22px;

  top: 20px;

  z-index: 3;

  display: flex;

  align-items: center;

  gap: 10px;

  transform: translateY(-10px);

  opacity: 0.95;

  transition:
    transform 0.45s ease,
    opacity 0.45s ease;
}
.image-title span {
  display: flex;

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

  width: 34px;
  height: 34px;

  border-radius: 50%;

  color: #ffffff;

  font-size: 11px;

  font-weight: 700;

  letter-spacing: 1px;

  background: rgba(42, 161, 77, 0.85);

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

  backdrop-filter: blur(10px);
}
.image-title h3 {
  margin: 0;

  padding: 8px 14px;

  border-radius: 30px;

  color: #ffffff;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 0.3px;

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

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

  backdrop-filter: blur(12px);

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.gallery-item:hover .image-title {
  transform: translateY(0);

  opacity: 1;
}
.gallery-overlay {
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  z-index: 4;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  padding-bottom: 24px;

  color: #ffffff;

  opacity: 0;

  transform: translateY(20px);

  transition: all 0.45s ease;
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;

  transform: translateY(0);
}
.gallery-icon {
  width: 55px;
  height: 55px;

  display: flex;

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

  border-radius: 50%;

  color: #ffffff;

  font-size: 17px;

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

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

  backdrop-filter: blur(10px);

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

  transition:
    transform 0.4s ease,
    background 0.3s ease;
}

.gallery-item:hover .gallery-icon {
  transform: scale(1.08) rotate(5deg);
}

.gallery-icon:hover {
  background: #2aa14d;
}

.gallery-overlay > span {
  margin-top: 9px;

  color: #ffffff;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 1.5px;
}

.premium-lightbox {
  position: fixed;

  inset: 0;

  z-index: 999999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 30px;

  background: rgba(3, 15, 8, 0.95);

  backdrop-filter: blur(18px);

  opacity: 0;

  visibility: hidden;

  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.premium-lightbox.active {
  opacity: 1;

  visibility: visible;
}
.lightbox-content {
  position: relative;

  width: 85%;

  max-width: 1050px;

  text-align: center;

  transform: scale(0.78) translateY(35px);

  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-lightbox.active .lightbox-content {
  transform: scale(1) translateY(0);
}
.lightbox-content img {
  display: block;

  width: auto;

  max-width: 100%;

  max-height: 76vh;

  margin: auto;

  object-fit: contain;

  border-radius: 18px;

  box-shadow:
    0 30px 100px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.12);

  opacity: 1;

  transition: opacity 0.25s ease;
}
.lightbox-title {
  margin-top: 18px;
}

.lightbox-title h3 {
  display: inline-block;

  margin: 0;

  padding: 9px 20px;

  color: #ffffff;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: 0.5px;

  border-radius: 30px;

  background: rgba(42, 161, 77, 0.22);

  border: 1px solid rgba(42, 161, 77, 0.55);
}

.lightbox-number {
  position: absolute;

  top: -38px;

  left: 50%;

  transform: translateX(-50%);
}

.lightbox-number span {
  color: #ffffff;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 2px;

  padding: 7px 15px;

  border-radius: 30px;

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

  border: 1px solid rgba(255, 255, 255, 0.18);
}
.lightbox-close {
  position: absolute;

  top: 25px;
  right: 30px;

  z-index: 5;

  width: 52px;
  height: 52px;

  display: flex;

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

  border-radius: 50%;

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

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

  color: #ffffff;

  font-size: 19px;

  cursor: pointer;

  backdrop-filter: blur(12px);

  transition: 0.35s ease;
}

.lightbox-close:hover {
  background: #2aa14d;

  border-color: #2aa14d;

  transform: rotate(90deg) scale(1.05);
}
.lightbox-prev,
.lightbox-next {
  position: absolute;

  top: 50%;

  z-index: 5;

  width: 56px;
  height: 56px;

  display: flex;

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

  border-radius: 50%;

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

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

  color: #ffffff;

  font-size: 17px;

  cursor: pointer;

  backdrop-filter: blur(12px);

  transition: 0.35s ease;
}

.lightbox-prev {
  left: 30px;

  transform: translateY(-50%);
}

.lightbox-next {
  right: 30px;

  transform: translateY(-50%);
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: #2aa14d;

  border-color: #2aa14d;
}

.lightbox-prev:hover {
  transform: translateY(-50%) translateX(-4px);
}

.lightbox-next:hover {
  transform: translateY(-50%) translateX(4px);
}
/* team */
.our-team {
  position: relative;
  overflow: hidden;
  padding: 120px 20px;
  background:
    radial-gradient(
      circle at left top,
      rgba(42, 161, 77, 0.15),
      transparent 35%
    ),
    radial-gradient(
      circle at right bottom,
      rgba(0, 180, 255, 0.08),
      transparent 35%
    ),
    rgb(7, 19, 31);
  font-family: Arial, Helvetica, sans-serif;
}

.our-team .container {
  position: relative;
  z-index: 5;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
}

.team-bg-shape {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  z-index: 1;
}

.shape-1 {
  width: 450px;
  height: 450px;
  top: -220px;
  right: -150px;
  background: rgba(42, 161, 77, 0.13);
}

.shape-2 {
  width: 380px;
  height: 380px;
  left: -180px;
  bottom: -180px;
  background: rgba(0, 180, 255, 0.08);
}

.team-grid-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
  pointer-events: none;
}

.team-heading {
  max-width: 760px;
  margin: 0 auto 75px;
  text-align: center;
}

.team-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 22px;
  color: #2aa14d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 4px;
}

.team-label i {
  display: block;
  width: 28px;
  height: 2px;
  background: #2aa14d;
}

.team-heading h2 {
  margin: 0;
  color: #ffffff;
  font-size: clamp(40px, 5vw, 66px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -2.5px;
}

.team-heading h2 span {
  display: block;
  margin-top: 5px;
  color: #2aa14d;
}

.team-heading p {
  max-width: 620px;
  margin: 25px auto 0;
  color: #8998a3;
  font-size: 15px;
  line-height: 1.8;
}

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

.team-card {
  position: relative;
  overflow: hidden;
  padding: 12px 12px 25px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.075),
    rgba(255, 255, 255, 0.025)
  );
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transform: translateY(50px);
  opacity: 0;
  transition:
    transform 0.5s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}

.team-card:hover {
  border-color: rgba(42, 161, 77, 0.45);
  box-shadow: 0 30px 80px rgba(42, 161, 77, 0.14);
}

.card-number {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #ffffff;
  background: rgba(42, 161, 77, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  box-shadow: 0 8px 25px rgba(42, 161, 77, 0.25);
}

.team-image {
  position: relative;
  overflow: hidden;
  height: 310px;
  border-radius: 17px;
  background: #10221a;
}

.team-image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, 0.45));
  opacity: 0.5;
  pointer-events: none;
}

.team-image::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  right: -70px;
  top: -70px;
  border-radius: 50%;
  background: rgba(42, 161, 77, 0.35);
  filter: blur(30px);
  opacity: 0;
  transition: 0.5s ease;
}

.team-card:hover .team-image::after {
  opacity: 1;
}

.team-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: grayscale(15%) saturate(0.9);
  transform: scale(1);
  transition:
    transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.08);
  filter: grayscale(0%) saturate(1.05);
}

.team-info {
  padding: 22px 10px 4px;
}

.team-info h3 {
  margin: 0 0 7px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.team-info span {
  color: #2aa14d;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.7px;
}

.team-social {
  position: absolute;
  right: 22px;
  bottom: 28px;
  display: flex;
  gap: 7px;
}

.team-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: #7d8b94;
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  text-decoration: none;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  transition: 0.3s ease;
}

.team-social a:hover {
  color: #ffffff;
  background: #2aa14d;
  border-color: #2aa14d;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(42, 161, 77, 0.25);
}

.card-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #2aa14d, #55d979);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-card:hover .card-line {
  width: 100%;
}

.team-card::after {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  right: -50px;
  bottom: -50px;
  border-radius: 50%;
  background: rgba(42, 161, 77, 0.12);
  filter: blur(25px);
  opacity: 0;
  transition: 0.5s ease;
  pointer-events: none;
}

.team-card:hover::after {
  opacity: 1;
}
/* choose  */

.dvi-why {
  --green: #2aa14d;
  --dark: #101a14;
  --muted: #6d776f;
  --line: #dfe6e1;

  position: relative;

  width: 100%;

  padding: 125px 25px 110px;

  overflow: hidden;

  background: #f7f9f7;

  color: var(--dark);
}

.dvi-container {
  width: 100%;

  max-width: 1280px;

  margin: auto;

  position: relative;

  z-index: 2;
}


.dvi-why::before {
  content: "";

  position: absolute;

  width: 650px;

  height: 650px;

  right: -350px;

  top: -300px;

  border-radius: 50%;

  background: rgba(42, 161, 77, 0.055);

  filter: blur(5px);
}

.dvi-why::after {
  content: "";

  position: absolute;

  width: 450px;

  height: 450px;

  left: -300px;

  bottom: -250px;

  border-radius: 50%;

  background: rgba(42, 161, 77, 0.035);
}

.dvi-noise {
  position: absolute;

  inset: 0;

  pointer-events: none;

  opacity: 0.025;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.dvi-why-top {
  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  padding-bottom: 35px;

  border-bottom: 1px solid var(--line);
}

.dvi-eyebrow {
  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--green);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;
}

.dvi-eyebrow span {
  width: 7px;

  height: 7px;

  border-radius: 50%;

  background: var(--green);
}

.dvi-top-intro {
  width: 340px;
}

.dvi-top-intro p {
  margin: 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.7;
}


.dvi-title-wrap {
  position: relative;

  min-height: 500px;

  display: flex;

  align-items: center;
}

.dvi-main-title {
  position: relative;

  z-index: 3;

  margin: 0;

  font-size: 105px;

  line-height: 0.83;

  letter-spacing: -7px;

  font-weight: 800;
}

.title-line {
  display: block;
}

.title-indent {
  margin-left: 8vw;
}

.title-green {
  margin-left: 3vw;

  color: var(--green);
}

.title-dot {
  color: var(--dark);
}

.dvi-growth-visual {
  position: absolute;

  width: 54%;

  height: 260px;

  right: 0;

  bottom: 55px;

  opacity: 0.85;

  z-index: 1;
}

.dvi-growth-visual svg {
  width: 100%;

  height: 100%;

  overflow: visible;
}

.dvi-growth-path {
  fill: none;

  stroke: url(#dviLineGradient);

  stroke-width: 2.5;

  stroke-linecap: round;

  stroke-dasharray: 1200;

  stroke-dashoffset: 1200;
}

/* Animated glow */

.dvi-growth-visual::after {
  content: "";

  position: absolute;

  width: 220px;

  height: 220px;

  right: 0;

  top: 0;

  border-radius: 50%;

  background: rgba(42, 161, 77, 0.08);

  filter: blur(45px);

  pointer-events: none;
}

.dvi-growth-point {
  position: absolute;

  right: -2px;

  top: 2px;

  width: 12px;

  height: 12px;

  border-radius: 50%;

  background: var(--green);

  box-shadow:
    0 0 0 7px rgba(42, 161, 77, 0.1),
    0 0 30px rgba(42, 161, 77, 0.35);
}

.dvi-growth-point span {
  position: absolute;

  inset: -10px;

  border: 1px solid rgba(42, 161, 77, 0.3);

  border-radius: 50%;

  animation: dviPointPulse 2s infinite;
}

@keyframes dviPointPulse {
  0% {
    transform: scale(0.6);

    opacity: 1;
  }

  100% {
    transform: scale(2);

    opacity: 0;
  }
}

.dvi-growth-label {
  position: absolute;

  right: 20px;

  top: 55px;

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--green);
}

.dvi-growth-label small {
  font-size: 9px;

  letter-spacing: 2px;

  font-weight: 800;
}

.dvi-growth-label strong {
  font-size: 20px;
}

.dvi-intro-row {
  display: grid;

  grid-template-columns: 100px 1fr 100px;

  align-items: start;

  padding: 55px 0 70px;

  border-bottom: 1px solid var(--line);
}

.dvi-intro-number {
  color: var(--green);

  font-size: 13px;

  font-weight: 800;
}

.dvi-intro-text {
  max-width: 650px;
}

.dvi-intro-text p {
  margin: 0;

  font-size: clamp(22px, 2.5vw, 31px);

  line-height: 1.4;

  letter-spacing: -0.7px;
}

.dvi-intro-arrow {
  justify-self: end;

  width: 50px;

  height: 50px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #ccd6cf;

  border-radius: 50%;

  color: var(--green);

  font-size: 20px;

  transition: 0.4s ease;
}

.dvi-intro-arrow:hover {
  background: var(--green);

  color: white;

  transform: translateY(6px);
}

.dvi-benefits {
  margin-top: 20px;
}

.dvi-benefit {
  position: relative;

  display: grid;

  grid-template-columns: 100px 1.2fr 1fr 70px;

  align-items: center;

  min-height: 125px;

  padding: 15px 0;

  border-bottom: 1px solid var(--line);

  cursor: pointer;

  transition: padding 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dvi-benefit::before {
  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 0;

  height: 2px;

  background: var(--green);

  transition: width 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dvi-benefit:hover {
  padding-left: 18px;

  padding-right: 18px;
}

.dvi-benefit:hover::before {
  width: 100%;
}

.benefit-number {
  color: #9ca69f;

  font-size: 12px;

  font-weight: 700;

  transition: 0.4s ease;
}

.dvi-benefit:hover .benefit-number {
  color: var(--green);
}

.benefit-title {
  font-size: clamp(22px, 3vw, 35px);

  font-weight: 700;

  letter-spacing: -1.2px;

  transition: 0.45s ease;
}

.dvi-benefit:hover .benefit-title {
  transform: translateX(8px);

  color: var(--green);
}

.benefit-description {
  padding-left: 20px;
}

.benefit-description p {
  max-width: 390px;

  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.7;

  transition: 0.4s ease;
}

.dvi-benefit:hover .benefit-description p {
  color: #3e4a43;
}

.benefit-arrow {
  justify-self: end;

  width: 48px;

  height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 1px solid #d2dbd5;

  border-radius: 50%;

  color: #8b958e;

  font-size: 18px;

  transition: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.dvi-benefit:hover .benefit-arrow {
  background: var(--green);

  border-color: var(--green);

  color: white;

  transform: rotate(45deg);
}

.dvi-bottom {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  padding-top: 75px;
}

.dvi-bottom-left {
  display: flex;

  flex-direction: column;

  gap: 8px;
}

.dvi-bottom-left span {
  color: #929c95;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;
}

.dvi-bottom-left strong {
  font-size: 20px;

  letter-spacing: -0.5px;
}

.dvi-bottom-stats {
  display: flex;

  gap: 55px;
}

.dvi-stat {
  position: relative;
}

.dvi-stat strong {
  font-size: 40px;

  line-height: 1;

  letter-spacing: -2px;
}

.dvi-stat > span {
  color: var(--green);

  font-size: 20px;

  font-weight: 800;
}

.dvi-stat small {
  display: block;

  margin-top: 8px;

  color: #8b958e;

  font-size: 10px;

  letter-spacing: 1px;

  text-transform: uppercase;
}

@media (max-width: 900px) {
  .dvi-why {
    padding: 90px 20px;
  }

  .dvi-title-wrap {
    min-height: 420px;
  }

  .dvi-growth-visual {
    width: 65%;

    bottom: 20px;
  }

  .dvi-benefit {
    grid-template-columns: 70px 1fr;

    gap: 10px;

    padding: 25px 0;
  }

  .benefit-description {
    grid-column: 2;

    padding: 0;

    margin-top: 5px;
  }

  .benefit-arrow {
    position: absolute;

    right: 0;

    top: 35px;
  }

  .dvi-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 40px;
  }
}

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

@media (max-width: 600px) {
  .dvi-why {
    padding: 70px 18px 75px;
  }

  .dvi-why-top {
    flex-direction: column;

    gap: 25px;
  }

  .dvi-top-intro {
    width: 100%;

    max-width: 400px;
  }

  .dvi-title-wrap {
    min-height: 290px;

    align-items: flex-start;

    padding-top: 65px;
  }

  .dvi-main-title {
    font-size: 60px;

    letter-spacing: -3px;

    line-height: 0.9;
  }

  .title-indent {
    margin-left: 5vw;
  }

  .title-green {
    margin-left: 2vw;
  }

  .dvi-growth-visual {
    width: 100%;

    height: 190px;

    right: -15px;

    bottom: 0;

    opacity: 0.65;
  }

  .dvi-intro-row {
    grid-template-columns: 45px 1fr;

    padding: 40px 0 50px;
  }

  .dvi-intro-arrow {
    display: none;
  }

  .dvi-intro-text p {
    font-size: 21px;
  }

  .dvi-benefit {
    grid-template-columns: 40px 1fr;

    min-height: 0;

    padding: 28px 0;
  }

  .benefit-title {
    font-size: 24px;

    padding-right: 45px;
  }

  .benefit-description {
    grid-column: 2;

    margin-top: 10px;
  }

  .benefit-description p {
    font-size: 12px;
  }

  .benefit-arrow {
    width: 38px;

    height: 38px;

    top: 28px;
  }

  .dvi-bottom {
    padding-top: 55px;
  }

  .dvi-bottom-stats {
    width: 100%;

    justify-content: space-between;

    gap: 10px;
  }

  .dvi-stat strong {
    font-size: 29px;
  }

  .dvi-stat > span {
    font-size: 15px;
  }

  .dvi-stat small {
    font-size: 8px;
  }
}

.growth-card {
  position: relative;

  width: 100%;

  height: 367px;

  padding: 30px;

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

  border-radius: 28px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.97),
    rgba(246, 251, 248, 0.94)
  );

  box-shadow:
    0 30px 80px rgba(27, 67, 42, 0.13),
    inset 0 1px 0 white;

  z-index: 5;

  /* transform:
        perspective(900px)
        rotateY(-5deg); */

  transition:
    transform 0.5s ease,
    box-shadow 0.5s ease;
}

.growth-card:hover {
  transform: perspective(900px) rotateY(0deg) translateY(-8px);

  box-shadow: 0 40px 100px rgba(27, 67, 42, 0.18);
}

/* =========================================================
   GROWTH TOP
========================================================= */

.growth-top {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.growth-top small {
  display: block;

  margin-bottom: 6px;

  color: #87948b;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 1.5px;
}

.growth-top strong {
  color: #16251b;

  font-size: 20px;
}

.growth-badge {
  display: flex;

  align-items: center;

  gap: 3px;

  padding: 8px 11px;

  border-radius: 10px;

  color: #2aa14d;

  background: rgba(42, 161, 77, 0.09);

  font-size: 13px;

  font-weight: 800;
}

.growth-badge > span {
  font-size: 18px;
}

/* =========================================================
   LIVE GRAPH
========================================================= */

.growth-chart {
  position: relative;

  height: 165px;

  margin-top: 20px;

  overflow: hidden;
}

.live-chart {
  width: 100%;

  height: 100%;

  overflow: visible;
}

.graph-grid-line {
  stroke: #dfe9e2;

  stroke-width: 1;

  stroke-dasharray: 4 6;

  opacity: 0.7;
}

/* Main Graph */

.chart-path {
  fill: none;

  stroke: url(#chartGradient);

  stroke-width: 5;

  stroke-linecap: round;

  stroke-linejoin: round;

  filter: drop-shadow(0 4px 7px rgba(42, 161, 77, 0.28));
}

/* Area */

.chart-area {
  fill: url(#chartArea);
}

/* =========================================================
   LIVE MOVING POINT
========================================================= */

.live-point {
  position: absolute;

  width: 15px;

  height: 15px;

  border-radius: 50%;

  background: #2aa14d;

  border: 4px solid white;

  box-shadow:
    0 0 0 5px rgba(42, 161, 77, 0.15),
    0 0 25px rgba(42, 161, 77, 0.45);

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

  z-index: 10;
}

.live-point span {
  position: absolute;

  inset: -8px;

  border-radius: 50%;

  border: 1px solid rgba(42, 161, 77, 0.35);

  animation: livePulse 1.5s infinite;
}

@keyframes livePulse {
  0% {
    transform: scale(0.6);

    opacity: 1;
  }

  100% {
    transform: scale(2);

    opacity: 0;
  }
}

/* Extra Glow */

.graph-glow {
  position: absolute;

  width: 100px;

  height: 100px;

  border-radius: 50%;

  background: rgba(42, 161, 77, 0.2);

  filter: blur(35px);

  pointer-events: none;

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

/* =========================================================
   BOTTOM GROWTH DATA
========================================================= */

.growth-bottom {
  display: grid;

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

  gap: 15px;

  padding-top: 20px;

  border-top: 1px solid #e7eee9;
}

.growth-bottom span {
  display: block;

  color: #8b968f;

  font-size: 10px;

  margin-bottom: 5px;
}

.growth-bottom b {
  color: #18271e;

  font-size: 18px;
}

/* =========================================================
   FLOATING ELEMENTS
========================================================= */

.float-element {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 11px 15px;

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

  border-radius: 15px;

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

  backdrop-filter: blur(15px);

  box-shadow: 0 15px 35px rgba(29, 67, 43, 0.12);

  z-index: 8;

  animation: floatObject 4s ease-in-out infinite;
}

.float-element small {
  display: block;

  color: #8c968f;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 1px;
}

.float-element strong {
  display: block;

  color: #1b2a20;

  font-size: 10px;
}

.float-icon {
  display: flex;

  align-items: center;

  justify-content: center;

  width: 34px;

  height: 34px;

  border-radius: 10px;

  background: rgba(42, 161, 77, 0.1);

  color: #2aa14d;

  font-size: 19px;

  font-weight: 800;
}

.seo-element {
  top: 55px;

  left: 5px;
}

.social-element {
  right: 0;

  top: 150px;

  animation-delay: 1s;
}

.ads-element {
  left: 30px;

  bottom: 65px;

  animation-delay: 2s;
}

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

  50% {
    transform: translateY(-12px);
  }
}
/* hero banner */


        .spaceedu-hero {
            --cyan: #79dce8;
            --cyan-logo: #5fd0e1;
            --btn-ink: #071227;

            --dw: 1353;
            --dh: 1163;
            --gutter: 25;

            --u: max(
                min(.72px, calc(100vh / 700)),
                min(calc(100vw / 1353), calc(100vh / 1163))
            );

            position: relative;
            width: 100%;
            height: 100vh;
            min-height: 650px;

            overflow: hidden;
            isolation: isolate;

            background: #04101f;
            color: #fff;

            font-family: 'Hanken Grotesk', sans-serif;

            box-sizing: border-box;
        }

        .spaceedu-hero *,
        .spaceedu-hero *::before,
        .spaceedu-hero *::after {
            box-sizing: border-box;
        }

        .spaceedu-hero h1,
        .spaceedu-hero p,
        .spaceedu-hero a,
        .spaceedu-hero button {
            margin: 0;
        }

        .spaceedu-hero a {
            text-decoration: none;
        }

        .spaceedu-hero button {
            font-family: inherit;
        }

        @supports (height: 100dvh) {

            .spaceedu-hero {
                --u: max(
                    min(.72px, calc(100dvh / 700)),
                    min(calc(100vw / 1353), calc(100dvh / 1163))
                );
            }

        }

        .spaceedu-stage {
            position: relative;

            width: 100%;
            height: 100%;

            overflow: hidden;
            isolation: isolate;

            background: #04101f;
        }

        .spaceedu-sky {
            position: absolute;

            inset: 0;

            z-index: 0;

            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;

            background-image: url(
                "https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260827_202133_508c64b8-a31e-4290-bdfc-1187df70e0a6.png"
            );
        }

        .spaceedu-sky::after {
            content: "";

            position: absolute;

            inset: 0;

            background:
                radial-gradient(
                    circle at center,
                    transparent 20%,
                    rgba(0, 0, 0, .15) 60%,
                    rgba(0, 0, 0, .4) 100%
                );

            pointer-events: none;
        }

        .spaceedu-sky video {
            position: absolute;

            inset: 0;

            width: 100%;
            height: 100%;

            object-fit: cover;

            opacity: 0;

            transition: opacity .22s linear;

            display: block;
        }

        .spaceedu-sky video.spaceedu-is-active {
            opacity: 1;
        }

        .spaceedu-ui {
            position: absolute;

            inset: 0;

            z-index: 3;
        }

        .spaceedu-navbar {
            position: absolute;

            top: 0;
            left: 0;
            right: 0;

            height: calc(88 * var(--u));

            z-index: 10;
        }

        .spaceedu-navbar::after {
            content: "";

            position: absolute;

            left: calc(25 * var(--u));
            right: calc(49 * var(--u));

            top: calc(86 * var(--u));

            height: calc(2 * var(--u));

            background: rgba(255, 255, 255, .23);
        }

        .spaceedu-navrow {
            position: absolute;

            left: calc(25 * var(--u));
            right: calc(49 * var(--u));

            top: 0;

            height: calc(86 * var(--u));

            display: flex;

            align-items: center;
            justify-content: space-between;
        }

        .spaceedu-logo {
            font-family: 'Poppins', sans-serif;

            font-weight: 600;

            font-size: calc(18.4 * var(--u));

            letter-spacing: calc(-.15 * var(--u));

            line-height: 1;

            color: #fff;

            white-space: nowrap;
        }

        .spaceedu-logo i {
            font-style: normal;

            color: var(--cyan-logo);
        }

        .spaceedu-links {
            display: flex;

            align-items: center;
        }

        .spaceedu-links a {
            position: relative;

            display: flex;

            align-items: center;

            height: calc(86 * var(--u));

            font-size: calc(18.4 * var(--u));

            font-weight: 400;

            color: #fff;

            padding: 0 calc(17.5 * var(--u));

            white-space: nowrap;

            transition: color .3s ease;
        }

        .spaceedu-links a:hover {
            color: var(--cyan);
        }

        .spaceedu-links a[aria-current="page"]::after {
            content: "";

            position: absolute;

            left: 0;
            right: 0;

            top: calc(83.5 * var(--u));

            height: calc(4 * var(--u));

            background: var(--cyan);

            border-radius: calc(1 * var(--u));
        }

        .spaceedu-links a:nth-child(2) {
            margin-left: calc(24 * var(--u));
        }

        .spaceedu-links a:nth-child(3) {
            margin-left: calc(26 * var(--u));
        }

        .spaceedu-links a:nth-child(4) {
            margin-left: calc(27 * var(--u));
        }

        .spaceedu-links .spaceedu-enroll {
            margin-left: calc(28.5 * var(--u));

            width: calc(107 * var(--u));
            height: calc(38 * var(--u));

            border-radius: calc(19 * var(--u));

            display: flex;

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

            color: var(--btn-ink);

            background:
                linear-gradient(
                    180deg,
                    #fff 0%,
                    #d8ecfe 9%,
                    #dceefe 72%,
                    #f4f9ff 100%
                );

            box-shadow:
                0 calc(3 * var(--u))
                calc(14 * var(--u))
                rgba(255, 255, 255, .22),

                inset 0 0 0 calc(1.5 * var(--u))
                rgba(255, 255, 255, .92);

            font-weight: 600;
        }

        .spaceedu-burger {
            display: none;

            position: relative;

            width: 46px;
            height: 46px;

            border: 0;

            background: transparent;

            flex-direction: column;

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

            gap: 6px;

            cursor: pointer;
        }

        .spaceedu-burger span {
            display: block;

            width: 24px;
            height: 2px;

            background: #fff;

            border-radius: 2px;

            transition: .3s ease;
        }

        .spaceedu-navrow[data-open="true"]
        .spaceedu-burger span:nth-child(1) {
            transform:
                translateY(8px)
                rotate(45deg);
        }

        .spaceedu-navrow[data-open="true"]
        .spaceedu-burger span:nth-child(2) {
            opacity: 0;
        }

        .spaceedu-navrow[data-open="true"]
        .spaceedu-burger span:nth-child(3) {
            transform:
                translateY(-8px)
                rotate(-45deg);
        }

        .spaceedu-copy {
            position: absolute;

            inset: 0;

            pointer-events: none;

            transform:
                translateY(
                    max(
                        0px,
                        calc(
                            (100vh - 1163 * var(--u)) * .42
                        )
                    )
                );
        }

        .spaceedu-copy a,
        .spaceedu-planet {
            pointer-events: auto;
        }

        .spaceedu-col {
            position: absolute;

            left: 0;

            right: calc(var(--gutter) * var(--u));

            text-align: center;
        }

        .spaceedu-eyebrow {
            top: calc(188.8 * var(--u));

            font-size: calc(30.45 * var(--u));

            font-weight: 500;

            line-height: 1;

            letter-spacing: calc(4 * var(--u));
        }

        .spaceedu-title {
            top: calc(268 * var(--u));

            font-family: 'Prata', Georgia, serif;

            font-weight: 400;

            font-size: calc(112.4 * var(--u));

            line-height: 1;

            letter-spacing: calc(2 * var(--u));

            color: #fff;
        }

        .spaceedu-rule {
            top: calc(405.5 * var(--u));

            height: calc(5 * var(--u));

            font-size: 0;
        }

        .spaceedu-rule span {
            display: inline-block;

            width: calc(100 * var(--u));

            height: 100%;

            background: var(--cyan);

            border-radius: calc(3 * var(--u));
        }

        .spaceedu-lede {
            top: calc(433.2 * var(--u));

            font-size: calc(18.36 * var(--u));

            line-height: calc(30 * var(--u));

            color: rgba(255, 255, 255, .95);
        }

        .spaceedu-cta {
            top: calc(597 * var(--u));

            height: calc(66 * var(--u));

            isolation: isolate;
        }

        .spaceedu-cta > a {
            display: inline-flex;

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

            width: calc(216 * var(--u));

            height: calc(66 * var(--u));

            border-radius: calc(33 * var(--u));

            color: var(--btn-ink);

            text-decoration: none;

            font-size: calc(17 * var(--u));

            font-weight: 700;

            background:
                linear-gradient(
                    180deg,
                    #fff 0%,
                    #d6e8f8 4%,
                    #d9ecfe 72%,
                    #fff 100%
                );

            box-shadow:
                0 calc(10 * var(--u))
                calc(18 * var(--u))
                calc(-8 * var(--u))
                rgba(255, 255, 255, .5),

                0 0 calc(26 * var(--u))
                rgba(255, 255, 255, .18),

                inset 0 0 0 calc(2 * var(--u))
                rgba(255, 255, 255, .9);

            transition:
                transform .3s ease;
        }

        .spaceedu-cta > a:hover {
            transform: scale(1.04);
        }

        .spaceedu-planet {
            position: absolute;

            z-index: -1;

            padding: 0;

            border: 0;

            background: none;

            line-height: 0;

            cursor: pointer;

            transition:
                transform .45s
                cubic-bezier(.22, 1, .36, 1);
        }

        .spaceedu-planet:hover {
            transform: scale(1.045);
        }

        .spaceedu-planet:active {
            transform: scale(.99);
        }

        .spaceedu-planet img {
            display: none;

            width: 100%;
            height: auto;
        }

        .spaceedu-planet img.spaceedu-is-shown {
            display: block;
        }

        .spaceedu-planet-l {
            width: calc(143 * var(--u));

            left: calc(-69.5 * var(--u));

            top: calc(-38.3 * var(--u));
        }

        .spaceedu-planet-r {
            width: calc(143 * var(--u));

            right: calc(-64.7 * var(--u));

            top: calc(-40.6 * var(--u));
        }

        .spaceedu-label {
            position: absolute;

            top: calc(33 * var(--u));

            font-family: 'Prata', serif;

            font-size: calc(17.8 * var(--u));

            letter-spacing: calc(4.6 * var(--u));

            line-height: 1;

            white-space: nowrap;
        }

        .spaceedu-label-l {
            left: calc(111 * var(--u));
        }

        .spaceedu-label-r {
            right: calc(104 * var(--u));
        }

        .spaceedu-scroll {
            position: absolute;

            z-index: 5;

            left: 50%;

            transform: translateX(-50%);

            bottom: calc(68 * var(--u));

            width: calc(96 * var(--u));

            height: calc(96 * var(--u));

            border-radius: 50%;

            background: rgba(24, 30, 42, .7);

            backdrop-filter:
                blur(calc(6 * var(--u)));

            border: 0;

            display: flex;

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

            cursor: pointer;

            transition: .3s ease;
        }

        .spaceedu-scroll:hover {
            background: rgba(24, 30, 42, .9);

            transform:
                translateX(-50%)
                translateY(-4px);
        }

        .spaceedu-scroll svg {
            width: 20px;
            height: 25px;
        }

        @keyframes spaceeduFadeIn {

            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }

        }

        @keyframes spaceeduRise {

            from {
                opacity: 0;

                transform:
                    translateY(25px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }

        }

        @keyframes spaceeduReveal {

            from {
                opacity: 0;

                transform:
                    translateY(60px);
            }

            to {
                opacity: 1;

                transform:
                    translateY(0);
            }

        }

        @keyframes spaceeduScaleRule {

            from {
                transform:
                    scaleX(0);
            }

            to {
                transform:
                    scaleX(1);
            }

        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-sky {

            animation:
                spaceeduFadeIn
                1.6s
                ease
                .2s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-logo {

            animation:
                spaceeduRise
                .6s
                cubic-bezier(.22, 1, .36, 1)
                .2s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-links a {

            animation:
                spaceeduRise
                .55s
                cubic-bezier(.22, 1, .36, 1)
                .3s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-eyebrow {

            animation:
                spaceeduReveal
                .75s
                cubic-bezier(.16, 1, .3, 1)
                .3s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-title {

            animation:
                spaceeduReveal
                .95s
                cubic-bezier(.16, 1, .3, 1)
                .44s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-rule span {

            transform-origin: center;

            animation:
                spaceeduScaleRule
                .65s
                cubic-bezier(.16, 1, .3, 1)
                .78s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-lede {

            animation:
                spaceeduRise
                .7s
                cubic-bezier(.22, 1, .36, 1)
                .86s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-label-l {

            animation:
                spaceeduRise
                .6s
                cubic-bezier(.22, 1, .36, 1)
                1s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-label-r {

            animation:
                spaceeduRise
                .6s
                cubic-bezier(.22, 1, .36, 1)
                1.1s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-cta > a {

            animation:
                spaceeduRise
                .7s
                cubic-bezier(.22, 1, .36, 1)
                1.14s
                both;
        }

        .spaceedu-hero.spaceedu-animate
        .spaceedu-scroll {

            animation:
                spaceeduRise
                .6s
                cubic-bezier(.22, 1, .36, 1)
                1.42s
                both;
        }

        @media (max-width: 1030px) {

            .spaceedu-navrow {
                left: 25px;
                right: 25px;
            }

            .spaceedu-navbar::after {
                left: 25px;
                right: 25px;
            }

            .spaceedu-burger {
                display: flex;
            }

            .spaceedu-links {

                position: absolute;

                top: 96px;

                right: 0;

                width:
                    min(
                        324px,
                        calc(100vw - 50px)
                    );

                flex-direction: column;

                align-items: stretch;

                padding: 12px;

                border-radius: 20px;

                background:
                    rgba(9, 21, 42, .88);

                backdrop-filter: blur(18px);

                border:
                    1px solid
                    rgba(255, 255, 255, .14);

                box-shadow:
                    0 18px 44px
                    rgba(2, 8, 20, .55);

                opacity: 0;

                visibility: hidden;

                transform:
                    translateY(-10px);

                transition: .3s ease;
            }

            .spaceedu-navrow[data-open="true"]
            .spaceedu-links {

                opacity: 1;

                visibility: visible;

                transform: none;
            }

            .spaceedu-links a {

                margin-left: 0 !important;

                height: auto;

                padding: 14px 16px;

                font-size: 19px;

                justify-content: flex-start;
            }

            .spaceedu-links a + a {

                border-top:
                    1px solid
                    rgba(255, 255, 255, .08);
            }

            .spaceedu-links
            a[aria-current="page"]::after {

                top: auto;

                bottom: 9px;

                left: 16px;

                right: auto;

                width: 26px;

                height: 3px;
            }

            .spaceedu-links .spaceedu-enroll {

                width: 100%;

                height: 46px;

                margin:
                    14px 0 2px;

                border-radius: 23px;
            }

        }

        @media (max-width: 579px) {

            .spaceedu-hero {

                --u: max(
                    min(.92px, calc(100vh / 620)),
                    min(calc(100vw / 430), calc(100vh / 880))
                );
            }

            .spaceedu-navbar {
                height: 76px;
            }

            .spaceedu-navbar::after {

                top: 74px;

                left: 24px;
                right: 24px;
            }

            .spaceedu-navrow {

                left: 24px;
                right: 24px;

                height: 74px;
            }

            .spaceedu-links {
                top: 84px;
            }

            .spaceedu-copy {

                top: 76px;

                display: flex;

                flex-direction: column;

                align-items: center;

                padding:
                    56px
                    26px
                    0;

                transform: none;
            }

            .spaceedu-col {

                position: static;

                width: 100%;

                right: auto;
            }

            .spaceedu-eyebrow {

                font-size: 20px;

                letter-spacing: 5px;
            }

            .spaceedu-title {

                font-size: 86px;

                margin-top: 15px;
            }

            .spaceedu-rule {

                margin-top: 20px;

                height: 5px;
            }

            .spaceedu-rule span {
                width: 84px;
            }

            .spaceedu-lede {

                margin-top: 19px;

                font-size: 15.5px;

                line-height: 26px;

                max-width: 400px;
            }

            .spaceedu-cta {

                position: relative;

                top: auto;

                margin-top: 32px;

                height: 60px;
            }

            .spaceedu-cta > a {

                width: 190px;

                height: 60px;

                border-radius: 30px;
            }

            .spaceedu-planet-l {

                width: 89px;

                left: -44.5px;

                top: -17px;
            }

            .spaceedu-planet-r {

                width: 89px;

                right: -44.5px;

                top: -18px;
            }

            .spaceedu-label {

                top: 50%;

                transform:
                    translateY(-50%);

                font-size: 16px;

                letter-spacing: 4px;
            }

            .spaceedu-label-l {
                left: 56px;
            }

            .spaceedu-label-r {
                right: 60px;
            }

            .spaceedu-scroll {

                width: 74px;

                height: 74px;

                bottom: 49px;
            }

        }
        @media (max-width: 500px) {

            .spaceedu-title {
                font-size: 68px;
            }

            .spaceedu-lede {
                font-size: 14px;
            }

            .spaceedu-label {

                top: 100%;

                transform: none;

                font-size: 14px;
            }

            .spaceedu-label-l {
                left: 6px;
            }

            .spaceedu-label-r {
                right: 6px;
            }

        }

        @media (max-height: 660px) {

            .spaceedu-scroll {
                display: none;
            }

        }
        .spaceedu-hero
        :focus-visible {

            outline:
                2px solid
                var(--cyan);

            outline-offset: 4px;
        }

        @media (prefers-reduced-motion: reduce) {

            .spaceedu-sky video {
                display: none;
            }

            .spaceedu-planet,
            .spaceedu-cta > a,
            .spaceedu-scroll {

                transition: none;
            }

            .spaceedu-hero.spaceedu-animate * {

                animation:
                    none !important;
            }

        }

        :root {
            --green: #2aa14d;
            --light-green: #edf8f0;
            --dark: #111827;
            --text: #344054;
            --muted: #667085;
            --border: #e5e7eb;
        }

      .industries-section {
            padding: 80px 0;
        }

        /* LEFT SIDE */

        .industry-sidebar {
            border-right: 1px solid var(--border);
            padding-right: 25px;
        }

        .section-label {
            color: var(--green);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .sidebar-title {
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 25px;
        }

        .industry-list {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .industry-item {
            width: 100%;
            border: 1px solid transparent;
            background: transparent;
            border-radius: 10px;
            padding: 12px 14px;

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

            text-align: left;
            cursor: pointer;

            transition: all .25s ease;
        }

        .industry-item:hover {
            background: var(--light-green);
        }

        .industry-item.active {
            background: var(--green);
            color: #fff;
        }

        .industry-icon {
            width: 38px;
            height: 38px;
            min-width: 38px;

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

            border-radius: 9px;
            background: var(--light-green);
            color: var(--green);

            font-size: 17px;
        }

        .industry-item.active .industry-icon {
            background: #fff;
            color: var(--green);
        }

        .industry-name {
            font-size: 16px;
            font-weight: 600;
        }

        .industry-small {
            display: block;
            margin-top: 2px;
            color: var(--muted);
            font-size: 13px;
        }

        .industry-item.active .industry-small {
            color: rgba(255, 255, 255, .8);
        }

        /* RIGHT SIDE */

        .right-content {
            padding-left: 25px;
        }

        .content-heading {
            margin-bottom: 22px;
        }

        .content-heading h2 {
            font-size: 30px;
            font-weight: 700;
            margin: 0 0 7px;
        }

        .content-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 13px;
            line-height: 1.6;
        }

        /* TABS */

        .view-tabs {
            display: inline-flex;
            gap: 5px;
            padding: 5px;
            background: #f4f6f5;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .view-tab {
            border: 0;
            background: transparent;
            padding: 9px 18px;
            border-radius: 7px;
            color: var(--muted);
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            transition: .25s ease;
        }

        .view-tab i {
            margin-right: 5px;
        }

        .view-tab.active {
            background: var(--green);
            color: #fff;
            box-shadow: 0 4px 12px rgba(42, 161, 77, .18);
        }


        .shoot-view {
            display: block;
        }

        .shoot-embed {
            width: 100%;
            height: 500px;
            overflow: hidden;
            border-radius: 16px;
            background: #f5f5f5;
            border: 1px solid var(--border);
            box-shadow: 0 15px 40px rgba(16, 24, 40, .08);
        }

        .shoot-embed iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
        }


        .website-view {
            display: none;
        }

        .browser-window {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 15px;
            background: #fff;
            box-shadow: 0 15px 40px rgba(16, 24, 40, .08);
        }

        .browser-header {
            height: 42px;
            display: flex;
            align-items: center;
            padding: 0 14px;
            background: #fafafa;
            border-bottom: 1px solid var(--border);
        }

        .browser-dots {
            display: flex;
            gap: 5px;
        }

        .browser-dots span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #d0d5dd;
        }

        .browser-url {
            flex: 1;
            max-width: 450px;
            margin-left: 15px;
            padding: 6px 12px;
            border-radius: 20px;
            background: #f0f2f1;
            color: #98a2b3;
            font-size: 9px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .website-screen {
            width: 100%;
            height: 500px;
            overflow: hidden;
            background: #fff;
        }

        .website-screen iframe {
            width: 100%;
            height: 100%;
            display: block;
            border: 0;
        }

.hero-banner-section {
    position: relative;
    overflow: hidden;
    padding: 110px 0 70px;
    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(42,161,77,.15),
            transparent 34%
        ),
        radial-gradient(
            circle at 5% 90%,
            rgba(42,161,77,.08),
            transparent 30%
        ),
        #fff;
}

.hero-row {
    min-height: 570px;
}

.head-span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #2aa14d;
    font-size: 14px;
    font-weight: 700;
}

.head-span i {
    color: #2aa14d;
    font-size: 18px;
}

.slider-heading {
    font-size: clamp(42px,4.5vw,66px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -2px;
    color: #292929;
    margin-bottom: 18px;
}

.slider-heading span {
    background:
        linear-gradient(
            90deg,
            #238b43,
            #2aa14d,
            #55c878
        );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-description {
    max-width: 560px;
    color: #626262;
    font-size: 16px;
    line-height: 1.65;
}

.hero-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #333;
    font-size: 14px;
}

.hero-rating img {
    width: 95px;
}

.hero-rating strong {
    color: #2aa14d;
}

.logo-list {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 65px;
}

.logo-item {
    width: 105px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo-item img {
    max-width: 100px;
    max-height: 48px;
    object-fit: contain;
}

.hero-features {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 5px;
}

.hero-features div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
}

.hero-features i {
    color: #2aa14d;
}

.btn-get-touch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 25px;
    background: #2aa14d;
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 12px 30px rgba(42,161,77,.22);
    transition: all .3s ease;
}

.btn-get-touch:hover {
    color: #fff;
    background: #218a40;
    transform: translateY(-3px);
}

.hero-visual {
    position: relative;
    width: 100%;
    height: 530px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.visual-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(42,161,77,.13);
    filter: blur(70px);
}

.website-demo-card {
    position: relative;
    z-index: 3;
    width: 100%;
    height: 455px;
    overflow: hidden;
    background: #fff;
    border-radius: 18px;
    border: 6px solid rgba(42,161,77,.13);
    box-shadow: 0 30px 70px rgba(0,0,0,.17);
}

.browser-header {
    height: 45px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: #f7f8f8;
    border-bottom: 1px solid #e5e5e5;
}

.browser-dots {
    width: 70px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.browser-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #cfcfcf;
}

.browser-url {
    flex: 1;
    min-width: 0;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #e7e7e7;
    color: #777;
    font-size: 10px;
}

.browser-url i {
    color: #2aa14d;
}

#demo-url {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-actions {
    width: 45px;
    text-align: right;
    color: #777;
}

.website-frame {
    width: 100%;
    height: calc(100% - 45px);
    overflow: hidden;
    background: #fff;
}

.website-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: top center;
    opacity: 1;
    transform: scale(1);
    transition: opacity .35s ease,transform .45s ease;
}

.website-frame img.image-changing {
    opacity: 0;
    transform: scale(1.025);
}

.floating-card {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 15px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(42,161,77,.20);
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,.12);
}

.floating-icon {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(42,161,77,.10);
    color: #2aa14d;
}

.floating-card small {
    display: block;
    color: #777;
    font-size: 10px;
}

.floating-card strong {
    display: block;
    color: #222;
    font-size: 11px;
}

.floating-one {
    left: -5px;
    top: 95px;
}

.floating-two {
    right: -5px;
    bottom: 75px;
}

.floating-three {
    right: 20px;
    top: 25px;
}

.industry-tabs {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background: rgba(255,255,255,.97);
    border: 1px solid rgba(42,161,77,.18);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -8px 30px rgba(42,161,77,.07);
    margin-top: 25px;
}

.industry-tab {
    position: relative;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 0;
    border-right: 1px solid #eee;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all .3s ease;
}

.industry-tab:last-child {
    border-right: 0;
}

.industry-tab i {
    color: #2aa14d;
    font-size: 16px;
    transition: transform .3s ease;
}

.industry-tab:hover {
    color: #2aa14d;
    background: rgba(42,161,77,.04);
}

.industry-tab.active {
    color: #2aa14d;
    background: linear-gradient(
        180deg,
        rgba(42,161,77,.11),
        rgba(42,161,77,.02)
    );
}

.industry-tab.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #2aa14d;
    border-radius: 10px 10px 0 0;
}

.industry-tab.active i {
    transform: scale(1.15);
}

.tab-content-change {
    animation: tabContentChange .4s ease;
}

@keyframes tabContentChange {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

}

.tab-content-change {
    animation: tabContentChange .4s ease;
}

@keyframes tabContentChange {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

.tech-stack-section {
    position: relative;
    overflow: hidden;
    padding: 100px 0;
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(42,161,77,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 90%,
            rgba(42,161,77,.08),
            transparent 30%
        ),
        #f8faf9;
}


.tech-stack-section::before {
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    top: -250px;
    right: -180px;
    border-radius: 50%;
    background: rgba(42,161,77,.07);
    filter: blur(80px);
}


.tech-section-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 50px;
}


.tech-section-head > div {
    max-width: 650px;
}


.tech-mini-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2aa14d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
}


.tech-mini-title i {
    font-size: 13px;
}


.tech-section-head h2 {
    margin: 14px 0 0;
    color: #202522;
    font-size: clamp(36px, 4vw, 55px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2px;
}


.tech-section-head h2 span {
    display: block;
    background: linear-gradient(
        90deg,
        #238b43,
        #2aa14d,
        #62d07e
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.tech-section-head > p {
    max-width: 360px;
    margin: 0;
    color: #707772;
    font-size: 16px;
    line-height: 1.7;
}


/* CARD GRID */

.tech-card-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}


.tech-stack-card {
    position: relative;
    min-height: 245px;
    padding: 25px;
    overflow: hidden;
    border: 1px solid rgba(42,161,77,.13);
    border-radius: 20px;
    background: rgba(255,255,255,.88);
    box-shadow: 0 15px 45px rgba(0,0,0,.045);
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}


.tech-stack-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -80px;
    bottom: -80px;
    border-radius: 50%;
    background: rgba(42,161,77,.08);
    transition: .5s ease;
}


.tech-stack-card::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        #2aa14d,
        transparent
    );
    opacity: 0;
    transition: .4s ease;
}


.tech-stack-card:hover {
    transform: translateY(-8px);
    border-color: rgba(42,161,77,.30);
    box-shadow:
        0 25px 55px rgba(42,161,77,.12);
}


.tech-stack-card:hover::before {
    transform: scale(1.8);
}


.tech-stack-card:hover::after {
    opacity: 1;
}


.tech-number {
    position: absolute;
    top: 20px;
    right: 22px;
    color: rgba(42,161,77,.20);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
}


.tech-card-icon {
    position: relative;
    z-index: 2;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
    border-radius: 15px;
    color: #2aa14d;
    background: rgba(42,161,77,.10);
    font-size: 27px;
    transition: .4s ease;
}


.tech-stack-card:hover .tech-card-icon {
    transform: rotate(-5deg) scale(1.08);
}


.tech-card-content {
    position: relative;
    z-index: 2;
}


.tech-card-content > span {
    color: #2aa14d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.3px;
}


.tech-card-content h3 {
    margin: 7px 0 8px;
    color: #252a27;
    font-size: 20px;
    font-weight: 750;
}


.tech-card-content p {
    max-width: 190px;
    margin: 0;
    color: #7a807d;
    font-size: 14px;
    line-height: 1.6;
}


.tech-card-arrow {
    position: absolute;
    z-index: 2;
    right: 22px;
    bottom: 20px;
    color: #c4c9c6;
    font-size: 12px;
    transition: .35s ease;
}


.tech-stack-card:hover .tech-card-arrow {
    color: #2aa14d;
    transform: translate(4px,-4px);
}


/* DARK CARDS */

.dark-card {
    color: #fff;
    background:
        radial-gradient(
            circle at top right,
            rgba(42,161,77,.22),
            transparent 45%
        ),
        #151a17;
    border-color: rgba(255,255,255,.08);
}


.dark-card .tech-number {
    color: rgba(255,255,255,.18);
}


.dark-card .tech-card-content h3 {
    color: #fff;
}


.dark-card .tech-card-content p {
    color: #aeb5b1;
}


.dark-card .tech-card-arrow {
    color: #66706a;
}


.dark-card:hover {
    border-color: rgba(42,161,77,.40);
}


/* ICON COLORS */

.js-color {
    color: #b99a00;
    background: rgba(185,154,0,.10);
}


.react-color {
    color: #159fc4;
    background: rgba(21,159,196,.10);
}


.bootstrap-color {
    color: #7952b3;
    background: rgba(121,82,179,.10);
}


.php-color {
    color: #777bb4;
    background: rgba(119,123,180,.12);
}


.laravel-color {
    color: #ef3b2d;
    background: rgba(239,59,45,.11);
}


.wordpress-color {
    color: #21759b;
    background: rgba(33,117,155,.10);
}


.database-color {
    color: #4479a1;
    background: rgba(68,121,161,.10);
}


/* TABLET */

@media (max-width: 991px) {

    .tech-section-head {
        align-items: start;
        flex-direction: column;
        gap: 20px;
    }

    .tech-section-head > p {
        max-width: 600px;
    }

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

}


/* MOBILE */

@media (max-width: 575px) {

    .tech-stack-section {
        padding: 70px 0;
    }

    .tech-section-head {
        margin-bottom: 35px;
    }

    .tech-section-head h2 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .tech-section-head > p {
        font-size: 13px;
    }

    .tech-card-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .tech-stack-card {
        min-height: 215px;
        padding: 22px;
    }

}

.portfolio-section {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    padding: 90px 0;
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(42,161,77,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(42,161,77,.08),
            transparent 32%
        ),
        #f8faf9;
}


.portfolio-heading {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 35px;
}


.portfolio-heading span {
    display: inline-block;
    margin-bottom: 10px;
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}


.portfolio-heading h2 {
    margin: 0;
    color: #222;
    font-size: clamp(35px, 4vw, 55px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
}


.portfolio-heading h2 strong {
    color: #2aa14d;
}


.portfolio-heading p {
    max-width: 550px;
    margin: 15px auto 0;
    color: #707070;
    font-size: 14px;
    line-height: 1.7;
}



.custom-card img {
    /* width: 100%;
    height: 100%; */
    display: block;

    object-fit: contain;
    /* object-position: top center; */
}


/* STACK POSITIONS */

.card1 {
    z-index: 2;
}

.card2 {
    z-index: 3;
}

.card3 {
    z-index: 4;
}

.card4 {
    z-index: 5;
}

.card5 {
    z-index: 6;
}

.card6 {
    z-index: 7;
}

.portfolio-info {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 18px;

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

    padding: 13px 16px;

    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);

    border: 1px solid rgba(42, 161, 77, .18);
    border-radius: 12px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);

    z-index: 10;
}


.portfolio-number {
    width: 38px;
    height: 38px;

    flex: 0 0 38px;

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

    border-radius: 10px;

    background: #2aa14d;
    color: #fff;

    font-size: 12px;
    font-weight: 800;
}


.portfolio-info h4 {
    margin: 0 0 3px;

    color: #222;

    font-size: 14px;
    font-weight: 800;
}


.portfolio-info p {
    margin: 0;

    color: #777;

    font-size: 11px;
    font-weight: 500;
}

.portfolio-info::before {
    content: "";

    position: absolute;

    left: 0;
    top: 12px;
    bottom: 12px;

    width: 3px;

    background: #2aa14d;

    border-radius: 0 5px 5px 0;
}

.why-lab{
    position:relative;
    min-height:100vh;
    overflow:hidden;
  background: radial-gradient(circle at top left, rgba(42, 161, 77, 0.15), transparent 35%), radial-gradient(circle at bottom right, rgba(0, 180, 255, 0.08), transparent 35% 35%), #07131f;
}

.lab-grid{
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 15%,
            black 85%,
            transparent
        );
}

.lab-noise{
    position:absolute;
    inset:0;

    opacity:.04;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.lab-glow{
    position:absolute;

    width:600px;
    height:600px;

    border-radius:50%;

    background:#2aa14d;

    filter:blur(180px);

    opacity:.07;

    left:50%;
    top:45%;

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

.lab-container{
    width:min(1450px,92%);
    margin:auto;
    position:relative;
    z-index:5;
}

.lab-header{
    min-height:85vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.lab-tag{
    display:flex;
    align-items:center;
    gap:10px;

    font-family:"Space Mono",monospace;

    font-size:11px;

    letter-spacing:3px;

    color:#2aa14d;

    margin-bottom:30px;
}

.lab-tag i{
    width:7px;
    height:7px;

    border-radius:50%;

    background:#2aa14d;

    box-shadow:
        0 0 15px #2aa14d;
}

.lab-heading{
    font-size:
        clamp(60px,9vw,145px);

    line-height:.84;
    /* margin-top: 90px; */
    letter-spacing:-8px;

    font-weight:800;
    color: #fff;
    max-width:1200px;
}

.lab-heading .stroke{
    color:transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.35);
}

.lab-heading .green{
    color:#2aa14d;
}

.lab-sub{
    display:flex;

    justify-content:space-between;

    align-items:flex-end;
}

.lab-sub p{
    max-width:480px;

    font-size:15px;

    line-height:1.8;

    color:rgba(255,255,255,.45);
}

.lab-meta{
    font-family:"Space Mono",monospace;

    font-size:10px;

    letter-spacing:2px;

    color:rgba(255,255,255,.3);
}

.lab-area{
    min-height:100vh;

    display:grid;

    grid-template-columns:
        100px 1fr 330px;

    gap:60px;

    align-items:center;

    position:relative;
}

.lab-numbers{
    height:500px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:flex-start;

    position:relative;
}

.lab-number{
    font-family:"Space Mono",monospace;

    font-size:13px;

    color:rgba(255,255,255,.25);

    position:relative;

    cursor:pointer;

    transition:.4s;
}

.lab-number::before{
    content:"";

    position:absolute;

    left:35px;

    top:50%;

    width:0;

    height:1px;

    background:#2aa14d;

    transition:.4s;
}

.lab-number.active{
    color:#2aa14d;
}

.lab-number.active::before{
    width:35px;
}

.browser-wrap{
    perspective:1200px;
}

.browser{
    position:relative;

    width:100%;

    min-height:520px;

    border-radius:18px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        );

    border:
        1px solid rgba(255,255,255,.12);

    box-shadow:
        0 50px 120px rgba(0,0,0,.45),
        0 0 80px rgba(42,161,77,.05);

    transform-style:preserve-3d;
}

.browser::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 20%,
            rgba(255,255,255,.06),
            transparent 40%
        );

    transform:translateX(-100%);
}

.browser-top{
    height:55px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:0 20px;

    border-bottom:
        1px solid rgba(255,255,255,.08);

    background:
        rgba(0,0,0,.2);
}

.browser-dot{
    width:9px;
    height:9px;

    border-radius:50%;

    background:rgba(255,255,255,.2);
}

.browser-url{
    margin-left:15px;

    padding:7px 20px;

    border-radius:5px;

    background:rgba(255,255,255,.04);

    color:rgba(255,255,255,.25);

    font-family:"Space Mono",monospace;

    font-size:9px;
}

.code-area{
    padding:50px;

    font-family:"Space Mono",monospace;

    font-size:13px;

    line-height:2.1;

    color:rgba(255,255,255,.45);
}

.code-line{
    display:flex;

    gap:25px;

    opacity:.25;

    transform:translateX(-30px);
}

.code-line span:first-child{
    width:25px;

    text-align:right;

    color:rgba(255,255,255,.15);
}

.code-green{
    color:#2aa14d;
}

.code-white{
    color:#fff;
}

.code-blue{
    color:#73c7ff;
}

.code-yellow{
    color:#d9c76b;
}

.terminal{
    position:absolute;

    right:30px;

    bottom:25px;

    width:280px;

    padding:18px;

    border:
        1px solid rgba(42,161,77,.25);

    background:
        rgba(4,12,7,.9);

    backdrop-filter:blur(20px);

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

.terminal-top{
    display:flex;

    justify-content:space-between;

    margin-bottom:15px;

    color:rgba(255,255,255,.3);

    font-size:9px;

    font-family:"Space Mono",monospace;
}

.terminal-text{
    font-family:"Space Mono",monospace;

    font-size:10px;

    line-height:2;

    color:rgba(255,255,255,.5);
}

.terminal-text strong{
    color:#2aa14d;
}

.lab-info{
    min-height:500px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.info-counter{
    font-family:"Space Mono",monospace;

    color:#2aa14d;

    font-size:12px;

    letter-spacing:2px;

    margin-bottom:25px;
}

.info-title{
    font-size:38px;
    color: #fff;
    line-height:1.05;

    letter-spacing:-2px;

    margin-bottom:22px;
}

.info-title span{
    color:#2aa14d;
}

.info-text{
    color:rgba(255,255,255,.42);

    font-size:14px;

    line-height:1.8;
}

.info-features{
    margin-top:35px;

    display:flex;

    flex-direction:column;

    gap:15px;
}

.info-feature{
    display:flex;

    align-items:center;

    gap:12px;

    font-size:14px;

    color:rgba(255,255,255,.65);
}

.info-feature i{
    width:6px;
    height:6px;

    border-radius:50%;

    background:#2aa14d;

    box-shadow:
        0 0 10px #2aa14d;
}

.lab-bottom{
    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:50px 0 80px;

    border-top:
        1px solid rgba(255,255,255,.08);
}

.lab-bottom-left{
    font-size:12px;

    color:rgba(255,255,255,.3);
}

.lab-bottom-right{
    display:flex;

    align-items:center;

    gap:20px;

    font-family:"Space Mono",monospace;

    font-size:14px;

    color:#2aa14d;
}

.status-dot{
    width:8px;
    height:8px;

    border-radius:50%;

    background:#2aa14d;

    box-shadow:
        0 0 15px #2aa14d;

    animation:
        statusPulse 1.5s infinite;
}

@keyframes statusPulse{

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

    50%{
        opacity:.4;
        transform:scale(.6);
    }

}
.video-area {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #050505;
}

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

.video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    pointer-events: none;
    opacity: 0;
    transition: .35s ease;
}

.video-area:hover .video-overlay {
    opacity: 1;
}

.video-play {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.5);
    backdrop-filter: blur(10px);
    color: #fff;
    font-size: 22px;
}

.video-overlay span {
    font-size: 12px;
    letter-spacing: 2px;
    color: #fff;
    font-weight: 600;
}
    .code-area {
        position: relative;
        width: 100%;
        min-height: 360px;
        /* display: flex;
        align-items: center;
        justify-content: center; */
        overflow: hidden;
        padding: 25px;
    }

    .smo-image-wrap {
        width: 100%;
        height: 100%;
        min-height: 320px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        border-radius: 22px;
    }

    .smo-image-wrap::before {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        background: rgba(42, 161, 77, 0.16);
        filter: blur(75px);
        border-radius: 50%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .smo-main-image {
        position: relative;
        z-index: 2;
        width: 100%;
        /* max-width: 520px; */
        height: 540px;
        /* object-fit: contain; */
        display: block;
        border-radius: 20px;
        transition: transform 0.5s ease;
    }

    .smo-image-wrap:hover .smo-main-image {
        transform: scale(1.04);
    }

    

.gmvt-preview {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 22px;
    background: #07131f;
}

.gmvt-preview iframe {
    width: 100%;
    height: 100%;
    /* min-height: 520px; */
    border: 0;
    display: block;
}

.gmvt-placeholder {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 30px;
    background:
        radial-gradient(
            circle at top left,
            rgba(42,161,77,.20),
            transparent 40%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(0,180,255,.12),
            transparent 40%
        ),
        #07131f;
}

.gmvt-placeholder-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: rgba(42,161,77,.15);
    border: 1px solid rgba(42,161,77,.35);
    color: #2aa14d;
    font-size: 34px;
    margin-bottom: 20px;
}

.gmvt-placeholder strong {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}

.gmvt-placeholder span {
    color: rgba(255,255,255,.65);
    font-size: 14px;
}

.portfolio-showcase-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.portfolio-showcase-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 45px;
}

.portfolio-label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #2aa14d;
    margin-bottom: 14px;
}

.portfolio-label i {
    font-size: 15px;
}

.portfolio-showcase-head h2 {
    margin: 0;
    font-size: 46px;
    line-height: 1.1;
    font-weight: 700;
    color: #07131f;
}

.portfolio-showcase-head h2 span {
    color: #2aa14d;
}

.portfolio-showcase-head > p {
    max-width: 480px;
    margin: 0;
    color: #66727d;
    font-size: 15px;
    line-height: 1.8;
}
.industries-section {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.portfolio-box {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    padding: 18px;
    border-radius: 28px;
    background: linear-gradient(
        135deg,
        rgba(42,161,77,.09),
        rgba(255,255,255,.98)
    );
    border: 1px solid rgba(42,161,77,.13);
}

.portfolio-thumbnails {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.portfolio-thumb {
    width: 100%;
    height: 82px;
    padding: 4px;
    border: 1px solid rgba(42,161,77,.12);
    border-radius: 15px;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    transition: .3s ease;
}

.portfolio-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 11px;
    transition: .4s ease;
}

.portfolio-thumb:hover {
    transform: scale(1.04);
    border-color: #2aa14d;
}

.portfolio-thumb:hover img {
    transform: scale(1.08);
}

.portfolio-thumb.active {
    padding: 3px;
    border: 2px solid #2aa14d;
    box-shadow: 0 8px 25px rgba(42,161,77,.18);
}

.portfolio-content {
    min-width: 0;
    padding: 25px;
    border-radius: 22px;
    background: #07131f;
}

.portfolio-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.portfolio-main-thumb {
    width: 65px;
    height: 65px;
    flex: 0 0 65px;
    padding: 4px;
    border-radius: 15px;
    background: #fff;
}

.portfolio-main-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 11px;
}

.portfolio-heading span {
    display: block;
    margin-bottom: 5px;
    color: #2aa14d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.portfolio-heading h2 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 27px;
    font-weight: 700;
}

.portfolio-heading p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.portfolio-tabs {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
    padding: 5px;
    margin-bottom: 15px;
    border-radius: 13px;
    background: rgba(255,255,255,.07);
}

.portfolio-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(255,255,255,.5);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: .3s ease;
}

.portfolio-tab i {
    font-size: 14px;
}

.portfolio-tab:hover {
    color: #fff;
}

.portfolio-tab.active {
    background: #2aa14d;
    color: #fff;
}

.portfolio-view {
    height: 535px;
    width: 100%;
    overflow: hidden;
    border-radius: 17px;
    background: #fff;
}

.portfolio-screen {
    width: 100%;
    height: 100%;
    display: none;
    animation: portfolioFade .4s ease;
}

.portfolio-screen.active {
    display: block;
}

.portfolio-screen iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.browser-window {
    width: 100%;
    height: 100%;
    background: #fff;
}

.browser-header {
    height: 42px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 14px;
    background: #eef1f3;
    border-bottom: 1px solid #dde2e5;
}

.browser-dots {
    display: flex;
    gap: 5px;
}

.browser-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #b7bec3;
}

.browser-url {
    flex: 1;
    height: 25px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 6px;
    background: #fff;
    color: #68727a;
    font-size: 10px;
    overflow: hidden;
    white-space: nowrap;
}

.browser-screen {
    height: calc(100% - 42px);
}

.logo-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
    padding: 50px;
    background:
        radial-gradient(
            circle at top left,
            rgba(42,161,77,.14),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(0,180,255,.08),
            transparent 35%
        ),
        #07131f;
}

.logo-card {
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 35px;
    border-radius: 30px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
}

.logo-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.logo-info {
    max-width: 300px;
}

.logo-info span {
    color: #2aa14d;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.logo-info h3 {
    margin: 10px 0;
    color: #fff;
    font-size: 28px;
}

.logo-info p {
    margin: 0;
    color: rgba(255,255,255,.55);
    font-size: 13px;
    line-height: 1.7;
}

@keyframes portfolioFade {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
  .payment-page {
            min-height: 100vh;
            padding: 60px 15px;
            display: flex;
            align-items: center;
            background:
                radial-gradient(
                    circle at 0% 0%,
                    rgba(42,161,77,.13),
                    transparent 30%
                ),
                radial-gradient(
                    circle at 100% 100%,
                    rgba(0,180,255,.07),
                    transparent 30%
                ),
                #f7faf8;
        }

        .payment-wrapper {
            width: 100%;
            max-width: 1180px;
            margin: auto;
        }

        .payment-card {
            overflow: hidden;
            border-radius: 28px;
            background: #fff;
            border: 1px solid rgba(42,161,77,.12);
            box-shadow: 0 30px 80px rgba(7,19,31,.09);
        }

        .payment-left {
            min-height: 700px;
            padding: 55px 45px;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(
                    circle at top left,
                    rgba(42,161,77,.18),
                    transparent 35%
                ),
                radial-gradient(
                    circle at bottom right,
                    rgba(0,180,255,.08),
                    transparent 35%
                ),
                #07131f;
        }

        .payment-left::after {
            content: "";
            position: absolute;
            width: 280px;
            height: 280px;
            right: -130px;
            bottom: -130px;
            border-radius: 50%;
            border: 1px solid rgba(42,161,77,.15);
            box-shadow:
                0 0 0 40px rgba(42,161,77,.025),
                0 0 0 80px rgba(42,161,77,.02);
        }

        .secure-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 25px;
            color: #2aa14d;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 2px;
        }

        .secure-label i {
            font-size: 14px;
        }

        .payment-left h1 {
            margin: 0 0 18px;
            color: #fff;
            font-size: 48px;
            line-height: 1.12;
            font-weight: 800;
        }

        .payment-left h1 span {
            color: #2aa14d;
        }

        .payment-left > p {
            max-width: 420px;
            margin-bottom: 45px;
            color: rgba(255,255,255,.58);
            font-size: 13px;
            line-height: 1.9;
        }

        .security-list {
            display: flex;
            flex-direction: column;
            gap: 17px;
            margin-bottom: 45px;
        }

        .security-item {
            display: flex;
            align-items: center;
            gap: 13px;
        }

        .security-icon {
            width: 40px;
            height: 40px;
            flex: 0 0 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: rgba(42,161,77,.11);
            color: #2aa14d;
        }

        .security-item strong {
            display: block;
            margin-bottom: 3px;
            color: #fff;
            font-size: 16px;
            font-weight: 600;
        }

        .security-item span {
            color: rgba(255,255,255,.4);
            font-size: 14px;
        }

        .gateway-card {
            position: relative;
            z-index: 2;
            max-width: 350px;
            padding: 18px;
            border: 1px solid rgba(255,255,255,.09);
            border-radius: 18px;
            background: rgba(255,255,255,.045);
            backdrop-filter: blur(15px);
        }

        .gateway-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .gateway-logo {
            display: flex;
            align-items: center;
            gap: 9px;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }

        .gateway-logo i {
            color: #2aa14d;
            font-size: 18px;
        }

        .gateway-secure {
            padding: 5px 9px;
            border-radius: 20px;
            background: rgba(42,161,77,.12);
            color: #2aa14d;
            font-size: 8px;
            font-weight: 700;
        }

        .gateway-card p {
            margin: 0;
            color: rgba(255,255,255,.4);
            font-size: 12px;
            line-height: 1.6;
        }

        .payment-right {
            min-height: 700px;
            padding: 45px;
            background: #fff;
        }

        .steps {
            display: flex;
            align-items: center;
            margin-bottom: 42px;
        }

        .step {
            display: flex;
            align-items: center;
            gap: 9px;
        }

        .step-number {
            width: 35px;
            height: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: #edf2ee;
            color: #7b8780;
            font-size: 11px;
            font-weight: 700;
            transition: .3s ease;
        }

        .step.active .step-number {
            background: #2aa14d;
            color: #fff;
            box-shadow: 0 8px 20px rgba(42,161,77,.2);
        }

        .step-info strong {
            display: block;
            color: #07131f;
            font-size: 15px;
            font-weight: 700;
        }

        .step-info span {
            display: block;
            margin-top: 2px;
            color: #9aa39d;
            font-size: 14px;
        }

        .step-line {
            width: 65px;
            height: 1px;
            margin: 0 13px;
            background: #dfe5e1;
            transition: .3s ease;
        }

        .step-line.active {
            background: #2aa14d;
        }

        .form-step {
            display: none;
            animation: fadeStep .4s ease;
        }

        .form-step.active {
            display: block;
        }

        @keyframes fadeStep {

            from {
                opacity: 0;
                transform: translateX(10px);
            }

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

        }

        .form-heading {
            margin-bottom: 28px;
        }

        .form-heading small {
            color: #2aa14d;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.8px;
        }

        .form-heading h2 {
            margin: 6px 0 5px;
            color: #07131f;
            font-size: 25px;
            font-weight: 700;
        }

        .form-heading p {
            margin: 0;
            color: #89938d;
            font-size: 12px;
        }

        .field {
            margin-bottom: 16px;
        }

        .field label {
            display: block;
            margin-bottom: 6px;
            color: #354139;
            font-size: 14px;
            font-weight: 600;
        }

        .input-wrapper {
            position: relative;
        }

        .input-wrapper i {
            position: absolute;
            top: 50%;
            left: 14px;
            z-index: 2;
            transform: translateY(-50%);
            color: #8d9991;
            font-size: 13px;
        }

        .input-wrapper input,
        .input-wrapper textarea {
            width: 100%;
            border: 1px solid #e2e8e4;
            outline: none;
            border-radius: 10px;
            background: #fbfcfb;
            color: #07131f;
            font-family: inherit;
            font-size: 12px;
            transition: .25s ease;
        }

        .input-wrapper input {
            height: 44px;
            padding: 0 13px 0 39px;
        }

        .input-wrapper textarea {
            min-height: 75px;
            padding: 12px 13px 12px 39px;
            resize: none;
        }

        .input-wrapper input:focus,
        .input-wrapper textarea:focus {
            border-color: #2aa14d;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(42,161,77,.07);
        }

        .amount-wrapper {
            display: flex;
            align-items: center;
            overflow: hidden;
            height: 50px;
            border: 1px solid rgba(42,161,77,.3);
            border-radius: 10px;
            background: rgba(42,161,77,.035);
        }

        .amount-symbol {
            width: 48px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2aa14d;
            font-size: 18px;
            font-weight: 700;
        }

        .amount-wrapper input {
            width: 100%;
            height: 100%;
            border: 0;
            outline: 0;
            background: transparent;
            color: #07131f;
            font-size: 17px;
            font-weight: 700;
        }

        .continue-button {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 8px;
            border: 0;
            border-radius: 11px;
            background: #2aa14d;
            color: #fff;
            font-family: inherit;
            font-size: 16px;
            font-weight: 700;
            transition: .3s ease;
            box-shadow: 0 10px 25px rgba(42,161,77,.2);
        }

        .continue-button:hover {
            background: #238c42;
            transform: translateY(-2px);
        }

        .form-security {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 14px;
            color: #929b95;
            font-size: 12px;
        }

        .form-security i {
            color: #2aa14d;
        }

        .summary-box {
            padding: 22px;
            margin-bottom: 18px;
            border: 1px solid #e5ebe7;
            border-radius: 15px;
            background: #fafcfb;
        }

        .summary-heading {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 18px;
        }

        .summary-heading strong {
            color: #07131f;
            font-size: 13px;
        }

        .edit-button {
            padding: 0;
            border: 0;
            background: transparent;
            color: #2aa14d;
            font-family: inherit;
            font-size: 11px;
            cursor: pointer;
        }

        .customer-info {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 13px;
            border-radius: 11px;
            background: #fff;
            border: 1px solid #edf1ee;
        }

        .customer-icon {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 11px;
            background: rgba(42,161,77,.1);
            color: #2aa14d;
        }

        .customer-info strong {
            display: block;
            margin-bottom: 3px;
            color: #07131f;
            font-size: 15px;
        }

        .customer-info span {
            display: block;
            color: #87918b;
            font-size: 12px;
        }

        .summary-address {
            margin-top: 10px;
            padding: 12px;
            border-radius: 10px;
            background: #fff;
        }

        .summary-address small {
            display: block;
            margin-bottom: 4px;
            color: #98a19b;
            font-size: 12px;
        }

        .summary-address strong {
            color: #354139;
            font-size: 12px;
            line-height: 1.5;
        }

        .amount-card {
            padding: 24px;
            border-radius: 17px;
            background: #07131f;
        }

        .amount-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .amount-top span {
            color: #2aa14d;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
        }

        .amount-top i {
            color: rgba(255,255,255,.4);
            font-size: 17px;
        }

        .amount-value {
            margin: 15px 0 22px;
            color: #fff;
            font-size: 35px;
            font-weight: 800;
        }

        .gateway-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 13px 0;
            border-top: 1px solid rgba(255,255,255,.08);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }

        .gateway-row span {
            color: rgba(255,255,255,.45);
            font-size: 12px;
        }

        .gateway-row strong {
            color: #fff;
            font-size: 12px;
        }

        .pay-button {
            width: 100%;
            height: 50px;
            margin-top: 18px;
            border: 0;
            border-radius: 10px;
            background: #2aa14d;
            color: #fff;
            font-family: inherit;
            font-size: 15px;
            font-weight: 700;
            transition: .3s ease;
        }

        .pay-button:hover {
            background: #238c42;
            transform: translateY(-2px);
        }

        .pay-button i {
            margin-right: 6px;
        }

        .gateway-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            margin-top: 12px;
            color: rgba(255,255,255,.3);
            font-size: 12px;
        }

        .gateway-note i {
            color: #2aa14d;
        }

        .back-button {
            margin-top: 15px;
            padding: 0;
            border: 0;
            background: transparent;
            color: #7d8881;
            font-size: 12px;
            cursor: pointer;
        }

        .back-button:hover {
            color: #2aa14d;
        }

        
.dvi-contact-page {
    font-family: "Montserrat", sans-serif;
    color: #07131f;
    overflow: hidden;
}

.dvi-contact-hero {
    position: relative;
    padding: 120px 0 100px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(42,161,77,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 80%,
            rgba(0,180,255,.07),
            transparent 25%
        ),
        #07131f;
    overflow: hidden;
}

.dvi-contact-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.glow-one {
    width: 500px;
    height: 500px;
    right: -280px;
    top: -250px;
    border: 1px solid rgba(42,161,77,.15);
}

.glow-two {
    width: 350px;
    height: 350px;
    left: -220px;
    bottom: -230px;
    background: rgba(42,161,77,.04);
}

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

.dvi-contact-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 17px;
    margin-bottom: 24px;
    border: 1px solid rgba(42,161,77,.35);
    border-radius: 50px;
    background: rgba(42,161,77,.08);
    color: #2aa14d;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.dvi-contact-badge span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2aa14d;
    box-shadow: 0 0 15px rgba(42,161,77,.8);
}

.dvi-contact-hero h1 {
    max-width: 800px;
    margin: 0 0 25px;
    color: #fff;
    font-size: clamp(48px, 6vw, 78px);
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -3px;
}

.dvi-contact-hero h1 strong {
    display: block;
    color: #2aa14d;
    font-weight: 800;
}

.dvi-contact-hero > .container > .row > .col-lg-7 > p {
    max-width: 680px;
    margin-bottom: 32px;
    color: rgba(255,255,255,.64);
    font-size: 15px;
    line-height: 1.9;
}

.dvi-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 35px;
}

.dvi-primary-btn,
.dvi-call-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 22px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 750;
    transition: .3s ease;
}

.dvi-primary-btn {
    color: #fff;
    background: #2aa14d;
    box-shadow: 0 12px 35px rgba(42,161,77,.22);
}

.dvi-primary-btn:hover {
    color: #fff;
    background: #238b42;
    transform: translateY(-3px);
}

.dvi-call-btn {
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.05);
}

.dvi-call-btn:hover {
    color: #fff;
    border-color: rgba(42,161,77,.5);
    background: rgba(42,161,77,.1);
}

.dvi-hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.dvi-hero-trust div {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255,255,255,.5);
    font-size: 10px;
    font-weight: 600;
}

.dvi-hero-trust i {
    color: #2aa14d;
    font-size: 15px;
}

.dvi-hero-contact-card {
    position: relative;
    padding: 38px;
    margin-left: 25px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 25px;
    background: rgba(255,255,255,.055);
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    backdrop-filter: blur(18px);
}

.dvi-floating-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    border-radius: 17px;
    background: rgba(42,161,77,.14);
    border: 1px solid rgba(42,161,77,.3);
}

.dvi-floating-icon i {
    color: #2aa14d;
    font-size: 25px;
}

.dvi-hero-contact-card > span {
    color: #2aa14d;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dvi-hero-contact-card h3 {
    margin: 9px 0 14px;
    color: #fff;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 750;
}

.dvi-hero-contact-card p {
    margin: 0;
    color: rgba(255,255,255,.52);
    font-size: 12px;
    line-height: 1.8;
}

.dvi-card-line {
    height: 1px;
    margin: 25px 0 20px;
    background: rgba(255,255,255,.1);
}

.dvi-mini-contact {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 17px;
}

.dvi-mini-contact > i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(42,161,77,.1);
    color: #2aa14d;
}

.dvi-mini-contact small {
    display: block;
    margin-bottom: 3px;
    color: rgba(255,255,255,.35);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
}

.dvi-mini-contact a {
    color: rgba(255,255,255,.75);
    font-size: 11px;
    text-decoration: none;
}

.dvi-contact-info-section {
    position: relative;
    z-index: 5;
    padding: 45px 0;
    background: #fff;
}

.dvi-info-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 105px;
    padding: 20px;
    border: 1px solid #e7eee9;
    border-radius: 17px;
    background: #fff;
    text-decoration: none;
    box-shadow: 0 12px 35px rgba(7,19,31,.045);
    transition: .3s ease;
}

.dvi-info-box:hover {
    transform: translateY(-5px);
    border-color: rgba(42,161,77,.25);
    box-shadow: 0 20px 45px rgba(7,19,31,.08);
}

.dvi-info-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(42,161,77,.09);
    color: #2aa14d;
}

.dvi-info-box span {
    display: block;
    margin-bottom: 3px;
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.dvi-info-box h4 {
    margin: 0 0 3px;
    color: #07131f;
    font-size: 18px;
    font-weight: 750;
}

.dvi-info-box p {
    margin: 0;
    color: #8a938d;
    font-size: 13px;
}

.dvi-info-arrow {
    position: absolute;
    top: 20px;
    right: 18px;
    color: #b1b9b4;
    font-size: 13px;
    transition: .3s ease;
}

.dvi-info-box:hover .dvi-info-arrow {
    color: #2aa14d;
    transform: translate(3px,-3px);
}

.dvi-main-contact-section {
    padding: 110px 0;
    background:
        radial-gradient(
            circle at top right,
            rgba(42,161,77,.08),
            transparent 30%
        ),
        #f6f9f7;
}

.dvi-section-label {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.dvi-section-label > span {
    width: 25px;
    height: 1px;
    background: #2aa14d;
}

.dvi-main-heading {
    max-width: 500px;
    margin: 0 0 20px;
    color: #07131f;
    font-size: clamp(38px, 4vw, 54px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -2px;
}

.dvi-main-heading strong {
    display: block;
    color: #2aa14d;
}

.dvi-main-description {
    max-width: 500px;
    margin-bottom: 38px;
    color: #737e77;
    font-size: 14px;
    line-height: 1.9;
}

.dvi-contact-point {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.dvi-contact-point > div {
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    color: #2aa14d;
    box-shadow: 0 8px 25px rgba(7,19,31,.06);
}

.dvi-contact-point h4 {
    margin: 0 0 5px;
    color: #07131f;
    font-size: 18px;
    font-weight: 750;
}

.dvi-contact-point p {
    max-width: 390px;
    margin: 0;
    color: #87918b;
    font-size: 14px;
    line-height: 1.7;
}

.dvi-office-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 490px;
    margin-top: 38px;
    padding: 20px;
    border: 1px solid rgba(42,161,77,.12);
    border-radius: 15px;
    background: rgba(42,161,77,.045);
}

.dvi-office-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #2aa14d;
    color: #fff;
}

.dvi-office-card span {
    display: block;
    margin-bottom: 5px;
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.dvi-office-card p {
    margin: 0;
    color: #657069;
    font-size: 13px;
    line-height: 1.7;
}

.dvi-form-wrapper {
    padding: 40px;
    border: 1px solid #e2eae4;
    border-radius: 25px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(7,19,31,.07);
}

.dvi-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.dvi-form-header span {
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
}

.dvi-form-header h3 {
    margin: 7px 0 0;
    color: #07131f;
    font-size: 27px;
    font-weight: 800;
}

.dvi-form-header h3 strong {
    color: #2aa14d;
}

.dvi-form-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: rgba(42,161,77,.09);
    color: #2aa14d;
    font-size: 21px;
}

.dvi-form-wrapper label {
    display: block;
    margin-bottom: 12px;
    color: #344139;
    font-size: 13px;
    font-weight: 700;
}

.dvi-input {
    position: relative;
}

.dvi-input > i:first-child {
    position: absolute;
    z-index: 2;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #2aa14d;
    font-size: 14px;
}

.dvi-input input,
.dvi-input select,
.dvi-input textarea {
    width: 100%;
    border: 1px solid #e0e8e2;
    outline: none;
    border-radius: 11px;
    background: #fbfdfc;
    color: #27342c;
    font-family: inherit;
    font-size: 13px;
    transition: .3s ease;
}

.dvi-input input,
.dvi-input select {
    height: 50px;
    padding: 0 15px 0 43px;
}

.dvi-input textarea {
    min-height: 140px;
    padding: 15px 15px 15px 43px;
    resize: vertical;
}

.dvi-input input::placeholder,
.dvi-input textarea::placeholder {
    color: #aab2ad;
}

.dvi-input input:focus,
.dvi-input select:focus,
.dvi-input textarea:focus {
    border-color: rgba(42,161,77,.5);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(42,161,77,.07);
}

.dvi-select {
    position: relative;
}

.dvi-select select {
    appearance: none;
    cursor: pointer;
}

.dvi-select .select-icon {
    position: absolute;
    right: 16px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
    color: #87918b;
    pointer-events: none;
}

.dvi-textarea > i {
    top: 19px !important;
    transform: none !important;
}

.dvi-form-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 5px;
}

.dvi-form-security {
    display: flex;
    align-items: center;
    gap: 9px;
}

.dvi-form-security > i {
    color: #2aa14d;
    font-size: 19px;
}

.dvi-form-security strong {
    display: block;
    color: #4d5951;
    font-size: 14px;
}

.dvi-form-security span {
    display: block;
    margin-top: 2px;
    color: #a1aaa4;
    font-size: 12px;
}

.dvi-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 50px;
    min-width: 170px;
    padding: 0 22px;
    border: 0;
    border-radius: 11px;
    background: #2aa14d;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(42,161,77,.2);
    transition: .3s ease;
}

.dvi-submit-btn:hover {
    background: #238b42;
    transform: translateY(-2px);
}

.dvi-submit-btn i {
    transition: .3s ease;
}

.dvi-submit-btn:hover i {
    transform: translateX(4px);
}

.dvi-map-section {
    padding: 100px 0;
    background: #fff;
}

.dvi-map-heading {
    max-width: 650px;
    margin: 0 auto 45px;
}

.dvi-section-label.center {
    justify-content: center;
}

.dvi-map-heading h2 {
    margin: 0 0 15px;
    color: #07131f;
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.dvi-map-heading h2 strong {
    color: #2aa14d;
}

.dvi-map-heading p {
    margin: 0;
    color: #7c8780;
    font-size: 14px;
    line-height: 1.8;
}

.dvi-map-wrapper {
    position: relative;
    height: 480px;
    overflow: hidden;
    border-radius: 25px;
    background: #07131f;
    box-shadow: 0 25px 70px rgba(7,19,31,.12);
}

.dvi-map {
    width: 100%;
    height: 100%;
}

.dvi-map iframe {
    width: 100%;
    height: 100%;
    filter: grayscale(.15);
}

.dvi-map-info {
    position: absolute;
    z-index: 5;
    top: 25px;
    left: 25px;
    width: 300px;
    padding: 28px;
    border-radius: 18px;
    background: rgba(7,19,31,.93);
    box-shadow: 0 20px 50px rgba(0,0,0,.25);
    backdrop-filter: blur(15px);
}

.dvi-map-info-icon {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 12px;
    background: rgba(42,161,77,.15);
    color: #2aa14d;
}

.dvi-map-info > span {
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.dvi-map-info h3 {
    margin: 5px 0 10px;
    color: #fff;
    font-size: 21px;
    font-weight: 750;
}

.dvi-map-info p {
    margin: 0 0 20px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.8;
}

.dvi-map-info a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #2aa14d;
    font-size: 12px;
    font-weight: 750;
    text-decoration: none;
}

.dvi-final-cta {
    padding: 0 0 100px;
    background: #fff;
}

.dvi-final-box {
    position: relative;
    overflow: hidden;
    padding: 55px 60px;
    border-radius: 25px;
    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(42,161,77,.18),
            transparent 30%
        ),
        #07131f;
}

.dvi-cta-decoration {
    position: absolute;
    width: 250px;
    height: 250px;
    right: -100px;
    bottom: -150px;
    border: 1px solid rgba(42,161,77,.2);
    border-radius: 50%;
}

.dvi-final-box span {
    color: #2aa14d;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
}

.dvi-final-box h2 {
    max-width: 650px;
    margin: 8px 0 10px;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -1.5px;
}

.dvi-final-box h2 strong {
    color: #2aa14d;
}

.dvi-final-box p {
    margin: 0;
    color: rgba(255,255,255,.5);
    font-size: 13px;
}

.dvi-cta-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 25px;
    border-radius: 11px;
    background: #2aa14d;
    color: #fff;
    font-size: 11px;
    font-weight: 750;
    text-decoration: none;
    box-shadow: 0 12px 35px rgba(42,161,77,.22);
    transition: .3s ease;
}

.dvi-cta-button:hover {
    color: #fff;
    background: #238b42;
    transform: translateY(-3px);
}

@media (max-width: 991px) {

    .dvi-contact-hero {
        padding: 90px 0;
    }

    .dvi-hero-contact-card {
        margin: 45px 0 0;
    }

    .dvi-main-contact-section {
        padding: 80px 0;
    }

    .dvi-form-wrapper {
        margin-top: 20px;
    }

    .dvi-map-section {
        padding: 80px 0;
    }

}

@media (max-width: 767px) {

    .dvi-contact-hero {
        padding: 70px 0;
    }

    .dvi-contact-hero h1 {
        font-size: 45px;
        letter-spacing: -1.5px;
    }

    .dvi-contact-hero > .container > .row > .col-lg-7 > p {
        font-size: 13px;
    }

    .dvi-hero-actions {
        flex-wrap: wrap;
    }

    .dvi-hero-trust {
        gap: 12px 18px;
    }

    .dvi-hero-contact-card {
        padding: 28px;
    }

    .dvi-contact-info-section {
        padding: 30px 0;
    }

    .dvi-main-contact-section {
        padding: 65px 0;
    }

    .dvi-main-heading {
        font-size: 39px;
    }

    .dvi-form-wrapper {
        padding: 25px;
        border-radius: 20px;
    }

    .dvi-form-header h3 {
        font-size: 23px;
    }

    .dvi-form-icon {
        width: 45px;
        height: 45px;
    }

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

    .dvi-submit-btn {
        width: 100%;
    }

    .dvi-map-section {
        padding: 65px 0;
    }

    .dvi-map-heading h2 {
        font-size: 37px;
    }

    .dvi-map-wrapper {
        height: 550px;
    }

    .dvi-map-info {
        top: 15px;
        left: 15px;
        right: 15px;
        width: auto;
    }

    .dvi-final-cta {
        padding-bottom: 65px;
    }

    .dvi-final-box {
        padding: 40px 25px;
        text-align: center;
    }

    .dvi-final-box h2 {
        font-size: 32px;
    }

    .dvi-cta-button {
        margin-top: 25px;
    }

}

@media (max-width: 480px) {

    .dvi-contact-hero h1 {
        font-size: 39px;
    }

    .dvi-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .dvi-primary-btn,
    .dvi-call-btn {
        justify-content: center;
    }

    .dvi-info-box {
        min-height: 90px;
    }

    .dvi-form-header {
        align-items: flex-start;
    }

    .dvi-form-header h3 {
        font-size: 21px;
    }

    .dvi-map-wrapper {
        height: 600px;
    }

}
@media (max-width: 767px) {

    .team-review {
        overflow: hidden;
    }

    .team-review .scroll-container {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .team-review .sticky-wrapper {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
        top: auto !important;
        overflow: visible !important;
    }

    .team-review .bg-text {
        display: none;
    }

    .team-review .arc-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 16px;
        width: 100% !important;
        height: auto !important;
        transform: none !important;
        position: relative !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 15px 5px 25px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .team-review .arc-carousel::-webkit-scrollbar {
        display: none;
    }

    .team-review .review-card {
        flex: 0 0 88% !important;
        width: 88% !important;
        min-width: 88% !important;
        max-width: 88% !important;
        height: auto !important;
        min-height: 300px;
        margin: 0 !important;
        transform: none !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
        scroll-snap-align: center;
    }

    .team-review .review-header h3 {
        font-size: 21px;
    }

    .team-review .review-header span {
        font-size: 13px;
    }

    .team-review .review-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .team-review .review-stars {
        font-size: 16px;
    }

    .team-review .review-footer {
        margin-top: 20px;
    }

}

@media (max-width: 480px) {

    .team-review .arc-carousel {
        gap: 14px;
        padding-left: 3px;
        padding-right: 3px;
    }

    .team-review .review-card {
        flex: 0 0 90% !important;
        width: 90% !important;
        min-width: 90% !important;
        max-width: 90% !important;
        min-height: 290px;
    }

}
/*.header-section{*/
/*        position: fixed;*/
/*    top: 0;*/
/*    z-index: 999;*/
/*    background: white;*/
/*    width: 100%;*/
/*}*/