/* ============================================================
   HOJA360 — Custom styles
   ============================================================ */
:root {
  /* Background */
  --color-background: #ffffff;

  /* Brand — Primary (teal) */
  --color-primary: #235d6c;
  --color-primary-dark: #154452;
  --color-primary-light: #2a6c7d;
  --color-primary-light-shade: #f1f5f7;
  --color-primary-medium-shade: #e1f0f3;

  /* Brand — Secondary (amber/orange) */
  --color-secondary: #ff9e1f;
  --color-secondary-dark: #d28d06;
  --color-secondary-light-shade: #ffe3be;

  /* Text */
  --color-primary-text: #111827;

  /* Neutrals */
  --color-gray-dark: #434343;
  --color-gray-text: #6b7280;
  --color-gray-light: #eee;
  --color-white: #fff;
  --color-black: #000000;

  /* UI surfaces */
  --color-border: #e5e7eb;
  --light-bg: #f9fafb;

  --color-gradient: linear-gradient(90deg, #4b8594 0%, #235d6c 100%);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url(../fonts/Inter-Thin.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url(../fonts/Inter-ExtraLight.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url(../fonts/Inter-Light.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/Inter-Regular.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url(../fonts/Inter-Medium.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url(../fonts/Inter-SemiBold.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/Inter-Bold.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url(../fonts/Inter-ExtraBold.ttf);
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url(../fonts/Inter-Black.ttf);
}

p {
  margin: 0;
}

ul {
  padding: 0;
  margin: 0;
}

.section-80 {
  padding-block: 80px;
}
.section-100 {
  padding-block: 100px;
}

.gap-10 {
  gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.gap-15 {
  gap: 15px;
}
.gap-20 {
  gap: 20px;
}
.gap-32 {
  gap: 32px;
}
.gap-40 {
  gap: 40px;
}
.gap-50 {
  gap: 50px;
}
.gap-80 {
  gap: 80px;
}

.rowGap-64 {
  --bs-gutter-x: 64px;
}
.rowGap-80 {
  --bs-gutter-x: 80px;
}

body {
  font-family: "Inter";
  overflow-x: hidden;
}

/* GENERAL */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
h1 {
  color: var(--color-primary);
  font-size: 48px;
  font-weight: 800;
  line-height: 100%;
}

h2,
h2 > span {
  color: var(--color-primary);
  font-size: 36px;
  font-style: normal;
  font-weight: 800;
  line-height: 100%;
}

h3 {
  font-size: 24px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

h4 {
  font-size: 20px;
  font-weight: 500;
  line-height: 140%;
}
h5 {
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
p {
  /*body large */
  font-size: 16px;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

span {
  /* body */
  font-size: 14px;
  font-weight: 400;
  line-height: 150%; /* 24px */
}

h6 {
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.small-text{
  font-size: 13px;
  font-weight: 400;
}
.caption {
  font-size: 12px;
  font-weight: 500;
}

h2 > span {
  color: var(--color-secondary);
}
.overline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.1px;
}
/* ---------- Top navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-gray-light);
}

.site-header .navbar {
  padding: 25px 0 20px;
  align-items: center;
}

.site-header .navbar-collapse {
  align-items: center;
}

/* Logo */
.navbar-brand {
  padding: 0;
  margin: 0;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.5px;
}

.navbar-brand .brand-name {
  color: var(--color-primary-dark);
}

.navbar-brand .brand-accent {
  color: var(--color-secondary);
}

.brand-logo {
  height: 28px;
  width: auto;
  display: block;
}

.site-header .dropdown-toggle::after {
  display: none;
}

/* Nav dropdowns */
.site-header .nav-item.dropdown .chevron-icon {
  transition: transform 0.2s ease;
}
.site-header .nav-link[aria-expanded="true"] .chevron-icon {
  transform: rotate(180deg);
}
.site-header .dropdown-menu {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
}
.site-header .dropdown-item {
  padding: 8px 16px;
  font-size: 15px;
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
  color: var(--color-secondary);
  background: var(--light-bg);
}

.site-header .chevron-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  background: url("../chevron-down.svg") center / contain no-repeat;
}

/* Swap to the orange chevron when the link is hovered/focused */
.site-header .nav-link:hover .chevron-icon,
.site-header .nav-link:focus .chevron-icon {
  background-image: url("../chevron-down-secondary.svg");
}

.site-header .navbar-nav {
  align-items: center;
}

/* Menu links */
.site-header .nav-link {
  color: #111827;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--color-secondary);
}

.navbar-nav {
  gap: 12px; /* between menu items */
}

.navbar-actions {
  display: flex;
  align-items: center;
}

.nav-search-btn {
  display: flex;
  padding: 16px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--light-bg);
}
.nav-search-btn img {
  width: 18px;
  height: 18px;
}
.nav-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.nav-search {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--light-bg);
  font-weight: 500;
}

.nav-search:focus-within {
  border-color: var(--color-secondary);
}

.nav-search .bi-search {
  color: var(--color-gray-dark);
  font-size: 0.9rem;
}

.nav-search .form-control {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 15px;
}

.nav-search .form-control:focus {
  box-shadow: none;
  background: transparent;
}

.nav-lang {
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--light-bg);
}

.nav-lang .nav-link {
  padding: 12px;
}

/* Log in */
.nav-login {
  font-weight: 600;
}

.btn-cta {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.btn-cta:hover,
.btn-cta:focus {
  background: var(--color-secondary-dark);
  color: var(--color-white);
}

/* ============================================================
   SECTION: HERO
   ============================================================ */
.hero {
  overflow-x: clip; /* contain the hero visual's decorative bleed → no sideways page scroll */
}
.hero-content {
  max-width: 720px;
  padding-block: 120px;
  padding-right: 64px;
}

.hero-title,
.hero-title span {
  font-size: 48px;
  font-weight: 800;
  line-height: 100%;
}
.hero-title .text-accent {
  color: var(--color-secondary);
}

.hero-subtitle {
  margin: 0;
  color: var(--color-gray-text);
  font-size: 20px;
  font-weight: 400;
  line-height: 150%; /* 30px */
}

.hero-actions {
  margin-block: 12px;
}

.btn-hero-solid,
.btn-hero-outline {
  display: flex;
  padding: 18px 32px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
}

.btn-hero-solid {
  background: var(--color-primary-dark);
  color: var(--color-white);
  border: 1px solid var(--color-primary-dark);
}

.btn-hero-solid:hover,
.btn-hero-solid:focus {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn-hero-outline {
  border: 1px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
}

.btn-hero-outline:hover,
.btn-hero-outline:focus {
  background: var(--color-primary-dark);
  color: var(--color-white);
}

/* ---------- Reusable button fills */
.btn-fill-orange {
  border: 1px solid var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

.btn-fill-orange:hover,
.btn-fill-orange:focus {
  border-color: var(--color-secondary-dark);
  background: var(--color-secondary-dark);
  color: var(--color-white);
}

.btn-outline-soft {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: #111827;
}

.btn-outline-soft:hover,
.btn-outline-soft:focus {
  background: var(--color-primary-light-shade);
  color: #111827;
}

.hero-trust {
  width: fit-content;
  padding: 8px 12px;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--light-bg);
}

.hero-trust span {
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  line-height: normal;
}
.trust span {
  color: #111827;
  font-weight: 600;
}
/* .hero-trust .sheild-icon {
  width: 16px;
  height: 16px;
  display: block;
  background: url("../sheild.svg") center / contain no-repeat;
} */

/* Hero image (image-swap hero) */
.hero-img-desktop {
  width: 100%;
  display: block;
}
.hero-img-mobile {
  width: 100%;
  max-width: 300px;
  margin-inline: auto;
}

/* HERO stage: fixed base + animated overlay layers */
.hero-visual {
  position: relative;
}
.hero-visual--mobile {
  margin-inline: auto;
}
.hero-base {
  position: relative;
  z-index: 2;
  display: block;
  left: 15.5%;
  margin-top: 1.5%;
  width: 100%;
  max-width: 512px;
}

/* @keyframes heroDotsOrbit {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-dots {
    animation: none;
  }
}
.hero-dots {
  position: absolute; /* overlay on the base 
  top: 7%;
  left: 23%;
  width: 79%;
  z-index: 1; /* dots behind the arrow
  transform-origin: center;
  /* animation: heroDotsOrbit 20s linear infinite; 
} */

/* Hero overlay layers: cards (float) + decorations (static).*/
.hero-card,
.hero-deco {
  position: absolute;
}
.hero-deco {
  z-index: 1;
}
.hero-card {
  z-index: 3;
  animation: heroCardFloat 5s ease-in-out infinite;
}
.hero-card--dashboard {
  top: 35%;
  left: 35%;
  width: 256px;
  z-index: 2;
  transform-origin: center;
  animation: heroDashboardPulse 4s ease-in-out infinite;
}

/* Decorations */
.hero-deco--primary-circle {
  top: 24%;
  left: 10%;
}
.hero-deco--orange-circle {
  top: 11%;
  right: -9%;
}
.hero-deco--grid-dots {
  top: 26%;
  left: 75%;
  z-index: 2;
}
.hero-deco--curve {
  top: 32%;
  left: 79%;
  z-index: 2;
}
.hero-deco--dots-left {
  top: 89%;
  left: 5%;
}
.hero-deco--group-circles {
  top: 16%;
  left: 90%;
  z-index: 2;
}
.hero-deco--arrow-up-right {
  bottom: 8%;
  right: -5%;
}

/* Cards */
.hero-card--1 {
  top: 25%;
  left: 11%;
  animation-delay: 0.2s;
}
.hero-card--2 {
  top: 71%;
  left: 37%;
  animation-delay: 0.8s;
}
.hero-card--3 {
  top: 56%;
  left: 66%;
  animation-delay: 1.2s;
}
.hero-card--group {
  top: 57%;
  left: 16%;
  animation-delay: 0.5s;
}
.hero-card--home {
  top: 22%;
  left: 64%;
  animation-delay: 1.5s;
}
.hero-card--toggle {
  top: 77%;
  left: 60%;
  animation-delay: 1s;
}

@keyframes heroCardFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
/* Dashboard: scale in/out (pulse / zoom) */
@keyframes heroDashboardPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card {
    animation: none;
  }
}

/* ============================================================
   SECTION: AUTOMATION DEMO
   ============================================================ */
.automation-demo-section {
  background: var(--color-white);
}

.automation-demo-section-title span {
  display: block;
  color: var(--color-secondary);
}

.automation-demo-section-subtitle p {
  color: var(--color-gray-dark);
}
.automation-demo-section-header {
  max-width: 665px;
  margin: 0 auto;
}
.automation-demo-card {
  position: relative; /* anchor for the overlay layers */
  /* max-width: 1240px; */
  margin-inline: auto;
  overflow: hidden;
  border-radius: 20.237px;
}

.automation-demo-video {
  display: block;
  width: 100%;
  min-height: 555px; /* holds the frame until a real video loads */
  object-fit: cover;
  background: #064b55;
}

/* Overlay icons  */
.video-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.video-icon--volume {
  -webkit-mask-image: url("../volume.svg");
  mask-image: url("../volume.svg");
}
.is-muted .video-icon--volume {
  -webkit-mask-image: url("../volume-off.svg");
  mask-image: url("../volume-off.svg");
}
.video-volume {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.video-volume-slider {
  height: 5px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.25);
  accent-color: var(--color-primary-light-shade);
  width: 0;
  opacity: 0;
  transition: width 0.25s ease, opacity 0.25s ease;
}
.video-volume.is-open .video-volume-slider {
  width: 50%;
  opacity: 1;
}
.video-icon--fullscreen {
  -webkit-mask-image: url("../fullscreen.svg");
  mask-image: url("../fullscreen.svg");
}
.video-icon--close {
  -webkit-mask-image: url("../close.svg");
  mask-image: url("../close.svg");
}

/* Top bar: title + close */
.video-top-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  color: var(--color-white);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
}
.video-title {
  font-size: 17px;
  font-weight: 600;
}
.video-close {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: var(--color-white);
  cursor: pointer;
}

/* Center play */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  width: 93px;
  height: 93px;
  align-items: center;
  justify-content: center;
  color: #111827;
  border: 0;
  border-radius: 46.865px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10.651px 25.563px -6.391px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8.520994186401367px);
  cursor: pointer;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.video-play.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.video-play-icon {
  /* primary (dark) play on the white center circle */
  width: 34px;
}
.video-btn-icon {
  /* white play in the control bar */
  width: 18px;
}

