/* =========================================================
   OrbitAvanya Tech — Refactor Layer
   Sits on top of style.css. Handles: theme system, navbar
   rebuild, mobile menu, marquee, testimonials, service
   timeline, footer balance, team carousel + image fixes,
   and global micro-interactions.
   ========================================================= */

/* ---------- 0. TYPOGRAPHY ---------- */
/* ---------- 1. THEME TOKENS ---------- */
:root {
  --accent: #ef0548;
  --accent-rgb: 239, 5, 72;
  --accent-dark: #a30339;
  --surface: #ffffff;
  --surface-alt: #f5f8fc;
  --text-strong: #04213f;
  --text-body: #4b5a6e;
  --border-soft: rgba(4, 33, 63, 0.08);
  --shadow-soft: 0 10px 30px rgba(4, 33, 63, 0.08);
  --shadow-lift: 0 20px 45px rgba(239, 5, 72, 0.18);
  --transition-smooth: all 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  --font-heading: "Poppins", sans-serif;
  --font-body: "Poppins", sans-serif;
}

html:not([data-theme="dark"]) {
  --accent: #e20040;
  --accent-rgb: 226, 0, 64;
}


html {
  scroll-behavior: smooth;
}

body,
p,
li,
span,
input,
textarea,
button,
a {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.title,
.sub-title,
.theme-btn,
.header-btn,
.main-menu ul li a,
.process-step__title,
.expertise-card__title,
.testimonial-card__name,
.num,
.trust-stat-card .num {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.01em;
}

h1.title,
h2.title {
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* ---------- 2. KILL THE HEADER GAP ---------- */
.header-gutter {
  display: none !important;
  min-height: 0 !important;
  height: 0 !important;
}

header.header-1 {
  background: var(--surface);
  box-shadow: 0 1px 0 var(--border-soft);
  transition: var(--transition-smooth);
}

.top-header {
  display: none !important;
}

.banner-home {
  padding-top: 24px;
}

.page-banner {
  padding-top: 0 !important;
}

@media (max-width: 767px) {
  .banner-home {
    padding-top: 32px;
  }
}

/* ---------- 3. NAVBAR LAYOUT ---------- */
.main-header-wraper {
  padding: 14px 0;
  position: relative;
}

.main-header-wraper .d-flex.align-items-center.justify-content-between {
  gap: 16px;
  flex-wrap: nowrap;
}

.header-logo {
  flex: 0 0 auto;
  margin-right: 16px;
  z-index: 100;
}

.header-menu {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
}

header.header-1 .main-menu ul {
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  white-space: nowrap;
}

@media (min-width: 1200px) and (max-width: 1400px) {
  header.header-1 .main-menu ul > li > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: 15px;
  }
}

/* Extra-tight sub-range: full menu + lang selector + theme toggle + 2 CTA buttons
   all compete for space here. Free up room so the language button never
   overlaps the last nav item ("Contact"). */
@media (min-width: 1200px) and (max-width: 1320px) {
  header.header-1 .main-menu ul > li > a {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 14.5px;
  }
  .header-right {
    gap: 6px;
  }
  .lang-selector {
    margin-right: 2px;
  }
  .globe-btn {
    font-size: 17px;
    padding: 3px;
  }
  .header-btn.header-btn-small {
    padding: 8px 12px !important;
    font-size: 11.5px !important;
  }
}

header.header-1 .main-menu ul > li > a {
  position: relative;
  transition: var(--transition-smooth);
}

header.header-1 .main-menu ul > li > a::after {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 6px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

header.header-1 .main-menu ul > li:hover > a::after,
header.header-1 .main-menu ul > li.active > a::after {
  transform: scaleX(1);
}

.header-right {
  flex: 0 0 auto;
  margin-left: auto;
  gap: 12px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.header-right > * {
  flex-shrink: 0;
}

.header-btn.header-btn-small {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 08px 14px !important;
  font-size: 11px !important;
  font-weight: 600;
  line-height: 1.3 !important;
  color: #fff !important;
  background-color: var(--accent) !important;
  background-image: none !important;
  border-radius: 30px !important;
  white-space: nowrap;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-soft);
}

.header-btn.header-btn-small i {
  font-size: 10px !important;
  margin-left: 2px !important;
}

.header-btn.header-btn-small:hover {
  background-color: var(--accent-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

@media (max-width: 1350px) {
  .header-right {
    gap: 18px;
  }

  .header-btn.header-btn-small {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }

  .globe-btn {
    margin-left: 6px;
  }
}

/* remove the leftover "Contact For Support" widget cleanly if present anywhere */
.header-contact {
  display: none !important;
}

/* ---------- 5. PREMIUM MOBILE MENU ---------- */
#hamburger {
  font-size: 26px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center;
}
#hamburger i {
  line-height: 1;
}

.mobile-nav {
  background: var(--surface);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
  transition:
    right 0.45s cubic-bezier(0.22, 0.61, 0.36, 1),
    left 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
  padding: 34px 26px;
}

.mobile-nav .close-nav {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-smooth);
}

.mobile-nav .close-nav:hover {
  background: var(--accent);
  color: #fff;
  transform: rotate(90deg);
}
.mobile-nav .close-nav i {
  color: var(--text-strong);
  transition: var(--transition-smooth);
}
.mobile-nav .close-nav:hover i {
  color: #fff;
}

.mobile-nav .consulter-mobile-nav > ul {
  margin-top: 20px;
}

.mobile-nav .consulter-mobile-nav > ul > li {
  border-bottom: 1px solid var(--border-soft);
}

.mobile-nav .consulter-mobile-nav > ul > li > a {
  display: block;
  padding: 16px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--text-strong);
  transition: var(--transition-smooth);
}

.mobile-nav .consulter-mobile-nav > ul > li > a:hover {
  color: var(--accent);
  padding-left: 10px;
}

.mobile-nav .sidebar-nav__bottom h6 {
  color: var(--text-strong) !important;
}

.mobile-nav .sidebar-nav__bottom-contact-infos a,
.mobile-nav .sidebar-nav__bottom-contact-infos li {
  color: var(--text-body);
}

.mobile-nav .sidebar-nav__bottom-social ul {
  display: flex;
  gap: 10px;
}

.mobile-nav .sidebar-nav__bottom-social ul li a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--text-strong);
  transition: var(--transition-smooth);
}

.mobile-nav .sidebar-nav__bottom-social ul li a:hover {
  background: var(--accent);
  color: #fff;
  transform: translateY(-3px);
}

.offcanvas-overlay {
  backdrop-filter: blur(3px);
  transition: opacity 0.4s ease;
}

/* ---------- 6. GLOBAL MICRO-INTERACTIONS ---------- */
a,
button,
.theme-btn,
.work-process__item,
.team-item,
.testimonial__item,
.our-portfolio-home__item,
.financial__item,
.single-footer-wid a {
  transition: var(--transition-smooth);
}

.theme-btn {
  position: relative;
  overflow: hidden;
}

.theme-btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.financial__item,
.work-process__item,
.our-portfolio-home__item {
  border-radius: 16px;
}

.financial__item:hover,
.our-portfolio-home__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* ---------- 7. TEAM IMAGE FIX (no stretching) ---------- */
/* Cards should all be the same width, just wider and shorter (less tall)
   than a portrait crop — used on both the home page carousel and the team
   page grid/carousel. */
.team-item {
  max-width: 300px;
  margin-left: auto;
  margin-right: auto;
}

.team-item .media {
  aspect-ratio: 4 / 3 !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-alt);
}

@media (max-width: 991px) {
  .team-item {
    max-width: 270px;
  }
}

@media (max-width: 575px) {
  .team-item {
    max-width: 240px;
  }
}

.team-item .media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: top center;
  transition: transform 0.5s ease;
}

.team-item:hover .media img {
  transform: scale(1.06);
}

.team-item {
  border-radius: 16px;
  transition: var(--transition-smooth);
}

.team-item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* ---------- 8. HOME TEAM CAROUSEL ---------- */
.team-carousel-wrap {
  position: relative;
}

.team-carousel .slick-track {
  display: flex;
}
.team-carousel .slick-slide {
  height: auto;
  padding: 0 14px;
}
.team-carousel .slick-slide > div {
  height: 100%;
}

.team-carousel-arrow {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  color: var(--text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  box-shadow: var(--shadow-soft);
  cursor: pointer;
}

.team-carousel-arrow:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-lift);
}
.team-carousel-prev {
  left: -20px;
}
.team-carousel-next {
  right: -20px;
}

@media (max-width: 991px) {
  .team-carousel-prev {
    left: -6px;
  }
  .team-carousel-next {
    right: -6px;
  }
  .team-carousel-arrow {
    width: 42px;
    height: 42px;
  }
}

/* ---------- 9. TRUST MARQUEE (replaces Our Achievements) ---------- */
.trust-marquee-section {
  padding: 60px 0;
  background: var(--surface-alt);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  overflow: hidden;
}

.trust-marquee {
  display: flex;
  width: max-content;
  animation: trust-marquee-scroll 32s linear infinite;
}

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

.trust-marquee__group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.trust-marquee__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 0 34px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-strong);
}

.trust-marquee__pill i {
  color: var(--accent);
  font-size: 14px;
}

.trust-marquee__pill:not(:last-child) {
  border-right: 1px solid var(--border-soft);
}

@keyframes trust-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.trust-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 44px;
}

.trust-stat-card {
  flex: 1 1 220px;
  max-width: 280px;
  text-align: center;
  padding: 28px 20px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.trust-stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.trust-stat-card .num {
  font-size: 34px;
  font-weight: 800;
  color: var(--accent);
}
.trust-stat-card .label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-body);
  margin-top: 4px;
}

/* ---------- 10. TESTIMONIALS REDESIGN ---------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

@media (max-width: 1400px) {
  .testimonial-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .testimonial-grid {
    grid-template-columns: 1fr;
  }
}

.testimonial-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.testimonial-card__quote-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.testimonial-card__stars i {
  color: #ffb13c;
  font-size: 13px;
  margin-right: 2px;
}

.testimonial-card__text {
  color: var(--text-body);
  font-size: 15.5px;
  line-height: 1.7;
  flex: 1;
}

.testimonial-card__footer {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(var(--accent-rgb), 0.25);
}

.testimonial-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-card__name {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 14.5px;
}
.testimonial-card__role {
  color: var(--text-body);
  font-size: 12.5px;
}

/* ---------- 11. SERVICE WORKFLOW TIMELINE ---------- */
.process-timeline {
  position: relative;
  display: flex;
  gap: 0;
  counter-reset: step;
  margin-top: 20px;
}

.process-timeline::before {
  content: "";
  position: absolute;
  top: 46px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: repeating-linear-gradient(
    to right,
    var(--border-soft) 0 10px,
    transparent 10px 18px
  );
  z-index: 0;
}

.process-step {
  flex: 1;
  position: relative;
  text-align: center;
  padding: 0 16px;
  z-index: 1;
}

.process-step__badge {
  width: 92px;
  height: 92px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--accent);
  box-shadow: var(--shadow-soft);
  position: relative;
}

.process-step__badge::after {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step:hover .process-step__badge {
  transform: translateY(-6px) scale(1.05);
  box-shadow: var(--shadow-lift);
  border-color: var(--accent);
}

.process-step__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.process-step__desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
}

@media (max-width: 991px) {
  .process-timeline {
    flex-direction: column;
    gap: 40px;
  }
  .process-timeline::before {
    display: none;
  }
  .process-step {
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 0;
  }
  .process-step__badge {
    margin: 0;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    font-size: 24px;
  }
  .process-step__text {
    text-align: left;
  }
}

/* ---------- 12. FOOTER: SHORTER, BALANCED ---------- */
.footer-top__box {
  padding-bottom: 40px !important;
}

footer.footer-1 .col-md-6.col-xl-3:first-child {
  padding-right: 20px;
}

.single-footer-wid.widget-description img.msme-mark {
  display: none;
}

.recent-post-list .single-recent-post:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

footer .wid-title {
  margin-bottom: 18px !important;
}

footer .single-footer-wid ul li {
  margin-bottom: 8px !important;
}

footer .single-footer-wid--compact ul.contact-info li {
  margin-bottom: 10px !important;
  line-height: 1.5;
}

footer .container > .row {
  padding-top: 10px;
}

/* ---------- 44. FOOTER: OFFICE + MAP LAYOUT, REMOVE BG IMAGE, SHRINK EVERYTHING ---------- */
.footer-1,
.footer-1.footer_wrapper {
  background-image: none !important;
  padding-top: 160px !important;
}

@media (max-width: 1199px) {
  .footer-1,
  .footer-1.footer_wrapper {
    padding-top: 130px !important;
  }
}
@media (max-width: 991px) {
  .footer-1,
  .footer-1.footer_wrapper {
    padding-top: 150px !important;
  }
}
@media (max-width: 767px) {
  .footer-1,
  .footer-1.footer_wrapper {
    padding-top: 90px !important;
  }
}

.footer-1.footer-3 {
  padding-top: 100px !important;
}
@media (max-width: 1199px) {
  .footer-1.footer-3 {
    padding-top: 80px !important;
  }
}
@media (max-width: 991px) {
  .footer-1.footer-3 {
    padding-top: 60px !important;
  }
}
@media (max-width: 767px) {
  .footer-1.footer-3 {
    padding-top: 50px !important;
  }
}

