:root {
  --teal: #0b5d57;
  --teal2: #0e8f86;
  --aqua: #25b8ad;
  --lime: #a9d83b;
  --navy: #0b3a5b;
  --ink: #12313a;
  --muted: #61757a;
  --paper: #f7fbfa;
  --white: #fff;
  --shadow: 0 25px 70px rgba(11, 93, 87, 0.13);
  --glass: rgba(255, 255, 255, 0.68);
  --line: rgba(11, 93, 87, 0.12);
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 0%, #e8f8f4 0, transparent 30%),
    radial-gradient(circle at 90% 20%, #eff8dd 0, transparent 28%), var(--paper);
  overflow-x: hidden;
}
a {
  text-decoration: none;
  color: inherit;
}
img {
  max-width: 100%;
  display: block;
}
button {
  font: inherit;
}
.ambient {
  position: fixed;
  z-index: -3;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.ambient-a {
  width: 420px;
  height: 420px;
  background: rgba(37, 184, 173, 0.13);
  left: -170px;
  top: 20%;
}
.ambient-b {
  width: 380px;
  height: 380px;
  background: rgba(169, 216, 59, 0.11);
  right: -140px;
  top: 55%;
}
.grid-glow {
  position: fixed;
  inset: 0;
  z-index: -4;
  opacity: 0.25;
  background-image:
    linear-gradient(rgba(11, 93, 87, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 93, 87, 0.045) 1px, transparent 1px);
  background-size: 55px 55px;
  mask-image: linear-gradient(to bottom, black, transparent 70%);
}
.nav-wrap {
  position: fixed;
  z-index: 20;
  top: 18px;
  left: 0;
  right: 0;
  padding: 0 5%;
}
.navbar {
  max-width: 1280px;
  margin: auto;
  min-height: 72px;
  padding: 10px 14px 10px 20px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 24px;
  display: flex;
  align-items: center;
  gap: 28px;
  backdrop-filter: blur(22px);
  box-shadow: 0 14px 50px rgba(9, 61, 58, 0.1);
}
.glass {
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: max-content;
}
.brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
}.brand b {
  display: block;
  font: 900 80px/1.05 Manrope;
  color: var(--navy);
  letter-spacing: -0.8px;
}

.brand small {
  display: block;
  font-size: 40px;
  line-height: 1.2;
  color: var(--teal);
  font-weight: 900;
  letter-spacing: 0.1px;
}
.nav-links {
  display: flex;
  gap: 26px;
  margin-left: auto;
}
.nav-links a {
  font-size: 14px;
  font-weight: 700;
  color: #36555b;
  position: relative;
}
.nav-links a:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 2px;
  background: var(--lime);
  transition: 0.25s;
}
.nav-links a:hover:after {
  width: 100%;
}
.nav-cta,
.btn-primary {
  background: linear-gradient(135deg, var(--teal), var(--teal2));
  color: #fff;
  border-radius: 15px;
  padding: 13px 18px;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(11, 93, 87, 0.22);
}
.nav-cta span {
  margin-left: 6px;
}
.menu-btn {
  display: none;
  border: 0;
  background: transparent;
  font-size: 24px;
  color: var(--teal);
}
.section {
  max-width: 1280px;
  margin: auto;
  padding: 110px 5%;
}
.hero {
  min-height: 850px;
  padding-top: 160px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 900;
  color: var(--teal);
  display: flex;
  align-items: center;
  gap: 9px;
}
.eyebrow i {
  width: 27px;
  height: 3px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--lime), var(--teal));
  display: inline-block;
}
.hero h1 {
  font: 800 clamp(46px, 5.5vw, 82px)/1.02 Manrope;
  letter-spacing: -3px;
  margin: 22px 0;
  color: var(--navy);
}
h1 span,
h2 span {
  color: var(--teal);
}
h1 em {
  font-style: normal;
  color: #648089;
}
.hero-copy > p {
  max-width: 650px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}
.hero-actions {
  display: flex;
  gap: 12px;
  margin: 30px 0;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 800;
}
.btn-glass {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 35px rgba(11, 93, 87, 0.08);
}
.trust-row {
  display: flex;
  gap: 24px;
  margin-top: 36px;
}
.trust-row div {
  padding-left: 16px;
  border-left: 2px solid var(--lime);
}
.trust-row strong {
  display: block;
  font-size: 12px;
}
.trust-row small {
  display: block;
  color: #809095;
  margin-top: 4px;
  font-size: 11px;
}
.hero-stage {
  height: 610px;
  position: relative;
  display: grid;
  place-items: center;
}
.hero-orb {
  position: absolute;
  width: 490px;
  height: 490px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 25%,
    #eaffdc,
    #b9e5dc 40%,
    #0b5d57 100%
  );
  box-shadow:
    inset -35px -35px 90px rgba(0, 0, 0, 0.12),
    0 45px 100px rgba(11, 93, 87, 0.18);
  filter: saturate(1.1);
}
.hero-orb:after {
  content: "";
  position: absolute;
  inset: 25px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: rotate(25deg);
}
.hero-video-card {
  width: min(520px, 90%);
  height: 440px;
  border-radius: 42px;
  overflow: hidden;
  position: relative;
  background: #dcefeb;
  box-shadow: 0 40px 100px rgba(5, 62, 60, 0.25);
  transform-style: preserve-3d;
}
.hero-video-card video,
.video-fallback,
.video-fallback img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-fallback {
  position: absolute;
  inset: 0;
}
.hero-video-card video {
  position: relative;
  z-index: 1;
}
.video-fallback {
  z-index: 0;
}
.video-label {
  position: absolute;
  bottom: 28px;
  left: 28px;
  background: rgba(255, 255, 255, 0.76);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 800;
  backdrop-filter: blur(12px);
}
.pulse {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #39b64b;
  border-radius: 50%;
  margin-right: 7px;
  box-shadow: 0 0 0 6px rgba(57, 182, 75, 0.12);
}
.video-glass {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  right: 20px;
  padding: 14px 16px;
  background: rgba(7, 57, 55, 0.7);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  backdrop-filter: blur(15px);
}
.video-glass span {
  font-size: 8px;
  letter-spacing: 1.5px;
  opacity: 0.7;
}
.video-glass b {
  display: block;
  font-size: 13px;
  margin-top: 3px;
}
.float-card {
  position: absolute;
  z-index: 4;
  padding: 15px 18px;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 9px;
  align-items: center;
}
.float-card span {
  grid-row: 1/3;
  font-size: 25px;
}
.float-card b {
  font-size: 12px;
}
.float-card small {
  font-size: 9px;
  color: #698084;
}
.fc-one {
  top: 90px;
  left: 0;
}
.fc-two {
  right: -10px;
  bottom: 95px;
}
.marquee {
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  padding: 16px 0;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
}
.marquee div {
  animation: marquee 28s linear infinite;
  display: inline-block;
}
.marquee b {
  color: var(--lime);
  margin: 0 18px;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.section-head {
  margin-bottom: 50px;
}
.section-head h2,
.solution-head h2 {
  font: 800 clamp(38px, 4.2vw, 62px)/1.05 Manrope;
  letter-spacing: -2px;
  margin: 14px 0;
}
.section-head p,
.solution-head p {
  color: var(--muted);
  max-width: 610px;
  line-height: 1.7;
}
.centered {
  text-align: center;
}
.centered .eyebrow {
  justify-content: center;
}
.centered p {
  margin: 0 auto;
}
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}
.about-visual {
  height: 500px;
  border-radius: 44px;
  position: relative;
  background: linear-gradient(145deg, #dff4ed, #fff);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.water-disc {
  position: absolute;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  right: -80px;
  top: 40px;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(11, 93, 87, 0.14) 0 8deg,
      transparent 8deg 16deg
    ),
    linear-gradient(135deg, #0b5d57, #25b8ad);
  box-shadow: inset 20px 20px 70px rgba(255, 255, 255, 0.15);
}
.ring {
  position: absolute;
  width: 470px;
  height: 470px;
  border: 1px solid rgba(11, 93, 87, 0.2);
  border-radius: 50%;
  top: 20px;
  right: -100px;
}
.about-logo {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  object-fit: contain;
  left: 70px;
  top: 135px;
  box-shadow: 0 25px 55px rgba(0, 0, 0, 0.16);
  background: #fff;
}
.mini-stat {
  position: absolute;
  left: 28px;
  bottom: 28px;
  padding: 15px 18px;
  border-radius: 18px;
}
.mini-stat strong {
  font: 800 25px Manrope;
  color: var(--teal);
}
.mini-stat span {
  display: block;
  font-size: 10px;
  color: #61757a;
}
.lead {
  font: 600 23px/1.5 Manrope;
  color: var(--navy);
}
.about-copy > p:not(.lead) {
  color: var(--muted);
  line-height: 1.8;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 30px;
}
.feature-grid div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.58);
}
.feature-grid b {
  font-size: 11px;
  color: var(--lime);
  display: block;
}
.feature-grid strong {
  display: block;
  font-size: 15px;
  margin: 5px 0;
}
.feature-grid span {
  font-size: 12px;
  color: var(--muted);
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.service-card {
  padding: 27px;
  border: 1px solid rgba(11, 93, 87, 0.1);
  border-radius: 27px;
  background: rgba(255, 255, 255, 0.68);
  min-height: 275px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 15px 45px rgba(11, 93, 87, 0.06);
  transition: 0.3s;
}
.service-card:hover {
  transform: translateY(-8px);
}
.service-card:before {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  right: -60px;
  top: -60px;
  background: rgba(169, 216, 59, 0.13);
}
.service-no {
  font-size: 12px;
  color: #789092;
}
.icon3d {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 25px;
  background: linear-gradient(145deg, #fff, #d9efea);
  box-shadow:
    8px 8px 20px rgba(11, 93, 87, 0.12),
    -5px -5px 14px #fff;
  color: var(--teal);
  margin: 22px 0;
}
.service-card h3 {
  font: 800 19px Manrope;
  margin: 0 0 11px;
  color: var(--navy);
}
.service-card p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.service-card a {
  position: absolute;
  bottom: 24px;
  font-size: 13px;
  font-weight: 800;
  color: var(--teal);
}
.service-card.featured {
  background: linear-gradient(145deg, #0b5d57, #0d8178);
  color: #fff;
}
.service-card.featured h3,
.service-card.featured p,
.service-card.featured .service-no {
  color: #fff;
}
.service-card.featured .icon3d {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.service-card.featured a {
  color: var(--lime);
}
.solution-head {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: 42px;
}
.solution-head p {
  max-width: 420px;
}
.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.solution-card {
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(11, 93, 87, 0.08);
  transition: 0.3s;
}
.solution-card:hover {
  transform: translateY(-7px);
}
.solution-card.big {
  grid-column: span 2;
}
.solution-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}
.solution-card.big img {
  height: 280px;
}
.solution-card div {
  padding: 20px;
}
.solution-card span {
  font-size: 12px;
  color: var(--lime);
  font-weight: 900;
}
.solution-card h3 {
  font: 800 20px Manrope;
  margin: 6px 0;
}
.solution-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.why-panel {
  border-radius: 38px;
  padding: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.84),
    rgba(224, 245, 239, 0.7)
  );
}
.why-copy h2 {
  font: 800 clamp(38px, 4.2vw, 62px)/1.05 Manrope;
  letter-spacing: -2px;
  margin: 15px 0;
}
.why-copy p {
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
}
.why-list {
  display: grid;
  gap: 12px;
}
.why-list div {
  padding: 17px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  display: grid;
  grid-template-columns: 35px 1fr;
  column-gap: 10px;
}
.why-list span {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #eaf8d4;
  color: #4c8e13;
  font-weight: 900;
}
.why-list b {
  font-size: 14px;
}
.why-list small {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  margin-top: 4px;
}
.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
}
.process-line {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 31px;
  border-top: 1px dashed rgba(11, 93, 87, 0.3);
}
.process-item {
  position: relative;
  text-align: center;
}
.process-item b {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  margin: 0 auto 22px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 12px 30px rgba(11, 93, 87, 0.12);
  color: var(--teal);
  position: relative;
  z-index: 2;
}
.process-item:nth-of-type(2) b,
.process-item:nth-of-type(4) b {
  background: var(--teal);
  color: #fff;
}
.process-item h3 {
  font: 800 19px Manrope;
  margin: 0 0 9px;
}
.process-item p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.65;
}
.project-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 18px;
}
.project-grid img {
  width: 100%;
  height: 370px;
  object-fit: cover;
  border-radius: 28px;
  box-shadow: 0 20px 60px rgba(11, 93, 87, 0.12);
  border: 1px solid var(--line);
}
.project-grid img:first-child {
  height: 450px;
}
.cta-section {
  padding-bottom: 70px;
}
.cta-card {
  padding: 52px;
  border-radius: 38px;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 50px;
  box-shadow: 0 35px 80px rgba(11, 58, 91, 0.22);
  position: relative;
  overflow: hidden;
}
.cta-card:after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  right: -100px;
  bottom: -180px;
  background: radial-gradient(
    circle,
    rgba(169, 216, 59, 0.45),
    transparent 65%
  );
}
.cta-card .eyebrow {
  color: var(--lime);
}
.cta-card h2 {
  font: 800 clamp(32px, 4vw, 54px)/1.05 Manrope;
  letter-spacing: -2px;
  margin: 16px 0;
}
.cta-card p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.7;
}
.contact-actions {
  display: grid;
  gap: 12px;
  align-content: center;
  position: relative;
  z-index: 2;
}
.contact-btn {
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--lime);
  color: #153b38;
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}
.contact-btn span {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.contact-btn b {
  font-size: 14px;
}
.contact-btn.light {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.contact-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
}
.contact-details div {
  padding: 20px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 20px;
  display: flex;
  gap: 12px;
}
.contact-details span {
  font-size: 21px;
}
.contact-details p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.contact-details b {
  color: var(--navy);
}
footer {
  padding: 35px 5% 22px;
  background: #071f2f;
  color: #fff;
}
.footer-main,
.footer-bottom {
  max-width: 1280px;
  margin: auto;
}
.footer-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-bottom: 25px;
}
.footer-main .brand b {
  color: #fff;
}
.footer-main .brand small {
  color: var(--lime);
}
.footer-main p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.45);
  font-size: 11px;
}
.floating-wa {
  position: fixed;
  z-index: 25;
  right: 22px;
  bottom: 22px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #25d366;
  color: #fff;
  font-size: 25px;
  box-shadow: 0 15px 35px rgba(37, 211, 102, 0.35);
  border: 4px solid #fff;
}
.reveal {
  opacity: 0;
  transform: translateY(25px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.tilt {
  transition: transform 0.18s ease;
}
.tilt:hover {
  transition: transform 0.08s ease;
}
@media (max-width: 1000px) {
  .nav-links {
    gap: 14px;
  }
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .hero {
    grid-template-columns: 1fr;
    padding-top: 135px;
  }
  .hero-stage {
    height: 540px;
  }
  .about-grid {
    gap: 45px;
  }
  .solution-cards {
    grid-template-columns: 1fr 1fr;
  }
  .solution-card.big {
    grid-column: span 2;
  }
  .contact-details {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 720px) {
  .nav-wrap {
    top: 10px;
    padding: 0 12px;
  }
  .navbar {
    min-height: 62px;
    border-radius: 18px;
    padding: 8px 10px 8px 12px;
  }
  .brand img {
    width: 42px;
    height: 42px;
  }
  .brand small {
    font-size: 7px;
  }
  .nav-links {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    padding: 15px;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
  }
  .nav-links.open {
    display: flex;
  }
  .nav-cta {
    display: none;
  }
  .menu-btn {
    display: block;
    margin-left: auto;
  }
  .section {
    padding: 78px 5%;
  }
  .hero {
    min-height: auto;
    padding-top: 115px;
  }
  .hero h1 {
    font-size: 44px;
    letter-spacing: -2px;
  }
  .hero-copy > p {
    font-size: 14px;
  }
  .hero-actions {
    flex-direction: column;
  }
  .trust-row {
    gap: 12px;
    flex-wrap: wrap;
  }
  .hero-stage {
    height: 430px;
  }
  .hero-orb {
    width: 330px;
    height: 330px;
  }
  .hero-video-card {
    height: 330px;
    border-radius: 30px;
  }
  .float-card {
    display: none;
  }
  .section-head h2,
  .solution-head h2 {
    font-size: 38px;
  }
  .about-grid,
  .why-panel,
  .cta-card {
    grid-template-columns: 1fr;
  }
  .about-visual {
    height: 390px;
  }
  .water-disc {
    width: 320px;
    height: 320px;
  }
  .about-logo {
    width: 170px;
    height: 170px;
    left: 35px;
    top: 110px;
  }
  .feature-grid,
  .service-grid,
  .solution-cards,
  .project-grid,
  .contact-details {
    grid-template-columns: 1fr;
  }
  .solution-card.big {
    grid-column: span 1;
  }
  .solution-card.big img,
  .solution-card img,
  .project-grid img,
  .project-grid img:first-child {
    height: 250px;
  }
  .solution-head {
    display: block;
  }
  .solution-head p {
    margin-top: 20px;
  }
  .why-panel {
    padding: 30px;
    gap: 30px;
  }
  .process {
    grid-template-columns: 1fr 1fr;
  }
  .process-line {
    display: none;
  }
  .cta-card {
    padding: 32px;
  }
  .contact-details div {
    min-height: 95px;
  }
  .footer-main,
  .footer-bottom {
    display: block;
  }
  .footer-main p {
    margin-top: 20px;
  }
  .footer-bottom span {
    display: block;
    margin-top: 7px;
  }
  .floating-wa {
    right: 16px;
    bottom: 16px;
  }
}
/* =========================================================
   EMPIRE PREMIUM LIVE CARD SYSTEM
   Animated borders + glass depth + 3D hover
   ========================================================= */
:root {
  --card-border-a: rgba(11, 93, 87, 0.1);
  --card-border-b: rgba(37, 184, 173, 0.55);
  --card-border-c: rgba(169, 216, 59, 0.75);
}
@property --border-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.service-card,
.solution-card,
.feature-grid div,
.why-list div,
.contact-details div,
.float-card,
.mini-stat,
.hero-video-card,
.about-visual,
.navbar,
.glass {
  position: relative;
  isolation: isolate;
}
.service-card::after,
.solution-card::after,
.feature-grid div::after,
.why-list div::after,
.contact-details div::after,
.float-card::after,
.mini-stat::after,
.hero-video-card::after,
.about-visual::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0deg,
    rgba(37, 184, 173, 0.1) 35deg,
    rgba(37, 184, 173, 0.78) 80deg,
    rgba(169, 216, 59, 0.95) 120deg,
    rgba(14, 143, 134, 0.65) 170deg,
    transparent 225deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderOrbit 5s linear infinite;
  pointer-events: none;
}
@keyframes borderOrbit {
  to {
    --border-angle: 360deg;
  }
}
.service-card::before,
.solution-card::before,
.feature-grid div::before,
.why-list div::before,
.contact-details div::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  right: -75px;
  top: -75px;
  background: radial-gradient(
    circle,
    rgba(37, 184, 173, 0.22),
    rgba(169, 216, 59, 0.08) 42%,
    transparent 70%
  );
  filter: blur(8px);
  opacity: 0.55;
  animation: cardGlow 4s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes cardGlow {
  from {
    transform: translate3d(-10px, 8px, 0) scale(0.82);
    opacity: 0.35;
  }
  to {
    transform: translate3d(10px, -8px, 0) scale(1.15);
    opacity: 0.75;
  }
}
.service-card,
.solution-card,
.feature-grid div,
.why-list div,
.contact-details div,
.project-grid img {
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
  will-change: transform;
}
.service-card:hover,
.solution-card:hover,
.feature-grid div:hover,
.why-list div:hover,
.contact-details div:hover {
  transform: translateY(-10px) scale(1.012);
  box-shadow:
    0 28px 70px rgba(11, 93, 87, 0.14),
    0 0 35px rgba(37, 184, 173, 0.08);
}
.solution-card:hover,
.project-grid img:hover {
  transform: translateY(-10px) scale(1.018);
  filter: saturate(1.06);
}
.service-card.featured {
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 25px 70px rgba(11, 93, 87, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.service-card.featured::after {
  background: conic-gradient(
    from var(--border-angle),
    transparent,
    rgba(169, 216, 59, 0.95),
    rgba(255, 255, 255, 0.75),
    rgba(37, 184, 173, 0.95),
    transparent
  );
}
.navbar {
  overflow: hidden;
  box-shadow:
    0 18px 55px rgba(9, 61, 58, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.navbar::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  z-index: -1;
  background: conic-gradient(
    from var(--border-angle),
    transparent 0 28%,
    rgba(37, 184, 173, 0.7) 36%,
    rgba(169, 216, 59, 0.8) 43%,
    transparent 51% 100%
  );
  animation: borderOrbit 7s linear infinite;
}
.icon3d {
  transform-style: preserve-3d;
  animation: iconFloat 3.2s ease-in-out infinite;
}
@keyframes iconFloat {
  0%,
  100% {
    transform: translateY(0) rotateX(0) rotateY(0);
  }
  50% {
    transform: translateY(-5px) rotateX(4deg) rotateY(-5deg);
  }
}
.service-card:hover .icon3d {
  transform: translateY(-4px) rotateX(8deg) rotateY(-10deg) scale(1.06);
  box-shadow:
    10px 14px 28px rgba(11, 93, 87, 0.18),
    -5px -5px 16px #fff,
    0 0 25px rgba(37, 184, 173, 0.16);
}
.process-item b {
  transition: 0.4s ease;
  animation: processPulse 3s ease-in-out infinite;
}
.process-item:nth-child(2) b {
  animation-delay: 0.35s;
}
.process-item:nth-child(3) b {
  animation-delay: 0.7s;
}
.process-item:nth-child(4) b {
  animation-delay: 1.05s;
}
@keyframes processPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 12px 30px rgba(11, 93, 87, 0.12);
  }
  50% {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
      0 18px 38px rgba(11, 93, 87, 0.18),
      0 0 0 8px rgba(37, 184, 173, 0.07);
  }
}
.process-line::after {
  content: "";
  position: absolute;
  left: -2%;
  top: -2px;
  width: 22%;
  border-top: 3px solid var(--aqua);
  filter: drop-shadow(0 0 7px rgba(37, 184, 173, 0.55));
  animation: processFlow 3s linear infinite;
}
@keyframes processFlow {
  from {
    left: -2%;
  }
  to {
    left: 100%;
  }
}
.fc-one {
  animation: floatOne 4s ease-in-out infinite;
}
.fc-two {
  animation: floatTwo 4.6s ease-in-out infinite;
}
@keyframes floatOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -9px, 8px);
  }
}
@keyframes floatTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, 9px, -6px);
  }
}
.hero-video-card {
  box-shadow:
    0 40px 100px rgba(5, 62, 60, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 45px rgba(37, 184, 173, 0.1);
}
.cta-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    transparent,
    rgba(169, 216, 59, 0.9),
    rgba(255, 255, 255, 0.75),
    rgba(37, 184, 173, 0.9),
    transparent
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderOrbit 5s linear infinite;
  pointer-events: none;
}
.cta-card > * {
  position: relative;
  z-index: 3;
}
.floating-wa {
  animation:
    waFloat 3s ease-in-out infinite,
    waPulse 2.2s ease-in-out infinite;
}
@keyframes waFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
@keyframes waPulse {
  0%,
  100% {
    box-shadow:
      0 15px 35px rgba(37, 211, 102, 0.35),
      0 0 0 0 rgba(37, 211, 102, 0.25);
  }
  50% {
    box-shadow:
      0 18px 42px rgba(37, 211, 102, 0.42),
      0 0 0 12px rgba(37, 211, 102, 0);
  }
}
@media (max-width: 720px) {
  .service-card:hover,
  .solution-card:hover,
  .feature-grid div:hover,
  .why-list div:hover,
  .contact-details div:hover,
  .project-grid img:hover {
    transform: translateY(-5px) scale(1.005);
  }
  .service-card::after,
  .solution-card::after,
  .feature-grid div::after,
  .why-list div::after,
  .contact-details div::after {
    animation-duration: 6s;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   EMPIRE FINAL UI POLISH
   Cleaner navbar + stronger premium card borders
   ========================================================= */

:root {
  --premium-border-size: 2.5px;
  --nav-border-size: 2px;
}

/* ---------- NAVBAR: cleaner premium glass ---------- */
.navbar {
  border: var(--nav-border-size) solid rgba(255, 255, 255, 0.88);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.82),
    rgba(235, 249, 246, 0.58)
  );
  box-shadow:
    0 18px 55px rgba(9, 61, 58, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
}

/* Elegant animated border — not too much */
.navbar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: var(--nav-border-size);
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle),
    rgba(11, 93, 87, 0.08) 0deg,
    rgba(37, 184, 173, 0.95) 70deg,
    rgba(169, 216, 59, 0.95) 125deg,
    rgba(37, 184, 173, 0.35) 175deg,
    rgba(11, 93, 87, 0.08) 235deg,
    rgba(11, 93, 87, 0.08) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: navbarBorderFlow 7s linear infinite;
  pointer-events: none;
}