/* Bottom control bar */
.video-control-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 12.781px 21.302px;
  gap: 8px;
  padding: 14px 20px 18px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(9.586118698120117px);
}
.video-progress {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.video-progress-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-white);
}
.video-time {
  display: flex;
  justify-content: space-between;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
}
.video-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.video-actions-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.video-btn {
  display: flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
  cursor: pointer;
}

/* ============================================================
   SECTION: FOOTER
   ============================================================ */
.site-footer {
  background: #1c4554;
  color: rgba(255, 255, 255, 0.7);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-top {
  padding-block: 80px 64px;
  gap: 48px;
}

/* Brand */
.footer-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.footer-desc {
  margin: 0;
  max-width: 340px;
  color: #94a3b8;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}

.footer-status {
  align-self: flex-start;
  border-radius: 999px;
  border: 1px solid #3b8fa0;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  display: flex;
  padding: 6px 12px;
  align-items: center;
  gap: 8px;
}

.footer-status .status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-secondary);
}

/* Link columns */
.footer-col-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: flex-start;
}

.footer-links a {
  text-decoration: none;
  transition: color 0.15s ease;
  color: #94a3b8;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.footer-links a:hover,
.footer-links a:focus {
  color: var(--color-secondary);
}

.footer-bottom-bar {
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* .footer-bottom {
  padding-block: 24px;
} */

.footer-legal {
  color: #64748b;
  font-size: 14px;
  font-weight: 400;
}

.footer-legal a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.footer-legal a:hover,
.footer-legal a:focus {
  color: var(--color-secondary);
}

.social-icon {
  color: var(--color-secondary);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  display: flex;
  width: 40px;
  height: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}

.social-icon:hover,
.social-icon:focus {
  border-color: var(--color-secondary);
  background: rgba(255, 255, 255, 0.05);
}
.social-icon img {
  width: 16px;
  height: 16px;
}

/* ============================================================
   SECTION: FEATURES ("Follow up with leads")
   ============================================================ */
.leads-headline,
.metrics-header {
  max-width: 720px;
  margin-inline: auto;
}
.leads-subtitle p {
  color: var(--color-gray-dark);
  /* margin-bottom: 20px; */
}

/* Feature tabs */
button.leads-tab {
  padding: 0;
}

.leads-tabs {
  /* margin-top: 36px; */
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
  padding-bottom: 10px;
}
.blogFilter {
  overflow-x: scroll;
}
.leads-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.5s ease;
}
.leads-tab:hover,
.leads-tab.active {
  color: var(--color-secondary);
}
.leads-tab-text {
  font-weight: 600;
  /* margin-bottom: 6px; */
  white-space: nowrap;
}
.leads-tab:hover {
  transform: scale(1.08);
}
.leads-tab.active {
  background: var(--color-white);
  border-color: currentColor;
}
.leads-tab-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: currentColor;
}

.leads-tab-icon path {
  stroke: currentColor;
}

/* Showcase panel */
.leads-showcase {
  margin-top: 120px;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  height: 327px; /* fixed band — the image overflows (bleeds) instead of stretching it */
}
.leads-showcase-img {
  width: 100%;
  max-width: 630px;
  animation: fadeDown 0.7s ease both;
}
.leads-showcase-content {
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
/* Only the active info panel is shown */
.leads-info {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}
.leads-info.active {
  display: flex;
}
.leads-showcase-title {
  color: var(--color-white);
  font-weight: 700;
}
.leads-showcase-desc h5 {
  color: var(--color-white);
  /* text-align: justify; */
  font-size: 18px;
  font-weight: 400;
  line-height: 133.333%;
  /* max-width: 380px; */
}
.pricing-cta-title h2 {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 800;
  line-height: 120%;
}
.leads-learn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}
.leads-learn-more:hover,
.leads-learn-more:focus {
  background: var(--color-primary-light-shade);
  color: var(--color-primary);
}

/* ============================================================
   SECTION: "When you get Hoja you're not alone"
   ============================================================ */

.not-alone-section {
  background: var(--color-white);
  overflow: hidden;
}
.na-headline {
  margin-inline: auto;
}

.na-subtitle {
  color: var(--color-gray-dark);
  max-width: 730px;
  /* margin: 33px 0 14px; */
}

/* Feature columns (Bootstrap row/col handles the 3-wide split + responsive) */
.na-col {
  display: flex;
  flex-direction: column;
}
.na-col-left {
  gap: 58px;
  padding-top: 86px;
  align-items: flex-end; /* hug items toward the centre */
}
.na-col-right {
  gap: 90px;
  padding-top: 86px;
  align-items: flex-start; /* hug items toward the centre */
}
.na-col-center {
  align-items: center;
}

.na-item-top {
  margin-bottom: 8px;
  z-index: 2;
}

.na-figure-img {
  display: block;
  max-width: 100%;
  border-radius: 227.5px;
}

.na-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 227.5px;
  background: linear-gradient(
      224deg,
      rgba(255, 255, 255, 0) 75.84%,
      rgba(255, 255, 255, 0.83) 84.04%
    ),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 63.94%,
      rgba(255, 255, 255, 0.33) 77.76%,
      #fff 90.84%
    );
  display: block;
  pointer-events: none;
}

.na-item {
  display: flex;
  max-width: 230px;
  padding: 16px;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: fadeUp 0.8s ease both;
}

.na-item-icon {
  width: 80px;
  object-fit: contain;
}
.na-item-label {
  color: #353535;
  text-align: center;

  max-width: 170px;
}