.footer-office-map {
  gap: 22px;
  align-items: stretch;
}
.footer-office-map__text {
  flex: 1 1 220px;
  min-width: 200px;
}
.footer-office-map__frame {
  flex: 1 1 220px;
  min-width: 200px;
  min-height: 150px;
  overflow: hidden;
}
.footer-office-map__frame iframe {
  width: 100%;
  height: 100%;
  min-height: 150px;
  border: 0;
  filter: grayscale(0.3) invert(0.92) contrast(0.9);
}

footer.footer-1 .single-footer-wid.site_info_box .description {
  font-size: 13.5px;
  line-height: 1.6;
}
footer.footer-1 .wid-title {
  font-size: 16px;
  margin-bottom: 14px !important;
}
footer.footer-1 .single-footer-wid ul li {
  margin-bottom: 6px !important;
  font-size: 13.5px;
}
footer.footer-1 .single-footer-wid--compact ul.contact-info li,
footer.footer-1 .footer-office-map__text ul.contact-info li {
  margin-bottom: 8px !important;
  font-size: 13px;
  line-height: 1.45;
}
footer.footer-1 .newsletter_box input,
footer.footer-1 .newsletter_box button {
  padding: 12px 18px;
  font-size: 13px;
}
footer .footer-bottom {
  padding: 14px 0 !important;
  margin-top: 20px !important;
}
footer .footer-bottom-content {
  font-size: 13px;
}
footer .social-profile ul li,
footer .social-profile ul li a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
footer .social-profile ul li a {
  width: 34px !important;
  height: 34px !important;
  font-size: 13px !important;
  line-height: normal !important;
  padding: 0 !important;
  text-align: center !important;
}
footer .social-profile ul li a i {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .footer-office-map {
    flex-direction: column;
  }
}

/* ---------- 46. FOOTER: TIGHTER SPACING, 2-COLUMN QUICK LINKS, MAP ABOVE LOCATION ---------- */
.footer-top__box {
  padding-bottom: 24px !important;
}
footer.footer-1 .single-footer-wid {
  margin-bottom: 20px !important;
}
footer .container > .row {
  padding-top: 0 !important;
}

/* Remove the large gap between footer links (was gap:20px / margin-bottom:8px per item) */
.footer-1 .single-footer-wid ul {
  gap: 0 !important;
}
footer.footer-1 .single-footer-wid ul li,
.footer-1 .single-footer-wid ul li {
  margin-bottom: 2px !important;
}
footer.footer-1 .single-footer-wid ul li a {
  padding: 2px 0 2px 15px;
  line-height: 1.3;
}

/* Quick Links: two columns instead of one long list */
footer.footer-1 .single-footer-wid.pl-xl-10.pl-50 {
  padding-left: 0 !important;
}
footer.footer-1 .single-footer-wid.pl-xl-10.pl-50 ul {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px 10px !important;
  width: 100%;
}
footer.footer-1 .single-footer-wid.pl-xl-10.pl-50 ul li {
  min-width: 0;
}
footer.footer-1 .single-footer-wid.pl-xl-10.pl-50 ul li a {
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  font-size: 14px;
  line-height: 1.35;
}

/* Office Location: address and map sit side-by-side again, but the map is
   smaller and the address column has a fixed width so it wraps into 2-3
   short lines instead of stretching the row full-width. */
.footer-office-map {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 20px !important;
}
.footer-office-map__text {
  flex: 0 0 240px;
  max-width: 240px;
  min-width: 200px;
}
.footer-office-map__frame {
  order: 0;
  flex: 1 1 auto;
  min-height: 260px;
  max-height: 300px;
}
.footer-office-map__frame iframe {
  min-height: 260px;
}
footer.footer-1 .footer-office-map__text ul.contact-info li {
  margin-bottom: 5px !important;
}
footer.footer-1 .footer-office-map__text .wid-title {
  margin-bottom: 10px !important;
}

@media (max-width: 767px) {
  .footer-office-map__text {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .footer-office-map__frame {
    min-height: 220px;
    max-height: none;
  }
  .footer-office-map__frame iframe {
    min-height: 220px;
  }
}

footer .footer-bottom {
  padding: 12px 0 !important;
  margin-top: 12px !important;
}

/* ---------- FOOTER BOTTOM: fix copyright not being visible/legible on mobile ---------- */
@media (max-width: 575px) {
  .footer-1 .footer-bottom-content {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 16px 0 !important;
  }
  .footer-1 .footer-bottom-content .coppyright {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100%;
  }
  .footer-1 .footer-bottom-list ul {
    justify-content: center !important;
    gap: 8px 20px !important;
  }
}

/* ---------- 45. FIX: <a> inside .title always inherited red from global `a{color:red}` rule ---------- */
.title a,
h1.title a,
h2.title a,
h3.title a,
h4.title a,
h5.title a,
h6.title a {
  color: inherit !important;
}
.title a:hover {
  color: var(--accent) !important;
}

/* ---------- 46. FIX: portfolio "View Details" button unreadable at rest (white text on light pink) ---------- */
.our-portfolio-home__item .content .btn-link-share .theme-btn {
  color: var(--text-strong) !important;
}
.our-portfolio-home__item .content .btn-link-share .theme-btn:hover,
.our-portfolio-home__item .content .btn-link-share .theme-btn:focus {
  color: #fff !important;
}

/* ---------- 47. FIX: "View All Project" / any btn-border unreadable in dark theme ---------- */
html[data-theme="dark"] .theme-btn.btn-border {
  color: var(--ice);
  border-color: var(--line);
}
html[data-theme="dark"] .theme-btn.btn-border:after {
  background: var(--ice);
}
html[data-theme="dark"] .theme-btn.btn-border:hover,
html[data-theme="dark"] .theme-btn.btn-border:focus {
  color: var(--navy-950);
}

/* ---------- 48. FIX: testimonial CEO text + marquee labels + quick-contact text in dark theme ---------- */
html[data-theme="dark"] .testimonial-card__name {
  color: var(--ice) !important;
}
html[data-theme="dark"] .testimonial-card__role,
html[data-theme="dark"] .testimonial-card__text {
  color: var(--mute) !important;
}
html[data-theme="dark"] .trust-stat-card .label {
  color: var(--mute) !important;
}

html[data-theme="dark"] .trust-marquee__pill {
  color: var(--mute) !important;
}
html[data-theme="dark"] .trust-marquee__pill:not(:last-child) {
  border-right-color: var(--line) !important;
}
html[data-theme="dark"] .quick-contact-card__label {
  color: var(--mute) !important;
}
html[data-theme="dark"] .quick-contact-card__value {
  color: var(--ice) !important;
}

/* ---------- 49. OFFICE CARDS: follow dark navy theme like the rest of the site ---------- */
html[data-theme="dark"] .office-locations {
  background-color: var(--navy-950) !important;
}
html[data-theme="dark"] .office-locations .title,
html[data-theme="dark"] .office-locations .sub-title {
  color: var(--ice) !important;
}
html[data-theme="dark"] .office-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
.office-card__title {
  color: #000 !important;
}
html[data-theme="dark"] .office-card__title {
  color: var(--ice) !important;
}
.office-card__desc {
  color: #000 !important;
  opacity: 0.7;
}
html[data-theme="dark"] .office-card__desc {
  color: var(--mute) !important;
  opacity: 1;
}

/* ---------- 50. SERVICES PAGE TEXT IN DARK THEME ---------- */
html[data-theme="dark"] .similar-work__item {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .similar-work__item .description,
html[data-theme="dark"] .similar-work__item p {
  color: var(--mute) !important;
}

/* ---------- 51. REMOVE "BLACK PANEL" HERO BACKGROUND IN DARK THEME ---------- */
html[data-theme="dark"] .page-banner {
  background-color: transparent !important;
}
html[data-theme="dark"] .page-banner:before {
  display: none;
}

/* ---------- 52. CONTACT PAGE: SOCIAL LINKS WITH LABEL BELOW ICON ---------- */
.direct-contact-row__social {
  display: flex;
  gap: 14px;
}
.direct-contact-row__social a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  margin-left: 0 !important;
}
.direct-contact-row__social a i,
.direct-contact-row__social a .social-icon {
  font-size: 16px;
}

html[data-theme="dark"] .direct-contact-row__social a {
  color: var(--accent) !important;
}
html[data-theme="dark"] .direct-contact-row__social a i {
  color: var(--accent) !important;
}

/* ---------- CTA button groups: space out stacked/wrapped buttons ---------- */
.theme-btn__wrapper {
  gap: 16px;
  row-gap: 14px;
}

@media (max-width: 575px) {
  .theme-btn__wrapper {
    gap: 12px;
    row-gap: 12px;
  }
}

.footer-bottom {
  margin-top: 12px !important;
  padding: 12px 0;
}

footer .recent-post-list .thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
footer .recent-post-list .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 13. ACCENT COLOR APPLICATION ---------- */
.banner-home .highlight {
  color: var(--accent);
}

.banner-home__content .welcome-hero {
  font-size: 1.05rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.banner-home__content .welcome-hero span:not(.highlight) {
  color: #ffffff;
}

.banner-home__content {
  max-width: 100%;
}

.banner-home__content h6.sub-title,
.banner-home__content h1.title,
.banner-home__content .description p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

@media (min-width: 1200px) {
  .banner-home__media {
    margin-left: -120px !important;
  }
  .banner-home .col-xl-6:first-child {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .banner-home .col-xl-6:last-child {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

.banner-home__content {
  max-width: 560px;
}

.banner-home__content h6.sub-title,
.banner-home__content h1.title,
.banner-home__content .description p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
}

html.lang-is-rtl .banner-home__content {
  text-align: right;
  direction: rtl;
}

html.lang-is-rtl .banner-home__content .theme-btn__wrapper {
  justify-content: flex-end;
}

html.lang-is-rtl .banner-home__content .sub-title {
  margin-left: auto;
  margin-right: 0;
}

.theme-btn.fw-600.btn-red,
a.theme-btn.btn-red {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.header-btn.header-btn-small,
.theme-btn:not(.btn-white-border) {
  background-color: var(--accent);
}

.header-btn.header-btn-small:hover,
.theme-btn:not(.btn-white-border):hover {
  background-color: var(--accent-dark);
}

/* ---------- Kill orange hover sweep, keep the effect in-theme ----------
   .theme-btn / .btn-white / .btn-red use an animated diagonal ":after"
   wipe that defaults to orange (#FF9C00). Swap it for the brand's own
   darker accent so hovering still gives a clear visual effect without
   ever turning any button orange. */
.theme-btn:after,
.theme-btn.btn-white:after,
.theme-btn.btn-red:after {
  background: var(--accent-dark) !important;
}

.theme-btn:hover,
.theme-btn:focus,
.theme-btn.btn-white:hover,
.theme-btn.btn-white:focus,
.theme-btn.btn-red:hover,
.theme-btn.btn-red:focus {
  background-color: var(--accent-dark) !important;
  color: #fff;
}

.process-step__badge i,
.trust-marquee__pill i,
.testimonial-card__quote-icon,
header.header-1 .main-menu ul > li:hover > a,
header.header-1 .main-menu ul > li.active > a {
  color: var(--accent);
}

.our-team-home-1 .team-item .theme-btn,
.theme-btn.text-uppercase {
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), 0.25);
}

/* ---------- 17. OUR APPROACH: CARD HOVER ---------- */
.why-choose__item.why-choose__item-two {
  transition: var(--transition-smooth);
  border-radius: 16px;
}

.why-choose__item-wrapper:hover .why-choose__item.why-choose__item-two {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

.why-choose__item.why-choose__item-two .icon {
  transition: var(--transition-smooth);
}

.why-choose__item-wrapper:hover .why-choose__item.why-choose__item-two .icon {
  transform: scale(1.12) rotate(-4deg);
  color: var(--accent);
}

/* ---------- 18. EXPERTISE GRID (replaces accordion) ---------- */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 10px 24px 0;
}

@media (max-width: 991px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .expertise-grid {
    grid-template-columns: 1fr;
    margin: 10px 0 0;
  }
}

@media (max-width: 1199px) {
  .expertise-grid {
    grid-template-columns: repeat(3, 1fr);
    margin: 10px 16px 0;
  }
}
@media (max-width: 767px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
    margin: 10px 8px 0;
  }
}
@media (max-width: 480px) {
  .expertise-grid {
    grid-template-columns: 1fr;
    margin: 10px 0 0;
  }
}

.expertise-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: var(--shadow-soft);
  transition: var(--transition-smooth);
}

.expertise-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.expertise-card__icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 18px;
  transition: var(--transition-smooth);
}

.expertise-card:hover .expertise-card__icon {
  background: var(--accent);
  color: #fff;
  transform: rotate(-6deg) scale(1.05);
}

.expertise-card__title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.expertise-card__desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
}

/* ---------- 19. ABOUT PAGE: IMAGE + TEXT LAYOUT ---------- */
.about-media-stack {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding-top: 36px;
}

.about-media-stack__primary {
  flex: 1 1 58%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4;
}

.about-media-stack__primary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-media-stack__secondary {
  flex: 1 1 38%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lift);
  aspect-ratio: 3 / 4;
  align-self: flex-end;
  margin-bottom: 6%;
}

.about-media-stack__secondary img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-media-stack__badge {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--accent);
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: var(--shadow-lift);
  text-align: center;
  min-width: 110px;
  z-index: 2;
}