/* Keep navbar content above animated edge */
.navbar > * {
  position: relative;
  z-index: 2;
}

@keyframes navbarBorderFlow {
  to {
    --border-angle: 360deg;
  }
}

/* Subtle glass highlight inside navbar */
.navbar::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.95),
    rgba(37, 184, 173, 0.35),
    transparent
  );
  z-index: 2;
  pointer-events: none;
}

/* ---------- ALL MAIN CARDS: thicker borders ---------- */
.service-card,
.solution-card,
.feature-grid div,
.why-list div,
.contact-details div,
.float-card,
.mini-stat,
.hero-video-card,
.about-visual,
.project-grid img,
.process-item b {
  border-width: var(--premium-border-size);
  border-style: solid;
  border-color: rgba(11, 93, 87, 0.16);
}

/* Animated border is now visibly thicker */
.service-card::after,
.solution-card::after,
.feature-grid div::after,
.why-list div::after,
.contact-details div::after,
.float-card::after,
.mini-stat::after,
.hero-video-card::after,
.about-visual::after {
  inset: -2px;
  padding: var(--premium-border-size);
}

/* Stronger but still elegant moving border */
.service-card::after,
.solution-card::after,
.feature-grid div::after,
.why-list div::after,
.contact-details div::after,
.float-card::after,
.mini-stat::after,
.hero-video-card::after,
.about-visual::after {
  background: conic-gradient(
    from var(--border-angle),
    rgba(11, 93, 87, 0.08) 0deg,
    rgba(37, 184, 173, 0.25) 45deg,
    rgba(37, 184, 173, 1) 85deg,
    rgba(169, 216, 59, 1) 125deg,
    rgba(14, 143, 134, 0.85) 165deg,
    rgba(37, 184, 173, 0.18) 205deg,
    rgba(11, 93, 87, 0.08) 255deg,
    rgba(11, 93, 87, 0.08) 360deg
  );
}