/* Arc stagger — nudge the outer items toward the centre so they follow a curve */
.na-col-left .na-item:nth-child(1),
.na-col-left .na-item:nth-child(3) {
  transform: translateX(48px);
}
.na-col-right .na-item:nth-child(1),
.na-col-right .na-item:nth-child(3) {
  transform: translateX(-48px);
}

/* CTA row */
.na-cta {
  gap: 24px;
  padding-top: 80px;
}

/* ============================================================
   "Not alone" (Option B)
   ============================================================ */
.na-visual {
  position: relative;
  max-width: 980px;
  margin: 36px auto 0;
  padding-top: 150px; /* room for the top item above the figure */
}
.na-figure {
  position: relative;
  width: fit-content; /* shrink to the image so it can centre */
  margin-inline: auto; /* centre the figure in the stage */
  transform: translateY(-3px);
}
.na-visual > .na-item {
  position: absolute;
  left: var(--x);
  top: var(--t, auto);
  bottom: var(--b, auto);
  margin-left: -100px;
}

/* Per-item positions — --x = horizontal centre, --t/--b = top/bottom edge */
.na-item--done {
  --x: 50%;
  --t: 0%;
}
.na-item--dedicated {
  --x: 19%;
  --b: 57%;
}
.na-item--migration {
  --x: 10.5%;
  --b: 35%;
}
.na-item--templates {
  --x: 17%;
  --b: 6%;
}
.na-item--lifecycle {
  --x: 81%;
  --b: 61%;
}
.na-item--support {
  --x: 93.5%;
  --b: 32.3%;
}
.na-item--success {
  --x: 82.5%;
  --b: 5%;
}

.na-cta .btn-cta,
.na-cta .btn-hero-outline {
  padding: 18px 40px;
  font-size: 17px;
}

/* ============================================================
   SECTION: "Automation for your entire business" + stats
   ============================================================ */

.automation-benefits {
  background: rgba(238, 238, 238, 0.56);
}
/* Left: primary card */
.ab-card {
  gap: 48px;
  padding: 64px;
  color: var(--color-white);
  border-radius: 16px;
  background: var(--color-primary);
  box-shadow: 0 20px 40px 0 rgba(35, 93, 108, 0.44);
  min-height: 100%;
}
.ab-card-title {
  color: var(--color-white);
  max-width: 450px;
}
.ab-card-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  line-height: 140%;
}
.ab-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ab-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.ab-checklist .check-wrap {
  /*icon wrapper*/
  display: flex;
  width: 24px;
  height: 24px;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
}
.ab-card-btn {
  align-self: flex-start;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--color-white);
  color: var(--color-primary-dark);
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.ab-card-btn:hover,
.ab-card-btn:focus,
.cta-btn:hover,
.cta-btn:focus {
  background: var(--color-primary-light-shade);
  color: var(--color-primary-dark);
}

/* Right: stats */

.ab-stats {
  gap: 40px;
  justify-content: center;
}
.ab-stats .ab-stats-title {
  color: var(--color-gray-dark);
}
.ab-stat {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--color-white);
  border-radius: 16px;
  border: 1px solid #e9ecef;
}
.ab-stat-icon {
  display: flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  color: var(--color-white);
  border-radius: 24px;
  background: var(--Secondary, #ff9e1f);
}
.ab-stat-number {
  color: var(--color-gray-dark);
  font-size: 40px;
  line-height: normal;
  font-style: normal;
  font-weight: 800;
}
.ab-stat-desc {
  margin: 8px 0 0;
  color: #495057;
}

/* ============================================================
   SECTION: "Hoja at your fingertips"
   ============================================================ */
.hoja-app-section {
  position: relative;
  overflow: hidden;
}
.hoja-app-section .container {
  position: relative;
  z-index: 1;
}
.hoja-app-circle {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hoja-app-bg-circle--1 {
  top: -14%;
  right: -8px;
  width: 400px;
  height: 400px;
}
.hoja-app-bg-circle--3 {
  bottom: -18%;
  right: -3%;
  width: 320px;
  height: 320px;
}
.hoja-app-header {
  margin-inline: auto;
}
.hoja-app-row {
  align-items: center;
  text-align: center;
  /* margin-top: 67px; */
}

/* Left column */
.hoja-app-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hoja-app-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-primary-light-shade);
  border-radius: 16px;
}
.hoja-app-feature-icon {
  display: flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);
  border-radius: 16px;
}
.hoja-app-feature-label p {
  color: var(--color-gray-dark);
  font-weight: 600;
}

.hoja-app-actions .btn {
  display: flex;
  padding: 16px 28px;
  justify-content: center;
  align-items: center;
}

/* Right column: phone mockups + badge */
.hoja-app-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hoja-app-badge {
  position: absolute;
  top: 21px;
  left: 55px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 89.286px;
  border: 0.298px solid #fff;
  background: rgba(0, 0, 0, 0.05);
  filter: blur(0.1488095223903656px);
}

.hoja-app-badge-dot {
  display: flex;
  width: 10px;
  height: 10px;
  flex-direction: column;
  align-items: flex-start;
  border-radius: 5px;
  background: #ff9e1f;
}

.hoja-app-badge-text {
  font-weight: 700;
  color: var(--color-primary);
}

.hoja-app-visual-img {
  width: 100%;
  aspect-ratio: 590 / 568;
  object-fit: cover;
  display: block;
  border-radius: 24px;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.08);
}

/* ============================================================
   SECTION: "All-in-One CRM Solutions"
   ============================================================ */

.solutions-section {
  font-family: var(--font-Raleway);
}

.solutions-title .text-accent {
  color: var(--color-secondary);
}
.solutions-header {
  margin-inline: auto;
}
.solutions-subtitle {
  color: var(--color-gray-dark);
}

/* Cards */
.solutions-grid {
  margin-top: 48px;
  row-gap: 22.134px;
}
.solution-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 22px;
  border-radius: 14.756px;
  background: #fff;
  box-shadow: 0 5.534px 14.756px -5.534px rgba(0, 0, 0, 0.08);
  animation: fadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.solution-card-icon {
  display: flex;
  width: 40.579px;
  height: 40.579px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12.912px;
  background: var(--color-primary);
  color: var(--color-white);
}
.solution-card-icon img {
  width: 20px;
}
.solution-card-title p {
  color: var(--color-primary-dark);

  font-weight: 700;
}
.solution-card-desc {
  height: 80px;
}
.solution-card-desc p {
  color: #495057;
}

/* CTA */
.solutions-cta {
  margin-top: 46px;
}

/* ============================================================
   SECTION: "Our Clients" (logo strip)
   ============================================================ */
.clients-section {
  position: relative;
  overflow: hidden;
  background: #f9fafb;
}
.clients-title {
  text-align: center;
}
.clientGrid {
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.clients-cards {
  /* position: relative;
  z-index: 1;
  --bs-gutter-x: 32px;
  --bs-gutter-y: 32px;
  margin: 34px auto 67px;
  align-items: center; */
}
.client-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 220px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.04);
}
.client-logo {
  height: 168px;
  display: block;
  object-fit: fill;
}

/* ============================================================
   SECTION: CTA banner ("Ready to take your business...")
   ============================================================ */
.cta-section {
  overflow-x: clip;
}

.cta-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 398px;
  padding: 56px 80px 56px 100px;
  background: var(--Gradient, linear-gradient(90deg, #4b8594 0%, #235d6c 100%));
}

.cta-row {
  align-items: center;
}

/* Content (heading + button) */
.cta-content {
  position: relative;
  z-index: 3;
  max-width: 838px;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: flex-start;
  gap: 20px; /* heading → button */
}
.cta-title {
  color: var(--color-white);
}
.cta-btn {
  display: flex;
  padding: 16px 28px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  background: var(--color-white);
  color: #0f2d26;
  font-size: 16px;
  font-weight: 700;
}

.cta-person {
  position: absolute;
  width: 520px;
  right: 80px;
  bottom: -100px;
  z-index: 2;
}

/* Decorations */
.cta-arrow {
  position: absolute;
  width: 44px;
  top: 18%;
  left: 83%;
  z-index: 1;
}
.cta-star {
  position: absolute;
  top: 19%;
  left: 68%;
  z-index: 1;
}
.cta-square {
  position: absolute;
  bottom: 42%;
  left: 71.5%;
  z-index: 1;
}
.cta-dots {
  position: absolute;
  top: 72%;
  right: 8%;
  transform: translateY(-50%);
  z-index: 1;
}

/* ============================================================
   SECTION: Newsletter signup
   ============================================================ */
.newsletter-section {
  position: relative;
  overflow: hidden;
  padding-block: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  background: #1c4554;
  color: var(--color-white);
}
.newsletter-dots {
  width: 100px;
}
.newsletter-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.newsletter-title {
  line-height: 44px; /* 122.222% */
  letter-spacing: -0.36px;
  color: var(--color-white);
}
.newsletter-desc {
  max-width: 540px;
  margin: 0;
  color: #94a3b8;
}
.newsletter-form {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 20px; /* 12px content gap + 20px = 32px below the description */
}
.newsletter-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  padding: 14px 16px 14px 20px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
.newsletter-input-icon {
  width: 18px;
}
.newsletter-input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--color-white);
  font-size: 15px;
  outline: none;
}
.newsletter-input::placeholder {
  color: #94a3b8;
}
.newsletter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-white);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.newsletter-btn-icon {
  width: 18px;
}