.about-media-stack__badge .number {
  font-size: 24px;
  font-weight: 800;
}
.about-media-stack__badge .number sup {
  font-size: 14px;
}

@media (max-width: 991px) {
  .about-media-stack {
    margin-bottom: 20px;
  }
  .about-media-stack__badge {
    padding: 12px 16px;
    min-width: 90px;
  }
}

@media (max-width: 575px) {
  .about-media-stack {
    flex-direction: column;
    align-items: stretch;
  }
  .about-media-stack__primary,
  .about-media-stack__secondary {
    flex: none;
    width: 100%;
    margin-bottom: 0;
    aspect-ratio: 16 / 10;
  }
}

/* ---------- 20. PROJECT CARD HOVER POLISH ---------- */
.our-project__item,
.our-portfolio-home__item {
  transition: var(--transition-smooth);
  border-radius: 16px;
}

.our-project__item:hover,
.our-portfolio-home__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

/* ---------- 21. CONTACT PAGE REDESIGN ---------- */
.quick-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin-top: -18px;
}

.quick-contact-card {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1 1 280px;
  max-width: 340px;
  padding: 22px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-soft);
}

.quick-contact-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.quick-contact-card__icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.quick-contact-card__label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-body);
  margin-bottom: 4px;
}
.quick-contact-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  margin: 0;
  word-break: break-word;
}

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

@media (max-width: 1199px) {
  .office-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .office-grid {
    grid-template-columns: 1fr;
  }
}

.office-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 22px 20px;
  transition: var(--transition-smooth);
}

.office-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: rgba(var(--accent-rgb), 0.35);
}

.office-card--soon {
  opacity: 0.6;
}

.office-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.office-card__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.office-card__desc {
  font-size: 12.5px;
  color: var(--text-body);
  line-height: 1.55;
  margin: 0;
}

.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  align-items: stretch;
}

@media (max-width: 991px) {
  .contact-split {
    grid-template-columns: 1fr;
  }
}

.contact-split__map {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  min-height: 420px;
}

.contact-split__map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
}

.contact-split__form {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 44px;
  box-shadow: var(--shadow-soft);
}

@media (max-width: 575px) {
  .contact-split__form {
    padding: 28px 22px;
  }
}

/* ---------- 22. ACCESSIBILITY ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .trust-marquee {
    animation: none;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* ---------- 23. NAVBAR: STABLE / FIXED (no scroll hide/show) ---------- */
header.header-1 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
}

/* Reserve space for the fixed header so content isn't hidden underneath it,
   plus a little extra breathing room so the hero doesn't feel stuck to the navbar. */
body {
  padding-top: 100px;
}

@media (max-width: 1199px) {
  body {
    padding-top: 100px;
  }
}

@media (max-width: 767px) {
  body {
    padding-top: 104px;
  }
}

/* ---------- 26. THE PROBLEM SECTION ---------- */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  margin-top: 50px;
}

.problem-card {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 40px 34px;
  background: var(--surface);
}

.problem-card__num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.problem-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
  line-height: 1.3;
}

.problem-card__desc {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.65;
  margin: 0;
}

.problem-card--cta {
  background: var(--text-strong);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.problem-card--cta .problem-card__num {
  color: var(--accent);
}
.problem-card--cta .problem-card__title {
  color: #fff;
}
.problem-card--cta .problem-card__desc {
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 22px;
}

.problem-card--cta .problem-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 12px 22px;
  width: fit-content;
  transition: var(--transition-smooth);
}

.problem-card--cta .problem-card__link:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateX(4px);
}

.problem-card:hover:not(.problem-card--cta) {
  background: var(--accent);
}
.problem-card:hover:not(.problem-card--cta) * {
  color: #fff !important;
}

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

/* ---------- 27. SECTOR / SOLUTIONS BY SECTOR ---------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.sector-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
}

.sector-card__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 14px;
}

.sector-card__title {
  font-size: 21px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
}
.sector-card__desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 20px;
}

.sector-card__tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.sector-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  color: var(--text-strong);
  transition: var(--transition-smooth);
}

.sector-card:hover .sector-card__tag {
  border-color: rgba(255, 255, 255, 0.4);
}

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

/* ---------- 28. PRODUCT ECOSYSTEM PAGE ---------- */
.product-ecosystem-section {
  background: #04213f;
  padding: 100px 0;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.product-card {
  background: #161f35;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.product-card:hover {
  border-color: var(--accent);
  background: #16213a;
  transform: translateY(-6px);
  box-shadow: 0 20px 45px rgba(239, 5, 72, 0.25);
}

.product-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 5px 12px;
  margin-bottom: 18px;
}

.product-card__title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.product-card__desc {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.6;
  margin-bottom: 22px;
}

.product-card__stats {
  display: flex;
  gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}
.product-card__stat-num {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
}
.product-card__stat-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
}

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

.product-card__stats {
  display: flex;
  gap: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  margin-top: auto;
}

.product-card__widget {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
  margin-top: auto;
}

.product-card__widget-row {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 8px;
}

.product-card__sparkline {
  width: 100%;
  height: 42px;
  display: block;
}

.product-card__segments {
  display: flex;
  gap: 6px;
  height: 8px;
}
.product-card__segments span {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 0;
}
.product-card__segments span.is-active {
  background: #ef0548;
}

.product-card__progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  margin-bottom: 10px;
}
.product-card__progress-bar {
  height: 100%;
  background: #ef0548;
}
.product-card__widget-caption {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.product-card__dot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.product-card__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2ecc71;
  flex-shrink: 0;
}

.product-card__widget--donut {
  display: flex;
  align-items: center;
  gap: 16px;
}
.product-card__donut-text .product-card__stat-num {
  font-size: 15px;
  margin-bottom: 2px;
}
.product-card__donut-text .product-card__stat-num .product-card__stat-label {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
  margin-left: 4px;
}
.product-card__donut-text .product-card__stat-label {
  font-size: 11px;
  text-transform: none;
  letter-spacing: normal;
}

/* ---------- 29. HOW WE WORK: 8-STAGE GRID ---------- */
.how-we-work-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-left: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 50px;
}

.how-we-work-step {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 34px 28px;
  transition: var(--transition-smooth);
}

.how-we-work-step__num {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
}
.how-we-work-step__title {
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 8px;
}
.how-we-work-step__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.55;
  margin: 0;
}

.how-we-work-step:hover {
  background: var(--accent);
}
.how-we-work-step:hover .how-we-work-step__num,
.how-we-work-step:hover .how-we-work-step__title,
.how-we-work-step:hover .how-we-work-step__desc {
  color: #fff !important;
}

@media (max-width: 991px) {
  .how-we-work-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 575px) {
  .how-we-work-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1199px) and (min-width: 992px) {
  .how-we-work-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- 30. WHY ORBITAVANYA ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 50px;
}

.why-card {
  background: var(--surface);
  border-radius: 16px;
  padding: 30px 26px;
  box-shadow: var(--shadow-soft);
}

.why-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  transition: var(--transition-smooth);
}

.why-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.why-card__desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

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

/* ---------- 31. SERVICES CAPABILITIES GRID ---------- */
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--border-soft);
  border-left: 1px solid var(--border-soft);
  margin-top: 50px;
}

.capability-card {
  border-right: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 38px 32px;
  background: var(--surface);
}

.capability-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 18px;
  transition: var(--transition-smooth);
}

.capability-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.capability-card__desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 991px) {
  .capabilities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .capabilities-grid {
    grid-template-columns: 1fr;
  }
}
.testimonial-card,
.expertise-card,
.trust-stat-card,
.quick-contact-card,
.office-card,
.our-project__item,
.our-portfolio-home__item,
.financial__item,
.work-process__item,
.team-item,
.problem-card,
.sector-card,
.why-card,
.capability-card {
  transition: var(--transition-smooth);
  border: 1px solid var(--border-soft);
}

.testimonial-card:hover,
.expertise-card:hover,
.trust-stat-card:hover,
.quick-contact-card:hover,
.office-card:hover,
.our-project__item:hover,
.our-portfolio-home__item:hover,
.financial__item:hover,
.work-process__item:hover,
.team-item:hover,
.problem-card:hover,
.sector-card:hover,
.why-card:hover,
.capability-card:hover {
  border-color: var(--accent) !important;
  background-color: var(--accent) !important;
  box-shadow: var(--shadow-lift) !important;
}

.testimonial-card:hover *,
.expertise-card:hover *,
.trust-stat-card:hover *,
.quick-contact-card:hover *,
.office-card:hover *,
.our-project__item:hover *,
.our-portfolio-home__item:hover *,
.financial__item:hover *,
.work-process__item:hover *,
.team-item:hover *,
.problem-card:hover *,
.sector-card:hover *,
.why-card:hover *,
.capability-card:hover * {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

.testimonial-card:hover .testimonial-card__quote-icon,
.expertise-card:hover .expertise-card__icon,
.problem-card:hover .problem-card__icon,
.sector-card:hover .sector-card__tag,
.why-card:hover .why-card__icon,
.capability-card:hover .capability-card__icon {
  background: rgba(255, 255, 255, 0.18) !important;
  color: #fff !important;
}

.testimonial-card:hover .testimonial-card__stars i {
  filter: brightness(0) invert(1);
}

/* ---------- 32. FIX: how-we-work section must actually be dark (bg-dark_red utility is a pale pink, not dark) ---------- */
.how-we-work-section.bg-dark_red {
  background-color: #04213f !important;
}
:root {
  --accent-legacy-blue: none;
}
.color-primary {
  color: var(--accent) !important;
}

/* ---------- 33. SQUARE CARDS EVERYWHERE (no rounded corners) ---------- */
.testimonial-card,
.expertise-card,
.trust-stat-card,
.quick-contact-card,
.office-card,
.our-project__item,
.our-portfolio-home__item,
.financial__item,
.work-process__item,
.team-item,
.problem-card,
.sector-card,
.product-card,
.why-card,
.capability-card,
.contact-us__item,
.client-feedback__item,
.similar-work__item,
.client-brand__item,
.testimonial__item,
.counter-area__item,
.have-any__item,
.competitive-edge__item,
.pricing__card,
.blog-item,
.service_element,
.our-portfolio-home__item .featured-thumb,
.our-portfolio-home__item .featured-thumb img,
.team-item .media,
.team-item .media img,
.blog-item .thumb,
.blog-item .thumb img,
.our-project__item .thumb,
.our-project__item .thumb img,
.similar-work__item .thumb,
.similar-work__item .thumb img,
.theme-btn.color-pd_black {
  border-radius: 0 !important;
}

/* ---------- 34. DARK THEME TOKENS ---------- */
:root {
  --navy-950: #04213f;
  --navy-900: #04213f;
  --navy-800: #0a2b4c;
  --navy-700: #0f3459;
  --brand-red: #ef0548;
  --brand-blue: #3d8ec2;
  --blue-600: #0000ff;
  --blue-500: #0000ff;
  --blue-400: #0000ff;
  --blue-300: #0000ff;
  --blue-200: #3333ff;
  --ice: #eaf3fb;
  --mute: #8fa0bf;
  --paper: #f6f8fc;
  --line: rgba(255, 255, 255, 0.14);
  --lineH: rgba(255, 255, 255, 0.22);
}

html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .capability-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .trust-stat-card,
html[data-theme="dark"] .expertise-card,
html[data-theme="dark"] .office-card,
html[data-theme="dark"] .quick-contact-card,
html[data-theme="dark"] .similar-work__item,
html[data-theme="dark"] .career-card,
html[data-theme="dark"] .service-card,
html[data-theme="dark"] .case-card,
html[data-theme="dark"] .security-checklist,
html[data-theme="dark"] .product-card-grid-light .product-card,
html[data-theme="dark"] .mv-card {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] {
  --accent: var(--brand-red);
  --accent-dark: #a30339;
  --accent-rgb: 239, 5, 72;
}

html[data-theme="dark"] body {
  background-color: var(--navy-950);
  color: var(--ice);
}

html[data-theme="dark"] section,
html[data-theme="dark"] .our-company-financial,
html[data-theme="dark"] .page-banner,
html[data-theme="dark"] .mobile-nav,
html[data-theme="dark"] .mobile-nav .sidebar-nav {
  background-color: var(--navy-950);
}

html[data-theme="dark"] header.header-1 .main-header-wraper,
html[data-theme="dark"] header.header-1.stop .main-header-wraper {
  background-color: var(--navy-950) !important;
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] header.header-1 .main-menu > ul > li > a {
  color: var(--ice);
}

/* Dropdown submenus keep a white background regardless of theme, so their links must stay dark/readable */
html[data-theme="dark"] header.header-1 .main-menu ul > li > ul li a {
  color: #04213f !important;
}
html[data-theme="dark"] header.header-1 .main-menu ul > li > ul li a:hover {
  color: #ef0548 !important;
}

html[data-theme="dark"] .bg-dark_white,
html[data-theme="dark"] .bg-dark_yellow {
  background-color: var(--navy-800) !important;
}

html[data-theme="dark"] .color-pd_black,
html[data-theme="dark"] .color-d_black,
html[data-theme="dark"] .color-black,
html[data-theme="dark"] .title {
  color: var(--ice) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] .font-la,
html[data-theme="dark"] .description,
html[data-theme="dark"] li {
  color: var(--mute) !important;
}

html[data-theme="dark"] .problem-card,
html[data-theme="dark"] .sector-card,
html[data-theme="dark"] .why-card,
html[data-theme="dark"] .capability-card,
html[data-theme="dark"] .testimonial-card,
html[data-theme="dark"] .trust-stat-card,
html[data-theme="dark"] .expertise-card,
html[data-theme="dark"] .office-card,
html[data-theme="dark"] .quick-contact-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}