/* ---------- Service card ---------- */
.service-card {
  box-shadow:
    0 18px 48px rgba(11, 93, 87, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.service-card:hover {
  transform: translateY(-9px) scale(1.008);
  box-shadow:
    0 30px 75px rgba(11, 93, 87, 0.16),
    0 0 32px rgba(37, 184, 173, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ---------- Solution cards ---------- */
.solution-card {
  box-shadow:
    0 20px 60px rgba(11, 93, 87, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.solution-card:hover {
  transform: translateY(-9px) scale(1.01);
  box-shadow:
    0 32px 78px rgba(11, 93, 87, 0.16),
    0 0 35px rgba(37, 184, 173, 0.09);
}

/* ---------- Image/project cards ---------- */
.project-grid img {
  border-width: var(--premium-border-size);
  box-shadow:
    0 22px 60px rgba(11, 93, 87, 0.13),
    0 0 0 1px rgba(255, 255, 255, 0.7);
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease,
    filter 0.5s ease;
}

.project-grid img:hover {
  transform: translateY(-9px) scale(1.012);
  box-shadow:
    0 34px 85px rgba(11, 93, 87, 0.18),
    0 0 35px rgba(37, 184, 173, 0.1);
}

/* ---------- Process circles ---------- */
.process-item b {
  border-width: 2.5px;
  border-color: rgba(11, 93, 87, 0.16);
}

/* ---------- CTA ---------- */
.cta-card {
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 35px 85px rgba(11, 58, 91, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .navbar {
    border-width: 2px;
  }

  .service-card,
  .solution-card,
  .feature-grid div,
  .why-list div,
  .contact-details div {
    border-width: 2px;
  }

  .service-card:hover,
  .solution-card:hover,
  .feature-grid div:hover,
  .why-list div:hover,
  .contact-details div:hover,
  .project-grid img:hover {
    transform: translateY(-5px) scale(1.003);
  }
}
/* =========================================================
   EMPIRE SERVICES — BROCHURE-INSPIRED PREMIUM CARD STYLE
   Only the Services section is affected.
   ========================================================= */

.services-brochure-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: stretch;
}

.service-brochure-card {
  min-height: 420px;
  padding: 22px 21px 24px;
  border: 2px solid rgba(11, 93, 87, 0.15);
  border-radius: 26px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.96),
    rgba(236, 248, 244, 0.78)
  );
  box-shadow:
    0 18px 48px rgba(11, 93, 87, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.service-brochure-card::before {
  width: 190px;
  height: 190px;
  right: -105px;
  top: -105px;
  background: radial-gradient(
    circle,
    rgba(169, 216, 59, 0.22),
    rgba(37, 184, 173, 0.08) 42%,
    transparent 70%
  );
}

.service-brochure-card .service-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(11, 93, 87, 0.1);
}

.service-brochure-card .service-topline span {
  font: 800 13px Manrope;
  color: var(--teal);
  letter-spacing: 1px;
}

.service-brochure-card .service-topline b {
  font-size: 9px;
  letter-spacing: 1.25px;
  color: var(--lime);
}

.service-brochure-card .service-icon-wrap {
  height: 82px;
  display: flex;
  align-items: center;
}

.service-brochure-card .icon3d {
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 17px;
  border: 2px solid rgba(37, 184, 173, 0.18);
  font-size: 25px;
}

.service-brochure-card h3 {
  min-height: 45px;
  margin: 3px 0 12px;
  font: 800 17px/1.25 Manrope;
  color: var(--navy);
}

.service-brochure-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.service-brochure-card li {
  position: relative;
  padding-left: 17px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.service-brochure-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 3px rgba(169, 216, 59, 0.12);
}

.service-brochure-card > a {
  position: static;
  margin-top: auto;
  padding-top: 17px;
  font-size: 10px;
  font-weight: 900;
  color: var(--teal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(11, 93, 87, 0.09);
}

.service-brochure-card > a span {
  font-size: 15px;
  transition: transform 0.25s ease;
}

.service-brochure-card:hover > a span {
  transform: translateX(4px);
}

.service-brochure-card.featured {
  background: linear-gradient(145deg, #0b5d57, #0d8178);
  border-color: rgba(169, 216, 59, 0.45);
}

.service-brochure-card.featured .service-topline {
  border-color: rgba(255, 255, 255, 0.17);
}

.service-brochure-card.featured .service-topline span,
.service-brochure-card.featured .service-topline b,
.service-brochure-card.featured h3 {
  color: #fff;
}

.service-brochure-card.featured .service-topline b {
  color: var(--lime);
}

.service-brochure-card.featured li {
  color: rgba(255, 255, 255, 0.78);
}

.service-brochure-card.featured li::before {
  background: var(--lime);
}

.service-brochure-card.featured > a {
  color: var(--lime);
  border-color: rgba(255, 255, 255, 0.17);
}

.service-brochure-card.featured .icon3d {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

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

@media (max-width: 720px) {
  .services-brochure-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-brochure-card {
    min-height: auto;
    padding: 20px;
  }

  .service-brochure-card h3 {
    min-height: auto;
  }
}

/* =========================================================
   FINAL TYPOGRAPHY BOOST
   Larger, cleaner and more premium — layout preserved.
   ========================================================= */

body {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.navbar .brand b {
  font-size: 20px;
}
.navbar .brand small {
  font-size: 10px;
}
.nav-links a {
  font-size: 14px;
}
.nav-cta {
  font-size: 13px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 2.2px;
}

.section-head p,
.solution-head p {
  font-size: 16px;
}

.hero-copy > p {
  font-size: 18px;
}

.trust-row strong {
  font-size: 14px;
}
.trust-row small {
  font-size: 11px;
}

.about-copy > p:not(.lead) {
  font-size: 16px;
}

.feature-grid strong {
  font-size: 15px;
}
.feature-grid span {
  font-size: 12px;
}

.services-brochure-grid {
  gap: 22px;
}

.service-brochure-card {
  min-height: 455px;
  padding: 25px 24px 27px;
  border-width: 2.5px;
  border-radius: 28px;
}

.service-brochure-card .service-topline span {
  font-size: 13px;
}

.service-brochure-card .service-topline b {
  font-size: 11px;
}

.service-brochure-card .service-icon-wrap {
  height: 88px;
}

.service-brochure-card .icon3d {
  width: 64px;
  height: 64px;
  border-radius: 19px;
  font-size: 27px;
}

.service-brochure-card h3 {
  font-size: 22px;
  line-height: 1.28;
  min-height: 56px;
  margin: 4px 0 16px;
}

.service-brochure-card ul {
  gap: 10px;
}

.service-brochure-card li {
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
}

.service-brochure-card li::before {
  width: 7px;
  height: 7px;
  top: 7px;
}

.service-brochure-card > a {
  padding-top: 19px;
  font-size: 13px;
}

.service-brochure-card > a span {
  font-size: 18px;
}

.solution-card h3 {
  font-size: 20px;
}
.solution-card p {
  font-size: 13px;
}

.why-list b {
  font-size: 14px;
}
.why-list small {
  font-size: 12px;
}

.process-item h3 {
  font-size: 19px;
}
.process-item p {
  font-size: 13px;
}

.contact-btn span {
  font-size: 11px;
}
.contact-btn b {
  font-size: 14px;
}
.contact-details p {
  font-size: 13px;
}

@media (max-width: 1000px) {
  .service-brochure-card {
    min-height: 445px;
  }
}

@media (max-width: 720px) {
  .section-head p,
  .solution-head p {
    font-size: 15px;
  }

  .hero-copy > p {
    font-size: 15px;
  }

  .services-brochure-grid {
    gap: 16px;
  }

  .service-brochure-card {
    min-height: auto;
    padding: 23px 21px 24px;
  }

  .service-brochure-card .service-icon-wrap {
    height: 78px;
  }

  .service-brochure-card h3 {
    font-size: 20px;
    min-height: auto;
  }

  .service-brochure-card li {
    font-size: 13.5px;
  }

  .service-brochure-card > a {
    font-size: 13px;
  }
}

/* =========================================================
   EMPIRE ULTRA PREMIUM TYPOGRAPHY + 3D NAVBAR
   Final visual enhancement
   ========================================================= */

/* ---------- Bigger overall typography ---------- */
body {
  font-size: 17px;
}

.nav-links a {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.15px;
}

.nav-cta {
  font-size: 15px;
  padding: 14px 21px;
  border-radius: 17px;
}

.brand b {
  font-size: 22px;
  letter-spacing: -0.3px;
}

.brand small {
  font-size: 11px;
  letter-spacing: 0.15px;
}

.hero-copy > p {
  font-size: 19px;
}

.section-head p,
.solution-head p {
  font-size: 17px;
}

.about-copy > p:not(.lead) {
  font-size: 17px;
}

.feature-grid strong {
  font-size: 16px;
}

.feature-grid span {
  font-size: 13px;
}

.service-brochure-card h3 {
  font-size: 23px;
}

.service-brochure-card li {
  font-size: 14px;
  line-height: 1.55;
}

.service-brochure-card .service-topline span {
  font-size: 14px;
}

.service-brochure-card .service-topline b {
  font-size: 12px;
}

.solution-card h3 {
  font-size: 21px;
}

.solution-card p {
  font-size: 14px;
}

.why-list b {
  font-size: 15px;
}

.why-list small {
  font-size: 13px;
}

.process-item h3 {
  font-size: 20px;
}

.process-item p {
  font-size: 14px;
}

.contact-details p {
  font-size: 14px;
}

/* =========================================================
   NAVBAR — 3D GLASS / LIVE PREMIUM SYSTEM
   ========================================================= */

.nav-wrap {
  perspective: 1400px;
}

.navbar {
  min-height: 82px;
  padding: 12px 16px 12px 22px;
  border-radius: 27px;
  transform-style: preserve-3d;
  transform: translateZ(0);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.91) 0%,
    rgba(241, 252, 249, 0.76) 45%,
    rgba(219, 245, 239, 0.68) 100%
  );
  border: 2.5px solid rgba(255, 255, 255, 0.92);
  box-shadow:
    0 22px 65px rgba(7, 65, 61, 0.16),
    0 8px 22px rgba(7, 65, 61, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.98),
    inset 0 -7px 20px rgba(11, 93, 87, 0.035);
  animation: navbarFloat3D 6s ease-in-out infinite;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease,
    background 0.45s ease;
}

/* Moving light layer */
.navbar::before {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  border-radius: 24px;
  background: linear-gradient(
    115deg,
    transparent 15%,
    rgba(255, 255, 255, 0.78) 32%,
    rgba(37, 184, 173, 0.1) 43%,
    transparent 57%
  );
  background-size: 220% 100%;
  animation: navbarLightSweep 5s ease-in-out infinite;
  pointer-events: none;
}

/* Thick animated neon edge */
.navbar::after {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: 0;
  padding: 2.5px;
  border-radius: 29px;
  background: conic-gradient(
    from var(--border-angle),
    rgba(11, 93, 87, 0.08) 0deg,
    rgba(37, 184, 173, 0.25) 35deg,
    rgba(37, 184, 173, 1) 72deg,
    rgba(169, 216, 59, 1) 112deg,
    rgba(255, 255, 255, 0.95) 145deg,
    rgba(14, 143, 134, 0.8) 185deg,
    rgba(37, 184, 173, 0.18) 225deg,
    rgba(11, 93, 87, 0.08) 285deg,
    rgba(11, 93, 87, 0.08) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation:
    navbarBorderFlow 4.8s linear infinite,
    navbarBorderPulse 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(37, 184, 173, 0.28));
  pointer-events: none;
}

.navbar > * {
  position: relative;
  z-index: 3;
  transform: translateZ(18px);
}

/* 3D floating motion */
@keyframes navbarFloat3D {
  0%,
  100% {
    transform: translateY(0) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: translateY(-2px) rotateX(0.35deg) rotateY(-0.25deg);
  }
  50% {
    transform: translateY(-4px) rotateX(0deg) rotateY(0.35deg);
  }
  75% {
    transform: translateY(-2px) rotateX(-0.3deg) rotateY(0deg);
  }
}

/* Border orbit */
@keyframes navbarBorderFlow {
  to {
    --border-angle: 360deg;
  }
}

/* Border glow breathing */
@keyframes navbarBorderPulse {
  0%,
  100% {
    filter: drop-shadow(0 0 3px rgba(37, 184, 173, 0.18));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(37, 184, 173, 0.42))
      drop-shadow(0 0 14px rgba(169, 216, 59, 0.14));
  }
}

/* Glass reflection moving across navbar */
@keyframes navbarLightSweep {
  0% {
    background-position: 180% 0;
    opacity: 0.25;
  }
  45% {
    background-position: 50% 0;
    opacity: 0.75;
  }
  75%,
  100% {
    background-position: -80% 0;
    opacity: 0.25;
  }
}

/* Brand gets depth */
.navbar .brand {
  transform: translateZ(28px);
  transition:
    transform 0.35s ease,
    filter 0.35s ease;
}

.navbar .brand img {
  width: 54px;
  height: 54px;
  border-radius: 17px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow:
    0 10px 22px rgba(11, 93, 87, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s ease;
}

.navbar .brand:hover img {
  transform: translateY(-3px) rotateY(10deg) rotateX(5deg) scale(1.06);
  box-shadow:
    0 16px 30px rgba(11, 93, 87, 0.22),
    0 0 22px rgba(37, 184, 173, 0.18);
}

.navbar .brand:hover {
  filter: saturate(1.08);
}

/* Navigation links as floating 3D chips */
.nav-links {
  gap: 10px;
  padding: 5px;
  transform: translateZ(24px);
}

.nav-links a {
  position: relative;
  padding: 11px 13px;
  border-radius: 13px;
  color: #294e54;
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.28s ease,
    background 0.28s ease,
    box-shadow 0.28s ease;
}

.nav-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.8),
    rgba(37, 184, 173, 0.07)
  );
  opacity: 0;
  transform: translateZ(-1px);
  transition: opacity 0.28s ease;
}

.nav-links a::after {
  left: 12px;
  bottom: 5px;
  width: 0;
  height: 3px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--lime), var(--aqua));
  box-shadow: 0 0 9px rgba(37, 184, 173, 0.45);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-links a:hover {
  color: var(--teal);
  transform: translateY(-3px) translateZ(12px) rotateX(3deg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 9px 20px rgba(11, 93, 87, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.nav-links a:hover::before {
  opacity: 1;
}

.nav-links a:hover::after {
  width: calc(100% - 24px);
}

/* Premium CTA button */
.nav-cta {
  position: relative;
  overflow: hidden;
  transform: translateZ(34px);
  border: 2px solid rgba(255, 255, 255, 0.32);
  background: linear-gradient(135deg, #084f4b, #0e8f86 55%, #18a99f);
  box-shadow:
    0 12px 25px rgba(11, 93, 87, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -4px 10px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.3s ease;
}

.nav-cta::before {
  content: "";
  position: absolute;
  top: -80%;
  left: -35%;
  width: 55%;
  height: 260%;
  transform: rotate(25deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.42),
    transparent
  );
  animation: ctaShine 3.4s ease-in-out infinite;
}

.nav-cta:hover {
  transform: translateY(-4px) translateZ(45px) scale(1.035);
  box-shadow:
    0 18px 35px rgba(11, 93, 87, 0.32),
    0 0 22px rgba(37, 184, 173, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes ctaShine {
  0%,
  25% {
    left: -55%;
  }
  65%,
  100% {
    left: 135%;
  }
}

/* Tiny live particles/highlights inside navbar */
.navbar .nav-links::before {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 8%;
  top: 3px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow:
    0 0 8px rgba(169, 216, 59, 0.8),
    30px 5px 0 rgba(37, 184, 173, 0.5),
    58px -2px 0 rgba(37, 184, 173, 0.35);
  animation: navParticlePulse 2.5s ease-in-out infinite;
}

@keyframes navParticlePulse {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Stronger 3D hover on whole navbar */
.navbar:hover {
  animation-play-state: paused;
  transform: translateY(-3px) rotateX(1deg) rotateY(-0.5deg) translateZ(10px);
  box-shadow:
    0 28px 78px rgba(7, 65, 61, 0.2),
    0 0 35px rgba(37, 184, 173, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 1),
    inset 0 -8px 24px rgba(11, 93, 87, 0.04);
}

/* Mobile: keep it premium but compact */
@media (max-width: 720px) {
  body {
    font-size: 16px;
  }

  .navbar {
    min-height: 68px;
    padding: 8px 10px 8px 13px;
    border-radius: 21px;
    animation: none;
  }

  .navbar .brand img {
    width: 45px;
    height: 45px;
  }

  .brand b {
    font-size: 18px;
  }

  .brand small {
    font-size: 8px;
  }

  .nav-links {
    gap: 5px;
    padding: 12px;
  }

  .nav-links a {
    font-size: 15px;
    padding: 12px 13px;
  }

  .nav-cta {
    display: none;
  }

  .menu-btn {
    font-size: 28px;
    padding: 5px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 18px rgba(11, 93, 87, 0.1);
  }

  .service-brochure-card h3 {
    font-size: 21px;
  }

  .service-brochure-card li {
    font-size: 14px;
  }

  .section-head p,
  .solution-head p {
    font-size: 15.5px;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .navbar,
  .navbar::before,
  .navbar::after,
  .nav-cta::before,
  .navbar .nav-links::before {
    animation: none !important;
  }
}

/* =========================================================
   EMPIRE FINAL PREMIUM FIX
   ABOUT LOGO + SOLUTIONS 6-CARD / 3x3-ROW SYSTEM
   ========================================================= */

/* ---------- ABOUT / LOGO: clean, centered, premium ---------- */
.about-visual {
  min-height: 520px;
  height: 520px;
  border-radius: 44px;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255, 255, 255, 0.95),
      transparent 30%
    ),
    linear-gradient(145deg, #e8f7f3 0%, #f9fdfc 52%, #dcefe9 100%);
  box-shadow:
    0 30px 85px rgba(11, 93, 87, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* Large water disc stays behind the logo */
.about-visual .water-disc {
  width: 440px;
  height: 440px;
  right: -75px;
  top: 42px;
  opacity: 0.98;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(11, 93, 87, 0.15) 0 8deg,
      transparent 8deg 16deg
    ),
    linear-gradient(135deg, #087a72, #25b8ad 58%, #73c95a);
  box-shadow:
    inset 22px 22px 70px rgba(255, 255, 255, 0.16),
    inset -30px -35px 80px rgba(0, 62, 59, 0.13),
    0 25px 65px rgba(11, 93, 87, 0.1);
}

/* Elegant outer ring */
.about-visual .ring {
  width: 475px;
  height: 475px;
  right: -92px;
  top: 24px;
  border: 1.5px solid rgba(11, 93, 87, 0.18);
}

/* Actual Empire logo */
.about-visual .about-logo {
  width: 205px;
  height: 205px;
  left: 72px;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: center;
  padding: 12px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid rgba(11, 93, 87, 0.96);
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: -10px;
  box-shadow:
    0 20px 45px rgba(6, 60, 57, 0.2),
    0 0 0 8px rgba(37, 184, 173, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 1);
  z-index: 4;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.5s ease;
}

.about-visual:hover .about-logo {
  transform: translateY(-50%) translateY(-5px) rotateY(-5deg) scale(1.035);
  box-shadow:
    0 28px 58px rgba(6, 60, 57, 0.25),
    0 0 0 10px rgba(37, 184, 173, 0.1),
    0 0 35px rgba(37, 184, 173, 0.13),
    inset 0 2px 0 rgba(255, 255, 255, 1);
}

/* Logo should never look stretched */
.about-visual .about-logo {
  aspect-ratio: 1/1;
}

/* Floating statistic gets a proper premium glass treatment */
.about-visual .mini-stat {
  left: 28px;
  bottom: 28px;
  z-index: 6;
  min-width: 135px;
  padding: 15px 18px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 18px 40px rgba(11, 93, 87, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ---------- SOLUTIONS: exactly 6 cards, 3 + 3 ---------- */

.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Remove old 2-column featured-card layout */
.solution-card.big {
  grid-column: auto;
}

/* Every solution card has identical proportions */
.solution-card {
  width: 100%;
  min-width: 0;
  min-height: 465px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.98),
    rgba(242, 250, 247, 0.92)
  );
  border: 2px solid rgba(11, 93, 87, 0.13);
  box-shadow:
    0 20px 58px rgba(11, 93, 87, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

/* All six images same height */
.solution-card img,
.solution-card.big img {
  width: 100%;
  height: 255px;
  min-height: 255px;
  flex: 0 0 255px;
  object-fit: cover;
  object-position: center;
}

/* Text area same structure on every card */
.solution-card > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px 23px 24px;
}

.solution-card span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.7px;
  color: var(--lime);
}

.solution-card h3 {
  font-size: 22px;
  line-height: 1.25;
  margin: 7px 0 10px;
  min-height: 55px;
  color: var(--navy);
}

.solution-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 100%;
}

/* Premium image overlay */
.solution-card {
  position: relative;
  isolation: isolate;
}

.solution-card img {
  position: relative;
  z-index: 1;
  transition:
    transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.5s ease;
}

.solution-card::before {
  z-index: 2;
  pointer-events: none;
}

.solution-card:hover img {
  transform: scale(1.045);
  filter: saturate(1.08) contrast(1.02);
}

/* Number badge */
.solution-card > div > span {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 9px;
  border-radius: 9px;
  background: rgba(169, 216, 59, 0.12);
}

/* Make the six-card grid feel like one premium system */
.solution-cards .solution-card:nth-child(1),
.solution-cards .solution-card:nth-child(2),
.solution-cards .solution-card:nth-child(3),
.solution-cards .solution-card:nth-child(4),
.solution-cards .solution-card:nth-child(5),
.solution-cards .solution-card:nth-child(6) {
  grid-column: auto;
}

/* Second row gets a slightly different visual rhythm without changing size */
.solution-cards .solution-card:nth-child(n + 4) {
  transform-origin: center top;
}

/* Desktop/tablet: always 3 equal cards until mobile */
@media (min-width: 721px) {
  .solution-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .solution-card {
    min-height: 465px;
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) and (min-width: 721px) {
  .solution-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .solution-card {
    min-height: 420px;
    border-radius: 24px;
  }

  .solution-card img,
  .solution-card.big img {
    height: 210px;
    min-height: 210px;
    flex-basis: 210px;
  }

  .solution-card > div {
    padding: 18px;
  }

  .solution-card h3 {
    font-size: 18px;
    min-height: 48px;
  }

  .solution-card p {
    font-size: 12.5px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .about-visual {
    height: 390px;
    min-height: 390px;
    border-radius: 30px;
  }

  .about-visual .water-disc {
    width: 320px;
    height: 320px;
    right: -72px;
    top: 35px;
  }

  .about-visual .ring {
    width: 350px;
    height: 350px;
    right: -86px;
    top: 20px;
  }

  .about-visual .about-logo {
    width: 160px;
    height: 160px;
    left: 30px;
    top: 50%;
    padding: 9px;
    border-width: 4px;
  }

  .about-visual .mini-stat {
    left: 18px;
    bottom: 18px;
  }

  .solution-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .solution-card,
  .solution-card.big {
    grid-column: auto;
    min-height: 420px;
  }

  .solution-card img,
  .solution-card.big img {
    height: 235px;
    min-height: 235px;
    flex-basis: 235px;
  }

  .solution-card h3 {
    font-size: 20px;
    min-height: auto;
  }

  .solution-card p {
    font-size: 13.5px;
  }
}

/* ---------- Premium section spacing ---------- */
.solution-head {
  margin-bottom: 46px;
}

.solution-head h2 {
  margin-bottom: 12px;
}

.solution-head p {
  font-size: 17px;
}

/* Reduce visual clutter from old "big" behavior */
.solution-card.big {
  width: auto;
}

/* Smooth 3D card depth */
.solution-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.solution-card > div {
  transform: translateZ(8px);
}

/* Better focus/interaction */
.solution-card:focus-within {
  box-shadow:
    0 30px 80px rgba(11, 93, 87, 0.17),
    0 0 0 3px rgba(37, 184, 173, 0.1);
}

/* ================================================================
   EMPIRE — FINAL PREMIUM VISUAL OVERRIDES
   Requested:
   1) Fix 360°/About visual clipping
   2) Rotate the circular logo background in 3D
   3) Make navbar particles richer and animated
   4) Add subtle particles to selected page sections
   5) Make Project Visuals 3 images exactly equal
   6) Keep Solutions 6 cards exactly 3 + 3
   ================================================================ */

/* ---------- GLOBAL PARTICLE SYSTEM ---------- */
body {
  position: relative;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.42;
  background-image:
    radial-gradient(
      circle at 8% 18%,
      rgba(37, 184, 173, 0.48) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 19% 74%,
      rgba(169, 216, 59, 0.38) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 31% 38%,
      rgba(37, 184, 173, 0.28) 0 1px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 44% 82%,
      rgba(11, 93, 87, 0.22) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 57% 21%,
      rgba(169, 216, 59, 0.3) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 68% 63%,
      rgba(37, 184, 173, 0.34) 0 1px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 79% 29%,
      rgba(11, 93, 87, 0.24) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 91% 77%,
      rgba(169, 216, 59, 0.34) 0 2px,
      transparent 3px
    );
  animation: globalParticleDrift 16s ease-in-out infinite alternate;
}

@keyframes globalParticleDrift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0.25;
  }
  50% {
    transform: translate3d(0, -10px, 0) scale(1.015);
    opacity: 0.48;
  }
  100% {
    transform: translate3d(5px, 4px, 0) scale(1.03);
    opacity: 0.32;
  }
}

/* ---------- SECTION PARTICLE BACKDROP ---------- */
.hero,
.section {
  position: relative;
  isolation: isolate;
}

.hero::before,
.section:has(.about-grid)::before,
.section:has(.service-grid)::before,
.section:has(.solution-cards)::before,
.section:has(.project-grid)::before,
.section:has(.process)::before,
.section:has(.why-panel)::before,
.cta-section::before {
  content: "";
  position: absolute;
  inset: 10px 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 44px;
  opacity: 0.62;
  background-image:
    radial-gradient(
      circle at 6% 16%,
      rgba(37, 184, 173, 0.38) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 17% 68%,
      rgba(169, 216, 59, 0.3) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 28% 34%,
      rgba(37, 184, 173, 0.2) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 43% 78%,
      rgba(11, 93, 87, 0.17) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 59% 19%,
      rgba(169, 216, 59, 0.25) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 71% 57%,
      rgba(37, 184, 173, 0.26) 0 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 84% 30%,
      rgba(11, 93, 87, 0.18) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 94% 78%,
      rgba(169, 216, 59, 0.25) 0 2px,
      transparent 3px
    );
  background-size: 100% 100%;
  animation: sectionParticles 12s ease-in-out infinite alternate;
}

@keyframes sectionParticles {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(0, -7px, 0);
    opacity: 0.62;
  }
  100% {
    transform: translate3d(4px, 5px, 0);
    opacity: 0.38;
  }
}

/* ---------- NAVBAR PARTICLES: richer, premium, subtle ---------- */
.navbar {
  overflow: hidden;
}

.navbar .nav-links::before {
  content: "";
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  right: auto;
  top: auto;
  border-radius: inherit;
  background:
    radial-gradient(
      circle at 9% 24%,
      rgba(169, 216, 59, 0.9) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 24% 76%,
      rgba(37, 184, 173, 0.6) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 43% 18%,
      rgba(37, 184, 173, 0.48) 0 1px,
      transparent 2.5px
    ),
    radial-gradient(
      circle at 58% 78%,
      rgba(169, 216, 59, 0.42) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 73% 27%,
      rgba(37, 184, 173, 0.56) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 88% 70%,
      rgba(169, 216, 59, 0.72) 0 1.5px,
      transparent 3px
    ),
    radial-gradient(
      circle at 96% 22%,
      rgba(37, 184, 173, 0.52) 0 1px,
      transparent 2.5px
    );
  opacity: 0.55;
  pointer-events: none;
  animation: navParticleField 7s ease-in-out infinite alternate;
  z-index: 1;
}

@keyframes navParticleField {
  0% {
    transform: translate3d(0, 2px, 0);
    opacity: 0.28;
  }
  50% {
    transform: translate3d(-4px, -2px, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(3px, 1px, 0);
    opacity: 0.42;
  }
}

.navbar .brand,
.navbar .nav-links,
.navbar .nav-cta,
.navbar .menu-btn {
  position: relative;
  z-index: 4;
}

/* ---------- ABOUT VISUAL: prevent the 360/stat from clipping ---------- */
.about-visual {
  min-height: 520px;
  height: 520px;
  overflow: hidden;
  padding-top: 2px;
}

.about-visual > * {
  max-width: 100%;
}

.about-visual .mini-stat {
  z-index: 12;
  left: 28px;
  bottom: 26px;
  min-width: 150px;
  max-width: 190px;
  padding: 15px 18px;
  border-radius: 20px;
  overflow: visible;
  white-space: normal;
}

.about-visual .mini-stat strong {
  display: block;
  line-height: 1;
  font-size: 28px;
  white-space: nowrap;
}

.about-visual .mini-stat span {
  margin-top: 6px;
  line-height: 1.35;
  white-space: normal;
}

/* If the 360° stat is positioned near the top by existing HTML,
   keep it completely inside the visual card. */
.about-visual .stat,
.about-visual .about-stat,
.about-visual .stat-card,
.about-visual [class*="stat"] {
  max-width: calc(100% - 36px);
  box-sizing: border-box;
}

/* ---------- ROTATING 3D CIRCULAR BACKGROUND ---------- */
.about-visual .water-disc {
  width: 440px;
  height: 440px;
  right: -72px;
  top: 40px;
  transform-origin: center center;
  transform-style: preserve-3d;
  perspective: 900px;
  animation: waterDisc3D 14s linear infinite;
  will-change: transform;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(11, 93, 87, 0.18) 0deg 8deg,
      transparent 8deg 16deg
    ),
    linear-gradient(135deg, #087a72 0%, #12a79d 48%, #3bc1b2 72%, #79c957 100%);
  box-shadow:
    inset 24px 24px 72px rgba(255, 255, 255, 0.16),
    inset -35px -35px 90px rgba(0, 60, 57, 0.16),
    0 28px 70px rgba(11, 93, 87, 0.14);
}

@keyframes waterDisc3D {
  0% {
    transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: rotateZ(90deg) rotateX(2deg) rotateY(4deg);
  }
  50% {
    transform: rotateZ(180deg) rotateX(0deg) rotateY(-3deg);
  }
  75% {
    transform: rotateZ(270deg) rotateX(-2deg) rotateY(4deg);
  }
  100% {
    transform: rotateZ(360deg) rotateX(0deg) rotateY(0deg);
  }
}

/* Outer ring rotates at a different speed/direction */
.about-visual .ring {
  width: 470px;
  height: 470px;
  right: -87px;
  top: 25px;
  transform-style: preserve-3d;
  animation: ring3D 20s linear infinite reverse;
  will-change: transform;
}

@keyframes ring3D {
  0% {
    transform: rotateZ(0deg) rotateX(0deg);
  }
  50% {
    transform: rotateZ(180deg) rotateX(3deg);
  }
  100% {
    transform: rotateZ(360deg) rotateX(0deg);
  }
}

/* Logo remains stable while the design behind it rotates */
.about-visual .about-logo {
  z-index: 10;
  width: 205px;
  height: 205px;
  left: 72px;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  object-position: center;
  aspect-ratio: 1/1;
  padding: 11px;
  border-radius: 50%;
  background: #fff;
  border: 5px solid #0b5d57;
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: -11px;
  box-shadow:
    0 20px 50px rgba(6, 60, 57, 0.22),
    0 0 0 8px rgba(37, 184, 173, 0.08),
    inset 0 2px 0 #fff;
}

/* Premium depth ring around logo */
.about-visual .about-logo::after {
  content: "";
  position: absolute;
  inset: -11px;
  border: 1px solid rgba(37, 184, 173, 0.45);
  border-radius: 50%;
  pointer-events: none;
}

/* ---------- PROJECT VISUALS: 3 EXACTLY EQUAL CARDS ---------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: 1fr;
  gap: 22px;
  align-items: stretch;
}

.project-grid img,
.project-grid img:first-child {
  width: 100%;
  height: 430px;
  min-height: 430px;
  max-height: 430px;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  aspect-ratio: 1/1.12;
  margin: 0;
}

.project-grid img:hover {
  transform: translateY(-8px) scale(1.012);
}

/* Keep the visual composition equal even if one source image has
   a different intrinsic size. */
.project-grid > * {
  min-width: 0;
  height: 430px;
}

.project-grid > img {
  object-fit: cover;
}

/* ---------- SOLUTIONS: exact 3 + 3 equal cards ---------- */
.solution-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.solution-card,
.solution-card.big {
  grid-column: auto !important;
  width: 100%;
  min-width: 0;
  min-height: 465px;
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 30px;
  overflow: hidden;
}

.solution-card img,
.solution-card.big img {
  width: 100%;
  height: 250px;
  min-height: 250px;
  flex: 0 0 250px;
  object-fit: cover;
  object-position: center;
}

.solution-card > div {
  flex: 1;
  padding: 22px 23px 24px;
  display: flex;
  flex-direction: column;
}

.solution-card h3 {
  min-height: 55px;
  margin: 7px 0 10px;
}

.solution-card p {
  margin-top: auto;
}

.solution-card:hover {
  transform: translateY(-9px) scale(1.012);
}

/* ---------- More premium section atmosphere ---------- */
.section:has(.project-grid),
.section:has(.solution-cards),
.section:has(.service-grid) {
  overflow: visible;
}

.section:has(.project-grid)::after,
.section:has(.solution-cards)::after,
.section:has(.service-grid)::after {
  content: "";
  position: absolute;
  width: 320px;
  height: 320px;
  right: -170px;
  top: 20%;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(
    circle,
    rgba(37, 184, 173, 0.1) 0 2px,
    transparent 3px 24px,
    rgba(169, 216, 59, 0.07) 25px 27px,
    transparent 28px
  );
  background-size: 42px 42px;
  mask-image: radial-gradient(circle, black 0 55%, transparent 72%);
  animation: backgroundParticleOrbit 18s linear infinite;
}

@keyframes backgroundParticleOrbit {
  from {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
  to {
    transform: rotate(360deg) translate3d(0, 0, 0);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) and (min-width: 721px) {
  .project-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .project-grid img,
  .project-grid img:first-child,
  .project-grid > * {
    height: 340px;
    min-height: 340px;
    max-height: 340px;
  }

  .solution-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }

  .solution-card,
  .solution-card.big {
    min-height: 420px;
  }

  .solution-card img,
  .solution-card.big img {
    height: 205px;
    min-height: 205px;
    flex-basis: 205px;
  }

  .solution-card > div {
    padding: 18px;
  }

  .solution-card h3 {
    font-size: 18px;
    min-height: 48px;
  }

  .about-visual {
    min-height: 500px;
    height: 500px;
  }
}

@media (max-width: 720px) {
  body::before {
    opacity: 0.28;
  }

  .hero::before,
  .section:has(.about-grid)::before,
  .section:has(.service-grid)::before,
  .section:has(.solution-cards)::before,
  .section:has(.project-grid)::before,
  .section:has(.process)::before,
  .section:has(.why-panel)::before,
  .cta-section::before {
    opacity: 0.32;
  }

  .about-visual {
    height: 420px;
    min-height: 420px;
    border-radius: 30px;
  }

  .about-visual .water-disc {
    width: 330px;
    height: 330px;
    right: -75px;
    top: 42px;
  }

  .about-visual .ring {
    width: 355px;
    height: 355px;
    right: -88px;
    top: 28px;
  }

  .about-visual .about-logo {
    width: 160px;
    height: 160px;
    left: 28px;
    top: 50%;
    padding: 9px;
    border-width: 4px;
  }

  .about-visual .mini-stat {
    left: 18px;
    bottom: 18px;
    min-width: 132px;
    padding: 12px 14px;
  }

  .about-visual .mini-stat strong {
    font-size: 24px;
  }

  .project-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .project-grid img,
  .project-grid img:first-child,
  .project-grid > * {
    width: 100%;
    height: 300px;
    min-height: 300px;
    max-height: 300px;
    aspect-ratio: auto;
  }

  .solution-cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 16px;
  }

  .solution-card,
  .solution-card.big {
    grid-column: auto !important;
    min-height: 420px;
  }

  .solution-card img,
  .solution-card.big img {
    height: 235px;
    min-height: 235px;
    flex-basis: 235px;
  }

  .navbar .nav-links::before {
    opacity: 0.32;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .hero::before,
  .section:has(.about-grid)::before,
  .section:has(.service-grid)::before,
  .section:has(.solution-cards)::before,
  .section:has(.project-grid)::before,
  .section:has(.process)::before,
  .section:has(.why-panel)::before,
  .navbar .nav-links::before,
  .about-visual .water-disc,
  .about-visual .ring,
  .section:has(.project-grid)::after,
  .section:has(.solution-cards)::after,
  .section:has(.service-grid)::after {
    animation: none !important;
  }
}
/* =========================================
   FINAL NAVBAR BRAND SIZE
   ========================================= */

.navbar .brand{
    display:flex;
    align-items:center;
    gap:18px;
    min-width:max-content;
}

.navbar .brand img{
    width:64px;
    height:64px;
    flex:0 0 64px;
}

/* EMPIRE */
.navbar .brand b{
    display:block;
    font-family:"Manrope", sans-serif;
    font-size:34px !important;
    line-height:1;
    font-weight:900;
    letter-spacing:-0.8px;
    color:var(--navy);
}

/* Environmental Projects & Consultant */
.navbar .brand small{
    display:block;
    margin-top:6px;
    font-family:"DM Sans", sans-serif;
    font-size:15px !important;
    line-height:1.15;
    font-weight:800;
    letter-spacing:.15px;
    color:var(--teal);
}

/* Mobile */
@media (max-width:720px){

    .navbar .brand{
        gap:10px;
    }

    .navbar .brand img{
        width:46px;
        height:46px;
        flex-basis:46px;
    }

    .navbar .brand b{
        font-size:21px !important;
    }

    .navbar .brand small{
        margin-top:3px;
        font-size:9px !important;
    }
}
/* =========================================================
   EMPIRE HERO — FINAL PREMIUM 3D VERSION
   ========================================================= */

.hero{
    position:relative;
    overflow:hidden;
    isolation:isolate;
}

.hero-stage{
    position:relative;
    height:650px;
    perspective:1800px;
    transform-style:preserve-3d;
    display:grid;
    place-items:center;
    isolation:isolate;
}

/* ---------------------------------------------------------
   SOFT 3D ENVIRONMENTAL LIGHT
   --------------------------------------------------------- */

.hero-stage::before{
    content:"";
    position:absolute;
    width:720px;
    height:720px;
    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,184,173,.20) 0%,
            rgba(37,184,173,.10) 34%,
            rgba(169,216,59,.08) 48%,
            transparent 72%
        );

    filter:blur(20px);

    animation:
        heroAmbientPulse 6s ease-in-out infinite;

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

.hero-stage::after{
    content:"";
    position:absolute;
    width:590px;
    height:590px;
    border-radius:50%;

    border:
        1px solid rgba(11,93,87,.12);

    box-shadow:
        0 0 0 18px rgba(255,255,255,.10),
        0 0 0 38px rgba(37,184,173,.035),
        inset 0 0 0 1px rgba(255,255,255,.35);

    animation:
        heroOuterOrbit 30s linear infinite reverse;

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


/* =========================================================
   MAIN ROTATING WATER / ENVIRONMENTAL SPHERE
   ========================================================= */

.hero-orb{
    position:absolute;
    width:560px;
    height:560px;

    left:50%;
    top:50%;

    margin-left:-280px;
    margin-top:-280px;

    border-radius:50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(255,255,255,.07) 0deg 7deg,
            rgba(5,89,83,.10) 7deg 14deg
        ),
        radial-gradient(
            circle at 28% 20%,
            #eaffdc 0%,
            #b9e5dc 24%,
            #37b6aa 48%,
            #08756d 72%,
            #044d49 100%
        );

    box-shadow:
        inset 35px 28px 85px rgba(255,255,255,.15),
        inset -50px -55px 95px rgba(0,55,52,.23),
        0 45px 110px rgba(11,93,87,.22);

    transform-style:preserve-3d;

    z-index:1;

    filter:saturate(1.15);

    animation:
        heroSphereRotate 20s linear infinite,
        heroSphereFloat 7s ease-in-out infinite;

    overflow:visible;
}


/* rotating inner technical ring */

.hero-orb::before{
    content:"";
    position:absolute;

    inset:22px;

    border-radius:50%;

    border:
        1px solid rgba(255,255,255,.42);

    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.05),
        0 0 0 1px rgba(11,93,87,.06);

    animation:
        heroInnerOrbit 12s linear infinite;

    transform-style:preserve-3d;
}


/* rotating segmented ring */

.hero-orb::after{
    content:"";

    position:absolute;

    inset:-18px;

    border-radius:50%;

    background:
        conic-gradient(
            from 0deg,
            transparent 0deg 25deg,
            rgba(37,184,173,.75) 26deg 33deg,
            transparent 34deg 75deg,
            rgba(169,216,59,.80) 76deg 83deg,
            transparent 84deg 132deg,
            rgba(37,184,173,.60) 133deg 140deg,
            transparent 141deg 210deg,
            rgba(255,255,255,.55) 211deg 217deg,
            transparent 218deg 310deg,
            rgba(37,184,173,.55) 311deg 318deg,
            transparent 319deg 360deg
        );

    -webkit-mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );

    mask:
        radial-gradient(
            farthest-side,
            transparent calc(100% - 2px),
            #000 calc(100% - 1px)
        );

    animation:
        heroSegmentOrbit 10s linear infinite;

    filter:
        drop-shadow(0 0 7px rgba(37,184,173,.22));

    pointer-events:none;
}


/* =========================================================
   HERO SPHERE ANIMATION
   ========================================================= */

@keyframes heroSphereRotate{
    0%{
        transform:
            rotateX(5deg)
            rotateY(0deg)
            rotateZ(0deg);
    }

    50%{
        transform:
            rotateX(8deg)
            rotateY(180deg)
            rotateZ(4deg);
    }

    100%{
        transform:
            rotateX(5deg)
            rotateY(360deg)
            rotateZ(0deg);
    }
}

@keyframes heroSphereFloat{
    0%,100%{
        margin-top:-280px;
    }

    50%{
        margin-top:-295px;
    }
}

@keyframes heroInnerOrbit{
    from{
        transform:
            rotateX(14deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(14deg)
            rotateZ(360deg);
    }
}

@keyframes heroSegmentOrbit{
    from{
        transform:
            rotate(0deg)
            scale(1);
    }

    50%{
        transform:
            rotate(180deg)
            scale(1.035);
    }

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

@keyframes heroOuterOrbit{
    from{
        transform:
            rotateX(60deg)
            rotateZ(0deg);
    }

    to{
        transform:
            rotateX(60deg)
            rotateZ(-360deg);
    }
}

@keyframes heroAmbientPulse{
    0%,100%{
        transform:scale(.92);
        opacity:.52;
    }

    50%{
        transform:scale(1.08);
        opacity:.90;
    }
}


/* =========================================================
   VIDEO PANEL — FLOATING GLASS 3D
   ========================================================= */

.hero-video-card{
    position:relative;

    width:min(545px,88%);
    height:465px;

    border-radius:42px;

    overflow:hidden;

    z-index:4;

    transform-style:preserve-3d;

    border:
        2.5px solid rgba(255,255,255,.78);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.24),
            rgba(255,255,255,.05)
        );

    box-shadow:
        0 50px 110px rgba(5,62,60,.28),
        0 0 0 1px rgba(255,255,255,.35),
        0 0 45px rgba(37,184,173,.11),
        inset 0 2px 0 rgba(255,255,255,.55);

    transform:
        translateZ(80px);

    animation:
        heroVideoFloat 5s ease-in-out infinite;

    transition:
        box-shadow .5s ease,
        transform .5s ease;
}


/* animated video border */

.hero-video-card::after{
    content:"";

    position:absolute;

    inset:-2px;

    border-radius:44px;

    padding:2.5px;

    background:
        conic-gradient(
            from var(--border-angle,0deg),
            rgba(37,184,173,.25),
            rgba(37,184,173,1),
            rgba(169,216,59,1),
            rgba(255,255,255,.95),
            rgba(14,143,134,.85),
            rgba(37,184,173,.22),
            rgba(37,184,173,.25)
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    animation:
        heroVideoBorder 5s linear infinite;

    pointer-events:none;

    z-index:8;
}


/* glass reflection */

.hero-video-card::before{
    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            115deg,
            transparent 20%,
            rgba(255,255,255,.18) 38%,
            transparent 54%
        );

    background-size:240% 100%;

    animation:
        heroVideoShine 5.5s ease-in-out infinite;

    pointer-events:none;

    z-index:7;
}


/* video itself */

.hero-video-card video,
.hero-video-card .video-fallback,
.hero-video-card .video-fallback img{
    width:100%;
    height:100%;
    object-fit:cover;
}


/* cinematic subtle overlay */

.hero-video-card video{
    filter:
        saturate(1.04)
        contrast(1.04)
        brightness(.96);
}


/* video floating */

@keyframes heroVideoFloat{
    0%,100%{
        transform:
            translateZ(75px)
            translateY(0)
            rotateX(.4deg)
            rotateY(-.5deg);
    }

    50%{
        transform:
            translateZ(95px)
            translateY(-10px)
            rotateX(1deg)
            rotateY(.7deg);
    }
}


/* moving border */

@keyframes heroVideoBorder{
    to{
        --border-angle:360deg;
    }
}


/* moving reflection */

@keyframes heroVideoShine{
    0%,18%{
        background-position:180% 0;
        opacity:0;
    }

    40%{
        opacity:1;
    }

    65%,100%{
        background-position:-80% 0;
        opacity:0;
    }
}


/* =========================================================
   VIDEO GLASS INFORMATION PANEL
   ========================================================= */

.video-glass{
    position:absolute;
    z-index:9;

    right:22px;
    bottom:22px;

    padding:15px 18px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(4,65,62,.82),
            rgba(8,94,87,.65)
        );

    border:
        1px solid rgba(255,255,255,.22);

    box-shadow:
        0 18px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.18);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transform:
        translateZ(40px);
}

.video-glass span{
    font-size:9px;
    letter-spacing:1.6px;
    opacity:.70;
}

.video-glass b{
    display:block;
    margin-top:4px;
    font-size:15px;
}


/* =========================================================
   FLOATING GLASS CARDS
   ========================================================= */

.float-card{
    z-index:6;

    min-width:145px;

    border:
        2px solid rgba(255,255,255,.75);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.86),
            rgba(233,249,245,.62)
        );

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    box-shadow:
        0 22px 50px rgba(11,93,87,.16),
        inset 0 1px 0 rgba(255,255,255,.95);

    transform-style:preserve-3d;
}


/* icon */

.float-card span{
    transform:translateZ(20px);
}


/* left card */

.fc-one{
    top:72px;
    left:-5px;

    animation:
        heroFloatLeft 4.6s ease-in-out infinite;
}


/* right card */

.fc-two{
    right:-5px;
    bottom:105px;

    animation:
        heroFloatRight 5.2s ease-in-out infinite;
}


@keyframes heroFloatLeft{
    0%,100%{
        transform:
            translate3d(0,0,45px)
            rotateX(0deg)
            rotateY(0deg);
    }

    50%{
        transform:
            translate3d(-8px,-12px,65px)
            rotateX(5deg)
            rotateY(-7deg);
    }
}


@keyframes heroFloatRight{
    0%,100%{
        transform:
            translate3d(0,0,45px)
            rotateX(0deg)
            rotateY(0deg);
    }

    50%{
        transform:
            translate3d(8px,12px,65px)
            rotateX(-5deg)
            rotateY(7deg);
    }
}


/* =========================================================
   HERO PARTICLES / LIGHT DOTS
   ========================================================= */

.hero-stage .empire-particle-canvas{
    z-index:0 !important;
}


/* =========================================================
   DESKTOP 3D DEPTH
   ========================================================= */

@media(min-width:1001px){

    .hero-stage{
        transform-style:preserve-3d;
    }

    .hero-video-card{
        transform-style:preserve-3d;
    }

    .hero-orb{
        transform-style:preserve-3d;
    }

}


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

@media(max-width:720px){

    .hero-stage{
        height:500px;
    }

    .hero-orb{
        width:360px;
        height:360px;

        margin-left:-180px;
        margin-top:-180px;
    }

    .hero-stage::after{
        width:390px;
        height:390px;
    }

    .hero-stage::before{
        width:430px;
        height:430px;
    }

    .hero-video-card{
        width:92%;
        height:345px;
        border-radius:30px;

        transform:
            translateZ(30px);
    }

    .video-glass{
        right:14px;
        bottom:14px;
        padding:12px 14px;
    }

    .video-glass b{
        font-size:13px;
    }

    .float-card{
        display:none;
    }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .hero-orb,
    .hero-orb::before,
    .hero-orb::after,
    .hero-stage::before,
    .hero-stage::after,
    .hero-video-card,
    .hero-video-card::before,
    .hero-video-card::after,
    .fc-one,
    .fc-two{
        animation:none !important;
    }
}
/* =========================================================
   EMPIRE PREMIUM FOOTER
   ========================================================= */

.site-footer{
    position:relative;
    margin-top:80px;
    padding:65px 5% 24px;
    overflow:hidden;
    isolation:isolate;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(37,184,173,.13),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 70%,
            rgba(169,216,59,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #061c2b,
            #082b38 52%,
            #063a38
        );

    color:#fff;

    box-shadow:
        0 -25px 80px rgba(5,45,55,.16);

}


/* ---------------------------------------------------------
   FOOTER AMBIENT GLOW
   --------------------------------------------------------- */

.site-footer::before{
    content:"";

    position:absolute;

    width:520px;
    height:520px;

    left:-220px;
    top:-250px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(37,184,173,.22),
            transparent 68%
        );

    filter:blur(20px);

    animation:
        footerGlowLeft 7s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:0;
}


.site-footer::after{
    content:"";

    position:absolute;

    width:460px;
    height:460px;

    right:-180px;
    bottom:-260px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(169,216,59,.16),
            transparent 70%
        );

    filter:blur(20px);

    animation:
        footerGlowRight 8s ease-in-out infinite alternate;

    pointer-events:none;

    z-index:0;
}


/* ---------------------------------------------------------
   FOOTER GRID
   --------------------------------------------------------- */

.footer-main{
    position:relative;
    z-index:3;

    max-width:1280px;

    margin:0 auto;

    display:grid;

    grid-template-columns:
        1fr
        auto;

    align-items:center;

    gap:45px;

    padding-bottom:34px;

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


/* ---------------------------------------------------------
   FOOTER BRAND
   --------------------------------------------------------- */

.footer-brand{
    min-width:0;
}


.footer-brand-link{
    display:inline-flex;

    align-items:center;

    gap:15px;

    color:#fff;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.footer-brand-link:hover{
    transform:translateY(-3px);

    filter:
        drop-shadow(
            0 8px 20px
            rgba(37,184,173,.20)
        );
}


.footer-brand-link img{
    width:62px;
    height:62px;

    object-fit:contain;

    border-radius:18px;

    padding:4px;

    background:
        rgba(255,255,255,.94);

    border:
        2px solid rgba(255,255,255,.30);

    box-shadow:
        0 14px 32px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:
        transform .45s cubic-bezier(.2,.8,.2,1),
        box-shadow .45s ease;
}


.footer-brand-link:hover img{
    transform:
        rotateY(10deg)
        rotateX(5deg)
        scale(1.06);

    box-shadow:
        0 20px 40px rgba(0,0,0,.23),
        0 0 30px rgba(37,184,173,.18);
}


.footer-brand-link b{
    display:block;

    font:
        900 27px/1 Manrope,
        sans-serif;

    letter-spacing:-.5px;

    color:#fff;
}


.footer-brand-link small{
    display:block;

    margin-top:5px;

    font:
        700 12px/1.2 "DM Sans",
        sans-serif;

    color:var(--lime);

    letter-spacing:.15px;
}


.footer-brand p{
    margin:
        18px 0 0
        0;

    max-width:520px;

    color:
        rgba(255,255,255,.62);

    font-size:14px;

    line-height:1.7;
}


/* ---------------------------------------------------------
   DG IT POINT
   --------------------------------------------------------- */

.footer-developer{
    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:9px;
}


.developer-label{
    font-size:11px;

    font-weight:800;

    letter-spacing:1.8px;

    text-transform:uppercase;

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


.developer-link{
    position:relative;

    display:flex;

    align-items:center;

    gap:13px;

    min-width:235px;

    padding:13px 15px;

    border-radius:18px;

    text-decoration:none;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.11),
            rgba(37,184,173,.10)
        );

    border:
        1.5px solid rgba(255,255,255,.18);

    box-shadow:
        0 16px 40px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    overflow:hidden;

    transform-style:preserve-3d;

    transition:
        transform .4s cubic-bezier(.2,.8,.2,1),
        box-shadow .4s ease,
        border-color .4s ease;
}


/* animated border */

.developer-link::before{
    content:"";

    position:absolute;

    inset:-1px;

    border-radius:19px;

    padding:1.5px;

    background:
        conic-gradient(
            from var(--border-angle,0deg),
            transparent 0deg,
            rgba(37,184,173,.15) 40deg,
            rgba(37,184,173,1) 90deg,
            rgba(169,216,59,1) 135deg,
            rgba(255,255,255,.7) 175deg,
            transparent 235deg,
            transparent 360deg
        );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    animation:
        developerBorder 4.5s linear infinite;

    pointer-events:none;
}


/* glass shine */

.developer-link::after{
    content:"";

    position:absolute;

    top:-80%;
    left:-50%;

    width:45%;
    height:260%;

    transform:rotate(25deg);

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

    animation:
        developerShine 4s ease-in-out infinite;

    pointer-events:none;
}


.developer-link:hover{
    transform:
        translateY(-5px)
        translateZ(15px)
        rotateX(2deg);

    border-color:
        rgba(37,184,173,.42);

    box-shadow:
        0 25px 55px rgba(0,0,0,.24),
        0 0 30px rgba(37,184,173,.11),
        inset 0 1px 0 rgba(255,255,255,.18);
}


/* icon */

.developer-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

    border-radius:12px;

    display:grid;
    place-items:center;

    font-size:18px;

    color:#12313a;

    background:
        linear-gradient(
            145deg,
            var(--lime),
            #d9f47c
        );

    box-shadow:
        0 8px 18px rgba(169,216,59,.20),
        inset 0 1px 0 rgba(255,255,255,.75);

    animation:
        developerIconPulse 2.8s ease-in-out infinite;
}


.developer-text{
    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:3px;
}


.developer-text strong{
    font:
        900 16px/1.1 Manrope,
        sans-serif;

    letter-spacing:-.2px;

    color:#fff;
}


.developer-text small{
    font:
        700 10px/1 "DM Sans",
        sans-serif;

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


.developer-arrow{
    position:relative;

    z-index:2;

    margin-left:auto;

    font-size:20px;

    color:var(--aqua);

    transition:
        transform .3s ease,
        color .3s ease;
}


.developer-link:hover .developer-arrow{
    transform:
        translate(4px,-4px);

    color:var(--lime);
}


/* ---------------------------------------------------------
   FOOTER BOTTOM
   --------------------------------------------------------- */

.footer-bottom{
    position:relative;

    z-index:3;

    max-width:1280px;

    margin:0 auto;

    padding-top:22px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:
        rgba(255,255,255,.48);

    font-size:11px;

    line-height:1.6;
}


.footer-tagline{
    color:
        rgba(255,255,255,.38);

    text-align:right;
}


/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes developerBorder{
    to{
        --border-angle:360deg;
    }
}


@keyframes developerShine{

    0%,25%{
        left:-60%;
        opacity:0;
    }

    45%{
        opacity:1;
    }

    70%,100%{
        left:140%;
        opacity:0;
    }
}


@keyframes developerIconPulse{

    0%,100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-2px)
            scale(1.06);
    }

}


@keyframes footerGlowLeft{

    from{
        transform:
            translate(-10px,0)
            scale(.92);

        opacity:.5;
    }

    to{
        transform:
            translate(25px,20px)
            scale(1.08);

        opacity:.9;
    }

}


@keyframes footerGlowRight{

    from{
        transform:
            translate(10px,0)
            scale(.94);

        opacity:.45;
    }

    to{
        transform:
            translate(-20px,-18px)
            scale(1.08);

        opacity:.82;
    }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

    .site-footer{
        margin-top:55px;
        padding:
            48px 5% 22px;
    }

    .footer-main{
        grid-template-columns:1fr;
        gap:28px;
        align-items:flex-start;
    }

    .footer-brand-link img{
        width:54px;
        height:54px;
    }

    .footer-brand-link b{
        font-size:23px;
    }

    .footer-brand-link small{
        font-size:9px;
    }

    .footer-brand p{
        font-size:13px;
    }

    .footer-developer{
        align-items:flex-start;
    }

    .developer-link{
        width:100%;
        min-width:0;
    }

    .footer-bottom{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:8px;

        font-size:10px;
    }

    .footer-tagline{
        text-align:left;
    }

}
/* =========================================================
   PREMIUM FOOTER
   ========================================================= */

.site-footer{
  position:relative;
  margin-top:70px;
  padding:55px 5% 20px;

  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(37,184,173,.14),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(169,216,59,.10),
      transparent 25%
    ),
    linear-gradient(
      135deg,
      #061c2b,
      #082f3d 52%,
      #063b38
    );

  color:#fff;
  overflow:hidden;
  isolation:isolate;

  box-shadow:
    0 -25px 75px rgba(5,45,55,.16);
}