.newsletter-decorations {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  padding-inline: 5%;
  display: flex;
  justify-content: space-between;
  z-index: 0; /* behind the content */
  pointer-events: none;
}

/* ============================================================
   PAGE: WHY HOJA — hero
   ============================================================ */

.wh-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}
.wh-hero .btn-hero-solid,
.btn-hero-outline {
  padding: 11px 24px;
}
.wh-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.wh-badge {
  border-radius: 999px;
  border: 1px solid #3b8fa0;
  display: flex;
  padding: 6px 12px;
  align-items: flex-start;
}
.wh-badge span {
  color: #3b8fa0;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}
.wh-title {
  max-width: 500px;
}
.wh-title h2,
.wh-title h2 span {
  font-size: 48px;
  line-height: 100%;
  font-weight: 800;
}
.wh-title .text-accent {
  color: var(--color-secondary);
}
.wh-subtitle h4 {
  color: #6b7280;
  max-width: 620px;
  font-weight: 400;
}
.wh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Right column: "Hoja Intelligent Engine" card */
/* .wh-visual {
  display: flex;
  justify-content: center;
} */

.wh-engine-card {
  display: flex;
  /* max-width: 560px;
 */
  /* height: 100%; */
  height: 440px;
  overflow-y: scroll;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  background: #fff;
  box-shadow: 0 16px 32px 0 rgba(0, 0, 0, 0.04);
}

.wh-engine-head {
  width: 100%;
  align-self: stretch; /* full card width so ACTIVE sits on the right */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}

.wh-engine-title p {
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 18px
}
.wh-engine-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.wh-engine-status h6 {
  color: #3b8fa0;
  font-weight: 700;
  text-transform: uppercase;
}
.wh-tasks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  align-self: stretch;
}
.wh-task-row {
  display: flex;
  align-items: center;
  gap: 12px; /* icon → text */
  padding: 12px;
  align-self: stretch;
  border-radius: 12px;
  background: var(--light-bg);
}
.wh-task-icon {
  display: flex;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: rgba(35, 93, 108, 0.1);
  color: var(--color-primary);
  font-size: 16px;
}
.wh-task-icon.is-accent {
  color: var(--color-secondary);
  background: rgba(
    255,
    158,
    31,
    0.12
  ); /* light-orange tint, matches the original */
}
.wh-task-icon img {
  width: 18px;
  height: 18px;
}
.wh-task-body {
  flex: 1; /* fill the row so the badge keeps its gap */
  min-width: 0; /* let a long title wrap instead of crowding the badge */
  display: flex;
  flex-direction: column;
}
.wh-task-title {
  color: #111827;
  /* font-size: 14px; */
  font-weight: 600;
}

.wh-task-time {
  color: #6b7280;

  font-weight: 400;
  font-size: 12px;
}
.wh-task-status {
  margin-left: auto;
  display: flex;
  padding: 4px 8px;
  align-items: flex-start;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: #3b8fa0;

  font-size: 11px;
  font-weight: 700;
}
.wh-task-status.is-success,
.wh-task-status.is-active,
.wh-task-status.is-done {
  border-color: #e5e7eb;
}

/* ============================================================
   Breadcrumb (reusable — works on any page)
   ============================================================ */