html[data-theme="dark"] .problem-card__title,
html[data-theme="dark"] .sector-card__title,
html[data-theme="dark"] .why-card__title,
html[data-theme="dark"] .capability-card__title {
  color: var(--ice);
}

html[data-theme="dark"] .problem-card__desc,
html[data-theme="dark"] .sector-card__desc,
html[data-theme="dark"] .why-card__desc,
html[data-theme="dark"] .capability-card__desc {
  color: var(--mute);
}

html[data-theme="dark"] .sector-card__tag {
  color: var(--ice);
  border-color: var(--line);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
  color: var(--ice) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--mute);
}

/* Home page "Free Consultation" form sits inside .can-help with its own
   white-background input rules from style.css that don't have a dark-theme
   variant, so the text color/background needs to be re-asserted here. */
html[data-theme="dark"] .can-help .contact-form {
  background-color: var(--navy-900) !important;
}

html[data-theme="dark"] .can-help .contact-form input,
html[data-theme="dark"] .can-help .contact-form textarea {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
  color: var(--ice) !important;
}

html[data-theme="dark"] .can-help .contact-form input::placeholder,
html[data-theme="dark"] .can-help .contact-form textarea::placeholder {
  color: var(--mute) !important;
}

html[data-theme="dark"] .footer-1 {
  background-color: var(--navy-950) !important;
}

.footer-1,
.footer-1.footer_wrapper {
  background-color: #04213f !important;
}

html[data-theme="dark"] .mobile-nav-wrap #hamburger i,
html[data-theme="dark"] .close-nav i {
  color: var(--ice);
}

html[data-theme="dark"] .header-logo img {
  filter: none;
}

/* ---------- 35. THEME TOGGLE BUTTON ---------- */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition-smooth);
  margin-right: 4px;
}

.theme-toggle-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme-toggle-btn .theme-toggle-btn__icon-dark {
  display: none;
}
html[data-theme="dark"] .theme-toggle-btn .theme-toggle-btn__icon-light {
  display: none;
}
html[data-theme="dark"] .theme-toggle-btn .theme-toggle-btn__icon-dark {
  display: inline-block;
}
html[data-theme="dark"] .theme-toggle-btn {
  border-color: var(--line);
  color: var(--ice);
}

/* ---------- 36. BIGGER NAVBAR ---------- */
header.header-1 .main-header-wraper {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

header.header-1
  .main-header-wraper
  .d-flex.align-items-center.justify-content-between {
  min-height: 92px;
}

header.header-1 .main-menu ul > li > a {
  font-size: 15.5px;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

@media (max-width: 1199px) {
  header.header-1
    .main-header-wraper
    .d-flex.align-items-center.justify-content-between {
    min-height: 64px;
  }
}

/* Logo sizing rules consolidated at the end of style.css (single source of truth). */

/* ---------- 38. MARQUEE STATS BLUE ON HOVER ---------- */
.trust-stat-card {
  transition: var(--transition-smooth);
  cursor: default;
}
.trust-stat-card:hover .num,
.trust-stat-card:hover .label {
  color: #fff !important;
}


/* ---------- 39. PLANNING SUCCESS VIDEO PLAYER ---------- */
.planning-success__video-wrap {
  position: relative;
  width: 100%;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.planning-success__playbtn {
  position: relative;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: none;
  background: rgba(239, 5, 72, 0.92);
  color: #fff;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 0 0 0 rgba(239, 5, 72, 0.55);
  animation: playbtn-blink 1.8s infinite;
}

.planning-success__playbtn:hover {
  background: var(--accent);
}
.planning-success__playbtn i {
  margin-left: 2px;
}

@keyframes playbtn-blink {
  0% {
    box-shadow: 0 0 0 0 rgba(239, 5, 72, 0.55);
  }
  70% {
    box-shadow: 0 0 0 22px rgba(239, 5, 72, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(239, 5, 72, 0);
  }
}

@media (max-width: 767px) {
  .planning-success__video-wrap {
    max-width: 200px;
    margin-top: 30px;
  }
}

/* ---------- video lightbox modal ---------- */
.video-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.92);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.video-lightbox.is-active {
  display: flex;
}

body.video-lightbox-open {
  overflow: hidden;
}

.video-lightbox__frame {
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.video-lightbox__video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---------- 40. ABOUT PAGE: STORY COLLAGE ---------- */
.our-story__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  max-width: 480px;
  margin-left: auto;
}

.our-story__collage-main {
  grid-row: 1 / 3;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.our-story__collage-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.our-story__collage-sub {
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border-soft);
  overflow: hidden;
}
.our-story__collage-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.our-story__collage-tag {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  background: var(--surface-alt);
}
.our-story__collage-tag img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .our-story__collage {
    margin: 40px auto 0;
    max-width: 420px;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .our-story__collage {
    max-width: 320px;
    gap: 12px;
  }
}

/* ---------- 41. MISSION / VISION CARDS ---------- */
.mv-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 40px 36px;
  height: 100%;
  transition: var(--transition-smooth);
}

.mv-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.mv-card__label {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.mv-card__title {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 14px;
  line-height: 1.35;
}
.mv-card__desc {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}

/* ---------- 42. ORIGIN / HOW-WE-GOT-HERE STEPS ---------- */
.origin-steps {
  border-top: 1px solid var(--border-soft);
}

.origin-step {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 30px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: var(--transition-smooth);
}

.origin-step:hover {
  background: var(--surface-alt);
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 -16px;
}

.origin-step:hover .origin-step__num {
  color: var(--accent);
}

.origin-step__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-strong);
}

.origin-step__desc {
  font-size: 14.5px;
  color: var(--text-body);
  line-height: 1.7;
  margin: 0;
}
.origin-step__desc a {
  color: var(--accent);
  font-weight: 700;
  white-space: nowrap;
  margin-left: 4px;
}

@media (max-width: 767px) {
  .origin-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

html[data-theme="dark"] .mv-card {
  background: var(--navy-900);
  border-color: var(--line);
}
html[data-theme="dark"] .mv-card__title {
  color: var(--ice);
}
html[data-theme="dark"] .mv-card__desc {
  color: var(--mute);
}
html[data-theme="dark"] .origin-steps {
  border-color: var(--line);
}
html[data-theme="dark"] .origin-step {
  border-color: var(--line);
}
html[data-theme="dark"] .origin-step__num {
  color: var(--ice);
}
html[data-theme="dark"] .origin-step__desc {
  color: var(--mute);
}
html[data-theme="dark"] .our-story__collage-main,
html[data-theme="dark"] .our-story__collage-sub,
html[data-theme="dark"] .our-story__collage-tag {
  border-color: var(--line);
}

/* ---------- 43. CONTACT PAGE REDESIGN ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 60px;
}

.contact-grid__form label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
}

.contact-grid__form .single-personal-info {
  margin-bottom: 20px;
}

.contact-grid__form input,
.contact-grid__form select,
.contact-grid__form textarea {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  padding: 13px 16px;
  font-size: 14px;
  background: var(--surface);
  color: var(--text-strong);
}

.contact-grid__form textarea {
  min-height: 130px;
  resize: vertical;
}

.direct-contact-list {
  border-top: 1px solid var(--border-soft);
  margin-bottom: 30px;
}

.direct-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-soft);
}

.direct-contact-row__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-body);
}

.direct-contact-row__value {
  font-weight: 400;
  color: var(--text-strong);
  font-family: var(--font-heading);
}
.direct-contact-row__social a {
  color: var(--text-strong);
  font-weight: 700;
  margin-left: 14px;
}
.direct-contact-row__social a:first-child {
  margin-left: 0;
}
.direct-contact-row__value:hover,
.direct-contact-row__social a:hover {
  color: var(--accent);
}

.mumbai-map-card {
  background: #04213f;
  padding: 30px 28px;
}

.mumbai-map-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #e0577d;
  margin-bottom: 12px;
}

.mumbai-map-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}
.mumbai-map-card__frame {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.mumbai-map-card__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.2) invert(0.9) contrast(0.9);
}
.mumbai-map-card__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

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

html[data-theme="dark"] .contact-grid__form input,
html[data-theme="dark"] .contact-grid__form select,
html[data-theme="dark"] .contact-grid__form textarea {
  background: var(--navy-900);
  border-color: var(--line);
  color: var(--ice);
}
html[data-theme="dark"] .contact-grid__form label,
html[data-theme="dark"] .direct-contact-row__label {
  color: var(--mute);
}
html[data-theme="dark"] .direct-contact-row__value {
  color: var(--ice);
}
html[data-theme="dark"] .direct-contact-list,
html[data-theme="dark"] .direct-contact-row {
  border-color: var(--line);
}

/* ---------- 53. CAREERS PAGE REDESIGN ---------- */
.careers-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 26px;
  margin-bottom: 40px;
}

.careers-tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-strong);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 30px;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.careers-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 20px;
  background: var(--surface-alt);
  color: var(--text-body);
  font-size: 11px;
  font-weight: 700;
}

.careers-tabs__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.careers-tabs__btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.careers-tabs__btn.active .careers-tabs__count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

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

.career-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.career-card:hover {
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}

.career-card__dept {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.career-card__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.career-card__desc {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 22px;
}

.career-card__perks {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
  flex: 1;
}

.career-card__perks li {
  font-size: 13.5px;
  color: var(--text-strong);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px !important;
}

.career-card__perks li i {
  color: var(--accent);
  font-size: 13px;
}
.career-card__perks li.is-unavailable {
  color: var(--text-body);
  opacity: 0.55;
}
.career-card__perks li.is-unavailable i {
  color: var(--text-body);
}

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

html[data-theme="dark"] .careers-tabs {
  border-color: var(--line);
}
html[data-theme="dark"] .careers-tabs__btn {
  border-color: var(--line);
  color: var(--ice);
}
html[data-theme="dark"] .careers-tabs__count {
  background: var(--navy-800);
  color: var(--mute);
}
html[data-theme="dark"] .career-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .career-card__title {
  color: var(--ice);
}
html[data-theme="dark"] .career-card__desc {
  color: var(--mute);
}
html[data-theme="dark"] .career-card__perks {
  border-color: var(--line);
}
html[data-theme="dark"] .career-card__perks li {
  color: var(--ice);
}
html[data-theme="dark"] .career-card__perks li.is-unavailable {
  color: var(--mute);
}

/* ---------- 54. CAREERS PAGE HERO BANNER ---------- */
.page-banner--compact {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.page-banner--compact .breadcrumb {
  margin-bottom: 0;
}

.join-team-hero {
  background: #04213f;
  padding: 90px 0;
}

.join-team-hero__stats {
  display: flex;
  gap: 36px;
  margin: 32px 0 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.join-team-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.join-team-hero__stat .num {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: #fff;
}
.join-team-hero__stat .label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

.join-team-hero__collage {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  max-width: 460px;
  margin-left: auto;
}

.join-team-hero__collage-main {
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.join-team-hero__collage-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.join-team-hero__collage-sub {
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  align-self: end;
}
.join-team-hero__collage-sub img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .join-team-hero__collage {
    margin: 40px auto 0;
    max-width: 380px;
  }
  .join-team-hero__stats {
    flex-wrap: wrap;
    gap: 26px;
  }
}

@media (max-width: 575px) {
  .join-team-hero {
    padding: 60px 0;
  }
  .join-team-hero__stats {
    gap: 22px;
  }
  .join-team-hero__stat .num {
    font-size: 22px;
  }
}

/* ---------- 55. COMPANY SNAPSHOT TABLE ---------- */
.snapshot-table {
  border-top: 1px solid var(--border-soft);
}

.snapshot-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 30px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-soft);
  transition: var(--transition-smooth);
}

.snapshot-row:hover {
  background: var(--surface);
  padding-left: 16px;
  padding-right: 16px;
  margin: 0 -16px;
}

.snapshot-row__label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.snapshot-row__value {
  font-size: 15px;
  color: var(--text-strong);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .snapshot-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

html[data-theme="dark"] .snapshot-table,
html[data-theme="dark"] .snapshot-row {
  border-color: var(--line);
}
html[data-theme="dark"] .snapshot-row:hover {
  background: var(--navy-900);
}
html[data-theme="dark"] .snapshot-row__value {
  color: var(--ice);
}

/* ---------- 56. MISSION LIST (bulleted mv-card) ---------- */
.mv-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mv-card__list li {
  position: relative;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  padding-left: 22px;
  margin-bottom: 12px !important;
}

.mv-card__list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--accent);
}

html[data-theme="dark"] .mv-card__list li {
  color: var(--mute);
}

/* ---------- 57. DETAILED SERVICE CARDS ---------- */
.service-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.service-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.service-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.service-card__icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.service-card__tag {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.service-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 12px;
  line-height: 1.35;
}
.service-card__intro {
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.65;
  margin-bottom: 18px;
}
.service-card__subhead {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  margin-bottom: 10px;
}

.service-card__caps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 14px;
}

.service-card__caps li {
  position: relative;
  font-size: 13px;
  color: var(--text-body);
  padding-left: 16px;
  line-height: 1.5;
}