/* soft animated background glow */

.site-footer::before{
  content:"";

  position:absolute;
  width:420px;
  height:420px;

  left:-180px;
  bottom:-230px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(37,184,173,.17),
      transparent 70%
    );

  filter:blur(18px);

  animation:
    footerGlow 7s ease-in-out infinite alternate;

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


.site-footer::after{
  content:"";

  position:absolute;
  width:360px;
  height:360px;

  right:-150px;
  top:-180px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(169,216,59,.10),
      transparent 70%
    );

  filter:blur(18px);

  animation:
    footerGlow2 8s ease-in-out infinite alternate;

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


/* ---------------------------------------------------------
   FOOTER MAIN
   --------------------------------------------------------- */

.footer-main{
  position:relative;
  z-index:2;

  max-width:1280px;
  margin:auto;

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

  gap:30px;

  padding-bottom:28px;

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


.footer-main .brand{
  display:flex;
  align-items:center;
  gap:12px;
}


.footer-main .brand img{
  width:58px;
  height:58px;

  object-fit:contain;

  border-radius:50%;

  background:#fff;

  padding:3px;

  border:
    2px solid rgba(255,255,255,.28);

  box-shadow:
    0 14px 30px rgba(0,0,0,.18);
}


.footer-main .brand b{
  display:block;

  font:
    900 27px/1
    Manrope,
    sans-serif;

  color:#fff;
}


.footer-main .brand small{
  display:block;

  margin-top:5px;

  font:
    800 11px/1.2
    "DM Sans",
    sans-serif;

  color:var(--lime);
}


.footer-main p{
  margin:0;

  font-size:14px;

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


/* ---------------------------------------------------------
   FOOTER BOTTOM
   --------------------------------------------------------- */

.footer-bottom{
  position:relative;
  z-index:3;

  max-width:1280px;
  margin:auto;

  padding-top:20px;

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

  gap:20px;

  font-size:11px;

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


/* copyright */

.footer-copy{
  line-height:1.5;
}


/* =========================================================
   DEVELOPED BY DG IT POINT
   ONE LINE / CENTER / CLICKABLE
   ========================================================= */

.developer-credit{
  position:relative;

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

  gap:6px;

  padding:9px 17px;

  border-radius:999px;

  text-decoration:none;

  white-space:nowrap;

  color:
    rgba(255,255,255,.78);

  background:
    rgba(255,255,255,.045);

  border:
    1px solid rgba(255,255,255,.14);

  box-shadow:
    0 8px 25px rgba(0,0,0,.13),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  overflow:hidden;

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    border-color .35s ease;
}


/* moving shine */

.developer-credit::before{
  content:"";

  position:absolute;

  top:-120%;
  left:-70%;

  width:45%;
  height:340%;

  transform:rotate(24deg);

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

  animation:
    developerShine 3.8s ease-in-out infinite;

  pointer-events:none;
}


/* animated glowing border */

.developer-credit::after{
  content:"";

  position:absolute;

  inset:-1px;

  border-radius:inherit;

  padding:1px;

  background:
    linear-gradient(
      90deg,
      rgba(37,184,173,.10),
      rgba(37,184,173,.90),
      rgba(169,216,59,1),
      rgba(37,184,173,.90),
      rgba(37,184,173,.10)
    );

  background-size:300% 100%;

  animation:
    developerBorder 4s linear infinite;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite:xor;
  mask-composite:exclude;

  pointer-events:none;
}


/* normal text */

.developer-credit span{
  position:relative;
  z-index:2;

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

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


/* highlighted DG IT Point */

.developer-credit strong{
  position:relative;
  z-index:2;

  font:
    900 13px/1
    Manrope,
    sans-serif;

  letter-spacing:.2px;

  background:
    linear-gradient(
      90deg,
      #25b8ad,
      #a9d83b,
      #25b8ad
    );

  background-size:200% auto;

  -webkit-background-clip:text;
  background-clip:text;

  -webkit-text-fill-color:transparent;

  animation:
    developerTextGlow 3s linear infinite;
}


/* hover */

.developer-credit:hover{
  transform:
    translateY(-3px)
    scale(1.025);

  border-color:
    rgba(37,184,173,.42);

  box-shadow:
    0 14px 32px rgba(0,0,0,.22),
    0 0 22px rgba(37,184,173,.14),
    inset 0 1px 0 rgba(255,255,255,.14);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes developerBorder{
  0%{
    background-position:0% 50%;
  }

  100%{
    background-position:300% 50%;
  }
}


@keyframes developerShine{

  0%,20%{
    left:-70%;
    opacity:0;
  }

  45%{
    opacity:1;
  }

  70%,100%{
    left:140%;
    opacity:0;
  }

}


@keyframes developerTextGlow{

  0%{
    background-position:0% center;
  }

  100%{
    background-position:200% center;
  }

}


@keyframes footerGlow{

  from{
    transform:
      translate(0,0)
      scale(.92);

    opacity:.45;
  }

  to{
    transform:
      translate(28px,-18px)
      scale(1.08);

    opacity:.80;
  }

}


@keyframes footerGlow2{

  from{
    transform:
      translate(0,0)
      scale(.94);

    opacity:.35;
  }

  to{
    transform:
      translate(-25px,20px)
      scale(1.08);

    opacity:.75;
  }

}


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

@media(max-width:720px){

  .site-footer{
    margin-top:55px;
    padding:45px 5% 20px;
  }

  .footer-main{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;

    gap:18px;
  }

  .footer-main .brand{
    justify-content:center;
  }

  .footer-main p{
    font-size:13px;
  }

  .footer-bottom{
    flex-direction:column;

    justify-content:center;
    text-align:center;

    gap:12px;
  }

  .developer-credit{
    font-size:11px;
  }

  .developer-credit strong{
    font-size:13px;
  }

}
/* =========================================
   DG IT POINT — EXACT CENTER BOTTOM
   ========================================= */

.footer-bottom{
    position:relative;

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

    width:100%;
    max-width:1280px;

    margin:0 auto;

    padding-top:22px;
}


/* DG IT Point */
.developer-credit{
    margin:0 auto !important;

    display:inline-flex !important;

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

    position:relative;

    left:auto !important;
    right:auto !important;

    text-align:center;

    white-space:nowrap;

    padding:10px 20px;

    border-radius:999px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.08),
            rgba(37,184,173,.10)
        );

    border:
        1.5px solid rgba(255,255,255,.16);

    box-shadow:
        0 10px 28px rgba(0,0,0,.14),
        inset 0 1px 0 rgba(255,255,255,.10);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.developer-credit:hover{
    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 16px 35px rgba(0,0,0,.20),
        0 0 25px rgba(37,184,173,.16);
}


/* Developed by */
.developer-credit span{
    font-size:11px;
    font-weight:700;

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


/* DG IT Point */
.developer-credit strong{
    margin-left:5px;

    font:
        900 14px/1
        Manrope,
        sans-serif;

    background:
        linear-gradient(
            90deg,
            #25b8ad,
            #a9d83b,
            #25b8ad
        );

    background-size:200% auto;

    -webkit-background-clip:text;
    background-clip:text;

    -webkit-text-fill-color:transparent;

    animation:
        dgTextMove 2.8s linear infinite;
}


@keyframes dgTextMove{
    to{
        background-position:200% center;
    }
}


/* Mobile */
@media(max-width:720px){

    .footer-bottom{
        justify-content:center !important;
        text-align:center;
    }

    .developer-credit{
        margin:
            0 auto !important;
    }

}
/* =========================================================
   ABOUT 3D ROTATING BACKGROUND — CENTER
   ========================================================= */

.about-visual{
    position:relative;
    overflow:hidden;
}

/* Main rotating teal circle */
.about-visual .water-disc{
    position:absolute;

    width:430px;
    height:430px;

    left:50%;
    right:auto;

    top:50%;

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

    border-radius:50%;

    z-index:1;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(11,93,87,.16) 0 8deg,
            transparent 8deg 16deg
        ),
        linear-gradient(
            135deg,
            #0b5d57,
            #25b8ad
        );

    box-shadow:
        inset 20px 20px 70px rgba(255,255,255,.15),
        0 25px 60px rgba(11,93,87,.12);

    /* Keep it rotating */
    animation:
        aboutDiscRotate 18s linear infinite;
}


/* Outer ring also centered */
.about-visual .ring{
    position:absolute;

    width:470px;
    height:470px;

    left:50%;
    right:auto;

    top:50%;

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

    z-index:0;

    border:
        1px solid rgba(11,93,87,.18);

    border-radius:50%;

    animation:
        aboutRingRotate 24s linear infinite reverse;
}


/* Smooth 3D rotation */
@keyframes aboutDiscRotate{

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

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

}


@keyframes aboutRingRotate{

    from{
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(1);
    }

    50%{
        transform:
            translate(-50%, -50%)
            rotate(180deg)
            scale(1.02);
    }

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

}


/* Logo stays above the rotating background */
.about-visual .about-logo{
    z-index:5;
}


/* Mobile */
@media(max-width:720px){

    .about-visual .water-disc{
        width:320px;
        height:320px;

        left:50%;
        top:50%;

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

    .about-visual .ring{
        width:350px;
        height:350px;

        left:50%;
        top:50%;

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

}
/* =========================================
   ABOUT VISUAL — ONLY SMALLER ROUND
   LOGO EXACT CENTER
   ========================================= */

.about-visual{
    position:relative;
    overflow:hidden;
}

/* ROUND — only size changed */
.about-visual .water-disc{
    width:370px !important;
    height:370px !important;

    left:50% !important;
    right:auto !important;
    top:50% !important;

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

    margin:0;

    /* keep existing rotation */
    animation:aboutDiscRotate 18s linear infinite !important;

    z-index:1;
}


/* Outer ring proportional to round */
.about-visual .ring{
    width:405px !important;
    height:405px !important;

    left:50% !important;
    right:auto !important;
    top:50% !important;

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

    margin:0;

    animation:
        aboutRingRotate 24s linear infinite reverse !important;

    z-index:0;
}


/* LOGO — exact center */
.about-visual .about-logo{
    width:180px !important;
    height:180px !important;

    left:50% !important;
    top:50% !important;

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

    margin:0 !important;

    z-index:5;
}


/* Rotation stays same */
@keyframes aboutDiscRotate{
    from{
        transform:
            translate(-50%, -50%)
            rotate(0deg);
    }

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

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

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


/* Mobile */
@media(max-width:720px){

    .about-visual .water-disc{
        width:285px !important;
        height:285px !important;
    }

    .about-visual .ring{
        width:310px !important;
        height:310px !important;
    }

    .about-visual .about-logo{
        width:145px !important;
        height:145px !important;
    }
}
/* =========================================================
   EMPIRE — MOBILE ONLY FINAL RESPONSIVE
   DESKTOP 721px+ REMAINS UNTOUCHED
   ========================================================= */

@media (max-width: 720px){

    /* -----------------------------------------------------
       GLOBAL MOBILE SAFETY
       ----------------------------------------------------- */

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    *{
        max-width:100%;
    }

    .section{
        width:100%;
        padding-left:18px !important;
        padding-right:18px !important;
    }


    /* =====================================================
       NAVBAR
       Proper mobile menu + centered brand
       ===================================================== */

    .nav-wrap{
        top:10px !important;
        left:0 !important;
        right:0 !important;

        padding:
            0 10px !important;

        z-index:1000 !important;
    }

    .navbar{
        width:100% !important;
        min-height:64px !important;

        padding:
            8px 10px !important;

        gap:8px !important;

        border-radius:18px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;

        overflow:visible !important;
    }

    /* Logo */
    .navbar .brand{
        min-width:0 !important;
        flex:1 1 auto !important;

        display:flex !important;
        align-items:center !important;

        gap:8px !important;

        overflow:hidden !important;
    }

    .navbar .brand img{
        width:44px !important;
        height:44px !important;

        flex:0 0 44px !important;
    }

    /* Empire */
    .navbar .brand b{
        font-size:21px !important;
        line-height:1 !important;
        letter-spacing:-.4px !important;

        white-space:nowrap !important;
    }

    /* Environmental Projects... */
    .navbar .brand small{
        margin-top:3px !important;

        font-size:8.5px !important;
        line-height:1.1 !important;

        white-space:nowrap !important;
    }

    /* Hide desktop links */
    .navbar .nav-links{
        display:none !important;

        position:absolute !important;

        top:calc(100% + 9px) !important;
        left:0 !important;
        right:0 !important;

        width:100% !important;

        margin:0 !important;
        padding:12px !important;

        flex-direction:column !important;
        gap:5px !important;

        background:
            rgba(250,255,253,.96) !important;

        border:
            2px solid rgba(37,184,173,.18) !important;

        border-radius:18px !important;

        box-shadow:
            0 20px 55px rgba(9,61,58,.15) !important;

        backdrop-filter:
            blur(22px) !important;

        -webkit-backdrop-filter:
            blur(22px) !important;

        z-index:9999 !important;
    }

    /* Open mobile menu */
    .navbar .nav-links.open{
        display:flex !important;
    }

    .navbar .nav-links a{
        width:100% !important;

        padding:
            13px 14px !important;

        border-radius:12px !important;

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

        color:
            var(--ink) !important;

        background:
            rgba(255,255,255,.45) !important;

        text-align:left !important;
    }

    .navbar .nav-links a:hover{
        background:
            rgba(37,184,173,.08) !important;
    }

    .navbar .nav-links a::after{
        display:none !important;
    }

    /* WhatsApp CTA hidden on mobile */
    .navbar .nav-cta{
        display:none !important;
    }

    /* Hamburger */
    .navbar .menu-btn{
        display:flex !important;

        width:44px !important;
        height:44px !important;

        flex:
            0 0 44px !important;

        margin:0 !important;

        padding:0 !important;

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

        border:
            2px solid rgba(11,93,87,.12) !important;

        border-radius:14px !important;

        background:
            rgba(255,255,255,.72) !important;

        color:
            var(--teal) !important;

        font-size:23px !important;

        box-shadow:
            0 8px 22px rgba(11,93,87,.10) !important;

        cursor:pointer !important;

        position:relative !important;
        z-index:10000 !important;
    }

    .navbar .menu-btn:active{
        transform:scale(.95);
    }


    /* =====================================================
       HERO
       Everything centered
       ===================================================== */

    .hero{
        width:100% !important;

        min-height:auto !important;

        padding-top:118px !important;
        padding-bottom:45px !important;

        display:flex !important;
        flex-direction:column !important;

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

        gap:30px !important;

        text-align:center !important;
    }

    .hero-copy{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;

        align-items:center !important;
    }

    .hero-copy .eyebrow{
        justify-content:center !important;
    }

    .hero h1{
        width:100% !important;

        margin:
            18px auto !important;

        font-size:
            clamp(38px,10vw,48px) !important;

        line-height:1.03 !important;

        letter-spacing:
            -1.8px !important;
    }

    .hero-copy > p{
        width:100% !important;

        max-width:500px !important;

        margin:
            0 auto !important;

        font-size:15px !important;

        line-height:1.7 !important;
    }

    .hero-actions{
        width:100% !important;

        margin:
            25px auto 0 !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:10px !important;
    }

    .hero-actions .btn{
        width:100% !important;
        max-width:360px !important;
    }

    .trust-row{
        width:100% !important;

        justify-content:center !important;

        align-items:stretch !important;

        gap:10px !important;

        margin-top:26px !important;
    }

    .trust-row div{
        flex:1 1 0 !important;

        min-width:0 !important;

        padding-left:10px !important;
    }

    .trust-row strong{
        font-size:11px !important;
    }

    .trust-row small{
        font-size:9px !important;
    }


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

    .hero-stage{
        width:100% !important;

        height:430px !important;

        display:grid !important;
        place-items:center !important;

        margin:0 auto !important;

        overflow:visible !important;
    }

    /* Rotating sphere */
    .hero-orb{
        width:330px !important;
        height:330px !important;

        left:50% !important;
        top:50% !important;

        margin:
            -165px 0 0 -165px !important;
    }

    /* Ambient glow */
    .hero-stage::before{
        width:390px !important;
        height:390px !important;
    }

    .hero-stage::after{
        width:350px !important;
        height:350px !important;
    }

    /* Video */
    .hero-video-card{
        width:
            min(92%,380px) !important;

        height:
            315px !important;

        margin:
            0 auto !important;

        border-radius:
            28px !important;

        transform:
            translateZ(25px) !important;
    }

    .hero-video-card video,
    .hero-video-card .video-fallback,
    .hero-video-card .video-fallback img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    .video-glass{
        right:12px !important;
        bottom:12px !important;

        padding:
            10px 12px !important;

        border-radius:
            13px !important;
    }

    .video-glass span{
        font-size:7px !important;
    }

    .video-glass b{
        font-size:11px !important;
    }

    /* Hide floating desktop cards */
    .float-card{
        display:none !important;
    }


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

    .about-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:
            35px !important;
    }

    .about-visual{
        width:100% !important;

        height:390px !important;
        min-height:390px !important;

        margin:0 auto !important;

        border-radius:
            28px !important;

        overflow:hidden !important;
    }

    /* Center the rotating round */
    .about-visual .water-disc{
        width:285px !important;
        height:285px !important;

        left:50% !important;
        right:auto !important;

        top:50% !important;

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

    /* Center rotating ring */
    .about-visual .ring{
        width:310px !important;
        height:310px !important;

        left:50% !important;
        right:auto !important;

        top:50% !important;

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

    /* Center Empire logo */
    .about-visual .about-logo{
        width:145px !important;
        height:145px !important;

        left:50% !important;
        top:50% !important;

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

        margin:0 !important;

        padding:7px !important;

        z-index:20 !important;
    }

    .about-visual .mini-stat{
        left:50% !important;
        bottom:14px !important;

        transform:
            translateX(-50%) !important;

        min-width:
            130px !important;

        text-align:center !important;

        z-index:25 !important;
    }

    .about-copy{
        width:100% !important;

        text-align:center !important;
    }

    .about-copy .lead{
        font-size:19px !important;
        line-height:1.5 !important;
    }

    .feature-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:12px !important;
    }


    /* =====================================================
       SECTION HEADINGS
       ===================================================== */

    .section-head{
        width:100% !important;

        margin-bottom:32px !important;

        text-align:center !important;
    }

    .section-head .eyebrow{
        justify-content:center !important;
    }

    .section-head h2,
    .solution-head h2,
    .why-copy h2{
        font-size:
            clamp(32px,9vw,40px) !important;

        line-height:1.08 !important;

        letter-spacing:
            -1.2px !important;

        text-align:center !important;
    }

    .section-head p,
    .solution-head p{
        width:100% !important;

        margin:
            0 auto !important;

        text-align:center !important;

        font-size:13.5px !important;
    }


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

    .service-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:14px !important;
    }

    .service-card{
        width:100% !important;

        min-height:
            250px !important;

        padding:
            24px !important;

        text-align:left !important;
    }

    .service-card h3{
        font-size:18px !important;
    }

    .service-card p{
        font-size:13px !important;
    }


    /* =====================================================
       SOLUTIONS
       ===================================================== */

    .solution-head{
        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:0 !important;
    }

    .solution-cards{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:14px !important;
    }

    .solution-card,
    .solution-card.big{
        width:100% !important;

        grid-column:
            auto !important;

        min-height:
            auto !important;
    }

    .solution-card img,
    .solution-card.big img{
        width:100% !important;

        height:
            220px !important;

        min-height:
            220px !important;
    }

    .solution-card > div{
        padding:
            18px !important;
    }


    /* =====================================================
       WHY
       ===================================================== */

    .why-panel{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:25px !important;

        padding:
            25px 18px !important;

        border-radius:
            27px !important;
    }

    .why-copy{
        text-align:center !important;
    }

    .why-copy p{
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .why-list{
        width:100% !important;
    }

    .why-list div{
        width:100% !important;
    }


    /* =====================================================
       PROCESS
       ===================================================== */

    .process{
        width:100% !important;

        grid-template-columns:
            1fr 1fr !important;

        gap:
            16px 12px !important;
    }

    .process-item{
        width:100% !important;
    }

    .process-item h3{
        font-size:16px !important;
    }

    .process-item p{
        font-size:11px !important;
    }


    /* =====================================================
       PROJECTS
       ===================================================== */

    .project-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:14px !important;
    }

    .project-grid img,
    .project-grid img:first-child,
    .project-grid > *{
        width:100% !important;

        height:
            250px !important;

        min-height:
            250px !important;

        max-height:
            250px !important;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .cta-card{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:25px !important;

        padding:
            28px 20px !important;

        border-radius:
            28px !important;

        text-align:center !important;
    }

    .cta-card h2{
        font-size:
            34px !important;

        letter-spacing:
            -1.3px !important;
    }

    .contact-actions{
        width:100% !important;
    }

    .contact-btn{
        width:100% !important;
    }

    .contact-details{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:10px !important;
    }

    .contact-details div{
        width:100% !important;
    }


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

    footer{
        width:100% !important;

        padding:
            42px 18px 20px !important;

        text-align:center !important;
    }

    .footer-main{
        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        gap:16px !important;
    }

    .footer-main .brand{
        justify-content:center !important;
    }

    .footer-main p{
        text-align:center !important;

        font-size:12px !important;
    }

    .footer-bottom{
        width:100% !important;

        display:flex !important;

        flex-direction:column !important;

        align-items:center !important;

        justify-content:center !important;

        gap:12px !important;

        text-align:center !important;
    }


    /* =====================================================
       FLOATING WHATSAPP
       ===================================================== */

    .floating-wa{
        width:54px !important;
        height:54px !important;

        right:14px !important;
        bottom:14px !important;

        font-size:22px !important;

        z-index:999 !important;
    }

}
/* =========================================================
   FULL-SCREEN HERO VIDEO BACKGROUND
   Paste this at the VERY BOTTOM of style.css
   ========================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  height: 100svh;
  width: 100%;
  max-width: none;
  padding: 0 7%;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Full-screen video layer */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background: #062f2d;
}

/* Make the existing video/card become the full-screen background */
.hero .hero-stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Remove the old orb/card appearance */
.hero .hero-orb {
  display: none;
}

.hero .hero-video-card {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #062f2d;
  transform: none !important;
  overflow: hidden;
}

/* The actual hero video */
.hero .hero-video-card video,
.hero .hero-video-card .video-fallback,
.hero .hero-video-card .video-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Video opacity / cinematic readability */
.hero .hero-video-card video {
  opacity: 0.42;
  filter: saturate(0.88) contrast(1.02) brightness(0.82);
}

/* Fallback image */
.hero .hero-video-card .video-fallback {
  opacity: 0.42;
}

/* Dark + teal overlay over video.
   Left side is darker so heading remains crystal clear. */
.hero .hero-video-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(3, 34, 40, 0.88) 0%,
      rgba(5, 48, 52, 0.72) 32%,
      rgba(5, 55, 56, 0.42) 58%,
      rgba(4, 36, 39, 0.25) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 27, 32, 0.48) 0%,
      rgba(3, 35, 37, 0.08) 45%,
      rgba(2, 24, 28, 0.58) 100%
    );
}

/* Soft premium glow */
.hero .hero-video-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(
      circle at 78% 48%,
      rgba(37, 184, 173, 0.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 18% 30%,
      rgba(169, 216, 59, 0.08),
      transparent 30%
    );
  border: 0 !important;
  padding: 0 !important;
  animation: none !important;
}

/* Hide old floating cards and video labels */
.hero .float-card,
.hero .video-label,
.hero .video-glass {
  display: none !important;
}

/* Put hero text above video */
.hero .hero-copy {
  position: relative;
  z-index: 5;
  max-width: 760px;
}

/* White/light text for dark video background */
.hero .eyebrow {
  color: #c9ef7b;
}

.hero .hero h1,
.hero h1 {
  color: #ffffff;
  text-shadow: 0 5px 30px rgba(0, 0, 0, 0.28);
}

.hero h1 span {
  color: #67ded3;
}

.hero h1 em {
  color: rgba(255, 255, 255, 0.72);
}

.hero .hero-copy > p {
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.hero .trust-row strong {
  color: #fff;
}

.hero .trust-row small {
  color: rgba(255, 255, 255, 0.68);
}

/* Buttons stay highly visible */
.hero .btn-primary {
  box-shadow:
    0 14px 35px rgba(0, 0, 0, 0.25),
    0 0 30px rgba(37, 184, 173, 0.18);
}

.hero .btn-glass {
  color: #073b3b;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.9);
}

/* Prevent fixed navbar from making hero feel too low */
@media (min-width: 721px) {
  .hero {
    padding-top: 0;
  }
}

/* Tablet */
@media (max-width: 1000px) {
  .hero {
    min-height: 100svh;
    height: 100svh;
    padding: 0 6%;
  }

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

/* Mobile */
@media (max-width: 720px) {
  .hero {
    min-height: 100svh;
    height: 100svh;
    padding: 105px 6% 45px;
    align-items: center;
  }

  .hero .hero-video-card video {
    opacity: 0.34;
  }

  .hero .hero-video-card::before {
    background:
      linear-gradient(
        90deg,
        rgba(3, 31, 36, 0.9),
        rgba(4, 45, 48, 0.62)
      ),
      linear-gradient(
        180deg,
        rgba(3, 25, 30, 0.6),
        rgba(3, 30, 32, 0.42)
      );
  }

  .hero .hero-copy {
    max-width: 100%;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 58px);
    line-height: 1.02;
    letter-spacing: -2px;
  }

  .hero .hero-copy > p {
    font-size: 14px;
    line-height: 1.65;
    max-width: 580px;
  }

  .hero .hero-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero .trust-row {
    margin-top: 24px;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .hero .hero-video-card video {
    animation: none !important;
  }
}
/* =========================================================
   EMPIRE HERO + NAVBAR PREMIUM FINAL FIX
   ========================================================= */

/* ---------------------------------------------------------
   1. NAVBAR — VIDEO COMPLETELY HIDDEN BEHIND NAVBAR
   --------------------------------------------------------- */

.nav-wrap {
  z-index: 1000 !important;
}

.nav-wrap .navbar {
  position: relative;
  z-index: 1001;

  /* OPAQUE — video will NOT show behind navbar */
  background: rgba(239, 248, 246, 0.98) !important;

  /* Keep the existing navbar blur/glass feel */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);

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


/* ---------------------------------------------------------
   2. HERO — KEEP VIDEO
   --------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 1;

  min-height: 850px;
  padding-top: 165px;
}


/* ---------------------------------------------------------
   3. HERO CONTENT
   --------------------------------------------------------- */

.hero-copy {
  position: relative;
  z-index: 5;

  max-width: 650px;
}


/* Small premium heading label */
.hero-copy .eyebrow {
  margin-bottom: 20px;
}


/* Main heading */
.hero-copy h1 {
  max-width: 680px;

  margin: 0 0 24px;

  font-family: Manrope, sans-serif;
  font-size: clamp(52px, 5.2vw, 76px);
  line-height: 1.02;

  font-weight: 800;
  letter-spacing: -3px;

  color: var(--navy);
}


/* Aqua highlight */
.hero-copy h1 span {
  color: var(--teal);
}


/* Consultant text */
.hero-copy h1 em {
  font-style: normal;
  color: #6b8188;
}


/* Location / establishment */
.hero-location {
  margin: 0 0 10px !important;

  font-size: 14px !important;
  line-height: 1.6 !important;

  font-weight: 800;

  color: var(--teal) !important;

  letter-spacing: .1px;
}


/* Main description */
.hero-copy .hero-description {
  max-width: 620px;

  margin: 0 !important;

  font-size: 16px !important;
  line-height: 1.75 !important;

  color: var(--muted) !important;
}


/* ---------------------------------------------------------
   4. HERO BUTTONS
   --------------------------------------------------------- */

.hero-copy .hero-actions {
  margin-top: 28px;
  margin-bottom: 30px;

  display: flex;
  gap: 12px;
}

.hero-copy .btn {
  min-height: 52px;

  padding: 15px 21px;

  border-radius: 15px;
}


/* Primary */
.hero-copy .btn-primary {
  background: linear-gradient(
    135deg,
    var(--teal),
    var(--teal2)
  );

  box-shadow:
    0 14px 32px rgba(11, 93, 87, .20);
}


/* WhatsApp secondary */
.hero-copy .btn-glass {
  background: rgba(255, 255, 255, .88);

  border: 1px solid rgba(11, 93, 87, .10);

  color: var(--navy);

  box-shadow:
    0 12px 30px rgba(11, 93, 87, .08);
}


/* ---------------------------------------------------------
   5. TRUST ROW
   --------------------------------------------------------- */

.hero-copy .trust-row {
  margin-top: 30px;

  display: flex;
  gap: 0;
}

.hero-copy .trust-row div {
  padding-left: 15px;
  padding-right: 24px;

  border-left: 2px solid var(--lime);
}

.hero-copy .trust-row strong {
  display: block;

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

  color: var(--navy);
}

.hero-copy .trust-row small {
  display: block;

  margin-top: 4px;

  font-size: 10px;

  color: #809095;
}


/* ---------------------------------------------------------
   6. VIDEO — KEEP IT VISIBLE
   --------------------------------------------------------- */

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

.hero-video-card {
  position: relative;
  z-index: 3;
}


/* ---------------------------------------------------------
   7. VIDEO SHOULD NEVER OVERLAP NAVBAR
   --------------------------------------------------------- */

.hero {
  padding-top: 175px;
}

@media (max-width: 1000px) {

  .hero {
    padding-top: 145px;
  }

}

@media (max-width: 720px) {

  .hero {
    padding-top: 115px;
  }

  .hero-copy h1 {
    font-size: 44px;
    line-height: 1.03;
    letter-spacing: -2px;
  }

  .hero-copy .hero-description {
    font-size: 14px !important;
  }

  .hero-copy .hero-actions {
    flex-direction: column;
  }

  .hero-copy .trust-row {
    flex-wrap: wrap;
    gap: 14px;
  }

}
/* =========================================================
   HERO TEXT VISIBILITY + PREMIUM COLOR FIX
   Paste at VERY BOTTOM of style.css
   ========================================================= */

.hero-copy {
  position: relative;
  z-index: 20 !important;
  max-width: 720px;
}

/* Small eyebrow */
.hero-copy .eyebrow {
  color: #d7f58a !important;
  font-weight: 900;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

.hero-copy .eyebrow i {
  background: linear-gradient(90deg, #b8e34f, #38d7ca) !important;
  box-shadow: 0 0 12px rgba(169, 216, 59, .35);
}

/* MAIN HERO HEADING */
.hero-copy h1 {
  color: #ffffff !important;
  font-family: Manrope, sans-serif !important;

  font-size: clamp(48px, 5.3vw, 78px) !important;
  line-height: 1.02 !important;
  letter-spacing: -3px !important;
  font-weight: 800 !important;

  margin: 18px 0 22px !important;

  text-shadow:
    0 3px 10px rgba(0, 0, 0, .55),
    0 10px 35px rgba(0, 0, 0, .28);
}

/* Empire / Environmental highlight */
.hero-copy h1 span {
  color: #5ee1d6 !important;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, .45),
    0 0 28px rgba(37, 184, 173, .16);
}

/* & Consultant */
.hero-copy h1 em {
  color: rgba(255, 255, 255, .78) !important;
  font-style: normal !important;
}
.hero-copy h2 span {
  color: #5ee1d6 !important;

  text-shadow:
    0 3px 12px rgba(0, 0, 0, .45),
    0 0 28px rgba(37, 184, 173, .16);
}
.hero-copy h2 em{
  color: rgba(255, 255, 255, .78) !important;
  font-style: normal !important;
}

/* Location line */
.hero-copy .hero-location {
  color: #e8fff8 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;

  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Description */
.hero-copy .hero-description {
  max-width: 650px !important;

  color: rgba(255, 255, 255, .82) !important;

  font-size: 16px !important;
  line-height: 1.75 !important;

  margin: 0 !important;

  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
}

/* Buttons */
.hero-copy .hero-actions {
  margin-top: 28px !important;
  display: flex;
  gap: 12px;
}

.hero-copy .btn-primary {
  color: #ffffff !important;

  background: linear-gradient(
    135deg,
    #0b8f86,
    #11b2a6
  ) !important;

  box-shadow:
    0 14px 32px rgba(0,0,0,.22),
    0 0 24px rgba(37,184,173,.18);
}

.hero-copy .btn-glass {
  color: #083f42 !important;
  background: rgba(255,255,255,.94) !important;

  border: 1px solid rgba(255,255,255,.98) !important;

  box-shadow:
    0 12px 30px rgba(0,0,0,.16);
}

/* Trust row */
.hero-copy .trust-row {
  margin-top: 30px !important;
  display: flex;
  gap: 0;
}

.hero-copy .trust-row div {
  padding-left: 15px;
  padding-right: 25px;
  border-left: 2px solid #a9d83b !important;
}

.hero-copy .trust-row strong {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 900 !important;

  text-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.hero-copy .trust-row small {
  color: rgba(255,255,255,.68) !important;
  font-size: 10px !important;
}

/* Extra premium readability layer behind text */
.hero-copy::before {
  content: "";
  position: absolute;
  z-index: -1;

  left: -35px;
  top: -35px;

  width: 690px;
  height: 690px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(0, 20, 23, .34) 0%,
    rgba(0, 20, 23, .20) 45%,
    transparent 72%
  );

  filter: blur(18px);
  pointer-events: none;
}

/* Mobile */
@media (max-width: 720px) {

  .hero-copy h1 {
    font-size: 44px !important;
    line-height: 1.02 !important;
    letter-spacing: -2px !important;
  }

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

  .hero-copy::before {
    left: -25px;
    top: -25px;
    width: 430px;
    height: 600px;
  }

  .hero-copy .trust-row {
    flex-wrap: wrap;
    gap: 14px;
  }
}
.h3
{
	  color: lime !important;

}
/* =========================================================
   MARQUEE STRIP — MATCH HERO ENVIRONMENTAL COLOR
   ========================================================= */

.marquee {
  background: linear-gradient(
    90deg,
    #075a56 0%,
    #0b756d 45%,
    #0e8f86 75%,
    #159f95 100%
  ) !important;

  color: #ffffff !important;

  padding: 16px 0 !important;

  border-top: 1px solid rgba(169, 216, 59, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 -8px 25px rgba(11,93,87,.08);

  position: relative;
  overflow: hidden;
}

/* Premium subtle glow */
.marquee::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(37, 184, 173, 0.12),
      transparent
    );

  pointer-events: none;
}

/* Moving text */
.marquee div {
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 1.5px;
}

/* Lime separators */
.marquee b {
  color: #a9d83b !important;
  margin: 0 18px;
  text-shadow: 0 0 8px rgba(169,216,59,.25);
}
/* =========================================================
   HERO OPACITY CONTROL
   Desktop = KEEP CURRENT OPACITY
   Mobile  = REMOVE ALL OPACITY
   ========================================================= */

/* MOBILE ONLY */
@media (max-width: 720px) {

  /* Hero itself fully visible */
  .hero,
  .hero-copy,
  .hero-stage,
  .hero-video-card,
  .hero-video-card video,
  .video-fallback,
  .video-fallback img {
    opacity: 1 !important;
    filter: none !important;
  }

  /* Remove any old desktop/mobile overlay */
  .hero::before,
  .hero::after,
  .hero-copy::before,
  .hero-copy::after,
  .hero-video-card::before,
  .hero-video-card::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }

  /* Hero text fully clear */
  .hero h1,
  .hero h2,
  .hero p,
  .hero span,
  .hero em,
  .hero strong,
  .hero small,
  .hero .eyebrow {
    opacity: 1 !important;
    text-shadow: none !important;
  }

  /* Video fully clear */
  .hero-video-card video {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    filter: none !important;
  }

  /* Keep video card itself visible */
  .hero-video-card {
    opacity: 1 !important;
    visibility: visible !important;
  }

}
/* =========================================================
   EMPIRE HERO — FINAL RESPONSIVE SETUP
   DESKTOP = CURRENT HERO
   MOBILE  = OLD / SEPARATE MOBILE HERO
   TEXT SHADOW = REMOVED
   ========================================================= */


/* =========================================================
   DESKTOP
   Keep current desktop hero exactly as it is.
   No desktop hero layout changes here.
   ========================================================= */


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

@media (max-width: 720px) {

  /* -------------------------------------------------------
     MOBILE HERO BACKGROUND
     ------------------------------------------------------- */

  .hero {
    width: 100% !important;

    min-height: auto !important;
    height: auto !important;

    padding-top: 118px !important;
    padding-bottom: 45px !important;

    display: flex !important;
    flex-direction: column !important;

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

    gap: 28px !important;

    text-align: center !important;

    background:
      radial-gradient(
        circle at 15% 0%,
        #e8f8f4 0,
        transparent 34%
      ),
      radial-gradient(
        circle at 90% 20%,
        #eff8dd 0,
        transparent 30%
      ),
      var(--paper) !important;

    overflow: hidden !important;
  }


  /* -------------------------------------------------------
     MOBILE HERO CONTENT
     ------------------------------------------------------- */

  .hero-copy {
    position: relative !important;

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

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    z-index: 20 !important;

    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }


  /* Remove all old text background/glow */
  .hero-copy::before,
  .hero-copy::after {
    display: none !important;
    content: none !important;
  }


  /* -------------------------------------------------------
     EYEBROW
     ------------------------------------------------------- */

  .hero-copy .eyebrow {
    justify-content: center !important;

    color: var(--teal) !important;

    font-size: 11px !important;
    letter-spacing: 2px !important;

    text-shadow: none !important;
  }

  .hero-copy .eyebrow i {
    box-shadow: none !important;
  }


  /* -------------------------------------------------------
     HERO HEADING
     NO SHADOW
     ------------------------------------------------------- */

  .hero-copy h1 {
    width: 100% !important;

    margin: 18px auto 8px !important;

    font-family: Manrope, sans-serif !important;

    font-size:
      clamp(42px, 11vw, 52px) !important;

    line-height: 1.02 !important;

    letter-spacing: -2.2px !important;

    font-weight: 800 !important;

    color: var(--navy) !important;

    text-align: center !important;

    text-shadow: none !important;

    filter: none !important;
  }


  .hero-copy h1 span {
    color: var(--teal) !important;

    text-shadow: none !important;

    filter: none !important;
  }


  .hero-copy h1 em {
    color: #648089 !important;

    font-style: normal !important;

    text-shadow: none !important;

    filter: none !important;
  }


  /* -------------------------------------------------------
     YOUR CURRENT HTML HAS h2 FOR
     "Environmental Projects & consultant"
     ------------------------------------------------------- */

  .hero-copy h2 {
    width: 100% !important;

    margin: 0 auto 20px !important;

    font-family: Manrope, sans-serif !important;

    font-size:
      clamp(26px, 7vw, 34px) !important;

    line-height: 1.08 !important;

    letter-spacing: -1px !important;

    font-weight: 800 !important;

    text-align: center !important;

    color: var(--teal) !important;

    text-shadow: none !important;

    filter: none !important;
  }


  .hero-copy h2 span {
    color: var(--teal) !important;

    text-shadow: none !important;
  }


  .hero-copy h2 em {
    color: var(--teal) !important;

    font-style: normal !important;

    text-shadow: none !important;
  }


  /* -------------------------------------------------------
     DESCRIPTION
     ------------------------------------------------------- */

  .hero-copy > p,
  .hero-copy .hero-location,
  .hero-copy .hero-description {
    width: 100% !important;

    max-width: 380px !important;

    margin: 0 auto !important;

    color: var(--muted) !important;

    font-size: 14px !important;

    line-height: 1.72 !important;

    text-align: center !important;

    text-shadow: none !important;

    filter: none !important;

    opacity: 1 !important;
  }


  /* -------------------------------------------------------
     BUTTONS
     ------------------------------------------------------- */

  .hero-actions {
    width: 100% !important;

    margin: 24px auto 0 !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    gap: 10px !important;
  }


  .hero-actions .btn {
    width: 100% !important;

    max-width: 340px !important;

    min-height: 50px !important;

    border-radius: 15px !important;

    box-shadow: none !important;
  }


  .hero-actions .btn-primary {
    color: #fff !important;

    background:
      linear-gradient(
        135deg,
        var(--teal),
        var(--teal2)
      ) !important;
  }


  .hero-actions .btn-glass {
    color: #093f42 !important;

    background:
      rgba(255,255,255,.88) !important;

    border:
      1px solid rgba(11,93,87,.10) !important;

    box-shadow: none !important;
  }


  /* -------------------------------------------------------
     TRUST ROW
     ------------------------------------------------------- */

  .trust-row {
    width: 100% !important;

    margin-top: 22px !important;

    display: flex !important;

    justify-content: center !important;

    align-items: stretch !important;

    gap: 0 !important;

    flex-wrap: nowrap !important;
  }


  .trust-row div {
    flex: 1 1 0 !important;

    min-width: 0 !important;

    padding:
      4px 8px !important;

    border-left:
      2px solid var(--lime) !important;
  }


  .trust-row strong {
    display: block !important;

    color: var(--navy) !important;

    font-size: 10px !important;

    line-height: 1.25 !important;

    text-shadow: none !important;
  }


  .trust-row small {
    display: block !important;

    margin-top: 4px !important;

    color: #809095 !important;

    font-size: 8px !important;

    line-height: 1.25 !important;

    text-shadow: none !important;
  }


  /* -------------------------------------------------------
     MOBILE HERO VIDEO
     Put video BELOW CONTENT
     ------------------------------------------------------- */

  .hero-stage {
    position: relative !important;

    inset: auto !important;

    width: 100% !important;

    height: 330px !important;

    margin:
      0 auto !important;

    display: grid !important;

    place-items: center !important;

    z-index: 5 !important;

    overflow: visible !important;

    opacity: 1 !important;

    transform: none !important;
  }


  /* -------------------------------------------------------
     MOBILE 3D ORB
     ------------------------------------------------------- */

  .hero-orb {
    display: block !important;

    position: absolute !important;

    width: 330px !important;
    height: 330px !important;

    left: 50% !important;
    top: 50% !important;

    margin:
      -165px 0 0 -165px !important;

    border-radius: 50% !important;

    opacity: .24 !important;
  }


  /* -------------------------------------------------------
     MOBILE VIDEO CARD
     ------------------------------------------------------- */

  .hero-video-card {
    position: relative !important;

    inset: auto !important;

    width:
      min(92%, 360px) !important;

    height:
      315px !important;

    margin: 0 auto !important;

    border-radius:
      28px !important;

    overflow: hidden !important;

    transform:
      translateZ(20px) !important;

    box-shadow:
      0 25px 60px
      rgba(11,93,87,.16) !important;
  }


  /* Video itself */
  .hero-video-card video {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    opacity: 1 !important;

    filter: none !important;

    text-shadow: none !important;
  }


  /* Fallback image */
  .hero-video-card .video-fallback,
  .hero-video-card .video-fallback img {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
  }


  /* Video glass */
  .hero-video-card .video-glass {
    right: 12px !important;
    bottom: 12px !important;

    padding:
      10px 12px !important;

    border-radius:
      13px !important;
  }


  .hero-video-card .video-glass span {
    font-size: 7px !important;
  }


  .hero-video-card .video-glass b {
    font-size: 11px !important;
  }


  /* -------------------------------------------------------
     HIDE DESKTOP FLOATING CARDS
     ------------------------------------------------------- */

  .float-card {
    display: none !important;
  }


  /* -------------------------------------------------------
     IMPORTANT:
     REMOVE DESKTOP TEXT SHADOW / OVERLAYS
     ------------------------------------------------------- */

  .hero *,
  .hero h1,
  .hero h2,
  .hero p,
  .hero span,
  .hero em,
  .hero strong,
  .hero small {
    text-shadow: none !important;
  }


  /* Remove mobile reveal opacity issue */
  .hero .reveal,
  .hero .reveal.visible {
    opacity: 1 !important;

    transform: none !important;
  }

}
/* =========================================================
   EMPIRE HERO FINAL COLOR FIX
   DESKTOP = MORE CINEMATIC / SLIGHTLY DARKER
   MOBILE  = FULL COLOR + DARK READABLE TEXT
   ========================================================= */


/* =========================================================
   DESKTOP ONLY
   ========================================================= */

@media (min-width: 721px) {

  .hero-video-card video,
  .hero-video-card .video-fallback img {
    opacity: 5 !important;

    filter:
      brightness(0.82)
      contrast(1.06)
      saturate(1.08) !important;
  }

  /* Subtle dark layer for better white/light hero text */
  .hero-video-card::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 2;

    background:
      linear-gradient(
        90deg,
        rgba(2, 32, 34, 0.22),
        rgba(2, 32, 34, 0.08),
        rgba(2, 32, 34, 0.16)
      ) !important;

    pointer-events: none;
  }

  .hero-video-card video {
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-video-card .video-glass {
    z-index: 5 !important;
  }
}


/* =========================================================
   MOBILE ONLY
   NO OPACITY
   NO FILTER
   NO OVERLAY
   FULL COLOR
   ========================================================= */

@media (max-width: 720px) {

  /* -------------------------------------------------------
     HERO / PARENT OPACITY RESET
     ------------------------------------------------------- */

  .hero {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
  }

  .hero-copy,
  .hero-stage,
  .hero-video-card {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
  }


  /* -------------------------------------------------------
     REMOVE ALL HERO OVERLAY LAYERS ON MOBILE
     ------------------------------------------------------- */

  .hero::before,
  .hero::after,
  .hero-copy::before,
  .hero-copy::after,
  .hero-stage::before,
  .hero-stage::after,
  .hero-video-card::before,
  .hero-video-card::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
  }


  /* -------------------------------------------------------
     MOBILE VIDEO — NATURAL COLORS
     ------------------------------------------------------- */

  .hero-video-card {
    background: transparent !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .hero-video-card video {
    display: block !important;

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

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

    filter: none !important;
    mix-blend-mode: normal !important;

    object-fit: cover !important;

    position: relative !important;
    z-index: 5 !important;
  }

  .hero-video-card .video-fallback,
  .hero-video-card .video-fallback img {
    opacity: 1 !important;
    filter: none !important;
    visibility: visible !important;
  }


  /* -------------------------------------------------------
     MOBILE HERO TEXT — DARK + CLEAR
     ------------------------------------------------------- */

  .hero .eyebrow {
    color: var(--teal) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .hero h1 {
    color: var(--navy) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .hero h1 span,
  .hero h2 span {
    color: var(--teal) !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .hero h1 em {
    color: #5f747a !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }


  /* -------------------------------------------------------
     MOBILE DESCRIPTION
     ------------------------------------------------------- */

  .hero-copy > p,
  .hero-copy .hero-location,
  .hero-copy .hero-description {
    color: #5c7378 !important;

    opacity: 1 !important;

    text-shadow: none !important;

    filter: none !important;
  }


  /* -------------------------------------------------------
     MOBILE TRUST ROW — FIX WHITE/FADED TEXT
     ------------------------------------------------------- */

  .hero .trust-row {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero .trust-row div {
    opacity: 1 !important;
    border-left-color: var(--lime) !important;
  }

  .hero .trust-row strong {
    display: block !important;

    color: var(--navy) !important;

    opacity: 1 !important;

    visibility: visible !important;

    font-weight: 900 !important;

    text-shadow: none !important;
  }

  .hero .trust-row small {
    display: block !important;

    color: #71858a !important;

    opacity: 1 !important;

    visibility: visible !important;

    text-shadow: none !important;
  }


  /* -------------------------------------------------------
     MOBILE BUTTONS
     ------------------------------------------------------- */

  .hero .btn-primary {
    color: #ffffff !important;
    opacity: 1 !important;
  }

  .hero .btn-glass {
    color: var(--navy) !important;
    background: rgba(255,255,255,.94) !important;
    opacity: 1 !important;
  }


  /* -------------------------------------------------------
     IMPORTANT: REVEAL CANNOT FADE HERO ON MOBILE
     ------------------------------------------------------- */

  .hero.reveal,
  .hero.reveal.visible,
  .hero-copy.reveal,
  .hero-copy.reveal.visible,
  .hero-stage.reveal,
  .hero-stage.reveal.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

}
/* =========================================================
   DESKTOP HERO VIDEO — DARKER
   MOBILE — UNCHANGED
   ========================================================= */

@media (min-width: 721px) {

  .hero-video-card video,
  .hero-video-card .video-fallback img {
    opacity: 0.92 !important;

    filter:
      brightness(0.72)
      contrast(1.08)
      saturate(1.05) !important;
  }

  .hero-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
      linear-gradient(
        90deg,
        rgba(0, 20, 22, 0.30),
        rgba(0, 20, 22, 0.16),
        rgba(0, 20, 22, 0.24)
      ) !important;

    pointer-events: none;
  }

  .hero-video-card video {
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-video-card .video-glass {
    z-index: 5 !important;
  }
}


/* =========================================================
   MOBILE — KEEP FULL COLOR
   ========================================================= */

@media (max-width: 720px) {

  .hero-video-card video,
  .hero-video-card .video-fallback img {
    opacity: 1 !important;
    filter: none !important;
  }

  .hero-video-card::before,
  .hero-video-card::after {
    display: none !important;
    content: none !important;
  }
}
/* =========================================================
   DESKTOP HERO VIDEO — MORE DARK / LOWER OPACITY
   MOBILE UNCHANGED
   ========================================================= */

@media (min-width: 721px) {

  .hero-video-card video,
  .hero-video-card .video-fallback img {
    opacity: 0.48 !important;

    filter:
      brightness(0.64)
      contrast(1.10)
      saturate(1.03) !important;
  }

  .hero-video-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;

    background: rgba(0, 25, 27, 0.18) !important;

    pointer-events: none;
  }

  .hero-video-card video {
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-video-card .video-glass {
    z-index: 5 !important;
  }
}


/* =========================================================
   MOBILE — KEEP ORIGINAL FULL COLOR
   ========================================================= */

@media (max-width: 720px) {

  .hero-video-card video,
  .hero-video-card .video-fallback img {
    opacity: 1 !important;
    filter: none !important;
  }

  .hero-video-card::before,
  .hero-video-card::after {
    display: none !important;
    content: none !important;
  }
}