.breadcrumb-bar {
  padding-top: 30px;
}
.breadcrumb-bar .breadcrumb {
  margin: 0;
  font-size: 14px;
}
.breadcrumb-bar .breadcrumb-item a {
  color: var(--color-gray-dark);
  text-decoration: none;
  transition: color 0.15s ease;
  text-decoration: underline;
  text-transform: capitalize;
}
.breadcrumb-bar .breadcrumb-item a:hover,
.breadcrumb-bar .breadcrumb-item a:focus {
  color: var(--color-secondary);
}
.breadcrumb-bar .breadcrumb-item.active {
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb-bar .breadcrumb-item + .breadcrumb-item::before {
  content: ">";
  color: var(--color-gray-dark);
}

/* ============================================================
   PAGE: WHY HOJA — value cards ("A complete platform...")
   ============================================================ */
.value-section {
  background: var(--light-bg);
}
.value-header {
  max-width: 800px;
  margin-inline: auto;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 95px;
}

.value-card {
  display: flex;
  flex-direction: column;
  gap: 16px; /* icon → title → desc */
  padding: 32px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.value-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.value-card-icon {
  display: flex;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: rgba(59, 143, 160, 0.1);
}
.value-card-icon img {
  width: 24px;
  height: 24px;
}
.value-card-badge {
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(255, 158, 31, 0.13);
  color: var(--color-secondary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.value-card-title h4 {
  color: var(--color-primary-dark);
  font-weight: 700;
  color: #111827;
}
.value-card-desc span {
  color: #6b7280;
  font-size: 15px;
}

/* ============================================================
   PAGE: WHY HOJA — metrics ("Engineered for high-performing…")
   ============================================================ */

.metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
  text-align: center;
}
.matricBorder:not(:nth-child(3n + 3)) .metric::after {
  content: "";
  width: 1px;
  height: 120px;
  position: absolute;
  right: 0;
  background: #e5e7eb;
}
.matricBorder:nth-child(3n + 1) .metric {
  padding-inline-end: 48px;
}
.matricBorder:nth-child(3n + 2) .metric {
  padding: 0 48px;
}
.matricBorder:nth-child(3n + 3) .metric {
  padding-inline-start: 48px;
}
.metric-number h2 {
  text-align: center;
  color: var(--color-secondary);
  font-size: 64px;
  line-height: normal;
  font-weight: 800;
}
.metric-label h5 {
  color: var(--color-primary-dark);
}
.metric-desc {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}

/* ============================================================
   PAGE: WHY HOJA — features ("All in one platform")
   ============================================================ */
.features-section {
  background: var(--color-primary-light-shade);
}
.features-header {
  max-width: 640px;
  margin-inline: auto;
}
.features-header p {
  color: var(--color-gray-dark);
}
.features-title .text-accent {
  color: var(--color-secondary);
}
.features-subtitle {
  margin: 0;
  color: var(--color-gray-dark);
  font-size: 16px;
  line-height: 1.6;
}

/* Tabs */
.features-tabs {
  /* margin-top: 48px; */
  display: flex;
  flex-wrap: wrap;
  overflow-x: scroll;

  /* justify-content: center; */
  gap: 32px;
}

.features-tab .nav-link {
  background-color: unset !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0;
  padding-bottom: 8px;
  border-radius: 2px;
  background: transparent;
  color: #6b7280 !important;
  position: relative;
  font-size: 16px;
  white-space: nowrap;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
.features-tab .nav-link:after {
  content: "";
  min-width: 40px;
  height: 3px;
  background-color: #e5e7eb;
}
.features-tab .nav-link:hover,
.features-tab .nav-link.active {
  background-color: unset !important;
  color: #111827 !important;
}
.features-tab .nav-link:hover:after,
.features-tab .nav-link.active:after {
  width: 100%; /* span the label width */
  max-width: 80px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: background 0.15s ease;
  max-width: 80px;
}

/* Hover: light the underline up too (active tab already teal) */
.features-tab:hover .rectangle,
.features-tab .rectangle.is-active {
  background: var(--color-primary); /* active / hovered underline */
}

/* Content: copy + dashboard */
/* .features-content {
  margin-top: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 80px;
  align-items: center;
} */

.features-content-title h3 {
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  color: var(--Gray-Dark, #434343);
}
.features-content-desc p {
  color: #6b7280;
}
.features-checklist {
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.features-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-primary-dark);
  font-size: 15px;
  font-weight: 500;
}
.features-checklist i {
  flex-shrink: 0;
  color: #22c55e;
  font-size: 20px;
}
.features-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.features-actions .btn {
  display: flex;
  padding: 14px 24px;
  align-items: flex-start;
}

.features-actions .btn-explore {
  border-radius: 40px;
  background: var(--color-primary);
}

.features-actions .btn-watch-demo {
  border-radius: 33px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: #111827;
  font-size: 16px;
  font-weight: 600;
}

.features-actions .btn-watch-demo:hover,
.features-actions .btn-watch-demo:focus {
  border-radius: 33px;
  background: var(--color-primary);
  color: var(--color-white);
}

.features-media {
  display: flex;
  justify-content: center;
}
.features-img {
  width: 100%;
  max-width: 640px; /* was min-width:640 → overflowed its column */
  object-fit: contain;
  border-radius: 9px;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
}

/* ============================================================
   SECTION: PROBLEM / SOLUTION
   ============================================================ */
.problem-solution-section {
  background: var(--color-white);
}

.problem-solution-header {
  max-width: 800px;
  margin-inline: auto;
  margin-bottom: 50px;
}
.problem-solution-header p {
  color: var(--color-gray-dark);
  max-width: 640px;
  margin-inline: auto;
}

.problem-solution-title {
  color: var(--color-primary);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 110%;
}

.problem-solution-subtitle {
  margin-top: 24px;
  color: var(--color-gray-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.problem-solution-grid {
  gap: 60px;
}

.problem-column,
.solution-column {
  flex: 1 1 0;
  min-width: 0;
}

.problem-column-eyebrow,
.solution-column-eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #4b8594;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.problem-column-eyebrow {
  color: var(--color-secondary);
}

.problem-column-title,
.solution-column-title {
  margin-bottom: 24px;
  color: var(--color-gray-dark);
  font-size: clamp(24px, 2.5vw, 28px);
  font-weight: 800;
}

/* Left cards */
.problem-card {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid var(--Gray, #6c757d);
  background: #f1f5f7;
}

.problem-card-header,
.solution-flow-card-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.problem-card-title-group,
.solution-flow-card-title-group {
  min-width: 0;
}

.problem-card-icon,
.solution-flow-card-icon {
  display: flex;
  width: 36px;
  height: 36px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  background: var(--Gradient, linear-gradient(90deg, #4b8594 0%, #235d6c 100%));
  color: var(--color-white);
}

.problem-card-title h4,
.problem-card-title h5,
.solution-flow-card-title h4 {
  color: var(--color-gray-dark);
  font-weight: 700;
  line-height: normal;
}

.problem-card-desc span {
  color: var(--color-gray-dark);
}
.problem-card-status,
.solution-flow-card-status {
  flex-shrink: 0;
  color: var(--color-gray-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}

.problem-card-desc p {
  color: var(--color-gray-dark);
}

/* Bridge */
.bridge-column {
  position: relative;
  width: 64px;
  flex: 0 0 64px;
  /* top: 30px; */
}

.bridge-column-line {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  min-height: 320px;
  background: linear-gradient(
    180deg,
    rgba(75, 133, 148, 0.19) 0%,
    #235d6c 100%
  );
}

.bridge-column-arrow {
  position: relative;
  top: 75%;
  right: 50%;
  transform: translate(50%, -50%);
  display: flex;
  padding: 8px;
  align-items: center;
  justify-content: center;
  position: absolute;
  display: flex;
  width: 40px;
  height: 40px;
  border-radius: 24px;
  border: 1px solid #2e5e6e;
  background: var(--color-primary-dark);
  box-shadow: 0 0 16px 0 rgba(75, 133, 148, 0.31);
  /* color: var(--color-white);
  font-size: 24px; */
}
.bridge-column-arrow img {
  width: 24px;
  margin: auto;
}

/* Right cards */
.solution-flow-card {
  display: flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
  border-radius: 12px;
  border: 1px solid #2e5e6e;
  background: var(--color-primary-dark);
  box-shadow: 0 8px 24px 0 rgba(35, 93, 108, 0.13);
  padding: 24px;
}

.solution-flow-card-title h4 {
  font-size: 18px;
  color: var(--color-white);
}

.solution-flow-card-status {
  color: #B9DFE8;
}

.solution-flow-card-desc span {
  color: #f1f5f7;
}

/* ============================================================
   SECTION: HOW IT WORKS
   ============================================================ */
.how-it-works-section {
  min-height: 487px;
  gap: 48px;
  background: var(--color-primary-light-shade);
  overflow: hidden;
}

.how-it-works-header {
  max-width: 760px;
  margin-inline: auto;
}
.how-it-works-header p {
    color: #6b7280;
}
.steps-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: stretch;
}

.step-card {
  flex: 0 1 calc((100% - 48px) / 3);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 24px;
  background: var(--color-white);
  box-shadow: 0 10px 28px -18px rgba(15, 23, 42, 0.3);
  gap: 16px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.04);
}

.step-card-number {
  display: flex;
  flex-direction: column;
  width: 40px;
  height: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: linear-gradient(
    135deg,
    rgba(255, 158, 31, 0.15) 0%,
    rgba(244, 212, 203, 0.24) 35.36%,
    rgba(255, 255, 255, 0.92) 70.71%
  );
  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.15) inset,
    0 4px 12px 0 rgba(255, 128, 51, 0.21);
  backdrop-filter: blur(8px);
  color: var(--color-primary);
  font-size: 16px;
  font-weight: 800;
  line-height: normal;
}

.step-card-icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  color: var(--color-primary);
  font-size: 20px;
}

.step-card-title h4 {
  color: #111827;
  font-weight: 700;
  line-height: 120%;
}

.step-card-desc span {
  color: #6b7280;
}

/* ============================================================
   SECTION: INTEGRATIONS / CHANNELS
   ============================================================ */
.integrations-header {
  max-width: 920px;
  margin-inline: auto;
  margin-bottom: 48px;
}

.integrations-title {
  color: var(--color-primary);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  line-height: 110%;
}

.integrations-subtitle {
  margin-top: 16px;
  color: #6b7280;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.integration-cards {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  justify-content: space-between;
  row-gap: 24px;
  column-gap: 12px;
  grid-template-rows: repeat(1, fit-content(100%));
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-flow: row;
}

.integration-card {
  max-width: 240px;
  display: flex;
  padding: 24px;
  flex-direction: column;
  grid-row: span 1;
  grid-column: span 1;
  border-radius: 24px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.05);
}

.integration-card-icon {
  margin-bottom: 16px;
  display: flex;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  border-radius: 24px;
  color: var(--color-white);
  font-size: 22px;
}

.integration-card-icon-whatsapp {
  background: #25d366;
}

.integration-card-icon-facebook {
  background: #1877f2;
}

.integration-card-icon-instagram {
  background: linear-gradient(90deg, #e1306c 0%, #833ab4 100%);
}

.integration-card-icon-email {
  background: var(--color-primary);
}

.integration-card-icon-calls {
  background: var(--color-secondary);
}

.integration-card-title {
  margin-bottom: 8px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 120%;
}

.integration-card-desc {
  color: #6b7280;
  font-size: 14px;
  font-weight: 400;
  line-height: 150%;
}

/* ============================================================
   SECTION: TESTIMONIAL
   ============================================================ */
.testimonial-section {
  background: var(--color-primary-light-shade);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.testimonial-frame {
  display: flex;
  max-width: 820px;
  flex-direction: column;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

.testimonial-quote-icon {
  display: inline-flex;
  color: #3b8fa0;
  font-size: 40px;
  line-height: 1;
}

.testimonial-quote {
  color: var(--color-primary-dark);
  text-align: center;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
}
.testimonial-author-img {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
}

.testimonial-author-info {
  display: flex;
  flex-direction: column;
}

.testimonial-author-name {
  color: #111827;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
}

.testimonial-author-role {
  color: #6b7280;
  font-size: 13px;
  font-weight: 400;
  line-height: 130%;
}

/* ============================================================
   SECTION: CTA STRIP
   ============================================================ */
.cta-strip-section {
  background: var(--Gradient, linear-gradient(90deg, #4b8594 0%, #235d6c 100%));
}

.cta-strip {
  padding-block: 28px;
}

.cta-strip-title h2 {
  color: var(--color-white);
}

.cta-strip-subtitle P {
  color: #e5e7eb;
  max-width: 600px;
}

.cta-strip-btn {
  display: flex;
  padding: 16px 24px;
  justify-content: center;
  align-items: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.btn-get-demo {
  border: 1px solid var(--color-secondary);
  background: var(--color-secondary);
  color: var(--color-white);
}

.btn-get-demo:hover,
.btn-get-demo:focus {
  border-color: var(--color-secondary-dark);
  background: var(--color-secondary-dark);
  color: var(--color-white);
}

.btn-try-free {
  border: 1px solid var(--color-white);
  background: var(--color-white);
  color: #111827;
}

.btn-try-free:hover,
.btn-try-free:focus {
  border-color: var(--color-primary-light-shade);
  background: var(--color-primary-light-shade);
  color: #111827;
}

/* ============================================================
   PRICING PAGE
   ============================================================ */

/* breadcrumb section */
.pricing-breadcrumb {
  background: var(--color-white);
}

/* hero section */
.pricing-hero-section {
  padding-block: 40px 0;
  background: var(--color-white);
}

.pricing-header {
  max-width: 860px;
}

.pricing-header p {
  color: #6B7280;
}

.pricing-toggle {
  padding: 4px;
  display: flex;
  gap: 4px;
  border-radius: 999px;
  background: var(--light-bg);
  border: 1px solid var(--color-border);
}

.pricing-toggle-btn {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  color: #111827;
  font-size: 14px;
  border-radius: 999px !important;
  border: 1px solid var(--color-border) !important;
  background: #fff;
  font-family: var(--font-Geist) !important;
  font-weight: 600;
}

.pricing-toggle-btn.active {
  background: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

/* pricing section*/
.pricing-section {
  padding-block: 80px;
}

/* .pricing-cards {
  margin-inline: auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 24px;
} */

.pricing-card {
  /* width: 384px;
  min-height: 466px; */
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 20px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.05);
  gap: 20px;
}

.pricing-card-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-card-featured {
  border-color: var(--color-secondary);
  box-shadow: 0 24px 48px -28px rgba(255, 158, 31, 0.55);
}

.pricing-card-title {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
}

.pricing-card-badge {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.1);
  color: var(--color-secondary);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.pricing-card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pricing-card-amount {
  color: #111827;
  font-size: 40px;
  font-weight: 800;
  line-height: 1;
}

.pricing-card-period,
.pricing-card-user,
.pricing-card-desc {
  color: #6b7280;
  font-size: 14px;
}

.pricing-features {
  padding: 0;
  list-style: none;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #111827;
  font-size: 14px;
}

.pricing-features i {
  color: var(--color-secondary);
  font-size: 18px;
}

.pricing-card-btn {
  margin-top: auto;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
}

/* ============================================================
   CUSTOM PLAN BANNER
   ============================================================ */
.custom-plan-section {
  /* padding-block: 0 80px; */
  /* background: var(--color-white); */
}

.custom-plan-banner {
  margin-inline: auto;
  padding: 24px 40px;
  border-radius: 12px;
  background: #faf5e8;
}

.custom-plan-title,
.custom-plan-title span {
  color: #111827;
  font-size: 22px;
  font-weight: 800;
  line-height: normal;
}

.custom-plan-title span {
  color: var(--color-secondary);
}

.custom-plan-subtitle {
  margin-top: 8px;
  color: #6b7280;
  font-size: 16px;
  font-weight: 400;
}

.custom-plan-subtitle a {
  color: var(--color-secondary);
  font-weight: 700;
  text-decoration: none;
}

/* ============================================================
   FEATURE COMPARISON
   ============================================================ */
.comparison-section {
  background: var(--color-white);
}

.comparison-title h2 {
  color: var(--color-gray-dark);
  font-size: 32px;
  font-weight: 700;
  line-height: 120%;
}
.comparison-title p,
.comparison-title span {
  color: #6B7280;
}
.comparison-subtitle p {
  /* margin-top: 8px; */
  color: #6b7280;
  /* font-size: 15px;
  line-height: 150%; */
}

.comparison-table-wrap {
  display: flex;
  /* min-height: 700px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; */
  /* border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-white); */
  margin-inline: 80px;
}

.comparison-table {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow-x: scroll;
}
.wh-engine-card ::-webkit-scrollbar,
.breadcrumb::-webkit-scrollbar,
.features-tabs ::-webkit-scrollbar,
.comparison-table::-webkit-scrollbar,
.leads-tabs::-webkit-scrollbar,
.blogFilter::-webkit-scrollbar {
  display: none;
}

.wh-engine-card,
.breadcrumb,
.features-tabs,
.comparison-table,
.leads-tabs,
.blogfilter {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
/* 
.comparison-col-feature {
  width: 34%;
}

.comparison-col-plan {
  width: auto;
} */

.comparison-table th,
.comparison-table td {
  padding: 16px;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  color: #111827;
  font-size: 14px;
  vertical-align: middle;
  font-weight: 400;
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}
.comparison-table tbody tr td:first-child {
  text-align: start;
}
.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table thead th {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.comparison-table thead th:first-child {
  color: #6b7280;
  text-align: left;
  text-transform: uppercase;
}

.comparison-table tbody th {
  /* width: 34%; */
  font-weight: 400;
  text-align: left;
  background: var(--color-white);
}

.comparison-table tbody td:not(:first-child),
.comparison-table th:not(:first-child) {
  /* width: 22%; */
  text-align: center !important;
}
.comparison-table th:not(:first-child) {
  background: #f9fafb;
}
.comparison-table th:not(:first-child) span {
  font-weight: 700;
}
.comparison-table .fa-check {
  color: var(--color-secondary);
  font-size: 18px;
}

.comparison-table .fa-xmark {
  color: #9ca3af;
  font-size: 18px;
}

.dt-column-title {
  font-size: 13px;
  font-weight: 700;
}
/* ============================================================
   PRICING FAQ
   ============================================================ */
.pricing-faq-section {
  background: var(--color-white);
}

.pricing-faq-title {
  color: var(--color-gray-dark);
  font-size: 32px;
  font-weight: 800;
  line-height: 120%;
}

.pricing-faq-subtitle {
  margin-top: 8px;
  color: #6b7280;
  font-size: 15px;
  line-height: 150%;
}

.pricing-faq-item {
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-faq-icon {
  display: flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 20px;
}

.pricing-faq-question-title p {
  color: #111827;
  /* font-family: var(--font-Outfit); */
  /* font-size: 16px; */
  font-weight: 700;
  /* line-height: 120%; */
}

.pricing-faq-answer span {
  /* margin-top: 12px; */
  color: var(--Gray, #6C757D);
  /* font-size: 14px;
  line-height: 150%; */
}

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

.pricing-cta {
  display: flex;
  /* max-width: 1240px;
  min-height: 133px; */
  padding: 32px;
  justify-content: space-between;
  align-items: center;
  margin-inline: auto;
  padding: 32px;
  border-radius: 24px;
  background: var(--color-primary-dark);
  /* margin-bottom: 80px; */
}

.pricing-cta-subtitle p {
  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;
  line-height: 150%;
  /* font-family: var(--font-Geist); */
}

.pricing-cta-btn {
  display: flex;
  padding: 14px 22px;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  background: var(--Secondary, #ff9e1f);
  color: var(--color-white);

  font-size: 15px;
  font-weight: 700;
}

.pricing-cta-btn:hover,
.pricing-cta-btn:focus {
  background: var(--color-secondary-dark);
  color: var(--color-white);
}

/* ============================================================
   PAGE: PARTNERS
   ============================================================ */
.partners-section {
  background: #fafbfb;
  min-height: 100vh;
}

.partners-header {
  max-width: 820px;
}

/* .partners-title {
  color: var(--color-primary-dark);
}

.partners-subtitle {
  color: var(--color-gray-dark);
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
} */

.rowGap-40 {
  row-gap: 40px;
}

.partner-card {
  display: flex;
  padding: 40px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  /* flex: 1 0 0;
  align-self: stretch; */
  border-radius: 24px;
  border: 1px solid var(--color-border);

  box-shadow: 0 8px 24px 0 rgba(27, 61, 43, 0.04);
}
.partner-card H3 {
  color: #154452;
}

.mt-50 {
  margin-top: 50px;
}
.partner-card-icon {
  display: flex;
  height: 140px;
  padding: 35px;
  justify-content: center;
  align-items: center;
  border-radius: 35px;
  background: #f4f7f6;
}

.contactForm textarea {
  min-height: 140px;
}

.partner-card-icon img {
  height: 100%;
}
.partner-card-title {
  color: var(--color-primary-dark);
  font-size: 24px;
  font-weight: 800;
}

.partner-card-desc {
  height: 100px;
}

.partner-card-link {
  color: #ff9e1f;
  font-size: 15px;
  text-align: center;
  font-weight: 700;
  text-decoration: none;
  line-height: normal;
  margin-top: 12px;
}

.partner-card-link i {
  color: #ff9e1f;
}
.partner-card-link:hover,
.partner-card-link:focus {
  color: var(--color-secondary-dark);
}

/* ============================================================
   SEARCH PAGE
   ============================================================ */
.search-page-section {
  display: flex;
  align-items: center;
  background: var(--color-white);
}

/* .search-page-content {
    max-width: 820px;
    margin-inline: auto;
} */

.search-page-title {
  color: var(--color-primary);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 800;
  line-height: 110%;
}
.searchBox {
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.04);
}

.searchBox .fa-arrow-right {
  color: #9CA3AF;
}
/* fjeirifho */
/* .search-page-form {
  width: 100%;
  max-width: 640px;
  margin-top: 40px;
} */

/* .search-page-input-wrap {
  display: flex;
  max-width: 680px;
  height: 60px;
  padding: 0 20px;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
} */
/* 



/* .search-page-input::placeholder {
  color: #9ca3af;
} */

/* .popular-searches {
  margin-top: 40px;
} */
input::placeholder {
  color: #9ca3af;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
input:focus {
  box-shadow: unset !important;
  border-color: var(--color-secondary) !important;
}
.search-page-input {
  padding: 17px 20px;
  padding-inline-start: 45px;
  border-radius: 999px;
  border: 1px solid #d1d5db;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
}
.search-page-form i {
  color: #9ca3af;
  font-size: 18px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

.popular-searches-title span,
.numberOfSearch span {
  color: #6b7280;
  font-weight: 500;
}
.page-404-section h2 {
  font-weight: 800;
}

.popular-searches-list {
  gap: 10px;
}

.popular-search-tag {
  display: flex;
  padding: 8px 18px;
  align-items: flex-start;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.popular-search-tag:hover,
.popular-search-tag:focus {
  background: var(--color-primary-light-shade);
  color: var(--color-primary);
}

/* ============================================================
   SEARCH NO RESULTS
   ============================================================ */
/* .search-no-results-section {
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
  background: var(--color-white);
}

.search-no-results-section {
  width: 100%;
}

.search-no-results-content {
  max-width: 820px;
  margin-inline: auto;
}

.search-no-results-content .search-page-form {
  width: 100%;
  max-width: 640px;
  margin: 0;
} */

.empty-state-icon {
  display: flex;
  width: 120px;
  height: 120px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: var(--color-secondary);
  font-size: 72px;
}

/* .empty-state-title {
  color: var(--color-gray-dark);
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
} */
.empty-state-title h2 {
  color: #111827;
  font-size: 32px;
}
.empty-state-desc {
  color: #6b7280;
  /* font-size: 16px;
  line-height: 150%; */
}

.empty-state-actions {
  gap: 12px;
}

.empty-state-btn {
  text-decoration: none;
  display: flex;
  /* min-height: 40px; */
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  align-items: center;
}

/* ============================================================
   PAGE: 404
   ============================================================ */
.page-404-section {
  display: flex;
  align-items: center;
}
.main-404-block {
  display: flex;
  justify-content: space-between;
  gap: 80px;
}

.content-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

.error-code-badge {
  display: flex;
  padding: 6px 12px;
  align-items: flex-start;
  color: #ff9e1f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: undefined;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid #ff9e1f;
  background: rgba(255, 158, 31, 0.12);
}

.page-404-title {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.page-404-title h1 {
  color: #154452;
}
.page-404-title h2 {
  color: #235D6C;
}
.page-404-desc {
  color: var(--color-gray-dark);
  font-size: 16px;
  max-width: 580px;
}

.page-404-actions {
  gap: 16px;
  flex-wrap: wrap;
}

.page-404-btn {
  padding: 16px 32px;
  justify-content: center;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  gap: 10px;
}

.page-404-btn-secondary {
  border: 1px solid var(--color-primary);
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 700;
}

.page-404-btn-secondary:hover,
.page-404-btn-secondary:focus {
  background: var(--color-primary);
  color: var(--color-white);
}

/* Illustration */
/* .illustration-container {
  flex: 1 1 0;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
} */

.robot-assembly {
  position: relative;
  /* width: min(520px, 100%);
  min-height: 460px; */
}

.robot-image {
  /* left: 43%;
  top: 63%;
  width: 320px;
  max-width: 72%; */
  /* height: 100%; */
  /* transform: translate(-50%, -50%); */
  /* display: block; */
  /* z-index: 2; */
  /* animation: robotBreatheGlow 3s ease-in-out infinite; */
}
.rowGap {
  row-gap: 30px;
}

.robot-alert {
  position: absolute;
  left: 55%;
  top: 80%;
  min-width: 120px;
  max-height: 80px;
  z-index: 1;
}

.robot-label {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 30px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
}

.robot-label span {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-secondary);
}

.robot-label-status {
  left: 0;
  top: 7%;
  background: var(--color-primary-dark);
}

.robot-label-loop {
  right: 0;
  top: 10%;
  background: var(--color-secondary);
}

.robot-label-loop span {
  background: var(--color-white);
}

.robot-label-critical {
  right: 1%;
  bottom: 4%;
  background: #2a6c7d;
}

.bs-80 {
  --bs-gutter-x: 80px;
}
.bs-64 {
  --bs-gutter-x: 64px;
}
.bs-40 {
  --bs-gutter-x: 40px;
}
.rowGap-24 {
  row-gap: 24px;
}

.serachTitle {
  height: 40px;
}
.serachTitle p,
.searchText span,
.partner-card-desc p,
.solution-card-desc p,
.extenalText span,
.bannerBlogSection .blogTitle h4,
.bannerBlogSection .blogText span {
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.partner-card-desc p {
  -webkit-line-clamp: 4;
  color: #434343;
}
.solution-card-desc p,
.extenalText span,
.bannerBlogSection .blogText span {
  -webkit-line-clamp: 3;
}
.searchText,
.extenalText {
  height: 50px;
}

.searchPageName {
  border-radius: 999px;
  background: #f3f4f6;
  display: flex;
  padding: 6px 12px;
  align-items: flex-start;
}
.searchPageName h6 {
  color: #374151;
  font-weight: 700;
  text-transform: uppercase;
}
.searchText span {
  color: #6b7280;
  line-height: 142.857%;
}
.serachTitle p {
  color: #111827;
  font-weight: 700;
}
.searchBox i {
  color: #374151;
}
.searchBox a {
  text-decoration: none;
}

.page-btn {
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  width: 40px;
  height: 40px;
  text-decoration: none;
  color: #374151;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  justify-content: center;
  align-items: center;
}
.page-btn.active {
  color: #fff;
  background: #235d6c;
}

.page-btn.disabled {
  cursor: none;
  color: rgba(156, 163, 175, 0.32);
}

.contact-header p {
  color: #6B7280;
}
.contactForm {
  /* height: 100%; */
  padding: 32px;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
}
.contactForm h5 {
  color: #111827;
}
.contactForm input:not([type="submit"]),
.contactForm textarea {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  padding: 16px;
  color: #9ca3af;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.contactIcon {
  display: flex;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  background: var(--Gradient, linear-gradient(90deg, #4b8594 0%, #235d6c 100%));
}
.contactIcon img {
  max-width: 20px;
}
.contactForm label {
  color: #111827;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.map iframe {
  height: 136px;
  border-radius: 7px;
  width: 100%;
  margin-bottom: 11px;
}
.contactDataBox h6 {
  color: #94a3b8;
  font-weight: 700;
  text-transform: uppercase;
}
.contactDataBox span,
.contactDataBox a {
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  line-height: 146.667%;
  color: var(--color-primary-dark);
}

.linkBox {
  padding: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-secondary);
  text-decoration: none;
}

.mt-21 {
  margin-top: 21px;
}

.contactDetails {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  /* height: 100%; */
  padding: 15px 24px 24px 24px;
}
.social-icon {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  width: 40px;
  height: 40px;
  padding: 10px;
  justify-content: center;
  align-items: center;
}

/* ============================================================
   SECTION: ALL CHANNELS, ONE PLATFORM
   ============================================================ */
   .channels-header p {
    max-width: 760px;
    color: #6B7280;
    margin-inline: auto;
   }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeDown {
  0% {
    opacity: 0;
    transform: translateY(-24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadePop {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes robotBreatheGlow {
  0% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 4px 10px rgba(255, 145, 0, 0.15));
  }
  50% {
    transform: translate(-50%, -50%) scale(1.03); /* Tiny scale up */
    filter: drop-shadow(0 8px 25px rgba(255, 145, 0, 0.4));
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    filter: drop-shadow(0 4px 10px rgba(255, 145, 0, 0.15));
  }
}

@keyframes screenFlicker {
  0%,
  100% {
    opacity: 1;
  }
  41% {
    opacity: 1;
  }
  42% {
    opacity: 0.8;
    transform: skewX(-5deg);
  }
  43% {
    opacity: 1;
    transform: skewX(0);
  }
  47% {
    opacity: 1;
  }
  48% {
    opacity: 0.9;
  }
  49% {
    opacity: 1;
  }
}

.hero-content {
  animation: fadeUp 0.7s ease both;
}

.value-card {
  animation: fadeUp 0.6s ease both;
}
.value-card:nth-child(2) {
  animation-delay: 0.1s;
}
.value-card:nth-child(3) {
  animation-delay: 0.2s;
}
.value-card:nth-child(4) {
  animation-delay: 0.3s;
}

.leads-tab i {
  transition: transform 0.5s ease;
}
.leads-tab:hover i {
  transform: scale(1.5);
}

@keyframes channelsGlow {
  0%,
  100% {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1),
      0 0 0 0 rgba(255, 158, 31, 0.35);
  }
  50% {
    box-shadow: 0 8px 24px rgba(17, 24, 39, 0.1),
      0 0 0 14px rgba(255, 158, 31, 0);
  }
}

/* Left-side icons carry a positive --travel (drift right, toward the hub);
   right-side icons carry a negative --travel (drift left, toward the hub).
   Both fade/shrink in on their home slot, cruise toward the hub at full
   size, then shrink + fade as they slide in underneath it before looping. */
@keyframes channelsFlowIn {
  0% {
    left: 0;
    opacity: 0;
    transform: scale(0.85);
  }
  8% {
    left: 0;
    opacity: 1;
    transform: scale(1);
  }
  45% {
    left: calc(var(--travel, 0%) * 0.45);
    opacity: 1;
    transform: scale(1);
  }
  75% {
    left: calc(var(--travel, 0%) * 0.8);
    opacity: 0.35;
    transform: scale(0.55);
  }
  100% {
    left: var(--travel, 0%);
    opacity: 0;
    transform: scale(0.15);
  }
}
.site-header .navbar-toggler:focus {
  box-shadow: unset;
  outline: unset;
}

/* ============================================================
   SECTION: "Integrations orbit" (animated logo hub)
   Inspired by knowledgecity.com's integration showcase — logos
   travel along two rails and feed into a central hub icon.
   ============================================================ */

.int-section {
  position: relative;
  overflow: hidden;
}

.int-subtitle {
  color: var(--color-gray-text);
  max-width: 620px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.6;
}

.int-stage {
  position: relative;
  /* height: 200px; */
  /* max-width: 960px; */
  margin: 50px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dashed rails feeding into the hub from either side */
.int-rail {
  position: absolute;
  top: 50%;
  width: calc(50% - 68px);
  border-top: 2px solid var(--color-border);
  transform: translateY(-50%);
}
.int-rail-left {
  left: 0;
}
.int-rail-right {
  right: 0;
}

/* Central hub */
.int-hub {
  position: relative;
  z-index: 5;
  width: 124px;
  height: 124px;
  background: var(--color-white);
  border-radius: 17.714px;
  border: 2.214px solid #ff9e1f;
  background: #fff;
  box-shadow: 0 27.679px 55.357px -13.286px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  padding: 2.214px;

  justify-content: center;
  animation: int-hub-pulse 2s ease-in-out infinite;
}
.int-hub::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: inherit;
  /* border: 1px solid var(--color-primary); */
  opacity: 0.25;
  animation: int-hub-ring 2s ease-out infinite;
}
.int-hub-logo {
  width: 52px;
  height: auto;
  display: block;
}

@keyframes int-hub-pulse {
  0%,
  100% {
    box-shadow: 0 27.679px 55.357px -13.286px rgba(0, 0, 0, 0.25);
  }
  50% {
    box-shadow: 0 27.679px 55.357px -13.286px rgba(0, 0, 0, 0);
  }
}
@keyframes int-hub-ring {
  0% {
    transform: scale(0.9);
    opacity: 0.35;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}

/* Traveling logo badges */
.int-logo {
  position: absolute;
  top: 50%;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 27.679px 55.357px -13.286px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation-duration: 24s;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity, left, right;
}
.int-logo img {
  width: 28px;
  height: 28px;
}

.int-logo[data-rail="right"] {
  right: 0%;
  animation-name: int-travel-right;
}
.int-logo[data-rail="left"] {
  left: 0;
  animation-name: int-travel-left;
}

.bannerBlog {
  padding: 64px;
  min-height: 400px;
  border-radius: 24px;
}
.backImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.bannerContent {
  max-width: 600px;
}
.bannerContent h1 {
  font-size: 56px;
  font-weight: 700;
  line-height: 110%;
}
.bannerContent h1,
.bannerContent h4 {
  color: #fff;
}
.bannerContent h4 {
  font-weight: 400;
  line-height: 160%;
}
.filterItem {
  padding: 10px 24px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  text-decoration: none;
}
.filterItem p {
  color: #111827;
  font-size: 14px;
  font-weight: 600;
  text-transform: capitalize;
}
.filterItem:hover {
  opacity: 0.6;
}
.filterItem.active {
  background: #235d6c;
}
.filterItem.active p {
  color: #fff;
}
@keyframes int-travel-right {
  0% {
    right: 0%;
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  8% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  46% {
    right: calc(50% - 86px);
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  54% {
    right: calc(50% - 58px);
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  100% {
    right: calc(50% - 58px);
    opacity: 0;
  }
}
@keyframes int-travel-left {
  0% {
    left: 0%;
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  8% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  46% {
    left: calc(50% - 86px);
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  54% {
    left: calc(50% - 58px);
    opacity: 0;
    transform: translateY(-50%) scale(0.5);
  }
  100% {
    left: calc(50% - 58px);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  /* .int-stage {
    height: 200px;
  } */
  .int-hub {
    width: 72px;
    height: 72px;
    border-radius: 20px;
  }
  .int-hub-logo {
    width: 38px;
  }
  .int-logo {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .int-logo img {
    width: 20px;
    height: 20px;
  }
  .int-rail {
    width: calc(50% - 50px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .int-hub,
  .int-hub::before,
  .int-logo {
    animation: none;
  }
  .int-logo[data-rail="right"],
  .int-logo[data-rail="left"] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  .int-logo[data-rail="right"] {
    right: calc(50% - 100px);
  }
  .int-logo[data-rail="left"] {
    left: calc(50% - 100px);
  }
}

.bs-32 {
  --bs-gutter-x: 32px;
}

.rowGap-32 {
  row-gap: 32px;
}

.blogCard {
  padding: 24px;
  border-radius: 0 0 20px 20px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.04);
}

.blogImage {
  height: 200px;
  border-radius: 20px 20px 0 0;
  border: 1px solid #e5e7eb;
}
.blogCard a {
  text-decoration: none;
}

.blogTitle h4 {
  color: #111827;
  font-weight: 600;
}
.bannerBlogSection .blogTitle { height: 56px; } 
.bannerBlogSection .blogText  { height: 68px; } 

.blogText span {
  color: #6b7280;
  font-size: 15px;
}
.readMore {
  text-decoration: none;
}
.readMore span {
  color: #ff9e1f;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  font-size: 14px;
}

.externalResources .readMore img { 
  margin-inline-start: 8px; 
}
.dateBlog h6 {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
}
.externalTitle h2 {
  color: #111827;
  font-size: 32px;
  font-weight: 700;
}
.externalTitle h5 {
  font-weight: 400;
  color: var(--color-gray-text);
}
.extenalCard {
  border-radius: 20px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  padding: 32px;
}

.extenalIcon {
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  background: #fff;
  display: flex;
  width: 64px;
  height: 64px;
  justify-content: center;
  align-items: center;
}

.extenalIcon img {
  width: 32px;
}

.extenalText span {
  color: var(--color-gray-text);
}

/* ============================================================
   PAGE: BLOG INNER (article)
   ============================================================ */
.article-category {
  align-self: flex-start;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 14px;
  font-weight: 600;
}
.article-title {
  color: #111827;
  font-size: 48px;
  font-weight: 800;
  line-height: 115%; /* 55.2px */
}
.article-subtitle {
  color: #4B5563;
  font-weight: 400 ;
}
.article-meta {
  color: var(--color-gray-text);
}
.article-avatar {
  width: 48px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}
.article-author-name {
  font-size: 15px;
  line-height: normal;
  color: var(--color-primary-text);
  font-weight: 700;
}
.article-author-role {
  font-size: 13px;
  color: var(--color-gray-text);
}
.article-featured-img {
  flex: 1 0 0;
  align-self: stretch;
  width: 100%;
  height: 480px;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: 16px;
}

/* ---- Article body (two-column left) ---- */
.article-body-section {
  overflow-x: clip;
}
.article-body {
  color: #374151
}
.article-body h5 {
  font-weight: 400;
  line-height: 170%; /* 30.6px */
}
.article-body h3 {
  color: #111827;
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
}
.article-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding-left: 24px;
  list-style: disc;
}
.article-list li {
  color: #374151;
  font-size: 16px;
  line-height: 150%; /* 24px */
  font-weight: 400;
}
.article-list li::marker {
  color: var(--color-secondary);
}
.article-list span {
  font-weight: 700;
  color: var(--color-primary-text);
}
.article-quote {
  padding: 8px 0 8px 24px;
  border-left: 4px solid var(--color-secondary);
}
.blogP {
  line-height: 160%; /* 25.6px */
}
.article-quote-text {
  color: var(--color-primary);
  font-size: 22px;
  font-weight: 600;
  line-height: 150%;
}
.article-quote-author {
  color: var(--color-gray-dark);
  font-weight: 700;
  text-transform: uppercase;
}
.article-callout {
  padding: 24px;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  background: #F9FAFB;
}
.callout-img-wrapper {
  display: flex;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  background: #235D6C;
}
.article-callout-title {
  color: #235D6C;
  font-size: 18px;
  font-weight: 700;
}
.article-callout-text {
  color: var(--color-gray-text);
}
.conclusion-p {
  color: #4B5563;
}

/* ---- Article sidebar (two-column right) ---- */
.author-card {
  padding: 24px;
  border-radius: 16px;
  background: var(--color-primary-light-shade);
  border: 1px solid #E5E7EB;
}
.author-card-title {
  color: var(--color-primary-text);
  font-weight: 700;
}
.author-name {
  font-size: 15px;
  color: var(--color-primary-text);
  font-weight: 700;
}
.author-role {
  font-size: 13px;
  color: var(--color-gray-text);
}
.author-bio {
  font-size: 13px;
  color: #4B5563;
}
.related-title {
  font-weight: 700;
}
.sidebar-blog-card {
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-white);
  border-radius: 16px;
}
.sidebar-card-img {
  display: flex;
  flex-shrink: 0 ;
  height: 130px;
  width: 100%;
  align-self: stretch; 
  object-fit: cover;
}
.sidebar-card-content {
  padding: 16px;
}
.sidebar-card-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-primary-medium-shade);
  color: var(--color-primary);
  font-size: 11px;
  font-weight: 600;
}
.sidebar-blog-card a {
  text-decoration: none;
}
.sidebar-card-title {
  color: var(--color-primary-text);
  font-size: 15px
}