.service-card__caps li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.service-card__outcome {
  font-size: 13px;
  color: var(--text-body);
  border-top: 1px solid var(--border-soft);
  padding-top: 16px;
  margin-bottom: 16px;
  line-height: 1.6;
}
.service-card__outcome strong {
  color: var(--text-strong);
}

.service-card__link {
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
}

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

html[data-theme="dark"] .service-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .service-card__title {
  color: var(--ice);
}
html[data-theme="dark"] .service-card__intro,
html[data-theme="dark"] .service-card__caps li,
html[data-theme="dark"] .service-card__outcome {
  color: var(--mute);
}
html[data-theme="dark"] .service-card__subhead,
html[data-theme="dark"] .service-card__outcome strong {
  color: var(--ice);
}
html[data-theme="dark"] .service-card__outcome {
  border-color: var(--line);
}

/* ---------- 58. LIGHT PRODUCT CARDS (category sections on ecosystem page) ---------- */
.product-card-grid-light {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.product-card-grid-light .product-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.product-card-grid-light .product-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.product-card-grid-light .product-card__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
  width: fit-content;
}

.product-card-grid-light .product-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.product-card-grid-light .product-card__desc {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 16px;
}

.product-card__caps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  flex: 1;
}

.product-card__caps li {
  position: relative;
  font-size: 12.5px;
  color: var(--text-body);
  padding-left: 16px;
  margin-bottom: 6px;
  line-height: 1.5;
}

.product-card__caps li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.product-card__link {
  font-weight: 700;
  color: var(--accent);
  margin-top: auto;
}

@media (max-width: 991px) {
  .product-card-grid-light {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .product-card-grid-light {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .product-card-grid-light .product-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .product-card-grid-light .product-card__title {
  color: var(--ice);
}
html[data-theme="dark"] .product-card-grid-light .product-card__desc,
html[data-theme="dark"] .product-card__caps li {
  color: var(--mute);
}
html[data-theme="dark"] .product-card-grid-light .product-card__tag {
  border-color: var(--line);
}

/* ---------- 59. DARK WHY-CARD VARIANT (used on dark ecosystem section) ---------- */
.why-card--dark {
  background: #161f35;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.why-card--dark .why-card__title {
  color: #fff;
}
.why-card--dark .why-card__desc {
  color: rgba(255, 255, 255, 0.6);
}
.why-card--dark .why-card__icon {
  background: rgba(239, 5, 72, 0.12);
}
.why-card--dark:hover {
  border-color: var(--accent);
}

/* ---------- 60. INDUSTRY DETAIL SECTIONS ---------- */
.industry-col-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 16px;
}

.industry-list {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
}

.industry-list li {
  position: relative;
  font-size: 14px;
  color: var(--text-body);
  line-height: 1.6;
  padding-left: 20px;
  margin-bottom: 10px !important;
}

.industry-list--challenge li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: rgba(var(--accent-rgb), 0.4);
}

.industry-list--help li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  background: var(--accent);
}

.rel-products-wrap {
  border-top: 1px solid var(--border-soft);
  padding-top: 24px;
  margin-top: 10px;
}

.rel-products-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-strong);
  margin-bottom: 12px;
}

.rel-product {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
  margin-bottom: 6px;
}

.rel-product strong {
  color: var(--accent);
  font-family: var(--font-heading);
}

html[data-theme="dark"] .industry-list li {
  color: var(--mute);
}
html[data-theme="dark"] .rel-products-wrap {
  border-color: var(--line);
}
html[data-theme="dark"] .rel-products-label {
  color: var(--ice);
}
html[data-theme="dark"] .rel-product {
  color: var(--mute);
}

/* ---------- 61. CASE STUDY CARDS ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.case-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  transition: var(--transition-smooth);
}

.case-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift);
}

.case-card__tag {
  display: inline-block;
  width: fit-content;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--border-soft);
  border-radius: 20px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

.case-card__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 6px;
  line-height: 1.35;
}
.case-card__subtitle {
  font-size: 13.5px;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.case-card__label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-strong);
  margin-bottom: 6px;
  margin-top: 14px;
}
.case-card__text {
  font-size: 13.5px;
  color: var(--text-body);
  line-height: 1.6;
  margin: 0;
}

.case-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 14px;
}
.case-card__list li {
  position: relative;
  font-size: 12.5px;
  color: var(--text-body);
  padding-left: 14px;
  line-height: 1.5;
}
.case-card__list li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--accent);
}

.case-card__tech {
  font-size: 12.5px;
  color: var(--text-body);
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  margin-top: 16px;
}
.case-card__tech strong {
  color: var(--text-strong);
}
.case-card__outcome {
  font-size: 13px;
  color: var(--text-body);
  font-style: italic;
  margin: 12px 0 16px;
  line-height: 1.6;
}

@media (max-width: 991px) {
  .case-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 575px) {
  .case-card__list {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .case-card {
  background-color: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .case-card__title {
  color: var(--ice);
}
html[data-theme="dark"] .case-card__text,
html[data-theme="dark"] .case-card__list li,
html[data-theme="dark"] .case-card__tech,
html[data-theme="dark"] .case-card__outcome {
  color: var(--mute);
}
html[data-theme="dark"] .case-card__label,
html[data-theme="dark"] .case-card__tech strong {
  color: var(--ice);
}
html[data-theme="dark"] .case-card__tag {
  border-color: var(--line);
}
html[data-theme="dark"] .case-card__tech {
  border-color: var(--line);
}

/* ---------- SECURITY & RELIABILITY ---------- */
.security-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  background: var(--surface-alt);
  border: 1px solid var(--border-soft);
  border-radius: 16px;
  padding: 30px;
}

.security-checklist__item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
}

.security-checklist__item i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  font-size: 14px;
}

@media (max-width: 767px) {
  .security-checklist {
    grid-template-columns: 1fr;
  }
}

html[data-theme="dark"] .security-checklist {
  background: var(--navy-900) !important;
  border-color: var(--line) !important;
}
html[data-theme="dark"] .security-checklist__item {
  color: var(--ice) !important;
}

/* ---------- MEDIA / SOCIAL BUTTONS — restore original brand colors & icons ---------- */
.fab.fa-facebook-f,
.fab.fa-facebook {
  color: #1877f2 !important;
}

.fab.fa-twitter,
.fab.fa-x-twitter {
  color: #000000 !important;
}

.fab.fa-instagram {
  color: #e1306c !important;
}

.fab.fa-linkedin-in,
.fab.fa-linkedin {
  color: #0a66c2 !important;
}

.fab.fa-youtube {
  color: #ff0000 !important;
}

.fab.fa-whatsapp {
  color: #25d366 !important;
}

/* Keep brand color on hover too — media buttons shouldn't shift to the site accent */
.sidebar-nav__bottom-social ul > li a:hover .fab,
.social-profile ul li a:hover .fab,
.footer-social a:hover .fab {
  color: inherit !important;
}

html[data-theme="dark"] .fab.fa-facebook-f,
html[data-theme="dark"] .fab.fa-facebook {
  color: #1877f2 !important;
}
html[data-theme="dark"] .fab.fa-twitter,
html[data-theme="dark"] .fab.fa-x-twitter {
  color: #ffffff !important;
}
html[data-theme="dark"] .fab.fa-instagram {
  color: #e1306c !important;
}
html[data-theme="dark"] .fab.fa-linkedin-in,
html[data-theme="dark"] .fab.fa-linkedin {
  color: #0a66c2 !important;
}
html[data-theme="dark"] .fab.fa-youtube {
  color: #ff0000 !important;
}
html[data-theme="dark"] .fab.fa-whatsapp {
  color: #25d366 !important;
}

/* ---------- Careers stats strip (replaces old duplicate join-team-hero) ---------- */
.careers-stats-strip {
  background: linear-gradient(
    106.81deg,
    var(--accent) 0%,
    var(--accent-dark) 100%
  );
  border-radius: 16px;
  padding: 32px 40px;
  column-gap: 48px;
  row-gap: 20px;
}
.careers-stats-strip .theme-btn {
  margin-left: 8px;
}
@media (max-width: 767px) {
  .careers-stats-strip {
    padding: 26px 22px;
    column-gap: 28px;
  }
  .careers-stats-strip .theme-btn {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-top: 6px;
  }
}
/* Mobile navbar: keep only logo, theme toggle, and hamburger.
   Hide the CTA buttons (View Our Work / Book Consultation) below desktop width. */
@media (max-width: 1199.98px) {
  header.header-1 .header-right > a.header-btn.header-btn-small {
    display: none !important;
  }
}
/* ---------- 56. FIX: work-process-home mobile huge gap (legacy padding-top: 290px/260px) ---------- */
@media (max-width: 991px) {
  .work-process.work-process-home {
    padding-top: 60px !important;
  }
}
@media (max-width: 575px) {
  .work-process.work-process-home {
    padding-top: 45px !important;
  }
}

/* ---------- 57. FIX: mobile menu social icons invisible against red panel (Instagram/YouTube blended into red bg) ---------- */
.mobile-nav .sidebar-nav__bottom-social ul li a {
  background-color: #ffffff !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.mobile-nav .sidebar-nav__bottom-social ul li a .fab,
.mobile-nav .sidebar-nav__bottom-social ul li a i {
  font-size: 15px;
}
.mobile-nav .sidebar-nav__bottom-social ul li a:hover {
  background-color: var(--accent) !important;
}
.mobile-nav .sidebar-nav__bottom-social ul li a:hover .fab {
  color: #fff !important;
}
.mobile-nav .sidebar-nav__bottom-social h6 {
  color: #fff !important;
}
/* The buttons above are always on a solid white circle, in both themes,
   so the icon color must stay dark regardless of the global dark-mode
   Twitter/X override (which assumes a dark/transparent background). */
html[data-theme="dark"]
  .mobile-nav
  .sidebar-nav__bottom-social
  ul
  li
  a
  .fab.fa-twitter,
html[data-theme="dark"]
  .mobile-nav
  .sidebar-nav__bottom-social
  ul
  li
  a
  .fab.fa-x-twitter {
  color: #000000 !important;
}
html[data-theme="dark"]
  .mobile-nav
  .sidebar-nav__bottom-social
  ul
  li
  a:hover
  .fab.fa-twitter,
html[data-theme="dark"]
  .mobile-nav
  .sidebar-nav__bottom-social
  ul
  li
  a:hover
  .fab.fa-x-twitter {
  color: #fff !important;
}

/* ---------- 58. FIX: hero/banner images bleeding off-screen and getting clipped on mobile ---------- */
@media (max-width: 991px) {
  .banner-home__media {
    margin-right: 0 !important;
    margin-left: 0 !important;
    max-height: none;
    width: 100%;
    z-index: 1 !important;
  }
  .banner-home__media img.img-fluid:not(.start) {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
  }
  .banner-home__media .start {
    display: none;
  }
}

@media (max-width: 767px) {
  .page-banner__media,
  .page-banner .banner-home__media,
  [class*="__media"] img.img-fluid {
    max-width: 100%;
  }
}

/* ---------- 59. FIX: CTA banner (red box) overlapping/covering footer logo — no compensating footer padding existed ---------- */
.cta-banner {
  margin-bottom: 0 !important;
}

/* ---------- 60. FLOATING WIDGETS: WhatsApp + Tawk chat toggle, stacked bottom-left ----------
   Tawk's own launcher bubble is hidden entirely (see the Tawk_API.onLoad /
   hideWidget call in the embed script near the footer of each page) to
   avoid fighting its own inline positioning. Instead we show our own
   button, styled to match, that calls Tawk_API.toggle() to open the chat —
   guaranteeing it always sits exactly here, right below WhatsApp, with no
   overlap. */
.floating-widget-group {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.floating-widget-group .floating-button {
  position: static;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
  animation: fwg-float 3s ease-in-out infinite;
  border: none;
  cursor: pointer;
  padding: 0;
}

.floating-widget-group .whatsapp-button {
  background-color: #25d366;
  order: 1;
}
.floating-widget-group .whatsapp-button svg {
  width: 23px;
  height: 23px;
}

.floating-widget-group .tawk-toggle-button {
  background-color: var(--accent);
  order: 2;
}
.floating-widget-group .tawk-toggle-button svg {
  width: 22px;
  height: 22px;
}

@keyframes fwg-float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

@media (max-width: 575px) {
  .floating-widget-group {
    left: 14px;
    bottom: 14px;
    gap: 10px;
  }
  .floating-widget-group .floating-button {
    width: 38px;
    height: 38px;
  }
  .floating-widget-group .whatsapp-button svg {
    width: 20px;
    height: 20px;
  }
  .floating-widget-group .tawk-toggle-button svg {
    width: 19px;
    height: 19px;
  }
}

/* Belt-and-braces: if Tawk's hideWidget() call hasn't run yet (e.g. slow
   network) also hide its launcher via CSS so it can never show up and
   overlap our own buttons above. */
iframe[title="chat widget"],
.tawk-min-container {
  visibility: hidden !important;
}

/* ---------- 62. TEAM DETAILS PAGE: FULL IMAGE, CONTAINED SIZE ----------
   Bug: the profile photo was a plain img-fluid with a tall native aspect
   ratio (1024x1536 portrait), so at desktop widths it rendered far taller
   than the "Information" column next to it. Show the whole photo (no crop)
   but cap its size so it sits in a reasonably sized container instead of
   towering over the page. */
.team-details__media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-radius: 16px;
  background: var(--surface-alt);
  max-height: 520px;
  overflow: hidden;
}

.team-details__media img {
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  margin: 0 auto;
  display: block;
}

@media (max-width: 991px) {
  .team-details__media {
    max-height: 440px;
  }
  .team-details__media img {
    max-height: 440px;
  }
}

@media (max-width: 575px) {
  .team-details__media {
    max-height: 380px;
  }
  .team-details__media img {
    max-height: 380px;
  }
}
/* Bug: the role badge next to the name (e.g. "/ Founder/CEO") was forced
   white-space:nowrap in the base theme, so on narrower screens it ran off
   the edge of the viewport instead of wrapping. */
.team-details__content h2 {
  overflow-wrap: break-word;
}
.team-details__content h2 span {
  white-space: normal !important;
  display: inline-block;
}

/* Bug: name and designation were hardcoded dark navy (#04213F / #243342)
   with no dark-theme override, so in dark mode they were nearly invisible
   against the dark navy background. Switch both to a light gray. */
html[data-theme="dark"] .team-details__content h2 {
  color: var(--mute) !important;
}
html[data-theme="dark"] .team-details__content h2 span {
  color: var(--mute) !important;
}
html[data-theme="dark"] .team-details__content ul li {
  color: var(--mute) !important;
}

/* Bug: on very wide screens, contact-info items (address especially) were
   forced onto a single line and could overflow their column/card. */
.team-details__content .contact-info ul li,
.team-details__content .contact-info ul li a {
  white-space: normal !important;
  overflow-wrap: break-word;
}

/* Fix: E-mail/Nationality (and similar short lists) were being split into
   two side-by-side CSS columns, so "E-mail" and "Nationality" landed on the
   same visual row instead of stacking. Force a single column. */
@media (min-width: 576px) {
  .team-details__content .contact-info ul {
    column-count: 1 !important;
  }
  .team-details__content .contact-info ul li {
    margin-bottom: 15px;
  }
}

/* Bug: education item text could sit flush against the number circle with
   no room to shrink, causing overlap on medium screens. */
.team-details__block .educational-item {
  min-width: 0;
  flex: 1 1 0;
}
.team-details__block .educational-item .text {
  min-width: 0;
  overflow-wrap: break-word;
}

/* ---------- 63. FLICKER-FREE PAGE-TO-PAGE NAVIGATION ---------- */
/* Cross-document transition with no transparent frame. The incoming page is
   fully opaque from frame one; only the old snapshot gently clears away. */
@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 0.24s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

::view-transition-old(root) {
  animation: orbit-old-page 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  z-index: 2;
}

::view-transition-new(root) {
  animation: none !important;
  opacity: 1 !important;
  z-index: 1;
}

@keyframes orbit-old-page {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Keep the shared header stable between documents. */
.header-1 {
  view-transition-name: site-header;
}
::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
  animation: none !important;
}

/* Prevent horizontal layout jumps when scrollbar state changes. */
html {
  scrollbar-gutter: stable;
  background: #fff;
}
body {
  min-height: 100vh;
  background: #fff;
}

/* WOW normally hides elements until JS initializes on every HTML reload.
   That hidden -> visible cycle is a major source of page blinking. Keep
   content visible immediately; existing hover/slider effects still work. */
.wow {
  visibility: visible !important;
  animation-name: none !important;
  -webkit-animation-name: none !important;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* ---------- Language switcher (globe icon + dropdown) ---------- */
.lang-switch {
  position: relative;
  flex-shrink: 0;
  margin-right: 4px;
}

.lang-switch__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  padding: 0;
  transition: var(--transition-smooth);
}
.lang-switch__toggle svg {
  width: 18px;
  height: 18px;
}
.lang-switch__toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

html[data-theme="dark"] .lang-switch__toggle {
  border-color: var(--line);
  color: var(--ice);
}

.lang-switch__menu {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 150px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  padding: 6px;
  z-index: 1100;
}
.lang-switch.is-open .lang-switch__menu {
  display: block;
}
.lang-switch__menu button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-strong);
  cursor: pointer;
}
.lang-switch__menu button:hover {
  background: var(--surface-alt);
}
.lang-switch__menu button.is-active {
  color: var(--accent);
  font-weight: 600;
}

html[data-theme="dark"] .lang-switch__menu {
  background: var(--navy-900);
  border-color: var(--line);
}
html[data-theme="dark"] .lang-switch__menu button {
  color: var(--ice);
}
html[data-theme="dark"] .lang-switch__menu button:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Mobile off-canvas nav: sits above the nav links, left-aligned menu since
   it's already inside a narrow fixed-width panel. */
.lang-switch--mobile {
  margin: 0 0 20px 0;
}
.lang-switch--mobile .lang-switch__menu {
  right: auto;
  left: 0;
}

@media (max-width: 375px) {
  .lang-switch__toggle,
  .theme-toggle-btn {
    width: 34px;
    height: 34px;
  }
}

/* ---------- Arabic: translate text without mirroring the whole layout ----------
   This theme's layout (diagonal-cut hero, offset shapes, fixed-corner
   widgets) assumes LTR document flow. Flipping the whole page with
   dir="rtl" made the hero text overlap the photo panel. Instead we only
   right-align the translated text itself, inside its own existing box —
   the grid/columns/nav positions never change, so nothing overlaps. */
html.lang-is-rtl .banner-home__content h6.sub-title,
html.lang-is-rtl .banner-home__content h1.title,
html.lang-is-rtl .banner-home__content .description p {
  direction: rtl;
  text-align: right;
}

/* ---------- Language dropdown: scrollbar for the longer list ---------- */
.lang-switch__menu {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.lang-switch__menu::-webkit-scrollbar {
  width: 6px;
}
.lang-switch__menu::-webkit-scrollbar-track {
  background: transparent;
}
.lang-switch__menu::-webkit-scrollbar-thumb {
  background-color: var(--accent);
  border-radius: 6px;
}

/* ===== Complete 16-language translation stability ===== */
/* Google Translate's legacy toolbar must never push the site down. */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
body > .skiptranslate,
#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}
html,
body {
  top: 0 !important;
  position: static !important;
}
.goog-text-highlight {
  background: inherit !important;
  box-shadow: none !important;
}
#google_translate_element {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.lang-switch__menu {
  max-height: 360px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.lang-switch__menu button.is-active {
  font-weight: 700;
}
/* Keep brand/UI-only controls untranslated. */
.lang-switch,
.lang-switch *,
.theme-toggle-btn,
.theme-toggle-btn * {
  unicode-bidi: isolate;
}

/* ===== Requested navbar + smooth persistent translation adjustments ===== */
html.orbit-translation-pending body {
  opacity: 0 !important;
}
html.orbit-translation-ready body {
  opacity: 1 !important;
  transition: opacity 0.16s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.orbit-translation-pending::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  background: #fff;
  pointer-events: none;
}
html.dark-mode.orbit-translation-pending::before,
html[data-theme="dark"].orbit-translation-pending::before {
  background: #0a0a0a;
}

/* Arabic translates text without mirroring/reordering the website. */
html.lang-is-arabic,
html.lang-is-arabic body,
html.lang-is-arabic header,
html.lang-is-arabic nav,
html.lang-is-arabic .row,
html.lang-is-arabic .d-flex,
html.lang-is-arabic .navigation,
html.lang-is-arabic footer {
  direction: ltr !important;
}

/* Keep language, theme and consultation controls close and aligned. */
.header-right {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
  white-space: nowrap;
}
.header-right > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.header-right .lang-switch,
.header-right .theme-toggle-btn {
  flex: 0 0 auto;
}

/* Taller Book Consultation without increasing navbar/header height. */
.header-right .header-btn.header-btn-small[href*="contact"] {
  height: 52px !important;
  min-height: 52px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}

/* Prevent controls from pushing Book Consultation out of place on desktop. */
@media (min-width: 1200px) {
  .header-right {
    gap: 6px !important;
  }
  .header-right .lang-switch__toggle,
  .header-right .theme-toggle-btn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
}

/* =========================================================
   NAVBAR CLEANUP — hide Google Translate chrome + larger logo container
   ========================================================= */

/* Keep Google Translate as a background translation engine only.
   Its stock icon/gadget/banner must never render beside the Orbit logo. */
#google_translate_element,
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-banner-frame,
.goog-te-balloon-frame,
.goog-logo-link,
iframe.goog-te-banner-frame {
  position: fixed !important;
  left: -99999px !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 1px !important;
  min-width: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body {
  top: 0 !important;
}

.header-logo,
.logo,
header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
}

/* Logo sizing consolidated at the end of style.css (single source of truth). */

/* =========================================================
   2026-07 BACKGROUND EFFECTS — SITEWIDE (cards + content
   sections, every page). Pure CSS gradients only (no images).
   Heroes (.banner-home, .page-banner) and the footer
   (.footer-1) are completely excluded and untouched. Every
   effect layer sits at z-index 0/-1, strictly behind text and
   behind every <img>, so reading and photos are never affected.
   ========================================================= */

/* ---- Ambient section backgrounds — alternate look per section for variety ---- */
.decor-section {
  position: relative;
  isolation: isolate;
}
.decor-section > .container {
  position: relative;
  z-index: 2;
}
.decor-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.decor-section:nth-of-type(3n + 1)::before {
  background:
    radial-gradient(
      680px circle at 6% 10%,
      rgba(var(--accent-rgb), 0.1),
      transparent 62%
    ),
    radial-gradient(
      560px circle at 94% 90%,
      rgba(4, 33, 63, 0.06),
      transparent 62%
    );
}
.decor-section:nth-of-type(3n + 2)::before {
  background:
    radial-gradient(
      620px circle at 92% 8%,
      rgba(4, 33, 63, 0.07),
      transparent 60%
    ),
    radial-gradient(
      600px circle at 8% 92%,
      rgba(var(--accent-rgb), 0.08),
      transparent 60%
    );
}
.decor-section:nth-of-type(3n)::before {
  background: linear-gradient(
    120deg,
    rgba(var(--accent-rgb), 0.07) 0%,
    transparent 45%,
    rgba(4, 33, 63, 0.05) 100%
  );
}
html[data-theme="dark"] .decor-section:nth-of-type(3n + 1)::before {
  background:
    radial-gradient(
      680px circle at 6% 10%,
      rgba(var(--accent-rgb), 0.16),
      transparent 62%
    ),
    radial-gradient(
      560px circle at 94% 90%,
      rgba(255, 255, 255, 0.05),
      transparent 62%
    );
}
html[data-theme="dark"] .decor-section:nth-of-type(3n + 2)::before {
  background:
    radial-gradient(
      620px circle at 92% 8%,
      rgba(255, 255, 255, 0.045),
      transparent 60%
    ),
    radial-gradient(
      600px circle at 8% 92%,
      rgba(var(--accent-rgb), 0.14),
      transparent 60%
    );
}
html[data-theme="dark"] .decor-section:nth-of-type(3n)::before {
  background: linear-gradient(
    120deg,
    rgba(var(--accent-rgb), 0.14) 0%,
    transparent 45%,
    rgba(255, 255, 255, 0.04) 100%
  );
}
@media (max-width: 767.98px) {
  .decor-section::before {
    background: radial-gradient(
      80vw circle at 12% 10%,
      rgba(var(--accent-rgb), 0.07),
      transparent 65%
    ) !important;
  }
}

/* Heroes and footer are never decorated, even if a class is added to them later */
.banner-home::before,
.banner-home::after,
.page-banner::before,
.page-banner::after,
.footer-1::before,
.footer-1::after {
  content: none !important;
  background-image: none !important;
}

/* Images always render above the ambient background, never dimmed or covered */
.decor-section img,
.decor-section .media,
.decor-section .featured-thumb,
.decor-section .our-company__meida {
  position: relative;
  z-index: 1;
}

/* ---- Card effects, sitewide — testimonial cards excluded, logos/lists excluded ---- */
:is(
  .problem-card,
  .sector-card,
  .expertise-card,
  .why-card,
  .trust-stat-card,
  .our-portfolio-home__item,
  .team-item,
  .blog-item,
  .capability-card,
  .career-card,
  .case-card,
  .mumbai-map-card,
  .mv-card,
  .office-card,
  .pricing__card,
  .product-card,
  .service-card,
  .similar-work__item,
  .client-feedback__item,
  .counter-area__item,
  .have-any__item,
  .why-choose__item,
  .widget_recent_post__item
):not(.footer-1 *) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition:
    transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s ease;
}
:is(
    .problem-card,
    .sector-card,
    .expertise-card,
    .why-card,
    .trust-stat-card,
    .our-portfolio-home__item,
    .team-item,
    .blog-item,
    .capability-card,
    .career-card,
    .case-card,
    .mumbai-map-card,
    .mv-card,
    .office-card,
    .pricing__card,
    .product-card,
    .service-card,
    .similar-work__item,
    .client-feedback__item,
    .counter-area__item,
    .have-any__item,
    .why-choose__item,
    .widget_recent_post__item
  ):not(.footer-1 *)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(var(--accent-rgb), 0.1),
    transparent 55%
  );
  opacity: 0.55;
  transition: opacity 0.35s ease;
}
:is(
    .problem-card,
    .sector-card,
    .expertise-card,
    .why-card,
    .trust-stat-card,
    .our-portfolio-home__item,
    .team-item,
    .blog-item,
    .capability-card,
    .career-card,
    .case-card,
    .mumbai-map-card,
    .mv-card,
    .office-card,
    .pricing__card,
    .product-card,
    .service-card,
    .similar-work__item,
    .client-feedback__item,
    .counter-area__item,
    .have-any__item,
    .why-choose__item,
    .widget_recent_post__item
  ):not(.footer-1 *):hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}
:is(
    .problem-card,
    .sector-card,
    .expertise-card,
    .why-card,
    .trust-stat-card,
    .our-portfolio-home__item,
    .team-item,
    .blog-item,
    .capability-card,
    .career-card,
    .case-card,
    .mumbai-map-card,
    .mv-card,
    .office-card,
    .pricing__card,
    .product-card,
    .service-card,
    .similar-work__item,
    .client-feedback__item,
    .counter-area__item,
    .have-any__item,
    .why-choose__item,
    .widget_recent_post__item
  ):not(.footer-1 *):hover::before {
  opacity: 1;
}

/* Card photos always render above the sheen — text and images are never covered */
.our-portfolio-home__item img,
.team-item img,
.blog-item img,
.case-card img,
.mumbai-map-card img,
.product-card img,
.service-card img {
  position: relative;
  z-index: 1;
}
:is(
    .problem-card,
    .sector-card,
    .expertise-card,
    .why-card,
    .trust-stat-card,
    .our-portfolio-home__item,
    .team-item,
    .blog-item,
    .capability-card,
    .career-card,
    .case-card,
    .mumbai-map-card,
    .mv-card,
    .office-card,
    .pricing__card,
    .product-card,
    .service-card,
    .similar-work__item,
    .client-feedback__item,
    .counter-area__item,
    .have-any__item,
    .why-choose__item,
    .widget_recent_post__item
  )
  > * {
  position: relative;
  z-index: 1;
}

/* === Home SVG effects + stable card hover (2026-07-23) === */
body[data-page="index"] .problem-card,
body[data-page="index"] .sector-card,
body[data-page="index"] .expertise-card,
body[data-page="index"] .why-card,
body[data-page="index"] .capability-card {
  position: relative;
  overflow: hidden;
  transform: none !important;
}
body[data-page="index"] .problem-card:hover,
body[data-page="index"] .sector-card:hover,
body[data-page="index"] .expertise-card:hover,
body[data-page="index"] .why-card:hover,
body[data-page="index"] .capability-card:hover {
  transform: none !important;
  translate: none !important;
  box-shadow: none !important;
}
/* Decorative waves remain behind card content and never intercept clicks. */
body[data-page="index"] .problem-card::after,
body[data-page="index"] .sector-card::after,
body[data-page="index"] .expertise-card::after,
body[data-page="index"] .why-card::after,
body[data-page="index"] .capability-card::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: auto -8% -8px 18%;
  height: 46%;
  background: url("../img/home/effects/wave-1.svg") right bottom/cover no-repeat;
  opacity: 0.75;
}
body[data-page="index"] .problem-card:nth-child(3n + 2)::after,
body[data-page="index"] .sector-card:nth-child(3n + 2)::after,
body[data-page="index"] .expertise-card:nth-child(3n + 2)::after,
body[data-page="index"] .why-card:nth-child(3n + 2)::after {
  background-image: url("../img/home/effects/wave-2.svg");
}
body[data-page="index"] .problem-card:nth-child(3n)::after,
body[data-page="index"] .sector-card:nth-child(3n)::after,
body[data-page="index"] .expertise-card:nth-child(3n)::after,
body[data-page="index"] .why-card:nth-child(3n)::after {
  background-image: url("../img/home/effects/wave-3.svg");
}
body[data-page="index"] .problem-card > *,
body[data-page="index"] .sector-card > *,
body[data-page="index"] .expertise-card > *,
body[data-page="index"] .why-card > *,
body[data-page="index"] .capability-card > * {
  position: relative;
  z-index: 1;
}
/* Problem: red/pink smoky linework behind heading. */
.home-problem-effects .row.align-items-end {
  position: relative;
  z-index: 1;
}
.home-problem-effects .row.align-items-end::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 58%;
  height: 190px;
  left: -7%;
  top: -65px;
  background: url("../img/home/effects/smoke-lines.svg") center/contain
    no-repeat;
}
/* Industries: mesh/net immediately below heading zone. */
.home-industries-effects .row.align-items-end {
  position: relative;
}
.home-industries-effects .row.align-items-end::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 58%;
  height: 150px;
  left: 2%;
  bottom: -120px;
  background: url("../img/home/effects/mesh-net.svg") center/contain no-repeat;
  z-index: 0;
}
/* Why OrbitAvanya: gently moving SVG honeycomb at section header. */
.home-why-effects .pricing__content {
  position: relative;
  z-index: 1;
}
.home-why-effects .pricing__content::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 520px;
  height: 190px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url("../img/home/effects/honeycomb.svg") repeat;
  opacity: 0.9;
  animation: oaHoneyMove 16s linear infinite;
}
@keyframes oaHoneyMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 240px 140px;
  }
}
/* Testimonials: decorative SVG wave on header-left only; testimonial cards unchanged. */
.home-testimonial-effects .testimonial__content {
  position: relative;
}
.home-testimonial-effects .testimonial__content::before {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 420px;
  height: 150px;
  left: -120px;
  top: -55px;
  background: url("../img/home/effects/header-wave.svg") center/contain
    no-repeat;
}
@media (max-width: 767px) {
  .home-problem-effects .row.align-items-end::before {
    width: 100%;
    left: -15%;
    opacity: 0.65;
  }
  .home-industries-effects .row.align-items-end::after {
    width: 100%;
    bottom: -100px;
  }
  .home-why-effects .pricing__content::before {
    width: 110%;
  }
  .home-testimonial-effects .testimonial__content::before {
    left: -80px;
    width: 320px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-why-effects .pricing__content::before {
    animation: none;
  }
}

/* === Requested SVG revision 2026-07-23 === */
/* Remove the previous header-only effects. */
.home-problem-effects .row.align-items-end::before,
.home-industries-effects .row.align-items-end::after,
.home-why-effects .pricing__content::before {
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* Problem: transparent cards over one soft red/pink squiggle artwork. */
.home-problem-effects .problem-grid {
  position: relative;
  isolation: isolate;
}
.home-problem-effects .problem-grid::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: -40px -3% -70px 18%;
  background: url("../img/home/effects/problem-squiggle.svg") center/contain
    no-repeat;
}
body[data-page="index"] .home-problem-effects .problem-card {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
body[data-page="index"] .home-problem-effects .problem-card--cta {
  background: rgba(239, 0, 75, 0.88) !important;
}

/* Industries: reference honeycomb/connected-cell pattern from the left behind heading. */
.home-industries-effects .row.align-items-end {
  position: relative;
  isolation: isolate;
}
.home-industries-effects .row.align-items-end::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 470px;
  height: 250px;
  left: -120px;
  top: -90px;
  background: url("../img/home/effects/industries-pattern.svg") left
    center/contain no-repeat;
}

/* Why OrbitAvanya: static mesh/net decoration, positioned like a section background overlay. */
.home-why-effects {
  position: relative;
  isolation: isolate;
}
.home-why-effects::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: min(1050px, 82vw);
  height: 390px;
  right: -90px;
  top: -20px;
  background: url("../img/home/effects/why-mesh.svg") right top/contain
    no-repeat;
}

/* About: animated flowing-line SVG directly below the hero. */
body[data-page="about"] .page-banner + section {
  position: relative;
  isolation: isolate;
}
body[data-page="about"] .page-banner + section::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 115%;
  height: 480px;
  left: -8%;
  top: -80px;
  background: url("../img/about/effects/about-flow-waves.svg") center/cover
    no-repeat;
  animation: oaAboutFlow 10s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes oaAboutFlow {
  from {
    transform: translate3d(-1.5%, 0, 0) scale(1);
    opacity: 0.55;
  }
  to {
    transform: translate3d(1.5%, -12px, 0) scale(1.025);
    opacity: 0.9;
  }
}
@media (max-width: 767px) {
  .home-problem-effects .problem-grid::before {
    inset: 0 -35% -30px 0;
  }
  .home-industries-effects .row.align-items-end::before {
    left: -160px;
    top: -65px;
    width: 390px;
  }
  .home-why-effects::before {
    width: 120vw;
    right: -45vw;
    opacity: 0.7;
  }
  body[data-page="about"] .page-banner + section::before {
    width: 150%;
    left: -25%;
    height: 360px;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-page="about"] .page-banner + section::before {
    animation: none;
  }
}

/* === Requested placement revision 2026-07-23 v3 === */
/* Problem: remove the large squiggle from behind cards and restore original opaque card surfaces. */
.home-problem-effects .problem-grid::before {
  content: none !important;
  background: none !important;
}
body[data-page="index"] .home-problem-effects .problem-card {
  background: var(--surface, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body[data-page="index"] .home-problem-effects .problem-card--cta {
  background: #ef004b !important;
}

/* Use the supplied why-choose overlay image below The Problem heading, entering from the left. */
.home-problem-effects .row.align-items-end {
  position: relative;
  isolation: isolate;
}
.home-problem-effects .row.align-items-end::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
  width: 300px;
  height: 210px;
  left: -105px;
  bottom: -145px;
  background: url("../img/home/why-choose__home-overly.png") left center/contain
    no-repeat;
}

/* Industries: replace generated SVG with the supplied asset, keeping the same placement zone. */
.home-industries-effects .row.align-items-end::before {
  content: "" !important;
  width: 300px !important;
  height: 210px !important;
  left: -105px !important;
  top: -65px !important;
  background: url("../img/home/why-choose__home-overly.png") left center/contain
    no-repeat !important;
}

/* About Mission/Vision: explicitly restore the original card surface, hover lift, border and shadow behavior. */
body[data-page="about"] .mv-card {
  background: var(--surface) !important;
  border: 1px solid var(--border-soft) !important;
  transition: var(--transition-smooth) !important;
}
body[data-page="about"] .mv-card:hover {
  border-color: var(--accent) !important;
  transform: translateY(-6px) !important;
  box-shadow: var(--shadow-lift) !important;
}

/* Small squiggle positioned in the transition between Who We Are / purpose content and Mission & Vision. */
body[data-page="about"] .bg-dark_white:has(.mv-card) {
  position: relative;
  isolation: isolate;
}
body[data-page="about"] .bg-dark_white:has(.mv-card)::before {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
  width: 210px;
  height: 210px;
  left: 20%;
  top: -112px;
  background: url("../img/home/effects/problem-squiggle.svg") center/contain
    no-repeat;
  opacity: 0.58;
}
body[data-page="about"] .bg-dark_white:has(.mv-card) > .container {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .home-problem-effects .row.align-items-end::after {
    width: 210px;
    height: 150px;
    left: -85px;
    bottom: -105px;
  }
  .home-industries-effects .row.align-items-end::before {
    width: 220px !important;
    height: 160px !important;
    left: -90px !important;
    top: -45px !important;
  }
  body[data-page="about"] .bg-dark_white:has(.mv-card)::before {
    width: 150px;
    height: 150px;
    left: 8%;
    top: -80px;
  }
}
\n\n/* === Requested correction 2026-07-23 v4 === */
/* Problem cards: exact original arrangement — first five white, sixth navy; retain original color hover. */
body[data-page="index"] .home-problem-effects .problem-card:not(.problem-card--cta) {
  background: var(--surface, #fff) !important;
  color: inherit !important;
}
body[data-page="index"] .home-problem-effects .problem-card--cta {
  background: var(--text-strong, #04213f) !important;
  color: #fff !important;
}
body[data-page="index"]
  .home-problem-effects
  .problem-card:hover:not(.problem-card--cta) {
  background: var(--accent, #ef004b) !important;
}
body[data-page="index"]
  .home-problem-effects
  .problem-card:hover:not(.problem-card--cta)
  * {
  color: #fff !important;
}

/* Supplied overlay: larger and directly below each requested heading, from the left. */
.home-problem-effects .row.align-items-end::after {
  width: 470px !important;
  height: 300px !important;
  left: -125px !important;
  bottom: -245px !important;
  z-index: 0 !important;
  opacity: 0.95;
  background: url("../img/home/why-choose__home-overly.png") left top / contain
    no-repeat !important;
}
.home-problem-effects .row.align-items-end > * {
  position: relative;
  z-index: 1;
}
.home-industries-effects .row.align-items-end {
  position: relative;
  isolation: isolate;
}
.home-industries-effects .row.align-items-end::before {
  width: 470px !important;
  height: 300px !important;
  left: -125px !important;
  top: 82px !important;
  z-index: 0 !important;
  opacity: 0.95;
  background: url("../img/home/why-choose__home-overly.png") left top / contain
    no-repeat !important;
}
.home-industries-effects .row.align-items-end > * {
  position: relative;
  z-index: 1;
}

/* About: explicit decoration node between Our Purpose and Mission/Vision so placement cannot be lost by :has support. */
body[data-page="about"] .about-purpose-mission-squiggle {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 0;
  pointer-events: none;
}
body[data-page="about"] .about-purpose-mission-squiggle::before {
  content: "";
  position: absolute;
  width: 155px;
  height: 155px;
  left: 24%;
  top: -78px;
  background: url("../img/home/effects/problem-squiggle.svg") center/contain
    no-repeat;
  opacity: 0.55;
}
/* Disable older pseudo placement to avoid duplicate/missing positioning. */
body[data-page="about"] .bg-dark_white:has(.mv-card)::before {
  content: none !important;
}

@media (max-width: 767px) {
  .home-problem-effects .row.align-items-end::after {
    width: 330px !important;
    height: 220px !important;
    left: -105px !important;
    bottom: -185px !important;
  }
  .home-industries-effects .row.align-items-end::before {
    width: 330px !important;
    height: 220px !important;
    left: -105px !important;
    top: 100px !important;
  }
  body[data-page="about"] .about-purpose-mission-squiggle::before {
    width: 115px;
    height: 115px;
    left: 10%;
    top: -58px;
  }
}

/* === Final placement correction: heading overlays + About squiggle === */
.home-problem-effects .container,
.home-industries-effects .container {
  position: relative;
  isolation: isolate;
}

.home-problem-effects .row.align-items-end::after,
.home-industries-effects .row.align-items-end::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: -1 !important;
  width: 520px !important;
  height: 360px !important;
  left: -150px !important;
  top: -105px !important;
  bottom: auto !important;
  opacity: 0.34 !important;
  background-image: url("../img/home/why-choose__home-overly.png") !important;
  background-position: left top !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.home-problem-effects .row.align-items-end,
.home-industries-effects .row.align-items-end {
  position: relative !important;
  isolation: isolate !important;
}

/* About: visible decorative squiggle exactly in the gap between Purpose and Mission/Vision. */
body[data-page="about"] .about-purpose-mission-squiggle {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 150px !important;
  margin: -55px 0 -55px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  background: transparent !important;
}
body[data-page="about"] .about-purpose-mission-squiggle::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 270px !important;
  height: 210px !important;
  left: 24% !important;
  top: -25px !important;
  opacity: 0.42 !important;
  background: url("../img/home/effects/problem-squiggle.svg") center/contain
    no-repeat !important;
}
@media (max-width: 767px) {
  .home-problem-effects .row.align-items-end::after,
  .home-industries-effects .row.align-items-end::before {
    width: 340px !important;
    height: 240px !important;
    left: -110px !important;
    top: -55px !important;
    opacity: 0.28 !important;
  }
  body[data-page="about"] .about-purpose-mission-squiggle::before {
    width: 210px !important;
    height: 160px !important;
    left: 8% !important;
  }
}

/* === Revision 6: force supplied heading artwork visible === */
body[data-page="index"] .home-problem-effects,
body[data-page="index"] .home-industries-effects {
  position: relative !important;
}

body[data-page="index"] .home-problem-effects .row.align-items-end,
body[data-page="index"] .home-industries-effects .row.align-items-end {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
}

body[data-page="index"] .home-problem-effects .row.align-items-end::after,
body[data-page="index"] .home-industries-effects .row.align-items-end::before {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  pointer-events: none !important;
  z-index: 0 !important;
  width: 560px !important;
  height: 390px !important;
  left: -155px !important;
  top: -115px !important;
  opacity: 0.22 !important;
  background-image: url("../img/home/why-choose__home-overly.png") !important;
  background-repeat: no-repeat !important;
  background-position: left top !important;
  background-size: contain !important;
}
body[data-page="index"] .home-problem-effects .row.align-items-end > *,
body[data-page="index"] .home-industries-effects .row.align-items-end > * {
  position: relative !important;
  z-index: 2 !important;
}

/* Clear, complete squiggle in the HOME gap after The Problem and before following content. */
body[data-page="index"] .home-problem-who-squiggle {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  height: 190px !important;
  margin: -55px 0 -70px !important;
  overflow: visible !important;
  z-index: 8 !important;
  pointer-events: none !important;
}
body[data-page="index"] .home-problem-who-squiggle::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  width: 340px !important;
  height: 300px !important;
  left: 16% !important;
  top: -45px !important;
  opacity: 0.34 !important;
  background: url("../img/home/effects/problem-squiggle.svg") center/contain
    no-repeat !important;
}
@media (max-width: 767px) {
  body[data-page="index"] .home-problem-effects .row.align-items-end::after,
  body[data-page="index"]
    .home-industries-effects
    .row.align-items-end::before {
    width: 370px !important;
    height: 260px !important;
    left: -115px !important;
    top: -60px !important;
    opacity: 0.2 !important;
  }
  body[data-page="index"] .home-problem-who-squiggle {
    height: 130px !important;
    margin: -30px 0 -40px !important;
  }
  body[data-page="index"] .home-problem-who-squiggle::before {
    width: 230px !important;
    height: 210px !important;
    left: 8% !important;
    top: -35px !important;
  }
}

/* === Revision 7 visibility correction === */
body[data-page="index"] .home-problem-effects .row.align-items-end,
body[data-page="index"] .home-industries-effects .row.align-items-end {
  z-index: 1 !important;
}
body[data-page="index"] .home-problem-effects .row.align-items-end::after,
body[data-page="index"] .home-industries-effects .row.align-items-end::before {
  z-index: 1 !important;
  width: 620px !important;
  height: 430px !important;
  left: -175px !important;
  top: -145px !important;
  opacity: 0.48 !important;
  filter: none !important;
}
body[data-page="index"] .home-problem-effects .row.align-items-end > *,
body[data-page="index"] .home-industries-effects .row.align-items-end > * {
  z-index: 3 !important;
}

/* Squiggle: slightly higher, stronger and completely visible */
body[data-page="index"] .home-problem-who-squiggle {
  height: 165px !important;
  margin: -105px 0 -45px !important;
  z-index: 10 !important;
}
body[data-page="index"] .home-problem-who-squiggle::before {
  width: 380px !important;
  height: 330px !important;
  left: 15% !important;
  top: -80px !important;
  opacity: 0.62 !important;
  z-index: 10 !important;
}
@media (max-width: 767px) {
  body[data-page="index"] .home-problem-effects .row.align-items-end::after,
  body[data-page="index"]
    .home-industries-effects
    .row.align-items-end::before {
    width: 400px !important;
    height: 285px !important;
    left: -120px !important;
    top: -85px !important;
    opacity: 0.4 !important;
  }
  body[data-page="index"] .home-problem-who-squiggle {
    height: 120px !important;
    margin: -70px 0 -25px !important;
  }
  body[data-page="index"] .home-problem-who-squiggle::before {
    width: 260px !important;
    height: 230px !important;
    left: 6% !important;
    top: -60px !important;
    opacity: 0.58 !important;
  }
}

/* === Revision 8: dark-theme Mission cards + clearly visible supplied overlays === */
/* Restore dark-theme behavior for all Mission/Vision-related cards. */
body.dark-mode[data-page="about"] .mv-card,
body[data-theme="dark"][data-page="about"] .mv-card,
html.dark body[data-page="about"] .mv-card,
html[data-theme="dark"] body[data-page="about"] .mv-card {
  background: #001a72 !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  color: #fff !important;
}
body.dark-mode[data-page="about"] .mv-card *,
body[data-theme="dark"][data-page="about"] .mv-card *,
html.dark body[data-page="about"] .mv-card *,
html[data-theme="dark"] body[data-page="about"] .mv-card * {
  color: #fff !important;
}
body.dark-mode[data-page="about"] .mv-card .mv-card__label,
body[data-theme="dark"][data-page="about"] .mv-card .mv-card__label,
html.dark body[data-page="about"] .mv-card .mv-card__label,
html[data-theme="dark"] body[data-page="about"] .mv-card .mv-card__label {
  color: #ff336f !important;
}

/* Supplied PNG: clearly visible under heading areas. */
body[data-page="index"] .home-problem-effects .row.align-items-end::after,
body[data-page="index"] .home-industries-effects .row.align-items-end::before {
  opacity: 0.78 !important;
  width: 650px !important;
  height: 450px !important;
  left: -170px !important;
  top: -145px !important;
  mix-blend-mode: normal !important;
  visibility: visible !important;
}
body[data-page="index"] .home-industries-effects .row.align-items-end::before {
  left: -155px !important;
  top: -135px !important;
}

/* === Revision 9: restore The Problem dark mode + stronger overlay === */
/* Cards 1–5: original navy surface in dark theme. Keep card 6 CTA rules untouched. */
body.dark-mode[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta),
body[data-theme="dark"][data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta),
html.dark
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta),
html[data-theme="dark"]
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta) {
  background: #001a3d !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
body.dark-mode[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__title,
body[data-theme="dark"][data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__title,
html.dark
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__title,
html[data-theme="dark"]
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__title {
  color: #fff !important;
}
body.dark-mode[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__desc,
body[data-theme="dark"][data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__desc,
html.dark
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__desc,
html[data-theme="dark"]
  body[data-page="index"]
  .home-problem-effects
  .problem-card:not(.problem-card--cta)
  .problem-card__desc {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Preserve existing hover transforms/transitions by changing no hover/transform properties here. */

/* The Problem supplied overlay: ~30% larger, opacity ~.9, higher decorative layer. */
body[data-page="index"] .home-problem-effects .row.align-items-end::after {
  width: 845px !important;
  height: 585px !important;
  left: -220px !important;
  top: -185px !important;
  opacity: 1 !important;
  z-index: 2 !important;
  visibility: visible !important;
}
body[data-page="index"] .home-problem-effects .row.align-items-end > * {
  position: relative !important;
  z-index: 4 !important;
}

body[data-page="index"] .home-industries-effects .row.align-items-end::before {
  opacity: 1 !important;
  width: 750px !important;
  height: 520px !important;
  z-index: 2 !important;
  visibility: visible !important;
}

/* Mission / Vision decorative PNG */
body[data-page="about"] .about-purpose-mission-squiggle::before {
  opacity: 1 !important;
  width: 750px !important;
  height: 520px !important;
  z-index: 2 !important;
  visibility: visible !important;
  background-image: url("../img/home/why-choose__home-overly.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
/* FIX: on mobile/tablet the 750x520 decorative image bleeds past the
   viewport (left:24% + width:750px exceeds the container), causing
   horizontal scroll on the About page. Clip it and scale it down so
   it stays fully inside its section; desktop is untouched. */
body[data-page="about"] .about-purpose-mission-squiggle {
  overflow: hidden !important;
}
@media (max-width: 1199px) {
  body[data-page="about"] .about-purpose-mission-squiggle::before {
    width: 420px !important;
    height: 291px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
}
@media (max-width: 575px) {
  body[data-page="about"] .about-purpose-mission-squiggle::before {
    width: 280px !important;
    height: 194px !important;
  }
}

/* ---------- 50. FIX: Light Theme Hover Text Color Contrast ---------- */
/* Ensure default and specific light theme buttons hovering to a yellow-orange background use high contrast dark text */
html:not([data-theme="dark"]) .theme-btn:hover,
html:not([data-theme="dark"]) .theme-btn:focus,
html:not([data-theme="dark"]) .theme-btn.btn-white:hover,
html:not([data-theme="dark"]) .theme-btn.btn-white:focus,
html:not([data-theme="dark"]) .theme-btn.btn-white-border:hover,
html:not([data-theme="dark"]) .theme-btn.btn-white-border:focus,
html:not([data-theme="dark"]) .header-btn:hover,
html:not([data-theme="dark"]) .header-btn:focus {
  color: var(--text-strong) !important;
}

/* Ensure red/yellow hover background buttons maintain white text color contrast */
html:not([data-theme="dark"]) .theme-btn.btn-red:hover,
html:not([data-theme="dark"]) .theme-btn.btn-red:focus,
html:not([data-theme="dark"]) .theme-btn.btn-yellow:hover,
html:not([data-theme="dark"]) .theme-btn.btn-yellow:focus,
html:not([data-theme="dark"]) .theme-btn.btn-yellow-transparent:hover,
html:not([data-theme="dark"]) .theme-btn.btn-yellow-transparent:focus {
  color: #fff !important;
}

/* Fix "Call Us Everyday" / "Email Drop Us" transparent hover buttons in the light theme:
   transition them to fill with red background, matching the red accent border, and keep text/icons white */
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:hover,
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:focus {
  background-color: #ef0548 !important;
  border-color: #ef0548 !important;
  color: #fff !important;
}

html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:hover .text span,
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:hover .text h5,
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:focus .text span,
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:focus .text h5,
html:not([data-theme="dark"]) .can-help.can-help-home-1 .can-help__content .theme-btn:hover .color-white,
html:not([data-theme="dark"]) .can-help.can-help-home-1 .can-help__content .theme-btn:focus .color-white {
  color: #fff !important;
}

html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:hover .icon,
html:not([data-theme="dark"]) .can-help__content-btn-group .theme-btn:focus .icon {
  color: #fff !important;
}


/* Ensure computed-style contrast checkers resolve section background images to dark navy fallback */
.can-help {
  background-color: #04213f !important;
}

/* ---------- 51. FIX: iOS WebKit aspect-ratio / object-fit cover bug ---------- */
@supports (-webkit-touch-callout: none) {
  /* Decouple image height from container height in iOS WebKit to resolve circular height calculations */
  .team-item .media {
    position: relative !important;
  }
  .team-item .media img {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    width: calc(100% - 20px) !important;
    height: calc(100% - 10px) !important;
  }
}

/* ---------- 52. FIX: Hide Floating Back to Top Arrow ---------- */
#scrollUp {
  display: none !important;
}