@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

:root {
  --primary-color: #4fa8c5;
  --accent-color: #e35a3c;
  --text-color: #000000;
  --heading-color: #1d3557;
  --light-bg: #f8f9fa;
  --white-color: #ffffff;
  --paragraph-font: "Poppins", Arial, Helvetica, sans-serif;
  /* --secondary-heading-font:
    "Palatino", "Palatino Linotype", "Book Antiqua", serif; */
  --secondary-heading-font: "Poppins", Arial, Helvetica, sans-serif;
  --btn-primary-bg: var(--primary-color);
  --btn-primary-text: var(--white-color);
  --btn-secondary-bg: var(--accent-color);
  --btn-secondary-text: var(--white-color);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--paragraph-font);
  color: var(--text-color);
}

/* Reveal targets stay readable; the observer only starts an optional effect. */
.motion-ready .reveal-on-scroll {
  opacity: 1;
  transform: none;
  clip-path: none;
  filter: none;
}

.motion-ready .reveal-on-scroll.is-visible {
  animation-duration: 0.85s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .reveal-from-left.is-visible {
  animation-name: revealFromLeft;
}

.motion-ready .reveal-from-right.is-visible {
  animation-name: revealFromRight;
}

.motion-ready .reveal-zoom.is-visible {
  animation-name: revealZoom;
}

.motion-ready .reveal-pop.is-visible {
  animation-name: revealPop;
}

.motion-ready .reveal-wipe.is-visible {
  animation-name: revealWipe;
  animation-duration: 1s;
}

.motion-ready .reveal-blur.is-visible {
  animation-name: revealBlur;
}

.motion-ready .reveal-rotate.is-visible {
  animation-name: revealRotate;
}

.navbar-brand .brand-logo-img {
  height: 70px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  display: block;
}

p,
span,
li,
a {
  font-family: var(--paragraph-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.secondary-heading {
  font-family: var(--secondary-heading-font);
  color: var(--heading-color);
}

.navbar {
  min-height: 80px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

  position: sticky;
  z-index: 1000;
  top: 0;
}

.navbar-brand {
  color: var(--primary-color);
  font-size: 1.8rem;
  font-weight: 700;
  text-decoration: none;
}

.navbar-nav {
  gap: 52px;
}

.navbar-nav .nav-link {
  color: var(--text-color);
  font-size: 0.7rem;
  position: relative;
  transition: color 0.25s ease;
}

.navbar-nav .nav-dropdown-arrow {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.8rem;
  line-height: 1;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.navbar-nav .dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: 0.2rem;
  left: 0.5rem;
  height: 2px;
  background: #182875;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: #182875;
}

.request-btn {
  background-color: var(--accent-color);
  color: var(--white-color);
  border-radius: 30px;
  padding: 8px 20px;
  transition: 0.3s ease;
  font-size: 0.8rem;
}

.request-btn:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
}

@media (max-width: 991px) {
  .request-btn {
    display: none;
  }
}

.business-hero {
  position: relative;
  height: 475px;
  min-height: 600px;

  background-image: url("images/hero-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center right;

  overflow: hidden;
  background-color: #f8f9fa;
  isolation: isolate;
}

.business-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  pointer-events: none;
}

.business-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 0%,

    rgba(255, 255, 255, 0.99) 18%,

    rgba(255, 255, 255, 0.95) 30%,

    rgba(255, 255, 255, 0.8) 42%,

    rgba(255, 255, 255, 0.5) 52%,

    rgba(255, 255, 255, 0.18) 61%,

    rgba(255, 255, 255, 0) 70%
  );
}

.business-hero-content {
  position: relative;
  z-index: 2;

  padding-top: 2px;
}

.business-hero-eyebrow {
  margin-bottom: 15px;

  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: #333333;
}

.business-hero-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 50px;
  line-height: 1.14;
  font-weight: 700;

  letter-spacing: -1px;

  color: var(--text-color);
}

.business-hero-title span {
  display: block;

  margin-top: 1px;

  font-family: var(--secondary-heading-font);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;

  letter-spacing: 0;

  color: var(--primary-color);
}

.business-hero-description {
  max-width: 505px;

  margin: 20px 0 27px;

  font-family: var(--paragraph-font);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 500;

  color: #333333;
}

.hero-lead-form {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(760px, 100%);
  padding: 10px 12px 10px 14px;
  margin-bottom: 26px;
}

.hero-lead-field {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-height: 45px;
  padding: 0 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(17, 64, 104, 0.08);
}

.hero-lead-field i {
  color: var(--primary-color);
  font-size: 20px;
  line-height: 1;
}

.hero-lead-field input,
.hero-lead-field select {
  width: 100%;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 500;
}

.hero-lead-field input::placeholder {
  color: #7d8aa3;
}

.hero-lead-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
}

.select-field {
  position: relative;
}

.select-caret {
  position: absolute;
  right: 16px;
  font-size: 16px;
  color: var(--primary-color);
  pointer-events: none;
}

.hero-lead-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 170px;
  min-height: 45px;
  padding: 0 20px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--primary-color), #4bb4d6);
  color: var(--white-color);
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  box-shadow: 0 14px 24px rgba(34, 135, 186, 0.28);
}

.hero-lead-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(34, 135, 186, 0.35);
}

.hero-lead-submit i {
  font-size: 18px;
}

.business-hero-buttons {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 30px;
}

.hero-btn {
  width: 185px;
  height: 45px;

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

  border-radius: 6px;

  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 500;

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.hero-btn-primary {
  color: var(--btn-primary-text);
  background-color: var(--btn-primary-bg);

  border: 1px solid var(--btn-primary-bg);
}

.hero-btn-primary:hover {
  color: var(--white-color);
  background-color: var(--accent-color);
  border-color: var(--accent-color);

  transform: translateY(-1px);
}

.hero-btn-outline {
  color: var(--primary-color);
  background-color: rgba(255, 255, 255, 0.35);

  border: 1.5px solid var(--primary-color);
}

.hero-btn-outline:hover {
  color: var(--white-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);

  transform: translateY(-1px);
}

.hero-demo-stack {
  position: fixed;
  right: 24px;
  bottom: 3%;
  z-index: 3;

  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: flex-end;

  transform: translateY(-50%);
}

.hero-demo-btn {
  display: flex;
  align-items: center;
  gap: 18px;

  width: 180px;
  min-height: 50px;
  padding: 10px 20px;

  border-radius: 999px;
  text-decoration: none;
  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}

.hero-demo-btn:hover {
  transform: translateX(-3px);
}

.hero-demo-btn-primary {
  background: linear-gradient(135deg, var(--primary-color), #4bb4d6);
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: var(--white-color);
  box-shadow: 0 12px 28px rgba(30, 120, 164, 0.2);
}

.hero-demo-btn-primary:hover {
  background: var(--accent-color);
}

.hero-demo-btn-secondary {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.75);
  color: var(--primary-color);
  box-shadow: 0 12px 28px rgba(12, 34, 54, 0.12);
}

.hero-demo-btn-secondary:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
  box-shadow: 0 16px 30px rgba(26, 106, 148, 0.2);
}

.hero-demo-icon {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--primary-color);
  font-size: 14px;
  flex-shrink: 0;
}

.hero-demo-btn-primary .hero-demo-icon {
  background: rgba(255, 255, 255, 0.96);
  color: var(--primary-color);
}

.hero-demo-btn-secondary .hero-demo-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.hero-demo-btn-secondary:hover .hero-demo-icon {
  background: rgba(255, 255, 255, 0.96);
  color: var(--primary-color);
}

.business-hero-stats {
  display: flex;
  align-items: center;

  margin-top: 38px;
}

.hero-stat {
  position: relative;

  min-width: 114px;

  margin-right: 18px;
  padding-right: 18px;
}

.hero-stat:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 0;
  right: 0;

  width: 1px;
  height: 31px;

  background-color: rgba(29, 53, 87, 0.18);
}

.hero-stat strong {
  display: block;

  margin-bottom: 2px;

  font-family: var(--paragraph-font);
  font-size: 20px;
  line-height: 1.1;
  font-weight: 700;

  color: var(--text-color);
}

.hero-stat span {
  display: block;

  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.25;
  font-weight: 500;

  color: #4a5568;
}

@media (max-width: 991.98px) {
  .hero-lead-form {
    width: 100%;
    gap: 10px;
    padding: 0;
  }

  .business-hero {
    height: auto;
    min-height: 500px;

    background-position: 65% center;
  }

  .business-hero-overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.97) 30%,
      rgba(255, 255, 255, 0.82) 50%,
      rgba(255, 255, 255, 0.3) 75%,
      rgba(255, 255, 255, 0) 100%
    );
  }

  .business-hero-content {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .business-hero-title {
    font-size: 38px;
  }

  .business-hero-title span {
    font-size: 38px;
  }
}

@media (max-width: 767.98px) {
  .hero-lead-form {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
  }

  .hero-lead-field,
  .hero-lead-submit {
    width: 100%;
    min-height: 48px;
  }

  .hero-lead-field {
    flex: 0 0 auto;
    padding: 0 14px;
  }

  .hero-lead-submit {
    min-width: 0;
  }

  .hero-demo-stack {
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    gap: 0;
    flex-direction: row;
    transform: none;
  }

  .hero-demo-btn {
    width: 50%;
    min-height: 52px;
    justify-content: center;
    padding: 8px 10px;
    gap: 8px;
    border-radius: 0;
  }

  .hero-demo-btn:hover {
    transform: translateY(-2px);
  }

  .business-hero {
    min-height: auto;

    background-position: 65% center;
  }

  .business-hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.98) 0%,
      rgba(255, 255, 255, 0.94) 45%,
      rgba(255, 255, 255, 0.75) 72%,
      rgba(255, 255, 255, 0.45) 100%
    );
  }

  .business-hero-content {
    padding: 45px 15px 40px;
  }

  .business-hero-eyebrow {
    font-size: 9px;
    letter-spacing: 3px;
    margin-bottom: 13px;
  }

  .business-hero-title {
    font-size: 31px;
    line-height: 1.12;
  }

  .business-hero-title span {
    font-size: 32px;
  }

  .business-hero-description {
    max-width: 100%;

    margin-top: 18px;
    margin-bottom: 24px;

    font-size: 12px;
  }

  .business-hero-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .hero-btn {
    width: 100%;
    height: 44px;
  }

  .business-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

    margin-top: 35px;
  }

  .hero-stat {
    min-width: 0;

    margin-right: 0;
    padding-right: 15px;
  }

  .hero-stat:nth-child(2)::after,
  .hero-stat:last-child::after {
    display: none;
  }
}

@media (max-width: 400px) {
  .business-hero-title {
    font-size: 28px;
  }

  .business-hero-title span {
    font-size: 29px;
  }

  .hero-stat strong {
  }
}

/* =========================================
   HOME HERO - VIDEO BLENDING
========================================= */

.business-hero.home-hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 760px;
  min-height: 760px;
  overflow: hidden;
  background: #07111c;
}

/* Full-bleed video */
.business-hero.home-hero .business-hero-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: brightness(0.72) saturate(0.85);
}

/* Dark gradient: strongest behind text, fades into video */
.business-hero.home-hero .business-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgb(3 10 19 / 35%) 0%,
      rgb(3 10 19 / 45%) 30%,
      rgb(3 10 19 / 43%) 48%,
      rgba(3, 10, 19, 0.36) 68%,
      rgba(3, 10, 19, 0.08) 100%
    ),
    linear-gradient(
      0deg,
      rgba(3, 10, 19, 0.45) 0%,
      transparent 45%,
      rgba(3, 10, 19, 0.18) 100%
    );
}

/* Keep all content above video and overlay */
.business-hero.home-hero .container {
  position: relative;
  z-index: 3;
  height: 100%;
}

.business-hero.home-hero .row {
  min-height: 100%;
}

.business-hero.home-hero .business-hero-content {
  position: relative;
  z-index: 3;
  padding-top: 0;
  max-width: 760px;
}

/* Text colors */
.business-hero.home-hero .business-hero-eyebrow {
  color: rgba(255, 255, 255, 0.78);
}

.business-hero.home-hero .business-hero-title {
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.18);
}

.business-hero.home-hero .business-hero-title span {
  color: #4fa8c5;
}

.business-hero.home-hero .business-hero-description {
  color: rgba(255, 255, 255, 0.82);
}

/* Lead form: slightly translucent, with readable fields */
.business-hero.home-hero .hero-lead-field {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.business-hero.home-hero .hero-lead-submit {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* CTA contrast */
.business-hero.home-hero .hero-btn-outline {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.06);
}

.business-hero.home-hero .hero-btn-outline:hover {
  color: #07111c;
  background: #ffffff;
  border-color: #ffffff;
}

/* Stats on dark video */
.business-hero.home-hero .hero-stat strong {
  color: #ffffff;
}

.business-hero.home-hero .hero-stat span {
  color: rgba(255, 255, 255, 0.68);
}

.business-hero.home-hero .hero-stat:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.38);
}

/* Keep decorative sweep subtle and behind the text */
.business-hero.home-hero::after {
  z-index: 2;
  opacity: 0.25;
}

/* Tablet */
@media (max-width: 991.98px) {
  .business-hero.home-hero {
    height: auto;
    min-height: 600px;
  }

  .business-hero.home-hero .business-hero-video {
    object-position: 60% center;
  }

  .business-hero.home-hero .business-hero-overlay {
    background:
      linear-gradient(
        90deg,
        rgba(3, 10, 19, 0.98) 0%,
        rgba(3, 10, 19, 0.9) 48%,
        rgba(3, 10, 19, 0.55) 100%
      ),
      linear-gradient(0deg, rgba(3, 10, 19, 0.35), transparent);
  }

  .business-hero.home-hero .business-hero-content {
    padding-top: 55px;
    padding-bottom: 55px;
  }
}

/* Mobile */
@media (max-width: 767.98px) {
  .business-hero.home-hero {
    min-height: 0;
    height: auto;
  }

  .business-hero.home-hero .business-hero-video {
    object-position: 62% center;
  }

  .business-hero.home-hero .business-hero-overlay {
    background: linear-gradient(
      180deg,
      rgb(3 10 19 / 81%) 0%,
      rgb(3 10 19 / 49%) 45%,
      rgb(3 10 19 / 29%) 100%
    );
  }

  .business-hero.home-hero .business-hero-content {
    padding: 45px 15px 40px;
  }

  .business-hero.home-hero .business-hero-title {
    font-size: 31px;
    line-height: 1.15;
  }

  .business-hero.home-hero .business-hero-title span {
    font-size: 32px;
  }

  .business-hero.home-hero .business-hero-description {
    font-size: 12px;
  }

  .business-hero.home-hero .business-hero-stats {
    margin-top: 30px;
  }

  .business-hero.home-hero .hero-stat:nth-child(2)::after,
  .business-hero.home-hero .hero-stat:last-child::after {
    display: none;
  }

  .business-hero.home-hero::after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .business-hero.home-hero::after {
    animation: none;
  }
}

/* Service scenes and field-by-field motion */
.contact-experience {
  --contact-wash: rgba(79, 168, 197, 0.13);
  background:
    radial-gradient(ellipse at 12% 15%, var(--contact-wash), transparent 40%),
    radial-gradient(
      ellipse at 84% 74%,
      rgba(255, 255, 255, 0.86),
      transparent 37%
    ),
    linear-gradient(135deg, #f4fafb 0%, #fbfcfd 48%, #edf7fa 100%);
}

.contact-experience[data-service="managed-office"] {
  --contact-wash: rgba(79, 168, 197, 0.17);
  --contact-accent: #4fa8c5;
  --contact-accent-rgb: 79, 168, 197;
  --contact-accent-deep: #247e9d;
}

.contact-experience[data-service="bulk-sms"] {
  --contact-wash: rgba(227, 90, 60, 0.17);
  --contact-accent: #e35a3c;
  --contact-accent-rgb: 227, 90, 60;
  --contact-accent-deep: #a93626;
}

.contact-experience[data-service="bulk-whatsapp"] {
  --contact-wash: rgba(37, 183, 125, 0.17);
  --contact-accent: #25b77d;
  --contact-accent-rgb: 37, 183, 125;
  --contact-accent-deep: #147852;
}

.contact-experience[data-service="rcs"] {
  --contact-wash: rgba(90, 117, 210, 0.17);
  --contact-accent: #5a75d2;
  --contact-accent-rgb: 90, 117, 210;
  --contact-accent-deep: #394b9c;
}

.contact-experience[data-service="ivr"] {
  --contact-wash: rgba(215, 154, 53, 0.18);
  --contact-accent: #d79a35;
  --contact-accent-rgb: 215, 154, 53;
  --contact-accent-deep: #98621a;
}

.contact-experience[data-service="seo"] {
  --contact-wash: rgba(57, 117, 198, 0.17);
  --contact-accent: #3975c6;
  --contact-accent-rgb: 57, 117, 198;
  --contact-accent-deep: #254f91;
}

.contact-experience[data-service="smo"] {
  --contact-wash: rgba(43, 155, 121, 0.17);
  --contact-accent: #2b9b79;
  --contact-accent-rgb: 43, 155, 121;
  --contact-accent-deep: #187252;
}

.contact-experience[data-service="influencer-marketing"] {
  --contact-wash: rgba(194, 82, 148, 0.17);
  --contact-accent: #c25294;
  --contact-accent-rgb: 194, 82, 148;
  --contact-accent-deep: #873667;
}

.contact-experience[data-service="tata-tele-business-products"] {
  --contact-wash: rgba(29, 89, 143, 0.17);
  --contact-accent: #1d598f;
  --contact-accent-rgb: 29, 89, 143;
  --contact-accent-deep: #153d64;
}

.contact-background-grid {
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: 0.32;
  background-image: radial-gradient(
    rgba(var(--contact-accent-rgb), 0.18) 0.8px,
    transparent 0.8px
  );
  background-size: 25px 25px;
  mask-image: linear-gradient(110deg, #000 0%, transparent 68%);
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.contact-experience-inner {
  z-index: 1;
}

.contact-experience[data-focus-field] .contact-experience-glow {
  animation: contactFieldPulse 1.2s ease-out;
}

.contact-visual {
  overflow: visible;
}

.contact-service-scene {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.contact-scene {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 180px;
  height: 170px;
  transform: translate(-50%, -50%);
}

.contact-experience[data-service]:not([data-service="default"])
  .contact-visual-orbit,
.contact-experience[data-service]:not([data-service="default"])
  .contact-visual-spark {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
}

.contact-experience[data-service]:not([data-service="default"])
  .contact-visual-node-top {
  top: 22px;
  left: calc(50% + 94px);
}

.contact-experience[data-service]:not([data-service="default"])
  .contact-visual-node-bottom {
  bottom: 22px;
  left: calc(50% - 137px);
}

.contact-experience[data-service="bulk-sms"] .contact-visual-node-top {
  transform: translate(-8px, -3px) rotate(13deg);
}

.contact-experience[data-service="bulk-sms"] .contact-visual-node-bottom {
  transform: translate(8px, 2px) rotate(-10deg);
}

.contact-experience[data-service="ivr"] .contact-visual-node-top,
.contact-experience[data-service="ivr"] .contact-visual-node-bottom {
  color: #fff;
  background: var(--contact-accent);
  transform: translateY(-5px);
}

.contact-experience[data-service="bulk-whatsapp"] .contact-visual-node-top {
  transform: translateY(-7px) rotate(12deg);
}

.contact-experience[data-service="bulk-whatsapp"] .contact-visual-node-bottom {
  transform: translateY(6px) rotate(-12deg);
}

.contact-experience[data-service="rcs"] .contact-visual-node-top {
  transform: translate(5px, 5px) rotate(12deg);
}

.contact-experience[data-service="rcs"] .contact-visual-node-bottom {
  transform: translate(-7px, -4px) rotate(-12deg);
}

.contact-experience[data-service="managed-office"] .contact-visual-node-top,
.contact-experience[data-service="managed-office"] .contact-visual-node-bottom {
  transform: translateY(-7px);
}

.contact-experience[data-service="seo"] .contact-visual-node-top,
.contact-experience[data-service="smo"] .contact-visual-node-top {
  transform: translate(7px, -6px) rotate(18deg);
}

.contact-experience[data-service="seo"] .contact-visual-node-bottom,
.contact-experience[data-service="smo"] .contact-visual-node-bottom {
  transform: translate(-8px, 6px) rotate(-18deg);
}

.contact-experience[data-focus-field="name"] .contact-visual-core,
.contact-experience[data-focus-field="company"] .contact-visual-core {
  box-shadow:
    0 0 0 12px rgba(var(--contact-accent-rgb), 0.12),
    0 18px 44px rgba(var(--contact-accent-rgb), 0.3);
}

.contact-experience[data-focus-field="email"] .contact-visual-core,
.contact-experience[data-focus-field="phone"] .contact-visual-core {
  box-shadow:
    0 0 0 7px rgba(var(--contact-accent-rgb), 0.1),
    0 0 0 17px rgba(var(--contact-accent-rgb), 0.06),
    0 18px 44px rgba(var(--contact-accent-rgb), 0.3);
}

.contact-experience[data-focus-field="message"] .contact-visual-core {
  box-shadow:
    0 0 0 7px rgba(var(--contact-accent-rgb), 0.11),
    0 0 0 15px rgba(var(--contact-accent-rgb), 0.07),
    0 0 0 24px rgba(var(--contact-accent-rgb), 0.04),
    0 18px 44px rgba(var(--contact-accent-rgb), 0.3);
}

.contact-chat-bubble {
  position: absolute;
  display: flex;
  width: 70px;
  height: 43px;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.16);
  border-radius: 15px 15px 15px 5px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 23px rgba(29, 53, 87, 0.12);
}

.contact-chat-bubble span {
  width: 42px;
  height: 3px;
  border-radius: 4px;
  background: rgba(var(--contact-accent-rgb), 0.23);
}

.contact-chat-bubble span:last-child {
  width: 27px;
}

.contact-chat-bubble-in {
  top: 36px;
  left: 2px;
  animation: contactFloat 3.6s ease-in-out infinite;
}

.contact-chat-bubble-out {
  right: 1px;
  bottom: 34px;
  border-radius: 15px 15px 5px;
  background: var(--contact-accent);
  transform: rotate(5deg);
  animation: contactFloat 3.2s 0.5s ease-in-out infinite;
}

.contact-chat-bubble-out span {
  background: rgba(255, 255, 255, 0.66);
}

.contact-chat-spark {
  position: absolute;
  top: 16px;
  right: 19px;
  color: var(--contact-accent);
  font-size: 20px;
  animation: contactSparkle 1.8s ease-in-out infinite;
}

.contact-call-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 115px;
  height: 115px;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: contactCallWave 2.4s ease-out infinite;
}

.contact-call-wave-two {
  animation-delay: 1.2s;
}

.contact-call-phone {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 22px;
  background: var(--contact-accent);
  box-shadow: 0 12px 30px rgba(var(--contact-accent-rgb), 0.34);
  color: #fff;
  font-size: 25px;
  transform: translate(-50%, -50%) rotate(-14deg);
  animation: contactRinging 1.4s ease-in-out infinite;
}

.contact-call-badge {
  position: absolute;
  top: 31px;
  right: 30px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 3px solid #fbfaff;
  border-radius: 50%;
  background: #fff;
  color: var(--contact-accent);
  font-size: 14px;
  animation: contactBadgePop 1.7s ease-in-out infinite;
}

.contact-voice-mark {
  position: absolute;
  top: 35px;
  left: 50%;
  color: var(--contact-accent);
  font-size: 42px;
  transform: translateX(-50%);
}

.contact-wave-bars {
  position: absolute;
  top: 86px;
  left: 50%;
  display: flex;
  height: 44px;
  align-items: center;
  gap: 5px;
  transform: translateX(-50%);
}

.contact-wave-bars span {
  width: 4px;
  height: 14px;
  border-radius: 5px;
  background: var(--contact-accent);
  animation: contactWave 1s ease-in-out infinite alternate;
}

.contact-wave-bars span:nth-child(3n) {
  animation-delay: -0.7s;
}
.contact-wave-bars span:nth-child(3n + 1) {
  animation-delay: -0.3s;
}
.contact-wave-bars span:nth-child(4n) {
  height: 30px;
}
.contact-wave-bars span:nth-child(5n) {
  height: 21px;
}

.contact-voice-caption {
  position: absolute;
  top: 142px;
  left: 50%;
  color: var(--contact-accent-deep);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.5px;
  white-space: nowrap;
  transform: translateX(-50%);
}

.contact-mail-envelope {
  position: absolute;
  top: 38px;
  left: 50%;
  color: var(--contact-accent);
  font-size: 105px;
  line-height: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 12px 16px rgba(var(--contact-accent-rgb), 0.18));
  animation: contactMailFloat 3s ease-in-out infinite;
}

.contact-mail-letter {
  position: absolute;
  top: -6px;
  left: 50%;
  display: grid;
  width: 43px;
  height: 45px;
  place-items: center;
  border-radius: 5px;
  background: #fff;
  color: var(--contact-accent);
  font-size: 19px;
  transform: translate(-50%, 0);
  animation: contactLetterRise 2.7s ease-in-out infinite;
}

.contact-mail-ping {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--contact-accent);
  box-shadow: 0 0 0 6px rgba(var(--contact-accent-rgb), 0.12);
  animation: contactSparkle 1.6s ease-in-out infinite;
}

.contact-mail-ping-one {
  top: 48px;
  left: 29px;
}
.contact-mail-ping-two {
  right: 25px;
  bottom: 30px;
  animation-delay: 0.8s;
}

.contact-team-link {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 105px;
  height: 1px;
  background: rgba(var(--contact-accent-rgb), 0.4);
  transform-origin: left center;
}

.contact-team-link-one {
  transform: rotate(32deg);
}
.contact-team-link-two {
  transform: rotate(148deg);
}

.contact-team-agent {
  position: absolute;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(29, 53, 87, 0.12);
  color: var(--contact-accent);
  font-size: 20px;
}

.contact-team-agent-main {
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  border-radius: 20px;
  background: var(--contact-accent);
  color: #fff;
  font-size: 27px;
  transform: translate(-50%, -50%);
  animation: contactAgentPulse 2.8s ease-in-out infinite;
}

.contact-team-agent-one {
  top: 16px;
  left: 28px;
  animation: contactFloat 3s ease-in-out infinite;
}
.contact-team-agent-two {
  right: 24px;
  bottom: 11px;
  animation: contactFloat 3.4s 0.4s ease-in-out infinite;
}

.contact-idea-star {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 67px;
  height: 67px;
  place-items: center;
  border-radius: 23px;
  background: var(--contact-accent);
  box-shadow: 0 12px 32px rgba(var(--contact-accent-rgb), 0.35);
  color: #fff;
  font-size: 32px;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: contactIdea 3s ease-in-out infinite;
}

.contact-idea-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 132px;
  height: 78px;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.34);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(34deg);
}

.contact-idea-orbit-two {
  width: 154px;
  height: 100px;
  border-style: dashed;
  transform: translate(-50%, -50%) rotate(-42deg);
  animation: contactOrbit 12s linear infinite;
}

.contact-idea-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--contact-accent);
  box-shadow: 0 0 0 4px rgba(var(--contact-accent-rgb), 0.12);
}

.contact-idea-dot-one {
  top: 35px;
  right: 32px;
}
.contact-idea-dot-two {
  bottom: 27px;
  left: 27px;
}

@keyframes contactFieldPulse {
  0% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  40% {
    opacity: 0.8;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes contactFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}

@keyframes contactSparkle {
  0%,
  100% {
    opacity: 0.55;
    scale: 0.8;
  }
  50% {
    opacity: 1;
    scale: 1.15;
  }
}

@keyframes contactCallWave {
  0% {
    opacity: 0.65;
    scale: 0.6;
  }
  100% {
    opacity: 0;
    scale: 1.55;
  }
}

@keyframes contactRinging {
  0%,
  100% {
    rotate: -10deg;
  }
  15%,
  45%,
  75% {
    rotate: -20deg;
  }
  30%,
  60%,
  90% {
    rotate: 1deg;
  }
}

@keyframes contactBadgePop {
  0%,
  100% {
    scale: 1;
  }
  50% {
    scale: 1.15;
  }
}

@keyframes contactWave {
  to {
    scale: 1 0.38;
    opacity: 0.55;
  }
}

@keyframes contactMailFloat {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -7px;
  }
}

@keyframes contactLetterRise {
  0%,
  100% {
    translate: 0 8px;
    opacity: 0.7;
  }
  50% {
    translate: 0 -7px;
    opacity: 1;
  }
}

@keyframes contactAgentPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(var(--contact-accent-rgb), 0.22);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(var(--contact-accent-rgb), 0);
  }
}

@keyframes contactIdea {
  0%,
  100% {
    rotate: -8deg;
    scale: 1;
  }
  50% {
    rotate: 8deg;
    scale: 1.07;
  }
}

@media (max-width: 480px) {
  .contact-scene {
    scale: 0.86;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-scene *,
  .contact-experience-glow {
    animation: none !important;
  }
}

/* Large service artwork replaces the contact form preview. */
.contact-visual {
  width: min(100%, 470px);
  height: 390px;
  margin: 24px auto 12px;
  isolation: isolate;
}

.contact-visual::before {
  position: absolute;
  top: 45%;
  left: 50%;
  width: min(86%, 350px);
  aspect-ratio: 1;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.1);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.88) 0 34%, transparent 70%),
    radial-gradient(
      circle,
      rgba(var(--contact-accent-rgb), 0.08),
      transparent 72%
    );
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.26),
    inset 0 0 50px rgba(var(--contact-accent-rgb), 0.05);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    border-color 0.5s ease,
    box-shadow 0.5s ease,
    background 0.5s ease;
}

.contact-visual-orbit-one {
  top: 45%;
  width: 294px;
  height: 294px;
}

.contact-visual-orbit-two {
  top: 45%;
  width: 230px;
  height: 230px;
}

.contact-service-scene {
  z-index: 1;
}

.contact-scene {
  top: 45%;
  width: 210px;
  height: 200px;
  scale: 1.25;
  transform: translate(-50%, -50%);
  transform-origin: center;
}

.contact-visual-core {
  z-index: 2;
  top: 45%;
  width: 124px;
  height: 124px;
  border-radius: 38px;
  box-shadow:
    0 24px 55px rgba(var(--contact-accent-rgb), 0.34),
    0 0 0 12px rgba(255, 255, 255, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
  font-size: 56px;
  animation: contactIconBreathe 3.4s ease-in-out infinite;
}

.contact-visual-core i {
  display: block;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.12));
}

.contact-visual-node {
  z-index: 3;
  width: 58px;
  height: 58px;
  border-radius: 19px;
  box-shadow: 0 13px 32px rgba(29, 53, 87, 0.14);
  font-size: 24px;
}

.contact-visual-node-top {
  top: 55px;
  left: calc(50% + 105px);
}

.contact-visual-node-bottom {
  bottom: 94px;
  left: calc(50% - 165px);
}

.contact-visual-spark-one {
  top: 70px;
  left: calc(50% - 132px);
}

.contact-visual-spark-two {
  right: calc(50% - 154px);
  bottom: 113px;
}

.contact-service-caption {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 4px;
  left: 0;
  display: flex;
  width: fit-content;
  min-width: 275px;
  max-width: min(100%, 350px);
  align-items: center;
  gap: 13px;
  margin: 0 auto;
  padding: 13px 18px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.91);
  box-shadow: 0 15px 36px rgba(29, 53, 87, 0.12);
  backdrop-filter: blur(14px);
  text-align: left;
  transition: box-shadow 0.5s ease;
}

.contact-service-caption-icon {
  display: grid;
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: rgba(var(--contact-accent-rgb), 0.12);
  color: var(--contact-accent-deep);
  font-size: 22px;
  transition:
    color 0.45s ease,
    background 0.45s ease,
    transform 0.3s ease;
}

.contact-service-caption strong,
.contact-service-caption small {
  display: block;
}

.contact-service-caption strong {
  color: #263d4c;
  font-weight: 700;
  line-height: 1.35;
}

.contact-service-caption small {
  margin-top: 3px;
  color: #829099;
  font-size: 10px;
  line-height: 1.4;
}

.contact-experience[data-service]:not([data-service="default"])
  .contact-service-caption-icon {
  transform: rotate(-8deg) scale(1.04);
}

.contact-chat-bubble {
  width: 91px;
  height: 58px;
  gap: 8px;
  padding: 13px;
  border-radius: 19px 19px 19px 7px;
  box-shadow: 0 14px 30px rgba(29, 53, 87, 0.14);
}

.contact-chat-bubble span {
  height: 4px;
}

.contact-chat-bubble-in {
  top: 23px;
  left: -19px;
}

.contact-chat-bubble-out {
  right: -22px;
  bottom: 20px;
}

.contact-chat-spark {
  top: 2px;
  right: 6px;
  font-size: 27px;
}

.contact-call-wave {
  width: 145px;
  height: 145px;
  border-width: 2px;
}

.contact-call-wave-two {
  width: 145px;
  height: 145px;
}

.contact-call-phone {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  font-size: 34px;
}

.contact-call-badge {
  top: 12px;
  right: 16px;
  width: 43px;
  height: 43px;
  font-size: 18px;
}

.contact-voice-mark {
  top: 18px;
  font-size: 59px;
}

.contact-wave-bars {
  top: 78px;
  height: 58px;
  gap: 6px;
}

.contact-wave-bars span {
  width: 5px;
  height: 21px;
}

.contact-wave-bars span:nth-child(4n) {
  height: 42px;
}

.contact-wave-bars span:nth-child(5n) {
  height: 32px;
}

.contact-voice-caption {
  top: 143px;
}

.contact-mail-envelope {
  top: 20px;
  font-size: 140px;
}

.contact-mail-letter {
  width: 55px;
  height: 59px;
  font-size: 24px;
}

.contact-mail-ping-one {
  top: 27px;
  left: 9px;
}

.contact-mail-ping-two {
  right: 7px;
  bottom: 18px;
}

.contact-team-link {
  width: 125px;
}

.contact-team-agent {
  width: 55px;
  height: 55px;
  border-radius: 18px;
  font-size: 25px;
}

.contact-team-agent-main {
  width: 78px;
  height: 78px;
  border-radius: 26px;
  font-size: 35px;
}

.contact-team-agent-one {
  top: -2px;
  left: 4px;
}

.contact-team-agent-two {
  right: 0;
  bottom: -3px;
}

.contact-idea-star {
  width: 90px;
  height: 90px;
  border-radius: 30px;
  font-size: 43px;
}

.contact-idea-orbit {
  width: 172px;
  height: 106px;
}

.contact-idea-orbit-two {
  width: 195px;
  height: 130px;
}

.contact-idea-dot-one {
  top: 14px;
  right: 12px;
}

.contact-idea-dot-two {
  bottom: 7px;
  left: 6px;
}

@keyframes contactIconBreathe {
  0%,
  100% {
    box-shadow:
      0 24px 55px rgba(var(--contact-accent-rgb), 0.31),
      0 0 0 12px rgba(255, 255, 255, 0.48),
      inset 0 1px 0 rgba(255, 255, 255, 0.48);
  }

  50% {
    box-shadow:
      0 29px 65px rgba(var(--contact-accent-rgb), 0.39),
      0 0 0 19px rgba(255, 255, 255, 0.32),
      0 0 0 34px rgba(var(--contact-accent-rgb), 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.48);
  }
}

@media (max-width: 991.98px) {
  .contact-visual {
    height: 380px;
    transform: scale(0.92);
    transform-origin: left center;
  }
}

@media (max-width: 767.98px) {
  .contact-visual {
    width: min(100%, 470px);
    height: 370px;
    margin: 12px auto 0;
    transform: none;
  }
}

@media (max-width: 480px) {
  .contact-visual {
    height: 335px;
  }

  .contact-visual::before {
    width: min(82%, 290px);
  }

  .contact-visual-orbit-one {
    width: 245px;
    height: 245px;
  }

  .contact-visual-orbit-two {
    width: 193px;
    height: 193px;
  }

  .contact-scene {
    scale: 1.05;
  }

  .contact-visual-core {
    width: 106px;
    height: 106px;
    border-radius: 33px;
    font-size: 48px;
  }

  .contact-visual-node {
    width: 49px;
    height: 49px;
    font-size: 21px;
  }

  .contact-visual-node-top {
    top: 49px;
    left: calc(50% + 79px);
  }

  .contact-visual-node-bottom {
    bottom: 87px;
    left: calc(50% - 135px);
  }

  .contact-service-caption {
    bottom: 0;
    min-width: 0;
    width: min(100%, 335px);
    padding: 11px 13px;
  }

  .contact-service-caption-icon {
    width: 39px;
    height: 39px;
    font-size: 20px;
  }

  .contact-service-caption strong {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-visual-core {
    animation: none !important;
  }
}

@property --contact-accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #4fa8c5;
}

.contact-experience,
.contact-experience[data-service="managed-office"],
.contact-experience[data-service="bulk-sms"],
.contact-experience[data-service="bulk-whatsapp"],
.contact-experience[data-service="rcs"],
.contact-experience[data-service="ivr"],
.contact-experience[data-service="seo"],
.contact-experience[data-service="smo"],
.contact-experience[data-service="influencer-marketing"],
.contact-experience[data-service="tata-tele-business-products"] {
  background: linear-gradient(135deg, #f8fbfc 0%, #fbfcfd 52%, #f5f9fa 100%);
}

.contact-experience::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 12% 18%,
      color-mix(in srgb, var(--contact-accent) 17%, transparent),
      transparent 42%
    ),
    radial-gradient(
      ellipse at 86% 78%,
      color-mix(in srgb, var(--contact-accent) 12%, transparent),
      transparent 37%
    );
  content: "";
  opacity: 0.9;
  pointer-events: none;
}

.contact-scene {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  scale: none;
  transform: translate(-50%, -50%) scale(1.13);
  transition:
    opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.7s;
  will-change: opacity, transform;
}

.contact-scene.is-active {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.25);
  transition-delay: 0s;
}

.contact-scene-service .contact-art-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 96px;
  height: 96px;
  place-items: center;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.15);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    0 18px 42px rgba(var(--contact-accent-rgb), 0.2),
    0 0 0 12px rgba(var(--contact-accent-rgb), 0.07);
  color: var(--contact-accent);
  font-size: 45px;
  transform: translate(-50%, -50%);
}

.contact-art-detail {
  position: absolute;
  display: block;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 24px rgba(var(--contact-accent-rgb), 0.14);
}

.contact-art-detail-one {
  top: 24px;
  right: 12px;
  width: 42px;
  height: 34px;
}

.contact-art-detail-two {
  bottom: 20px;
  left: 7px;
  width: 54px;
  height: 28px;
}

.contact-scene[data-scene="managed-office"] .contact-art-icon {
  animation: contactOfficeLift 3.2s ease-in-out infinite;
}

.contact-scene[data-scene="managed-office"] .contact-art-detail {
  border-radius: 4px;
  background:
    linear-gradient(rgba(var(--contact-accent-rgb), 0.35) 0 0) 7px 7px / 7px 7px,
    linear-gradient(rgba(var(--contact-accent-rgb), 0.35) 0 0) 23px 7px / 7px
      7px,
    linear-gradient(rgba(var(--contact-accent-rgb), 0.35) 0 0) 7px 20px / 7px
      7px,
    linear-gradient(rgba(var(--contact-accent-rgb), 0.35) 0 0) 23px 20px / 7px
      7px,
    white;
  background-repeat: no-repeat;
}

.contact-scene[data-scene="managed-office"] .contact-art-detail-one {
  animation: contactOfficeWindow 2.3s ease-in-out infinite;
}

.contact-scene[data-scene="bulk-sms"] .contact-art-icon {
  animation: contactSmsBounce 1.8s ease-in-out infinite;
}

.contact-scene[data-scene="bulk-sms"] .contact-art-detail-one,
.contact-scene[data-scene="bulk-sms"] .contact-art-detail-two {
  height: 8px;
  border: 0;
  border-radius: 8px;
  background: var(--contact-accent);
  opacity: 0.3;
}

.contact-scene[data-scene="bulk-sms"] .contact-art-detail-one {
  animation: contactSmsSend 2.2s ease-in-out infinite;
}

.contact-scene[data-scene="bulk-whatsapp"] .contact-art-icon {
  animation: contactWhatsappPulse 2.4s ease-in-out infinite;
}

.contact-scene[data-scene="bulk-whatsapp"] .contact-art-detail {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--contact-accent);
}

.contact-scene[data-scene="bulk-whatsapp"] .contact-art-detail-one {
  animation: contactWhatsappDot 1.8s ease-in-out infinite;
}

.contact-scene[data-scene="bulk-whatsapp"] .contact-art-detail-two {
  animation: contactWhatsappDot 1.8s 0.9s ease-in-out infinite;
}

.contact-scene[data-scene="rcs"] .contact-art-icon {
  animation: contactRcsTilt 3s ease-in-out infinite;
}

.contact-scene[data-scene="rcs"] .contact-art-detail-one {
  animation: contactRcsCard 2.8s ease-in-out infinite;
}

.contact-scene[data-scene="ivr"] .contact-art-icon {
  animation: contactIvrPulse 1.7s ease-in-out infinite;
}

.contact-scene[data-scene="ivr"] .contact-art-detail {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--contact-accent);
}

.contact-scene[data-scene="ivr"] .contact-art-detail-one {
  animation: contactIvrKey 1.2s ease-in-out infinite;
}

.contact-scene[data-scene="ivr"] .contact-art-detail-two {
  animation: contactIvrKey 1.2s 0.6s ease-in-out infinite;
}

.contact-scene[data-scene="seo"] .contact-art-icon {
  animation: contactSeoSweep 3s ease-in-out infinite;
}

.contact-scene[data-scene="seo"] .contact-art-detail-one {
  width: 46px;
  height: 34px;
  animation: contactSeoChart 2s ease-in-out infinite;
}

.contact-scene[data-scene="smo"] .contact-art-icon {
  animation: contactSmoShare 2.6s ease-in-out infinite;
}

.contact-scene[data-scene="smo"] .contact-art-detail {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.contact-scene[data-scene="smo"] .contact-art-detail-one {
  animation: contactSmoNode 2.2s ease-in-out infinite;
}

.contact-scene[data-scene="smo"] .contact-art-detail-two {
  animation: contactSmoNode 2.2s 1.1s ease-in-out infinite;
}

.contact-scene[data-scene="influencer-marketing"] .contact-art-icon {
  animation: contactInfluencerShine 2.8s ease-in-out infinite;
}

.contact-scene[data-scene="influencer-marketing"] .contact-art-detail {
  width: 15px;
  height: 15px;
  border: 0;
  border-radius: 50%;
  background: var(--contact-accent);
}

.contact-scene[data-scene="influencer-marketing"] .contact-art-detail-one {
  animation: contactInfluencerStar 2s ease-in-out infinite;
}

.contact-scene[data-scene="influencer-marketing"] .contact-art-detail-two {
  animation: contactInfluencerStar 2s 1s ease-in-out infinite;
}

.contact-scene[data-scene="tata-tele-business-products"] .contact-art-icon {
  animation: contactTataSignal 2.5s ease-in-out infinite;
}

.contact-scene[data-scene="tata-tele-business-products"] .contact-art-detail {
  width: 30px;
  height: 30px;
  border: 2px solid var(--contact-accent);
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
}

.contact-scene[data-scene="tata-tele-business-products"]
  .contact-art-detail-one {
  animation: contactTataWave 2.2s ease-out infinite;
}

.contact-scene[data-scene="tata-tele-business-products"]
  .contact-art-detail-two {
  animation: contactTataWave 2.2s 1.1s ease-out infinite;
}

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

@keyframes contactOfficeWindow {
  0%,
  100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

@keyframes contactSmsBounce {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0);
  }
  35% {
    transform: translate(-50%, -58%) rotate(-5deg);
  }
  70% {
    transform: translate(-50%, -50%) rotate(3deg);
  }
}

@keyframes contactSmsSend {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(12px);
    opacity: 0.8;
  }
}

@keyframes contactWhatsappPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.09);
  }
}

@keyframes contactWhatsappDot {
  0%,
  100% {
    transform: scale(0.75);
    opacity: 0.55;
  }
  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes contactRcsTilt {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-5deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(5deg);
  }
}

@keyframes contactRcsCard {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-8px);
  }
}

@keyframes contactIvrPulse {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.94);
  }
}

@keyframes contactIvrKey {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes contactSeoSweep {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-8deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(8deg);
  }
}

@keyframes contactSeoChart {
  0%,
  100% {
    transform: scaleY(0.8);
  }
  50% {
    transform: scaleY(1.08);
  }
}

@keyframes contactSmoShare {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(12deg);
  }
}

@keyframes contactSmoNode {
  0%,
  100% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.12);
  }
}

@keyframes contactInfluencerShine {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-6deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(6deg) scale(1.06);
  }
}

@keyframes contactInfluencerStar {
  0%,
  100% {
    transform: rotate(0) scale(0.8);
  }
  50% {
    transform: rotate(45deg) scale(1.15);
  }
}

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

@keyframes contactTataWave {
  0% {
    transform: scale(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.contact-scene:not(.is-active) * {
  animation-play-state: paused !important;
}

.contact-visual-core {
  will-change: transform;
}

.contact-service-caption {
  transition:
    border-color 0.65s ease,
    box-shadow 0.65s ease,
    background-color 0.65s ease;
}

.contact-service-caption-icon {
  transition:
    color 0.65s ease,
    background-color 0.65s ease,
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 480px) {
  .contact-scene {
    transform: translate(-50%, -50%) scale(0.95);
  }

  .contact-scene.is-active {
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-scene,
  .contact-service-caption,
  .contact-service-caption-icon {
    transition-duration: 0.01ms !important;
  }
}
.solutions-section {
  padding: 38px 0 45px;
  background-color: var(--white-color);
}

.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.solution-card {
  min-width: 0;
  overflow: hidden;

  background-color: var(--white-color);
  border: 1px solid #e5e5e5;
  border-radius: 6px;

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.025);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.solution-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 12px 28px rgba(29, 53, 87, 0.1);
}

.solution-card-icon {
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease;
}

.solution-card:hover .solution-card-icon {
  transform: translateY(-5px) rotate(-6deg);
  box-shadow: 0 8px 18px rgba(79, 168, 197, 0.25);
}

.solution-card-image {
  position: relative;
  overflow: visible;
  height: 149px;
}

.solution-card-image::after,
.vlog-image-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.42) 50%,
    transparent 65%
  );
  transform: translateX(-125%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.solution-card:hover .solution-card-image::after,
.vlog-image-link:hover::after {
  transform: translateX(125%);
}

.solution-card-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 6px 6px 0 0;

  transition: transform 0.4s ease;
}

.solution-card:hover .solution-card-image img {
  transform: scale(1.04);
}

.solution-card-icon {
  position: absolute;

  left: 22px;
  bottom: -18px;

  width: 42px;
  height: 42px;

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

  background-color: var(--white-color);
  border: 1px solid #e9e9e9;
  border-radius: 3px;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);

  z-index: 2;
}

.solution-card-icon i {
  font-size: 20px;
  line-height: 1;

  color: var(--primary-color);
}

.handshake-icon {
  width: 22px;
  height: 22px;
  color: var(--primary-color);
  display: block;
}

.solution-card-body {
  display: flex;
  flex-direction: column;

  min-height: 146px;

  padding: 56px 21px 17px;
}

.solution-card-title {
  min-height: 42px;

  margin: 0 0 10px;

  font-family: var(--paragraph-font);
  font-size: 18px;
  line-height: 1.22;
  font-weight: 700;

  color: var(--text-color);
}

.solution-card-description {
  min-height: 35px;

  margin: 0 0 11px;

  font-family: var(--paragraph-font);
  line-height: 1.45;
  font-weight: 400;

  color: #4a5568;
}

.solution-card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  width: fit-content;

  margin-top: auto;

  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 600;

  color: var(--primary-color);
  text-decoration: none;

  transition: color 0.25s ease;
}

.solution-card-link i {
  font-size: 12px;

  transition: transform 0.25s ease;
}

.solution-card-link:hover {
  color: var(--accent-color);
}

.solution-card-link:hover i {
  transform: translateX(4px);
}

.trusted-section {
  background-color: var(--white-color);
  padding: 30px 0 40px;
  overflow: hidden;
}

.trusted-header {
  margin: 0 auto 30px;
  padding: 0 12px;
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #333333;
  text-transform: uppercase;
}

.trusted-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.trusted-marquee::before,
.trusted-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 2;
}

.trusted-marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--white-color), transparent);
}

.trusted-marquee::after {
  right: 0;
  background: linear-gradient(270deg, var(--white-color), transparent);
}

.trusted-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  min-width: 100%;
  animation: trustedLoop 25s linear infinite;
}

.trusted-item {
  transition:
    color 0.3s ease,
    transform 0.3s ease;
}

.trusted-item:hover {
  color: var(--primary-color);
  transform: translateY(-3px);
}

.trusted-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 150px;
  color: #6c6c6c;
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.trusted-icon {
  font-family: var(--secondary-heading-font);
  font-size: 26px;
  color: var(--primary-color);
  line-height: 1;
}

.trusted-name {
  font-size: 16px;
  font-weight: 700;
}

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

@media (max-width: 1199.98px) {
  .solutions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .solution-card-image {
    height: 180px;
  }

  .solution-card-body {
    min-height: 160px;
  }
}

@media (max-width: 575.98px) {
  .solutions-section {
    padding: 30px 0 35px;
  }

  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .solution-card-image {
    height: 190px;
  }

  .solution-card-body {
    min-height: 155px;
    padding: 27px 22px 20px;
  }

  .solution-card-title {
    font-size: 18px;
  }

  .solution-card-description {
    font-size: 12px;
  }

  .solution-card-link {
    font-size: 12px;
  }
}

.why-contact-section {
  padding: 52px 0 55px;

  background-color: #f4f9fc;
}

.why-contact-content {
  padding-right: 35px;
}

.why-contact-eyebrow {
  margin-bottom: 27px;

  font-family: var(--paragraph-font);
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;

  color: #333333;
}

.why-contact-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 32px;
  line-height: 1.48;
  font-weight: 700;
  letter-spacing: -0.7px;

  color: var(--text-color);
}

.why-contact-title span {
  font-family: var(--secondary-heading-font);
  font-weight: 700;
  letter-spacing: 0;

  color: var(--primary-color);
}

.why-contact-description {
  max-width: 390px;

  margin: 20px 0 38px;

  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 400;

  color: #4a5568;
}

.why-contact-description strong {
  font-weight: 700;
}

.why-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 237px;
  height: 57px;

  border-radius: 6px;

  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);

  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 500;

  color: var(--white-color);
  text-decoration: none;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.why-contact-btn:hover {
  color: var(--white-color);

  background-color: var(--accent-color);
  border-color: var(--accent-color);

  transform: translateY(-2px);
}

.why-contact-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 50px;
  row-gap: 27px;
}

.why-feature {
  min-width: 0;
}

.why-feature-icon {
  width: 77px;
  height: 77px;

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

  margin-bottom: 13px;

  border: 1px solid #d3e5f1;
  border-radius: 50%;

  background-color: #e7f4ff;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.why-feature:hover .why-feature-icon {
  transform: translateY(-7px) rotate(8deg);
  background-color: var(--white-color);
  box-shadow: 0 10px 22px rgba(79, 168, 197, 0.2);
}

.why-feature-icon i {
  font-size: 29px;
  line-height: 1;

  color: var(--primary-color);
}

.why-feature h3 {
  margin: 0 0 10px;

  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 700;

  color: var(--text-color);
}

.why-feature p {
  max-width: 230px;

  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;

  color: #4a5568;
}

@media (max-width: 991.98px) {
  .why-contact-section {
    padding: 45px 0;
  }

  .why-contact-content {
    padding-right: 0;
    margin-bottom: 45px;
  }

  .why-contact-title {
    font-size: 35px;
  }

  .why-contact-description {
    max-width: 500px;
  }

  .why-contact-features {
    column-gap: 35px;
    row-gap: 35px;
  }
}

@media (max-width: 575.98px) {
  .why-contact-section {
    padding: 38px 0 40px;
  }

  .why-contact-eyebrow {
    margin-bottom: 20px;
  }

  .why-contact-title {
    font-size: 29px;
    line-height: 1.35;
  }

  .why-contact-description {
    font-size: 12px;
    margin: 18px 0 28px;
  }

  .why-contact-btn {
    width: 100%;
    max-width: 237px;
    height: 52px;
  }

  .why-contact-content {
    margin-bottom: 40px;
  }

  .why-contact-features {
    column-gap: 20px;
    row-gap: 30px;
  }

  .why-feature-icon {
    width: 64px;
    height: 64px;
  }

  .why-feature-icon i {
    font-size: 24px;
  }

  .why-feature h3 {
    font-size: 13px;
  }

  .why-feature p {
    font-size: 11px;
  }
}

.industries-section {
  background-color: var(--white-color);
  padding: 50px 0 50px;
}

.industries-heading {
  margin: 0 auto;
}

.industries-kicker {
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 2px;
  color: #333333;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.industries-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.industries-title {
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 2vw, 40px);
  line-height: 1.16;
  font-weight: 700;
  color: var(--text-color);
  margin: 0;
}
.industries-title span {
  color: var(--primary-color);
  /* font-family: var(--secondary-heading-font); */
}
.industries-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.industry-arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  background-color: var(--white-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.industry-arrow i {
  font-size: 17px;
  line-height: 1;
}

.industry-arrow:hover {
  background-color: var(--accent-color);
  color: var(--white-color);
  border-color: var(--accent-color);
}

.industries-slider-wrapper {
  width: 100%;
  overflow: hidden;
  margin-top: 40px;
}

.industriesSwiper {
  width: 100%;
  padding: 9px 2px 10px 5px;
}

.industriesSwiper .swiper-wrapper {
  align-items: stretch;
}

.industriesSwiper .swiper-slide {
  height: auto;
  box-sizing: border-box;
}

.industriesSwiper .industry-card {
  width: 100%;
  height: 112px;

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

  border: 1px solid #e7e7e7;
  border-radius: 12px;

  background-color: var(--light-bg);
  box-shadow:
    rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.industriesSwiper .industry-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary-color);
  background-color: var(--white-color);
  box-shadow: 0 7px 18px rgba(29, 53, 87, 0.1);
}

.industriesSwiper .industry-card:hover .industry-icon i {
  animation: iconBounce 0.6s ease;
}

.industriesSwiper .industry-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
}

.industriesSwiper .industry-icon i {
  font-size: 29px;
  line-height: 1;
  color: var(--heading-color);
}

.industriesSwiper .industry-card span {
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  color: #7c8ba6;
}

@media (max-width: 767.98px) {
  .industries-title-row {
    flex-wrap: wrap;
  }

  .industriesSwiper .industry-card {
    height: 100px;
  }

  .industriesSwiper .industry-icon i {
    font-size: 30px;
  }

  .industriesSwiper .industry-card span {
    font-size: 11px;
  }
}

.success-story-section {
  padding: 58px 0 62px;
  background-color: var(--white-color);
  overflow: hidden;
}

.success-story-swiper {
  width: 100%;
}

.success-story-row {
  min-height: 245px;
}

.success-story-content {
  padding-right: 30px;
}

.success-story-eyebrow {
  margin-bottom: 17px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;

  color: #333333;
}

.success-story-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 34px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: -0.8px;

  color: var(--text-color);
}

.success-story-title span {
  font-family: var(--secondary-heading-font);
  font-weight: 700;
  letter-spacing: 0;

  color: var(--primary-color);
}

.success-story-description {
  max-width: 425px;

  margin: 20px 0 20px;

  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;

  color: #858585;
}

.success-story-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  max-width: 425px;
}

.success-story-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;

  color: var(--primary-color);
  text-decoration: none;

  white-space: nowrap;

  transition: color 0.25s ease;
}

.success-story-link span {
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.success-story-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
}

.success-story-counter {
  margin-right: 10px;

  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 400;

  color: #858585;
}

.success-story-counter .current-slide {
  color: #858585;
}

.success-arrow {
  width: 35px;
  height: 35px;

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

  border: 1px solid #eeeeee;
  border-radius: 50%;

  background-color: var(--white-color);
  color: var(--primary-color);

  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

  cursor: pointer;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.success-arrow i {
  font-size: 14px;
}

.success-arrow:hover {
  background-color: var(--accent-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

.success-story-image {
  width: 100%;
  height: 239px;

  overflow: hidden;
  border-radius: 5px;
}

.success-story-image img {
  width: 100%;
  height: 100%;

  display: block;

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

  transition: transform 0.6s ease;
}

.success-story-swiper .swiper-slide-active .success-story-content {
  animation: storyReveal 0.75s both cubic-bezier(0.22, 1, 0.36, 1);
}

.success-story-swiper .swiper-slide-active .success-story-image {
  animation: storyImageReveal 0.9s both cubic-bezier(0.22, 1, 0.36, 1);
}

.success-story-swiper .swiper-slide-active .success-story-image img {
  transform: scale(1);
}

@media (max-width: 991.98px) {
  .success-story-section {
    padding: 45px 0 50px;
  }

  .success-story-content {
    padding-right: 0;
    margin-bottom: 30px;
  }

  .success-story-title {
    font-size: 32px;
  }

  .success-story-row {
    min-height: auto;
  }

  .success-story-description {
    max-width: 520px;
  }

  .success-story-bottom {
    max-width: 520px;
  }

  .success-story-image {
    height: 300px;
  }
}

@media (max-width: 575.98px) {
  .success-story-section {
    padding: 38px 0 42px;
  }

  .success-story-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 17px;
  }

  .success-story-title {
    font-size: 27px;
    line-height: 1.35;
  }

  .success-story-description {
    font-size: 12px;
    margin: 17px 0 25px;
  }

  .success-story-bottom {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }

  .success-story-link {
    font-size: 13px;
  }

  .success-story-section .success-story-image {
    height: 220px;
    margin-top: 30px;
  }
}

.presence-section {
  position: relative;
  overflow: hidden;

  padding: 30px 0 38px;

  background-color: #f4f9fc;
}

.presence-content {
  padding-left: 2px;
}

.presence-eyebrow {
  margin-bottom: 17px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;

  color: #333333;
}

.presence-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 34px;
  line-height: 1.42;
  font-weight: 700;
  letter-spacing: -0.7px;

  color: var(--text-color);
}

.presence-title span {
  font-family: var(--secondary-heading-font);
  font-weight: 700;
  letter-spacing: 0;

  color: var(--primary-color);
}

.presence-description {
  max-width: 365px;

  margin: 22px 0 20px;

  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;

  color: #4a5568;
}

.presence-description strong {
  font-weight: 700;
}

.presence-locations {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.presence-location {
  display: flex;
  align-items: center;
  gap: 20px;
}

.presence-location-icon {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

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

  border-radius: 50%;

  background-color: var(--primary-color);
  color: var(--white-color);
}

.presence-location-icon i {
  font-size: 19px;
}

.presence-location-text h3 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 15px;
  line-height: 1.3;
  font-weight: 500;

  color: #3f3f3f;
}

.presence-location-text span {
  display: block;

  margin-top: 2px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 400;

  color: #858585;
}

.presence-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 188px;
  height: 46px;

  margin-top: 26px;

  border: 1px solid var(--primary-color);
  border-radius: 5px;

  background-color: transparent;

  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 500;

  color: var(--primary-color);
  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.presence-btn:hover {
  background-color: var(--primary-color);
  color: var(--white-color);

  transform: translateY(-2px);
}

.presence-map-wrapper {
  position: relative;

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

  margin: 0 auto;

  aspect-ratio: 1 / 0.96;
}

.presence-map {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: contain;

  transform: translate(-50%, -50%);
  animation: mapFloat 6s ease-in-out infinite;
}

@media (max-width: 991.98px) {
  .presence-section {
    padding: 45px 0;
  }

  .presence-content {
    margin-bottom: 30px;
  }

  .presence-map-wrapper {
    max-width: 580px;
  }

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

@media (max-width: 575.98px) {
  .presence-section {
    padding: 38px 0 45px;
  }

  .presence-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
  }

  .presence-title {
    font-size: 29px;
    line-height: 1.35;
  }

  .presence-description {
    font-size: 12px;
    margin: 18px 0 20px;
  }

  .presence-location {
    gap: 15px;
  }

  .presence-location-icon {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .presence-location-text h3 {
    font-size: 14px;
  }

  .presence-map-wrapper {
    margin-top: 25px;
    max-width: 100%;
  }

  .presence-map-marker {
    font-size: 9px;
    gap: 4px;
  }

  .marker-dot {
    width: 8px;
    height: 8px;
    flex-basis: 8px;
  }

  .marker-label {
    padding: 3px 5px;
  }

  .presence-btn {
    width: 188px;
    height: 44px;
  }
}

.success-stories-section {
  padding: 52px 0 62px;

  background-color: var(--white-color);

  overflow: hidden;
}

.success-stories-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  margin-bottom: 22px;
}

.success-stories-eyebrow {
  margin-bottom: 17px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3.5px;
  text-transform: uppercase;

  color: #333333;
}

.success-stories-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: -0.8px;

  color: var(--text-color);
}

.success-stories-navigation {
  display: flex;
  align-items: center;

  gap: 9px;

  flex-shrink: 0;

  margin-bottom: 1px;
}

.success-story-arrow {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid var(--primary-color);
  background-color: var(--white-color);
  color: var(--primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.success-story-arrow i {
  font-size: 19px;
  line-height: 1;
}

.success-story-arrow:hover {
  background-color: var(--accent-color);
  color: var(--white-color);
  border-color: var(--accent-color);
}

.success-story-arrow.swiper-button-disabled {
  opacity: 0.45;

  cursor: not-allowed;

  transform: none;
}

.success-stories-slider-wrapper {
  width: 100%;

  overflow: hidden;
}

.successStoriesSwiper {
  width: 100%;

  overflow: visible;
}

.successStoriesSwiper .swiper-wrapper {
  align-items: stretch;
}

.successStoriesSwiper .swiper-slide {
  height: auto;

  box-sizing: border-box;
}

.success-story-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  overflow: visible;

  border: 1px solid #e1e1e1;

  border-radius: 6px;

  background-color: var(--white-color);

  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);

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

.success-story-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 10px 25px rgba(29, 53, 87, 0.08);
}

.success-story-image-wrap {
  position: relative;

  width: 100%;
  height: 240px;

  overflow: visible;

  border-radius: 5px 5px 0 0;
}

.success-story-image {
  display: block;

  width: 100%;
  height: 100%;

  object-position: center;

  border-radius: 1px 1px 0 0;

  transition: transform 0.5s ease;
}

.success-story-card:hover .success-story-image {
  transform: scale(1.02);
}

.success-story-category {
  position: absolute;

  left: 29px;
  bottom: -11px;

  z-index: 5;

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

  min-width: 104px;
  height: 27px;

  padding: 0 12px;

  border: 1px solid #d9e0e8;
  border-radius: 2px;

  background-color: var(--white-color);

  font-family: var(--paragraph-font);
  font-size: 9px;
  line-height: 1;
  font-weight: 600;

  color: #35517d;

  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);

  white-space: nowrap;
}

.success-story-card-content {
  display: flex;
  flex-direction: column;

  flex: 1;

  padding: 27px 30px 28px;
}

.success-story-company {
  margin-bottom: 9px;

  font-family: var(--paragraph-font);
  font-size: 9px;
  line-height: 1.2;
  font-weight: 500;

  color: #333333;
}

.success-story-card-title {
  margin: 0 0 5px;

  font-family: var(--paragraph-font);
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: -0.2px;

  color: var(--text-color);
}

.success-story-card-description {
  min-height: 53px;

  max-width: 310px;

  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;

  color: #4a5568;
}

.success-story-metrics {
  display: flex;
  align-items: center;

  margin-top: 20px;

  min-height: 40px;
}

.success-story-metric {
  position: relative;

  min-width: 82px;

  padding-right: 20px;
}

.success-story-metric + .success-story-metric {
  margin-left: 18px;

  padding-left: 18px;
}

.success-story-metric + .success-story-metric::before {
  content: "";

  position: absolute;

  left: 0;
  top: 1px;

  width: 1px;
  height: 31px;

  background-color: #dedede;
}

.success-story-metric strong {
  display: block;

  margin-bottom: 2px;

  font-family: var(--paragraph-font);
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;

  color: var(--text-color);
}

.success-story-metric span {
  display: block;

  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 400;

  color: #4a5568;
}

.success-story-link {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  width: fit-content;

  margin-top: auto;
  padding-top: 24px;

  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  transition: color 0.25s ease;
}

.success-story-link span {
  font-family: Arial, sans-serif;

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

  transition: transform 0.25s ease;
}

.success-story-link:hover {
  color: var(--accent-color);
}

.success-story-link:hover span {
  transform: translateX(4px);
}

@media (max-width: 1199.98px) {
  .successStoriesSwiper {
    overflow: visible;
  }

  .success-story-card-content {
    padding-left: 25px;
    padding-right: 25px;
  }
}

@media (max-width: 991.98px) {
  .success-stories-section {
    padding: 45px 0 55px;
  }

  .success-stories-title {
    font-size: 30px;
  }

  .success-story-arrow {
    width: 42px;
    height: 42px;
  }

  .success-story-image-wrap {
    height: 240px;
  }

  .success-story-card-content {
    padding: 27px 25px 25px;
  }
}

@media (max-width: 575.98px) {
  .success-stories-section {
    padding: 38px 0 45px;
  }

  .success-stories-header {
    align-items: flex-start;

    margin-bottom: 20px;
  }

  .success-stories-eyebrow {
    margin-bottom: 14px;

    font-size: 10px;

    letter-spacing: 3px;
  }

  .success-stories-title {
    font-size: 27px;

    line-height: 1.25;
  }

  .success-stories-navigation {
    gap: 6px;
  }

  .success-story-arrow {
    width: 38px;
    height: 38px;
  }

  .success-story-arrow i {
    font-size: 16px;
  }

  .success-story-image-wrap {
    height: 200px;
  }

  .success-story-card-content {
    padding: 27px 20px 23px;
  }

  .success-story-category {
    left: 20px;
  }

  .success-story-card-title {
    font-size: 17px;
  }

  .success-story-card-description {
    font-size: 11px;
  }
}

.site-footer {
  background: #0f172a;
  color: var(--white-color);

  padding: 60px 0 58px;

  overflow: hidden;
}

.footer-main-row {
  align-items: flex-start;
}

.footer-about {
  max-width: 315px;
  margin-top: 12px;
}

.footer-logo {
  width: 122px;
  height: auto;
  margin-bottom: 16px;
  display: block;
}

.footer-about p {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.72) !important;
}

.footer-about strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.78);
}

.footer-column {
  padding-left: 12px;
}

.footer-column h3 {
  margin: 0 0 17px;

  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.2;
  font-weight: 600;

  color: var(--white-color);
}

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

  margin: 0;
  padding: 0;
}

.footer-column ul li {
  margin-bottom: 12px;
}

.footer-column ul li a {
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 400;

  color: #f8fafc;
  text-decoration: none;

  transition:
    color 0.25s ease,
    padding-left 0.25s ease;
}

.footer-column ul li a:hover {
  color: var(--accent-color);
  padding-left: 3px;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 30px;

  margin-top: 37px;
  padding-left: 3px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;

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

  font-size: 17px;
  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.footer-socials a:hover {
  color: var(--primary-color);
  transform: translateY(-2px);
}

.footer-contact {
  padding-left: 10px;
}

.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  margin-bottom: 17px;
}

.footer-contact-item i {
  flex: 0 0 14px;

  margin-top: 2px;

  font-size: 13px;
  line-height: 1.2;

  color: var(--white-color);
}

.footer-contact-item a {
  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.35;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;

  overflow-wrap: anywhere;

  transition: color 0.25s ease;
}

.footer-contact-item a:hover {
  color: var(--primary-color);
}

@media (max-width: 991.98px) {
  .site-footer {
    padding: 50px 0;
  }

  .footer-about {
    max-width: 450px;
    margin-bottom: 35px;
  }

  .footer-column {
    padding-left: 0;
  }

  .footer-contact {
    margin-top: 30px;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    padding: 42px 0;
  }

  .footer-about {
    margin-top: 0;
    margin-bottom: 35px;
  }

  .footer-about p {
    font-size: 12px;
  }

  .footer-socials {
    margin-top: 25px;
    margin-bottom: 35px;
  }

  .footer-column {
    margin-bottom: 30px;
  }

  .footer-column h3 {
    margin-bottom: 15px;
  }

  .footer-column ul li {
    margin-bottom: 11px;
  }

  .footer-contact {
    margin-top: 0;
    margin-bottom: 0;
  }
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 9999;
}

.back-to-top i {
  font-size: 22px;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--accent-color);
}

@keyframes heroSweep {
  0%,
  100% {
    opacity: 0;
    transform: rotate(18deg) translateX(-170%);
  }
  35%,
  65% {
    opacity: 0.5;
    transform: rotate(18deg) translateX(170%);
  }
}

@keyframes iconBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-7px);
  }
}

@keyframes storyReveal {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes storyImageReveal {
  from {
    opacity: 0;
    transform: scale(0.94) translateX(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateX(0);
  }
}

@keyframes mapFloat {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    transform: translate(-50%, calc(-50% - 7px)) rotate(1deg);
  }
}

@keyframes revealFromLeft {
  from {
    opacity: 0.35;
    transform: translateX(-42px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealFromRight {
  from {
    opacity: 0.35;
    transform: translateX(42px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealZoom {
  from {
    opacity: 0.45;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes revealPop {
  from {
    opacity: 0.45;
    transform: scale(0.82) rotate(-3deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes revealWipe {
  from {
    clip-path: inset(0 100% 0 0 round 6px);
  }
  to {
    clip-path: inset(0 0 0 0 round 6px);
  }
}

@keyframes revealBlur {
  from {
    opacity: 0.45;
    filter: blur(12px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes revealRotate {
  from {
    opacity: 0.45;
    transform: rotate(8deg) scale(0.94);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .motion-ready.motion-observer-ready .reveal-on-scroll,
  .motion-ready.motion-observer-ready .reveal-from-left,
  .motion-ready.motion-observer-ready .reveal-from-right,
  .motion-ready.motion-observer-ready .reveal-zoom,
  .motion-ready.motion-observer-ready .reveal-pop,
  .motion-ready.motion-observer-ready .reveal-wipe,
  .motion-ready.motion-observer-ready .reveal-blur,
  .motion-ready.motion-observer-ready .reveal-rotate {
    opacity: 1;
    transform: none;
    clip-path: none;
    filter: none;
  }
}

.faq-section {
  padding: 48px 0 55px;

  background-color: var(--white-color);
}

.faq-heading {
  margin-bottom: 22px;
}

.faq-eyebrow {
  margin-bottom: 17px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  letter-spacing: 3.5px;
  text-transform: uppercase;

  color: #333333;
}

.faq-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 32px;
  line-height: 1.2;
  font-weight: 700;

  letter-spacing: -0.6px;

  color: var(--text-color);
}

.faq-title span {
  font-family: var(--secondary-heading-font);
  font-weight: 700;

  color: var(--primary-color);
}

.faq-accordion {
  width: 100%;
}

.faq-item {
  margin-bottom: 8px;

  overflow: hidden;

  border: 1px solid #dcdcdc !important;
  border-radius: 6px !important;

  background-color: var(--white-color);

  box-shadow: none;
}

.faq-item:last-child {
  margin-bottom: 0;
}

.faq-button {
  position: relative;

  min-height: 55px;

  padding: 0 23px;

  border: 0 !important;

  background-color: var(--white-color) !important;

  box-shadow: none !important;

  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;

  color: #4a5568 !important;
}

.faq-button::after {
  display: none !important;
}

.faq-plus {
  position: absolute;

  right: 21px;
  top: 50%;

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

  width: 20px;
  height: 20px;

  transform: translateY(-50%);

  font-family: Arial, sans-serif;
  font-size: 23px;
  line-height: 1;
  font-weight: 500;

  color: #4a5568;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.faq-button:not(.collapsed) {
  color: var(--primary-color) !important;
}

.faq-button:not(.collapsed) .faq-plus {
  color: var(--primary-color);

  transform: translateY(-50%) rotate(45deg);
}

.faq-answer {
  padding: 0 23px 20px;

  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.6;
  font-weight: 400;

  color: #4a5568;
}

.faq-button:focus {
  outline: none !important;
}

.faq-item:hover {
  border-color: rgba(79, 168, 197, 0.45) !important;
}

.faq-button:hover {
  color: var(--primary-color) !important;
}

@media (max-width: 991.98px) {
  .faq-section {
    padding: 45px 0 50px;
  }

  .faq-title {
    font-size: 30px;
  }
}

@media (max-width: 575.98px) {
  .faq-section {
    padding: 38px 0 42px;
  }

  .faq-eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 15px;
  }

  .faq-title {
    font-size: 27px;
  }

  .faq-heading {
    margin-bottom: 18px;
  }

  .faq-item {
    margin-bottom: 7px;
  }

  .faq-button {
    min-height: 55px;

    padding: 12px 45px 12px 16px;

    font-size: 12px;
  }

  .faq-plus {
    right: 15px;
    font-size: 21px;
  }

  .faq-answer {
    padding: 0 16px 17px;

    font-size: 11px;
  }
}

.connect-cta-section {
  position: relative;

  padding: 25px 0 30px;

  background-color: var(--primary-color);

  overflow: hidden;
}

.connect-cta-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  text-align: center;
}

.connect-cta-eyebrow {
  margin-bottom: 10px;

  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: var(--white-color);
}

.connect-cta-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 28px;
  line-height: 1.25;
  font-weight: 700;

  letter-spacing: -0.3px;

  color: var(--white-color);
}

.connect-cta-description {
  margin: 17px 0 0;

  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 400;

  color: var(--white-color);
}

.connect-cta-buttons {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  width: 100%;

  margin-top: 37px;
}

.connect-cta-btn {
  width: 205px;
  height: 46px;

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

  gap: 6px;

  border: 1px solid var(--white-color);
  border-radius: 25px;

  background-color: var(--white-color);

  font-family: var(--paragraph-font);
  font-size: 11px;
  line-height: 1;
  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease,
    border-color 0.25s ease;
}

.connect-cta-btn:hover {
  background-color: var(--accent-color);

  border-color: var(--white-color);

  color: var(--white-color);

  transform: translateY(-2px);
}

.connect-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 16px;
  height: 16px;

  font-size: 13px;
}

.connect-cta-icon i {
  line-height: 1;
}

@media (max-width: 767.98px) {
  .connect-cta-section {
    padding: 32px 0 35px;
  }

  .connect-cta-title {
    font-size: 25px;
  }

  .connect-cta-description {
    max-width: 500px;

    padding: 0 10px;

    font-size: 12px;
  }

  .connect-cta-buttons {
    flex-direction: column;

    gap: 10px;

    margin-top: 28px;
  }

  .connect-cta-btn {
    width: 100%;
    max-width: 300px;
  }

  .back-to-top {
    bottom: 55px;
  }
}

@media (max-width: 400px) {
  .connect-cta-title {
    font-size: 22px;
  }

  .connect-cta-description {
    font-size: 11px;
  }
}

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

.process-section {
  padding: 65px 0 70px;
  background: #fff;
  overflow: hidden;
}

.process-header {
  margin-bottom: 42px;
}

.process-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  color: ##333333;
}

.process-title {
  margin: 0;
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.2;
  font-weight: 700;
  color: #080808;
}

.process-title span {
  font-family: var(--secondary-heading-font);
  font-weight: 700;
  color: #080808;
}

/* Main split layout */
.process-layout {
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
}

/* LEFT SIDE */
.process-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  padding: 0 30px 0 0;
}

.process-circle-wrap {
  position: relative;
  width: min(100%, 370px);
  aspect-ratio: 1;
}

.process-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.process-ring-track,
.process-ring-progress {
  fill: none;
  stroke-width: 24;
}

.process-ring-track {
  stroke: #dceff4;
}

.process-ring-progress {
  stroke: #48a6bf;
  stroke-linecap: butt;
  stroke-dasharray: 703.72;
  stroke-dashoffset: 469.15;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Center image */
.process-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  overflow: hidden;
  border: 5px solid #4fa8c5;
  border-radius: 50%;
  background: #eaf5f8;
  z-index: 2;
}

.process-center img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease;
}

/* Milestone positioning */
.process-milestone {
  position: absolute;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.milestone-one {
  top: -12%;
  left: 50%;
  transform: translateX(-50%);
}

.milestone-two {
  right: 12%;
  bottom: 0%;
  flex-direction: column-reverse;
  gap: 25px;
}

.milestone-three {
  left: -11%;
  top: 63%;
  transform: translateY(-50%);
  flex-direction: row;
  gap: 16px;
}

.milestone-number {
  font-family: var(--paragraph-font);
  font-size: 55px;
  line-height: 1;
  font-weight: 700;
  color: #e2f2f6;
  transition: color 0.3s ease;
}

.milestone-label {
  margin-top: -2px;
  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  color: #111;
}

.milestone-icon {
  width: 45px;
  height: 45px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #4fa8c5;
  border-radius: 50%;
  background: #fff;
  color: #4fa8c5;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  transition: 0.3s ease;
}

.milestone-icon i {
  font-size: 17px;
}

.process-milestone.active .milestone-number,
.process-milestone.completed .milestone-number {
  color: #d9edf2;
}

.process-milestone.active .milestone-icon {
  color: #fff;
  background: #4fa8c5;
  box-shadow: 0 5px 14px rgba(79, 168, 197, 0.25);
}

/* RIGHT SIDE */
.process-content {
  min-width: 0;
  padding: 0 0 0 40px;
  border-left: 1px solid #e8e8e8;
}

.process-step-count {
  margin: -8px 0 12px 10px;
  font-family: var(--paragraph-font);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2px;
  color: #777;
}

.process-step-count span:first-child {
  color: #4fa8c5;
}

.process-step-heading {
  position: relative;
  min-height: 135px;
  padding-top: 3px;
}

.process-big-number {
  display: block;
  font-family: var(--paragraph-font);
  font-size: 86px;
  line-height: 0.95;
  font-weight: 700;
  color: #e3f2f6;
}

.process-step-heading h3 {
  position: relative;
  margin: -2px 0 0 3px;
  font-family: var(--paragraph-font);
  font-size: 24px;
  line-height: 1.2;
  font-weight: 700;
  color: #111;
}

.process-description {
  max-width: 690px;
  min-height: 48px;
  margin: 0 0 22px;
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  color: #4a5568;
}

.process-description strong {
  font-weight: 700;
  color: #333333;
}

/* Feature cards */
.process-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.process-feature {
  min-width: 0;
}

.process-feature-icon {
  width: 58px;
  height: 58px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dcecf4;
  border-radius: 50%;
  background: #eaf5ff;
  color: #4fa8c5;
}

.process-feature-icon i {
  font-size: 22px;
}

.process-feature h4 {
  margin: 0 0 8px;
  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 600;
  color: #111;
}

.process-feature p {
  margin: 0;
  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.5;
  color: #4a5568;
}

/* Navigation */
.process-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
}

.process-arrow {
  width: 31px;
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e8e8e8;
  border-radius: 50%;
  background: #fff;
  color: #4fa8c5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: 0.25s ease;
}

.process-arrow:hover:not(:disabled) {
  background: #4fa8c5;
  color: #fff;
  border-color: #4fa8c5;
}

.process-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.process-arrow.next {
  background: #4fa8c5;
  color: #fff;
  border-color: #4fa8c5;
}

.process-arrow.next:hover:not(:disabled) {
  background: #287f9a;
}

.process-counter {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 2px;
  font-family: var(--paragraph-font);
  font-size: 11px;
  color: #b1b1b1;
}

.process-counter strong {
  color: #666;
  font-weight: 600;
}

/* Responsive */
@media (max-width: 991.98px) {
  .process-section {
    padding: 55px 0;
  }

  .process-layout {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .process-visual {
    min-height: 360px;
    padding: 0;
  }

  .process-circle-wrap {
    width: min(100%, 340px);
  }

  .process-content {
    padding: 30px 0 0;
    border-left: 0;
    border-top: 1px solid #e8e8e8;
  }

  .process-step-count {
    margin: 0 0 12px;
  }

  .process-step-heading {
    min-height: 120px;
  }
}

@media (max-width: 575.98px) {
  .process-section {
    padding: 42px 0;
  }

  .process-header {
    margin-bottom: 30px;
  }

  .process-title {
    font-size: 28px;
  }

  .process-visual {
    min-height: 300px;
  }

  .process-circle-wrap {
    width: min(100%, 300px);
  }

  .process-ring-track,
  .process-ring-progress {
    stroke-width: 20;
  }

  .milestone-number {
    font-size: 40px;
  }

  .milestone-label {
    font-size: 9px;
  }

  .milestone-icon {
    width: 37px;
    height: 37px;
    margin-top: 8px;
  }

  .milestone-icon i {
    font-size: 14px;
  }

  .process-center {
    width: 30%;
    border-width: 4px;
  }

  .process-content {
    padding-top: 25px;
  }

  .process-step-heading {
    min-height: 105px;
  }

  .process-big-number {
    font-size: 70px;
  }

  .process-step-heading h3 {
    font-size: 22px;
  }

  .process-description {
    font-size: 12px;
    margin-bottom: 25px;
  }

  .process-features {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .process-feature {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 13px;
    align-items: center;
  }

  .process-feature-icon {
    width: 46px;
    height: 46px;
    grid-row: span 2;
    margin: 0;
  }

  .process-feature-icon i {
    font-size: 18px;
  }

  .process-feature h4 {
    margin: 0 0 4px;
    font-size: 12px;
  }

  .process-feature p {
    font-size: 10px;
  }

  .process-controls {
    margin-top: 25px;
  }
}

/* ------------------------------------------------------------- */
/* SMS */
/* ------------------------------------------------------------- */

.sms-hero {
  background-image: url("images/sms/sms-hero.png");
  background-position: center;
  min-height: 670px;
}
.digital-hero {
  background-image: url("images/digital-marketing/hero.png");
  background-position: center;
  min-height: 670px;
}
.digital-services-section {
  position: relative;
  overflow: hidden;
  padding: 38px 0 42px;
  background:
    radial-gradient(
      ellipse at 78% 12%,
      rgba(84, 187, 235, 0.1),
      transparent 30%
    ),
    linear-gradient(180deg, #ffffff 0%, #f8fcff 100%);
}

.digital-services-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 30px;
  margin-bottom: 24px;
}

.digital-services-intro {
  position: relative;
  z-index: 1;
}

.digital-services-eyebrow,
.digital-approach-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #53648c;
  font-weight: 600;
  letter-spacing: 1.4px;
  font-size: 11px;
}

.digital-services-intro h2 {
  margin: 8px 0 12px;
  color: var(--heading-color);
  font-family: var(--secondary-heading-font);
  font-weight: 800;
  line-height: 1.08;
}

.digital-services-intro h2 span {
  display: block;
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.digital-services-intro > p {
  max-width: 560px;
  margin: 0 0 16px;
  color: #53648c !important;
  line-height: 1.5;
}

.digital-services-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--primary-color);
  color: #ffffff;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
  font-size: 12px;
}

.digital-services-cta:hover,
.digital-services-cta:focus-visible {
  transform: translateY(-1px);
  background: color-mix(
    in srgb,
    var(--primary-color) 82%,
    var(--heading-color)
  );
  color: #ffffff;
}

.digital-growth-visual {
  position: relative;
  display: grid;
  min-height: 300px;
  place-items: center;
  isolation: isolate;
}

.growth-orbit {
  position: absolute;
  z-index: -1;
  width: min(78%, 340px);
  aspect-ratio: 1;
  border: 1px dashed rgba(46, 171, 230, 0.42);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(215, 243, 255, 0.55),
    rgba(255, 255, 255, 0) 69%
  );
}

.growth-dashboard {
  position: relative;
  width: min(60%, 256px);
  min-width: 200px;
  padding: 18px 18px 14px;
  border: 1px solid #e4edf5;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 38px rgba(37, 83, 117, 0.16);
  transform: perspective(800px) rotateY(-7deg) rotateX(2deg);
}

.growth-dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.growth-dashboard-heading strong {
  color: var(--heading-color);
  font-size: 12px;
  font-weight: 700;
}

.growth-dashboard-heading > span {
  color: #11a879;
  font-weight: 700;
}

.growth-chart {
  position: relative;
  display: flex;
  height: 130px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 8px 0;
  border-bottom: 1px solid #e5edf5;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    #edf3f8 32px
  );
}

.growth-chart > span {
  z-index: 0;
  width: 10%;
  border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, #49b9f1, #1689dd);
}

.growth-chart > span:nth-child(1) {
  height: 20%;
}
.growth-chart > span:nth-child(2) {
  height: 32%;
}
.growth-chart > span:nth-child(3) {
  height: 43%;
}
.growth-chart > span:nth-child(4) {
  height: 59%;
}
.growth-chart > span:nth-child(5) {
  height: 74%;
}
.growth-chart > span:nth-child(6) {
  height: 92%;
}

.growth-chart svg {
  position: absolute;
  inset: 8px 0 0;
  width: 100%;
  height: 80%;
  overflow: visible;
}

.growth-chart path {
  fill: none;
  stroke: #078bd0;
  stroke-linecap: round;
  stroke-width: 3;
}

.growth-chart > i {
  position: absolute;
  top: 0;
  right: 2px;
  color: #078bd0;
}

.growth-callout {
  position: absolute;
  z-index: 1;
  display: flex;
  width: min(42%, 190px);
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #edf2f7;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 7px 22px rgba(37, 83, 117, 0.08);
}

.growth-callout > span:first-child,
.growth-decoration {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: #e8f5ff;
  color: var(--primary-color);
}

.growth-callout > span:last-child {
  display: grid;
  gap: 3px;
  color: var(--text-color);
  line-height: 1.35;
  font-size: 12px;
}

.growth-callout strong {
  color: var(--heading-color);
  font-weight: 700;
}

.growth-callout-customers > span:first-child,
.growth-callout-sales > span:first-child {
  background: #fff0e8;
  color: var(--accent-color);
}

.growth-callout-engagement > span:first-child {
  background: #fff0e8;
  color: var(--accent-color);
}

.growth-callout-visibility {
  top: 12%;
  left: 0;
}

.growth-callout-customers {
  bottom: 12%;
  left: 0;
}

.growth-callout-engagement {
  top: 12%;
  right: 0;
}

.growth-callout-sales {
  right: 0;
  bottom: 12%;
}

.growth-decoration {
  position: absolute;
  z-index: 1;
  box-shadow: 0 5px 14px rgba(37, 83, 117, 0.08);
}

.growth-decoration-chart {
  top: 0;
  left: 40%;
}

.growth-decoration-send {
  top: 0;
  right: 25%;
  background: #fff0e8;
  color: var(--accent-color);
  transform: rotate(-25deg);
}

.digital-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.digital-service-card {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e8f1f7;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 16px rgba(48, 108, 146, 0.05);
  color: inherit;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.digital-service-card:hover,
.digital-service-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(48, 108, 146, 0.12);
}

.digital-service-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 50%;
}

.digital-service-icon-blue {
  background: #e3f5ff;
  color: #1598e5;
}

.digital-service-icon-orange {
  background: #fff0e7;
  color: #ff7b37;
}

.digital-service-icon-green {
  background: #e1fbef;
  color: #12be79;
}

.digital-service-icon-purple {
  background: #f0ebff;
  color: #8265db;
}

.digital-service-icon-pink {
  background: #ffe8ee;
  color: #f04f75;
}

.digital-service-icon-yellow {
  background: #fff3d9;
  color: #ef9c00;
}

.digital-service-card-content {
  display: grid;
  min-width: 0;
  gap: 6px;
  color: #53648c;
  line-height: 1.4;
}

.digital-service-card-content strong {
  color: var(--heading-color);
  font-weight: 700;
  font-size: 15px;
}

.digital-service-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #0088cf;
  font-weight: 600;
}

.digital-approach-section {
  padding: 0 0 42px;
}

.digital-approach-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.15fr);
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 12px;
  background: linear-gradient(110deg, #eefaff, #f3fbff);
}

.digital-approach-intro {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 18px;
  border-right: 1px solid #d6eaf5;
}

.digital-approach-target {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  color: var(--accent-color);
}

.digital-approach-target i {
  filter: drop-shadow(4px -4px 0 var(--accent-color));
}

.digital-approach-eyebrow {
  margin-bottom: 4px;
}

.digital-approach-intro h2 {
  margin: 0 0 4px;
  color: var(--heading-color);
  font-family: var(--secondary-heading-font);
  font-weight: 750;
}

.digital-approach-intro h2 span {
  color: var(--primary-color);
}

.digital-approach-intro p {
  margin: 0;
  color: var(--text-color) !important;
  line-height: 1.4;
}

.digital-approach-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.digital-approach-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 12px;
}

.digital-approach-steps li + li {
  border-left: 1px solid #d6eaf5;
}

.digital-approach-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
}

.digital-approach-icon-yellow {
  background: #fff2d6;
  color: #f0a000;
}

.digital-approach-icon-purple {
  background: #eee9ff;
  color: #8062d5;
}

.digital-approach-icon-green {
  background: #e1f9ed;
  color: #19b978;
}

.digital-approach-steps li > span:last-child {
  display: grid;
  gap: 4px;
  color: var(--text-color);
  line-height: 1.4;
}

.digital-approach-steps strong {
  color: var(--heading-color);
  font-weight: 700;
}

.digital-results-section {
  position: relative;
  overflow: hidden;
  padding: 44px 0 42px;
  background:
    radial-gradient(
      circle at 10% 12%,
      color-mix(in srgb, var(--primary-color) 12%, transparent),
      transparent 30%
    ),
    var(--white-color);
  color: var(--text-color);
  font-family: var(--paragraph-font);
}

.digital-results-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.94fr);
  align-items: center;
  gap: 34px;
  margin-bottom: 28px;
}

.digital-results-visual {
  position: relative;
  display: grid;
  min-height: 390px;
  place-items: center;
  isolation: isolate;
}

.results-orbit {
  position: absolute;
  z-index: -1;
  width: min(80%, 390px);
  aspect-ratio: 1;
  border: 1px dashed color-mix(in srgb, var(--primary-color) 45%, transparent);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary-color) 13%, transparent),
    transparent 68%
  );
}

.results-dashboard {
  display: grid;
  grid-template-columns: 0.65fr 1.35fr;
  width: min(80%, 440px);
  min-height: 250px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--heading-color) 14%, transparent);
  border-radius: 14px;
  background: var(--white-color);
  box-shadow: 0 16px 34px
    color-mix(in srgb, var(--heading-color) 14%, transparent);
  transform: perspective(900px) rotateY(-7deg);
}

.results-dashboard-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px;
  border-right: 1px solid
    color-mix(in srgb, var(--primary-color) 16%, transparent);
  color: var(--heading-color);
}

.results-dashboard-nav span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.results-dashboard-nav span:first-child {
  padding: 7px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-color) 15%, var(--white-color));
  color: var(--primary-color);
}

.results-dashboard-main {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 8px;
}

.results-dashboard-title,
.results-dashboard-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-color);
}

.results-dashboard-title > span:first-child,
.results-dashboard-summary > span {
  display: grid;
  gap: 3px;
}

.results-dashboard-title strong,
.results-dashboard-summary strong {
  color: var(--heading-color);
  font-family: var(--secondary-heading-font);
}

.results-dashboard-title > span:last-child {
  color: var(--primary-color);
}

.results-dashboard-chart {
  display: flex;
  height: 110px;
  align-items: flex-end;
  justify-content: space-around;
  gap: 7px;
  padding: 10px 6px 0;
  border-bottom: 1px solid
    color-mix(in srgb, var(--heading-color) 12%, transparent);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 26px,
    color-mix(in srgb, var(--heading-color) 8%, transparent) 27px
  );
}

.results-dashboard-chart span {
  width: 10%;
  border-radius: 4px 4px 0 0;
  background: var(--primary-color);
}

.results-dashboard-chart span:nth-child(1) {
  height: 22%;
}
.results-dashboard-chart span:nth-child(2) {
  height: 34%;
}
.results-dashboard-chart span:nth-child(3) {
  height: 43%;
}
.results-dashboard-chart span:nth-child(4) {
  height: 57%;
}
.results-dashboard-chart span:nth-child(5) {
  height: 66%;
}
.results-dashboard-chart span:nth-child(6) {
  height: 81%;
}
.results-dashboard-chart span:nth-child(7) {
  height: 96%;
}

.results-dashboard-summary {
  padding: 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 8%, var(--white-color));
}

.results-platform {
  position: absolute;
  display: flex;
  min-width: 122px;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid
    color-mix(in srgb, var(--primary-color) 12%, var(--white-color));
  border-radius: 12px;
  background: var(--white-color);
  box-shadow: 0 7px 20px
    color-mix(in srgb, var(--heading-color) 10%, transparent);
  color: var(--primary-color);
}

.results-platform > span {
  display: grid;
  gap: 2px;
  color: var(--text-color);
}

.results-platform strong {
  color: var(--heading-color);
}

.results-google {
  top: 8%;
  left: 3%;
}
.results-meta {
  top: 7%;
  right: 3%;
}
.results-seo {
  top: 43%;
  left: 0;
}
.results-email {
  top: 43%;
  right: 0;
}
.results-content {
  right: 8%;
  bottom: 7%;
}

.results-plant {
  position: absolute;
  bottom: 3%;
  left: 8%;
  color: var(--primary-color);
}

.digital-results-copy {
  min-width: 0;
}

.digital-results-eyebrow,
.digital-impact-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  color: var(--heading-color);
  font-weight: 600;
  letter-spacing: 1.5px;
  font-size: 12px;
}

.digital-results-copy h2,
.digital-impact-heading h2 {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--secondary-heading-font);
  font-weight: 700;
  line-height: 1.12;
}

.digital-results-copy h2 span,
.digital-impact-heading h2 span {
  color: var(--primary-color);
}

.digital-results-description {
  margin: 10px 0 18px;
  color: var(--text-color) !important;
  font-family: var(--paragraph-font);
  line-height: 1.5;
}

.digital-results-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.digital-results-benefits li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px 10px 0;
}

.digital-results-benefits li:nth-child(even) {
  padding-left: 12px;
  border-left: 1px solid
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.results-benefit-icon,
.impact-stat-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
}

.results-benefit-blue,
.impact-stat-blue {
  background: color-mix(in srgb, var(--primary-color) 15%, var(--white-color));
  color: var(--primary-color);
}

.results-benefit-purple {
  background: color-mix(in srgb, var(--heading-color) 10%, var(--white-color));
  color: var(--heading-color);
}

.results-benefit-orange,
.impact-stat-orange {
  background: color-mix(in srgb, var(--accent-color) 13%, var(--white-color));
  color: var(--accent-color);
}

.results-benefit-green,
.impact-stat-green {
  background: color-mix(in srgb, var(--primary-color) 13%, var(--white-color));
  color: var(--primary-color);
}

.results-benefit-pink,
.impact-stat-pink {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.digital-results-benefits li > span:last-child {
  display: grid;
  gap: 3px;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  line-height: 1.4;
}

.digital-results-benefits strong {
  color: var(--heading-color);
  font-weight: 700;
}

.digital-results-cta {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--primary-color);
  color: var(--white-color);
  font-family: var(--paragraph-font);
  text-decoration: none;
}

.digital-results-cta:hover,
.digital-results-cta:focus-visible {
  background: var(--heading-color);
  color: var(--white-color);
}

.digital-impact-panel {
  padding: 20px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 9%, var(--white-color));
}

.digital-impact-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  align-items: end;
  gap: 20px;
  margin-bottom: 16px;
}

.digital-impact-heading > p {
  margin: 0;
  color: var(--text-color) !important;
  font-family: var(--paragraph-font);
  line-height: 1.45;
}

.digital-impact-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.digital-impact-stats li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: 10px;
  background: var(--white-color);
}

.digital-impact-stats li > span:last-child {
  display: grid;
  gap: 4px;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  line-height: 1.4;
}

.digital-impact-stats strong {
  color: var(--heading-color);
  font-family: var(--secondary-heading-font);
  font-weight: 700;
}

.digital-impact-stats b {
  color: var(--heading-color);
  font-weight: 700;
}
.digital-approach-steps span {
  font-weight: 700;
  font-size: 10px;
}

@media (max-width: 991.98px) {
  .digital-services-showcase {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    gap: 20px;
  }

  .digital-growth-visual {
    min-height: 280px;
  }

  .digital-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .digital-approach-panel {
    grid-template-columns: 1fr;
  }

  .digital-approach-intro {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid #d6eaf5;
  }

  .digital-results-layout {
    grid-template-columns: 1fr;
  }

  .digital-results-visual {
    min-height: 350px;
  }

  .digital-impact-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .digital-services-showcase {
    grid-template-columns: 1fr;
  }

  .digital-growth-visual {
    min-height: 310px;
  }

  .digital-approach-steps {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .digital-approach-steps li {
    padding: 4px 0;
  }

  .digital-approach-steps li + li {
    border-left: 0;
  }

  .digital-results-visual {
    min-height: 340px;
  }

  .digital-results-copy {
    padding-top: 8px;
  }
}

@media (max-width: 575.98px) {
  .digital-services-section {
    padding: 30px 0 34px;
  }

  .digital-service-grid {
    grid-template-columns: 1fr;
  }

  .digital-growth-visual {
    min-height: 280px;
  }

  .growth-dashboard {
    width: 54%;
    min-width: 170px;
    padding: 14px;
  }

  .growth-callout {
    width: 44%;
    gap: 7px;
    padding: 8px;
  }

  .growth-callout > span:first-child {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .growth-decoration {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .digital-approach-section {
    padding-bottom: 30px;
  }

  .digital-approach-panel {
    padding: 18px;
  }

  .digital-results-section {
    padding: 34px 0;
  }

  .digital-results-visual {
    min-height: 300px;
  }

  .results-dashboard {
    width: 76%;
    min-height: 210px;
    transform: none;
  }

  .results-dashboard-nav {
    font-size: 12px;
  }

  .results-platform {
    min-width: 0;
    max-width: 42%;
    padding: 7px;
  }

  .results-google {
    top: 5%;
    left: 0;
  }
  .results-meta {
    top: 5%;
    right: 0;
  }
  .results-seo {
    top: 43%;
    left: 0;
  }
  .results-email {
    top: 43%;
    right: 0;
  }
  .results-content {
    right: 4%;
    bottom: 3%;
  }

  .digital-results-benefits {
    grid-template-columns: 1fr;
  }

  .digital-results-benefits li:nth-child(even) {
    padding-left: 0;
    border-left: 0;
  }

  .digital-impact-panel {
    padding: 16px;
  }

  .digital-impact-heading {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .digital-impact-stats {
    grid-template-columns: 1fr;
  }
}

.digital-faq-section {
  padding: 48px 0 56px;
  background:
    radial-gradient(
      circle at 90% 15%,
      color-mix(in srgb, var(--primary-color) 7%, transparent),
      transparent 30%
    ),
    var(--white-color);
}

.digital-faq-heading {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.digital-faq-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.digital-faq-heading h2 {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.digital-faq-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.digital-faq-heading > p {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.digital-faq-accordion {
  display: grid;
  max-width: 920px;
  gap: 12px;
  margin: 0 auto;
}

.digital-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.digital-faq-item .accordion-header {
  margin: 0;
}

.digital-faq-item .accordion-button {
  gap: 16px;
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--white-color);
  box-shadow: none;
}

.digital-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.digital-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.digital-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .digital-faq-section {
    padding: 36px 0 42px;
  }

  .digital-faq-heading {
    margin-bottom: 22px;
  }

  .digital-faq-heading h2 {
    font-size: 25px;
  }

  .digital-faq-accordion {
    gap: 9px;
  }

  .digital-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 13px;
  }

  .digital-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 12px;
  }
}

.sms-features-section {
  position: relative;

  padding: 36px 0 38px;

  background-color: var(--white-color);

  overflow: hidden;
}

.sms-features-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  width: 100%;
}

.sms-features-intro {
  width: 35%;

  flex-shrink: 0;
}

.sms-features-eyebrow {
  margin-bottom: 10px;

  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: #333333;
}

.sms-features-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 28px;
  line-height: 1.18;
  font-weight: 700;

  letter-spacing: -0.5px;

  color: var(--text-color);
}

.sms-features-title span {
  color: var(--primary-color);
}

.sms-features-list {
  width: 65%;

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

  column-gap: 24px;

  align-items: start;
}

.sms-feature-item {
  min-width: 0;
}

.sms-feature-icon {
  width: 74px;
  height: 74px;

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

  margin-bottom: 10px;

  border-radius: 17px;

  background-color: #edf8fd;

  color: var(--primary-color);

  font-size: 27px;

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

.sms-feature-item:hover .sms-feature-icon {
  transform: translateY(-4px);

  background-color: var(--primary-color);

  color: var(--white-color);

  box-shadow: 0 8px 18px rgba(79, 168, 197, 0.18);
}

.sms-feature-title {
  margin: 0 0 7px;

  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.25;
  font-weight: 700;

  color: var(--text-color);
}

.sms-feature-description {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 11px;
  line-height: 1.45;
  font-weight: 400;

  color: #7f7f7f;
}

.sms-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.sms-feature-link:hover {
  gap: 8px;
  color: var(--accent-color);
}

.sms-feature-link:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.sms-compliance-note {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 100%;
  justify-content: center;
  width: fit-content;
  margin: 30px 0 0 auto;
  padding: 11px 16px;
  border: 1px solid #cde8d9;
  border-radius: 999px;
  background: #f0faf4;
  color: #22543d;
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.sms-compliance-note i {
  flex: 0 0 auto;
  color: #16804a;
  font-size: 17px;
}

@media (max-width: 1199.98px) {
  .sms-features-intro {
    width: 31%;
  }

  .sms-features-list {
    width: 69%;

    column-gap: 18px;
  }

  .sms-features-title {
    font-size: 26px;
  }

  .sms-feature-icon {
    width: 68px;
    height: 68px;

    font-size: 24px;
  }
}

@media (max-width: 991.98px) {
  .sms-features-section {
    padding: 40px 0;
  }

  .sms-features-wrapper {
    align-items: flex-start;
    flex-direction: column;
  }

  .sms-features-intro {
    width: 100%;

    margin-bottom: 30px;
  }

  .sms-features-title {
    font-size: 30px;
  }

  .sms-features-list {
    width: 100%;

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

    row-gap: 30px;
    column-gap: 30px;
  }

  .sms-compliance-note {
    margin-right: auto;
  }
}

@media (max-width: 575.98px) {
  .sms-features-section {
    padding: 35px 0 40px;
  }

  .sms-features-eyebrow {
    font-size: 9px;
    letter-spacing: 2.8px;
  }

  .sms-features-title {
    font-size: 27px;
  }

  .sms-features-intro {
    margin-bottom: 28px;
  }

  .sms-features-list {
    grid-template-columns: 1fr;

    row-gap: 28px;
  }

  .sms-feature-item {
    display: grid;

    grid-template-columns: 60px 1fr;

    column-gap: 15px;

    align-items: center;
  }

  .sms-feature-icon {
    width: 60px;
    height: 60px;

    grid-row: span 2;

    margin: 0;

    border-radius: 15px;

    font-size: 22px;
  }

  .sms-feature-title {
    margin-bottom: 4px;

    font-size: 14px;
  }

  .sms-feature-description {
    font-size: 11px;
  }

  .sms-feature-link {
    grid-column: 2;
  }

  .sms-compliance-note {
    align-items: flex-start;
    width: 100%;
    margin-top: 26px;
    border-radius: 14px;
    font-size: 11px;
  }
}

.sms-outcomes-section {
  overflow: hidden;
  padding: 42px 0 34px;
  background:
    radial-gradient(circle at 0 55%, rgba(79, 168, 197, 0.1), transparent 24%),
    radial-gradient(
      circle at 100% 80%,
      rgba(79, 168, 197, 0.1),
      transparent 25%
    ),
    var(--white-color);
}

.sms-outcomes-heading {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

.sms-outcomes-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.sms-outcomes-eyebrow::after {
  width: 38px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.sms-outcomes-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.14;
}

.sms-outcomes-title > span:first-of-type {
  color: var(--primary-color);
}

.sms-outcomes-title .sms-outcomes-period {
  color: var(--accent-color);
}

.sms-outcomes-heading > p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.55;
}

.sms-outcomes-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas: "one two phone three four";
  align-items: center;
  gap: 18px;
}

.sms-outcome-one {
  grid-area: one;
}

.sms-outcome-two {
  grid-area: two;
}

.sms-outcome-three {
  grid-area: three;
}

.sms-outcome-four {
  grid-area: four;
}

.sms-outcome-card {
  z-index: 1;
  min-width: 0;
  min-height: 220px;
  padding: 20px 17px;
  border: 1px solid rgba(79, 168, 197, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(29, 53, 87, 0.04);
}

.sms-outcome-icon {
  display: grid;
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 23px;
}

.sms-outcome-accent .sms-outcome-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-outcome-card h3 {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.sms-outcome-card p {
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.55;
}

.sms-outcomes-phone {
  position: relative;
  z-index: 1;
  display: grid;
  grid-area: phone;
  min-width: 0;
  height: 300px;
  place-items: center;
}

.sms-phone-frame {
  position: relative;
  width: 146px;
  height: 286px;
  padding: 9px;
  border: 5px solid #12325b;
  border-bottom-width: 8px;
  border-radius: 27px;
  background: var(--white-color);
  box-shadow: 0 10px 24px rgba(29, 53, 87, 0.18);
}

.sms-phone-speaker {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 62px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #12325b;
}

.sms-phone-screen {
  height: 100%;
  overflow: hidden;
  padding-top: 21px;
  border-radius: 15px;
  background: #f5f8fc;
}

.sms-phone-app {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 7px;
  color: var(--heading-color);
  font-size: 8px;
  font-weight: 700;
}

.sms-phone-app-icon {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #24c45e;
  color: var(--white-color);
  font-size: 11px;
}

.sms-phone-message {
  margin: 10px 4px 0;
  padding: 10px 8px;
  border-radius: 13px 13px 13px 4px;
  background: #e8edf5;
  color: var(--heading-color);
  font-size: 9px;
  line-height: 1.45;
}

.sms-phone-message p {
  margin: 0 0 3px;
  font-size: 9px !important;
}

.sms-phone-message > span:nth-of-type(1) {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-color);
  overflow-wrap: anywhere;
}

.sms-phone-package {
  display: grid;
  height: 68px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 8px;
  background: rgba(79, 168, 197, 0.18);
  color: #b57b42;
  font-size: 34px;
}

.sms-phone-track {
  display: block;
  padding: 5px;
  border-radius: 6px;
  background: #0788ed;
  color: var(--white-color);
  font-size: 9px;
  text-align: center;
}

.sms-outcomes-action {
  display: flex;
  justify-content: center;
  margin-top: 22px;
}

.sms-outcomes-cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 28px;
  border-radius: 8px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.sms-outcomes-cta:hover {
  transform: translateY(-2px);
  background: var(--heading-color);
  color: var(--white-color);
}

.sms-outcomes-cta i {
  font-size: 17px;
}

.sms-outcomes-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.sms-outcomes-trust li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--heading-color);
  font-size: 11px;
}

.sms-outcomes-trust li + li {
  padding-left: 20px;
  border-left: 1px solid rgba(29, 53, 87, 0.18);
}

.sms-outcomes-trust i {
  color: var(--primary-color);
  font-size: 14px;
}

@media (max-width: 1199.98px) {
  .sms-outcomes-grid {
    gap: 12px;
  }

  .sms-outcome-card {
    min-height: 210px;
    padding: 17px 13px;
  }

  .sms-phone-frame {
    width: 132px;
    height: 270px;
  }
}

@media (max-width: 991.98px) {
  .sms-outcomes-section {
    padding: 38px 0 30px;
  }

  .sms-outcomes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "phone phone"
      "one two"
      "three four";
    gap: 16px;
  }

  .sms-outcomes-phone {
    height: 250px;
  }

  .sms-phone-frame {
    width: 128px;
    height: 245px;
  }

  .sms-outcome-card {
    min-height: 180px;
    padding: 17px;
  }
}

@media (max-width: 575.98px) {
  .sms-outcomes-section {
    padding: 32px 0;
  }

  .sms-outcomes-heading {
    margin-bottom: 24px;
  }

  .sms-outcomes-title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .sms-outcomes-heading > p {
    font-size: 12px;
  }

  .sms-outcomes-grid {
    gap: 10px;
  }

  .sms-outcome-card {
    min-height: 0;
    padding: 14px 12px;
    border-radius: 14px;
  }

  .sms-outcome-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    font-size: 20px;
  }

  .sms-outcome-card h3 {
    font-size: 12px;
  }

  .sms-outcome-card p {
    font-size: 11px;
  }

  .sms-outcomes-phone {
    height: 220px;
  }

  .sms-phone-frame {
    width: 116px;
    height: 215px;
    border-width: 4px;
    border-bottom-width: 7px;
    border-radius: 23px;
  }

  .sms-phone-screen {
    border-radius: 13px;
  }

  .sms-phone-message {
    margin-top: 5px;
    padding: 7px;
  }

  .sms-phone-package {
    height: 48px;
    font-size: 27px;
  }

  .sms-outcomes-action {
    margin-top: 18px;
  }

  .sms-outcomes-cta {
    min-height: 44px;
    padding: 0 20px;
    font-size: 12px;
  }

  .sms-outcomes-trust {
    gap: 10px 14px;
    margin-top: 14px;
  }

  .sms-outcomes-trust li {
    font-size: 10px;
  }

  .sms-outcomes-trust li + li {
    padding-left: 0;
    border-left: 0;
  }
}

.sms-growth-section {
  overflow: hidden;
  padding: 48px 0 40px;
  background:
    radial-gradient(
      circle at 82% 38%,
      rgba(79, 168, 197, 0.12),
      transparent 32%
    ),
    var(--white-color);
}

.sms-growth-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: 0 18px 34px;
}

.sms-growth-intro {
  max-width: 570px;
}

.sms-growth-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.sms-growth-eyebrow::after {
  width: 38px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.sms-growth-title {
  margin: 0 0 14px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 700;
  letter-spacing: -1.4px;
  line-height: 1.12;
}

.sms-growth-title > span:first-of-type {
  color: var(--primary-color);
}

.sms-growth-title .sms-growth-period {
  color: var(--accent-color);
}

.sms-growth-intro > p {
  max-width: 540px;
  margin: 0;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.65;
}

.sms-growth-cta {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  padding: 0 23px;
  border-radius: 8px;
  background: var(--primary-color);
  color: var(--white-color);
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.sms-growth-cta:hover {
  transform: translateY(-2px);
  background: var(--heading-color);
  color: var(--white-color);
}

.sms-growth-cta i {
  font-size: 16px;
}

.sms-growth-visual {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(175px, 0.85fr);
  align-items: center;
  gap: 18px;
  min-height: 350px;
  padding: 20px 10px;
  border-radius: 30px;
  background: radial-gradient(
    circle at 65% 45%,
    rgba(79, 168, 197, 0.14),
    transparent 60%
  );
}

.sms-growth-features {
  display: grid;
  gap: 12px;
}

.sms-growth-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border: 1px solid rgba(79, 168, 197, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 18px rgba(29, 53, 87, 0.05);
}

.sms-growth-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 19px;
}

.sms-growth-feature-accent .sms-growth-feature-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-growth-feature h3 {
  margin: 0 0 4px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sms-growth-feature p {
  margin: 0;
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.45;
}

.sms-growth-phone {
  display: grid;
  min-width: 0;
  height: 330px;
  place-items: center;
}

.sms-growth-phone-frame {
  position: relative;
  width: 166px;
  height: 320px;
  padding: 9px;
  border: 5px solid #12325b;
  border-bottom-width: 8px;
  border-radius: 28px;
  background: var(--white-color);
  box-shadow: 0 10px 24px rgba(29, 53, 87, 0.18);
}

.sms-growth-phone-speaker {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 62px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #12325b;
}

.sms-growth-phone-screen {
  height: 100%;
  overflow: hidden;
  padding: 23px 8px 8px;
  border-radius: 15px;
  background: #f6f8fc;
}

.sms-growth-phone-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--heading-color);
  font-size: 9px;
  font-weight: 700;
}

.sms-growth-phone-brand > span {
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  border-radius: 50%;
  background: #0788ed;
  color: var(--white-color);
  font-size: 9px;
}

.sms-growth-phone-brand > i {
  color: #24b65c;
  font-size: 9px;
}

.sms-growth-phone-time {
  margin: 10px 0;
  color: var(--text-color);
  font-size: 8px;
  text-align: center;
}

.sms-growth-message {
  padding: 10px 9px;
  border-radius: 13px;
  background: var(--white-color);
  color: var(--heading-color);
  font-size: 9px;
  line-height: 1.45;
  box-shadow: 0 3px 12px rgba(29, 53, 87, 0.06);
}

.sms-growth-message p {
  margin: 0 0 3px;
  font-size: 9px !important;
}

.sms-growth-message > span:first-of-type {
  display: block;
  margin-bottom: 7px;
  color: var(--primary-color);
}

.sms-growth-parcel {
  display: grid;
  height: 68px;
  margin-bottom: 6px;
  place-items: center;
  border-radius: 8px;
  background: rgba(79, 168, 197, 0.16);
  color: #b57b42;
  font-size: 32px;
}

.sms-growth-message .sms-growth-track {
  display: block;
  padding: 5px;
  border-radius: 6px;
  background: #0788ed;
  color: var(--white-color);
  font-size: 9px;
  text-align: center;
}

.sms-growth-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px 12px;
  border-radius: 20px;
  background: rgba(79, 168, 197, 0.08);
}

.sms-growth-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 8px 14px;
}

.sms-growth-benefit + .sms-growth-benefit {
  border-left: 1px solid rgba(79, 168, 197, 0.23);
}

.sms-growth-benefit-icon {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 21px;
}

.sms-growth-benefit-accent .sms-growth-benefit-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-growth-benefit h3 {
  margin: 0 0 4px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.sms-growth-benefit p {
  margin: 0;
  color: var(--text-color);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1199.98px) {
  .sms-growth-main {
    gap: 24px;
    padding-right: 6px;
    padding-left: 6px;
  }

  .sms-growth-visual {
    grid-template-columns: minmax(0, 1fr) minmax(145px, 0.8fr);
    gap: 12px;
  }

  .sms-growth-phone-frame {
    width: 150px;
    height: 300px;
  }

  .sms-growth-benefit {
    gap: 10px;
    padding: 8px 10px;
  }
}

@media (max-width: 991.98px) {
  .sms-growth-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .sms-growth-intro {
    max-width: 720px;
  }

  .sms-growth-visual {
    width: min(100%, 700px);
    margin: 0 auto;
  }

  .sms-growth-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 0;
  }

  .sms-growth-benefit:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .sms-growth-section {
    padding: 36px 0 30px;
  }

  .sms-growth-main {
    padding: 0 2px 24px;
  }

  .sms-growth-title {
    font-size: 29px;
    letter-spacing: -0.9px;
  }

  .sms-growth-intro > p {
    font-size: 12px;
  }

  .sms-growth-cta {
    min-height: 43px;
    margin-top: 16px;
    padding: 0 19px;
    font-size: 12px;
  }

  .sms-growth-visual {
    grid-template-columns: minmax(0, 1fr) 128px;
    gap: 8px;
    min-height: 275px;
    padding: 10px 0;
  }

  .sms-growth-features {
    gap: 9px;
  }

  .sms-growth-feature {
    gap: 8px;
    padding: 10px 8px;
    border-radius: 11px;
  }

  .sms-growth-feature-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 16px;
  }

  .sms-growth-feature h3 {
    font-size: 11px;
  }

  .sms-growth-feature p {
    font-size: 9px;
  }

  .sms-growth-phone {
    height: 270px;
  }

  .sms-growth-phone-frame {
    width: 123px;
    height: 255px;
    padding: 7px;
    border-width: 4px;
    border-bottom-width: 7px;
    border-radius: 23px;
  }

  .sms-growth-phone-screen {
    padding: 21px 6px 6px;
    border-radius: 13px;
  }

  .sms-growth-message {
    padding: 8px 7px;
    font-size: 8px;
  }

  .sms-growth-message p {
    font-size: 8px !important;
  }

  .sms-growth-parcel {
    height: 49px;
    font-size: 26px;
  }

  .sms-growth-benefits {
    gap: 6px 0;
    padding: 12px 6px;
    border-radius: 16px;
  }

  .sms-growth-benefit {
    align-items: flex-start;
    gap: 8px;
    padding: 8px 7px;
  }

  .sms-growth-benefit-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 16px;
  }

  .sms-growth-benefit h3 {
    font-size: 10px;
  }

  .sms-growth-benefit p {
    font-size: 9px;
  }
}

@media (max-width: 359.98px) {
  .sms-growth-visual {
    grid-template-columns: minmax(0, 1fr) 108px;
  }

  .sms-growth-phone-frame {
    width: 105px;
  }

  .sms-growth-benefit {
    flex-direction: column;
  }
}

.sms-relations-section {
  overflow: hidden;
  padding: 48px 0 40px;
  background:
    radial-gradient(
      circle at 22% 48%,
      rgba(79, 168, 197, 0.13),
      transparent 32%
    ),
    var(--white-color);
}

.sms-relations-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  padding: 0 18px 34px;
}

.sms-relations-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 380px;
  grid-template-columns: 1fr;
  place-items: center;
}

.sms-relations-orbit {
  position: absolute;
  width: min(92%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(79, 168, 197, 0.16),
    rgba(79, 168, 197, 0.05) 62%,
    transparent 63%
  );
}

.sms-relations-phone {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 350px;
  place-items: center;
}

.sms-relations-phone-frame {
  position: relative;
  width: 178px;
  height: 340px;
  padding: 10px;
  transform: rotate(-7deg);
  border: 5px solid #12325b;
  border-bottom-width: 8px;
  border-radius: 30px;
  background: var(--white-color);
  box-shadow: 0 12px 28px rgba(29, 53, 87, 0.2);
}

.sms-relations-phone-speaker {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 50%;
  width: 65px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 0 0 9px 9px;
  background: #12325b;
}

.sms-relations-phone-screen {
  position: relative;
  height: 100%;
  overflow: hidden;
  padding: 25px 8px 10px;
  border-radius: 17px;
  background: #f6f8fc;
}

.sms-relations-phone-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--heading-color);
  font-size: 9px;
  font-weight: 700;
}

.sms-relations-phone-brand > span {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 9px;
}

.sms-relations-phone-brand > i {
  color: #24b65c;
  font-size: 9px;
}

.sms-relations-phone-message {
  margin-top: 20px;
  padding: 12px 10px;
  border-radius: 13px;
  background: var(--white-color);
  box-shadow: 0 4px 14px rgba(29, 53, 87, 0.06);
}

.sms-relations-phone-message p {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-size: 10px;
  line-height: 1.55;
}

.sms-relations-phone-message strong {
  display: block;
  margin-bottom: 8px;
  color: var(--heading-color);
  font-size: 9px;
}

.sms-relations-phone-message > span {
  display: block;
  padding: 6px;
  border-radius: 6px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 9px;
  text-align: center;
}

.sms-relations-phone-input {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  padding: 7px 9px;
  border: 1px solid rgba(29, 53, 87, 0.08);
  border-radius: 999px;
  background: var(--white-color);
  color: #718096;
  font-size: 8px;
}

.sms-relations-float {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 205px;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid rgba(79, 168, 197, 0.14);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 6px 18px rgba(29, 53, 87, 0.07);
}

.sms-relations-float-order {
  top: 15%;
  left: 0;
}

.sms-relations-float-alert {
  top: 16%;
  right: 0;
}

.sms-relations-float-promo {
  bottom: 12%;
  left: 2%;
}

.sms-relations-float-engagement {
  right: 0;
  bottom: 13%;
}

.sms-relations-float-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 17px;
}

.sms-relations-icon-accent {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-relations-float strong,
.sms-relations-float small {
  display: block;
}

.sms-relations-float strong {
  margin-bottom: 3px;
  color: var(--heading-color);
  font-size: 10px;
  line-height: 1.35;
}

.sms-relations-float small {
  color: var(--text-color);
  font-size: 9px;
  line-height: 1.4;
}

.sms-relations-content {
  max-width: 600px;
}

.sms-relations-eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 11px;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.sms-relations-eyebrow::after {
  width: 38px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.sms-relations-title {
  margin: 0 0 13px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(29px, 3.3vw, 42px);
  font-weight: 700;
  letter-spacing: -1.3px;
  line-height: 1.12;
}

.sms-relations-title > span:first-of-type {
  color: var(--primary-color);
}

.sms-relations-title .sms-relations-period {
  color: var(--accent-color);
}

.sms-relations-description {
  margin: 0 0 18px;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.6;
}

.sms-relations-highlights {
  display: grid;
  gap: 11px;
}

.sms-relations-highlight {
  display: flex;
  align-items: center;
  gap: 13px;
}

.sms-relations-highlight-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 19px;
}

.sms-relations-highlight-accent .sms-relations-highlight-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-relations-highlight h3 {
  margin: 0 0 3px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
}

.sms-relations-highlight p {
  margin: 0;
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.45;
}

.sms-relations-cta {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 18px;
  padding: 0 22px;
  border-radius: 7px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}

.sms-relations-cta:hover {
  transform: translateY(-2px);
  background: var(--heading-color);
  color: var(--white-color);
}

.sms-relations-cta i {
  font-size: 15px;
}

.sms-relations-benefits {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px 10px;
  border-radius: 18px;
  background: rgba(79, 168, 197, 0.08);
}

.sms-relations-benefit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 8px 12px;
}

.sms-relations-benefit + .sms-relations-benefit {
  border-left: 1px solid rgba(79, 168, 197, 0.22);
}

.sms-relations-benefit-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 18px;
}

.sms-relations-benefit-accent .sms-relations-benefit-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.sms-relations-benefit h3 {
  margin: 0 0 3px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}

.sms-relations-benefit p {
  margin: 0;
  color: var(--text-color);
  font-size: 10px;
  line-height: 1.45;
}

@media (max-width: 1199.98px) {
  .sms-relations-main {
    gap: 25px;
    padding-right: 4px;
    padding-left: 4px;
  }

  .sms-relations-visual {
    min-height: 350px;
  }

  .sms-relations-float {
    width: 180px;
    padding: 9px;
  }

  .sms-relations-float-alert,
  .sms-relations-float-engagement {
    right: -4px;
  }

  .sms-relations-phone-frame {
    width: 160px;
    height: 315px;
  }

  .sms-relations-benefit {
    gap: 8px;
    padding: 8px;
  }
}

@media (max-width: 991.98px) {
  .sms-relations-main {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sms-relations-content {
    max-width: 720px;
  }

  .sms-relations-visual {
    width: min(100%, 650px);
    margin: 0 auto;
  }

  .sms-relations-benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 0;
  }

  .sms-relations-benefit:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .sms-relations-section {
    padding: 36px 0 30px;
  }

  .sms-relations-main {
    gap: 22px;
    padding: 0 0 24px;
  }

  .sms-relations-title {
    font-size: 28px;
    letter-spacing: -0.8px;
  }

  .sms-relations-description {
    font-size: 12px;
  }

  .sms-relations-visual {
    min-height: 295px;
  }

  .sms-relations-phone {
    height: 270px;
  }

  .sms-relations-phone-frame {
    width: 135px;
    height: 260px;
    padding: 8px;
    border-width: 4px;
    border-bottom-width: 7px;
    border-radius: 24px;
  }

  .sms-relations-phone-screen {
    padding: 22px 7px 8px;
    border-radius: 14px;
  }

  .sms-relations-phone-message {
    margin-top: 14px;
    padding: 9px 8px;
  }

  .sms-relations-phone-message p {
    font-size: 8px;
  }

  .sms-relations-float {
    width: 156px;
    gap: 7px;
    padding: 8px;
    border-radius: 11px;
  }

  .sms-relations-float-order {
    top: 8%;
    left: -4px;
  }

  .sms-relations-float-alert {
    top: 8%;
    right: -4px;
  }

  .sms-relations-float-promo {
    bottom: 7%;
    left: -4px;
  }

  .sms-relations-float-engagement {
    right: -4px;
    bottom: 7%;
  }

  .sms-relations-float-icon {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
    font-size: 14px;
  }

  .sms-relations-float strong {
    font-size: 9px;
  }

  .sms-relations-float small {
    font-size: 8px;
  }

  .sms-relations-highlight-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 17px;
  }

  .sms-relations-highlight h3 {
    font-size: 12px;
  }

  .sms-relations-highlight p {
    font-size: 10px;
  }

  .sms-relations-benefits {
    padding: 10px 5px;
    border-radius: 15px;
  }

  .sms-relations-benefit {
    align-items: flex-start;
    gap: 7px;
    padding: 8px 6px;
  }

  .sms-relations-benefit-icon {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
    font-size: 15px;
  }

  .sms-relations-benefit h3 {
    font-size: 10px;
  }

  .sms-relations-benefit p {
    font-size: 9px;
  }
}

@media (max-width: 359.98px) {
  .sms-relations-float {
    width: 138px;
  }

  .sms-relations-visual {
    min-height: 275px;
  }

  .sms-relations-phone-frame {
    width: 122px;
  }
}

.sms-promo-section {
  padding: 30px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.sms-promo-banner {
  position: relative;

  width: 100%;

  min-height: 350px;

  display: flex;
  align-items: center;

  overflow: hidden;

  border-radius: 10px;

  background-image: url("images/sms/sms-promo-bg.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center;
}

.sms-promo-content {
  position: relative;

  z-index: 2;

  width: 43%;

  padding: 30px 0 30px 38px;
}

.sms-promo-eyebrow {
  margin-bottom: 12px;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #596979;
}

.sms-promo-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 36px;

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -0.8px;

  color: #071321;
}

.sms-promo-title span {
  color: #159dcc;
}

.sms-promo-description {
  margin: 17px 0 20px;

  font-family: var(--paragraph-font);

  font-size: 14px;

  line-height: 1.45;

  font-weight: 400;

  color: #687785;
}

.sms-promo-btn {
  width: 156px;

  height: 42px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 5px;

  background-color: var(--primary-color);

  border: 1px solid var(--primary-color);

  font-family: var(--paragraph-font);

  font-size: 12px;

  font-weight: 600;

  color: var(--white-color);

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    color 0.25s ease;
}

.sms-promo-btn:hover {
  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--white-color);

  transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
  .sms-promo-banner {
    min-height: 330px;
  }

  .sms-promo-content {
    width: 45%;

    padding-left: 35px;
  }

  .sms-promo-title {
    font-size: 33px;
  }
}

@media (max-width: 991.98px) {
  .sms-promo-section {
    padding: 25px 0 30px;
  }

  .sms-promo-banner {
    min-height: 320px;

    background-position: center center;
  }

  .sms-promo-content {
    width: 48%;

    padding-left: 30px;
  }

  .sms-promo-title {
    font-size: 30px;
  }

  .sms-promo-description {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .sms-promo-section {
    padding: 20px 0 25px;
  }

  .sms-promo-banner {
    min-height: 520px;

    align-items: flex-start;

    background-size: cover;

    background-position: 63% center;

    border-radius: 8px;
  }

  .sms-promo-content {
    width: 100%;

    max-width: 320px;

    padding: 30px 25px;

    z-index: 3;
  }

  .sms-promo-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;

    margin-bottom: 10px;
  }

  .sms-promo-title {
    font-size: 29px;

    line-height: 1.12;
  }

  .sms-promo-description {
    margin-top: 15px;

    font-size: 12px;

    line-height: 1.5;
  }

  .sms-promo-btn {
    width: 145px;

    height: 41px;

    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .sms-promo-banner {
    min-height: 500px;

    background-position: 62% center;
  }

  .sms-promo-content {
    padding: 27px 20px;
  }

  .sms-promo-title {
    font-size: 27px;
  }
}

.sms-stats-section {
  padding: 10px 0 25px;

  background-color: var(--white-color);

  overflow: hidden;
}

.sms-stats-wrapper {
  width: 100%;

  min-height: 82px;

  display: flex;
  align-items: center;

  padding: 8px 30px;

  border-radius: 9px;

  background-color: #eef8fc;
}

.sms-stat-item {
  flex: 1;

  display: flex;
  align-items: center;

  min-width: 0;
}

.sms-stat-icon {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

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

  margin-right: 17px;

  border-radius: 14px;

  background-color: #e6f5fb;

  color: var(--primary-color);

  font-size: 21px;

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

.sms-stat-item:hover .sms-stat-icon {
  background-color: var(--primary-color);

  color: var(--white-color);

  transform: translateY(-2px);
}

.sms-stat-content {
  display: flex;
  flex-direction: column;

  min-width: 0;
}

.sms-stat-content strong {
  display: block;

  margin: 0 0 3px;

  font-family: var(--paragraph-font);

  font-size: 20px;

  line-height: 1.1;

  font-weight: 700;

  color: var(--text-color);
}

.sms-stat-content span {
  display: block;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.3;

  font-weight: 400;

  color: #788793;
}

.sms-stat-divider {
  width: 1px;

  height: 52px;

  flex: 0 0 1px;

  margin: 0 30px;

  background-color: rgba(79, 168, 197, 0.25);
}

@media (max-width: 991.98px) {
  .sms-stats-wrapper {
    padding: 8px 20px;
  }

  .sms-stat-icon {
    width: 46px;
    height: 46px;

    flex-basis: 46px;

    margin-right: 12px;

    font-size: 19px;
  }

  .sms-stat-content strong {
    font-size: 18px;
  }

  .sms-stat-content span {
    font-size: 10px;
  }

  .sms-stat-divider {
    margin: 0 18px;

    height: 45px;
  }
}

@media (max-width: 767.98px) {
  .sms-stats-section {
    padding: 10px 0 25px;
  }

  .sms-stats-wrapper {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    padding: 20px;
  }

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

  .sms-stat-divider {
    width: 100%;
    height: 1px;

    margin: 0;

    background-color: rgba(79, 168, 197, 0.2);
  }

  .sms-stat-icon {
    width: 48px;
    height: 48px;

    flex-basis: 48px;

    border-radius: 13px;
  }

  .sms-stat-content strong {
    font-size: 19px;
  }

  .sms-stat-content span {
    font-size: 11px;
  }
}

.sms-cta-section {
  padding: 22px 0 30px;

  background-color: var(--white-color);

  overflow: hidden;
}

.sms-cta-banner {
  position: relative;

  min-height: 125px;

  display: flex;
  align-items: center;

  padding: 20px 34px;

  overflow: hidden;

  border-radius: 9px;

  background: linear-gradient(115deg, #22b5e0 0%, #13a8d7 45%, #1198ca 100%);

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.sms-cta-banner::before {
  content: "";

  position: absolute;

  width: 400px;
  height: 260px;

  left: -100px;
  top: -130px;

  border-radius: 50%;

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

  box-shadow:
    80px 40px 0 rgba(255, 255, 255, 0.035),
    150px 90px 0 rgba(255, 255, 255, 0.025);

  pointer-events: none;
}

.sms-cta-content {
  position: relative;

  z-index: 2;

  flex: 1;

  text-align: center;

  padding-left: 100px;
}

.sms-cta-eyebrow {
  margin-bottom: 8px;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

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

.sms-cta-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 23px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.3px;

  color: var(--white-color);
}

.sms-cta-description {
  margin: 7px 0 0;

  font-family: var(--paragraph-font);

  font-size: 12px;

  line-height: 1.4;

  font-weight: 400;

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

.sms-cta-button {
  position: relative;

  z-index: 3;

  flex: 0 0 180px;

  height: 49px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 7px;

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

  background-color: var(--white-color);

  font-family: var(--paragraph-font);

  font-size: 12px;

  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.sms-cta-button:hover {
  transform: translateY(-2px);

  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--white-color);

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

@media (max-width: 991.98px) {
  .sms-cta-banner {
    padding: 20px 25px;
  }

  .sms-cta-content {
    padding-left: 40px;
  }

  .sms-cta-title {
    font-size: 21px;
  }

  .sms-cta-button {
    flex-basis: 160px;
  }
}

@media (max-width: 767.98px) {
  .sms-cta-section {
    padding: 20px 0 30px;
  }

  .sms-cta-banner {
    min-height: auto;

    flex-direction: column;

    justify-content: center;

    gap: 20px;

    padding: 28px 20px;
  }

  .sms-cta-content {
    width: 100%;

    padding-left: 0;

    text-align: center;
  }

  .sms-cta-title {
    font-size: 22px;

    line-height: 1.25;
  }

  .sms-cta-description {
    font-size: 11px;

    line-height: 1.5;
  }

  .sms-cta-button {
    width: 180px;

    flex-basis: auto;

    height: 45px;
  }
}

@media (max-width: 400px) {
  .sms-cta-title {
    font-size: 20px;
  }

  .sms-cta-description {
    font-size: 10px;
  }
}

.sms-faq-section {
  padding: 48px 0 56px;
  background:
    radial-gradient(
      circle at 90% 15%,
      color-mix(in srgb, var(--primary-color) 7%, transparent),
      transparent 30%
    ),
    var(--white-color);
}

.sms-faq-heading {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.sms-faq-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.sms-faq-heading h2 {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.sms-faq-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.sms-faq-heading > p {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.sms-faq-accordion {
  display: grid;
  max-width: 920px;
  gap: 12px;
  margin: 0 auto;
}

.sms-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.sms-faq-item .accordion-header {
  margin: 0;
}

.sms-faq-item .accordion-button {
  gap: 16px;
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--white-color);
  box-shadow: none;
}

.sms-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.sms-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.sms-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .sms-faq-section {
    padding: 36px 0 42px;
  }

  .sms-faq-heading {
    margin-bottom: 22px;
  }

  .sms-faq-heading h2 {
    font-size: 25px;
  }

  .sms-faq-accordion {
    gap: 9px;
  }

  .sms-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 13px;
  }

  .sms-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 12px;
  }
}

/* ------------------------------------------------------------- */
/* Whatsapp */
/* ------------------------------------------------------------- */

.whatsapp-hero {
  background-image: url("images/whatsapp/whatsapp-hero.png");
  background-position: center;
  min-height: 670px;
}

.wa-business-section {
  padding: 48px 0 52px;

  background-color: var(--white-color);

  overflow: hidden;
}

.wa-business-wrapper {
  display: flex;
  align-items: center;

  width: 100%;
}

.wa-business-intro {
  width: 41%;

  flex-shrink: 0;

  padding-right: 30px;
}

.wa-business-eyebrow {
  margin-bottom: 10px;

  font-family: var(--paragraph-font);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.wa-business-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 30px;

  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -0.7px;

  color: var(--text-color);
}

.wa-business-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.wa-business-description {
  margin: 16px 0 0;

  font-family: var(--paragraph-font);

  font-size: 13px;

  line-height: 1.45;

  font-weight: 400;

  color: #788591;
}

.wa-business-cards {
  width: 59%;

  display: grid;

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

  gap: 20px;
}

.wa-business-card {
  min-height: 214px;

  padding: 25px 28px 23px;

  border-radius: 9px;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}
.wa-card {
  background-color: #effbf5;
}

.automation-card {
  background-color: #f0f8fd;
}

.wa-business-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.07);
}

.whatsapp-icon {
  width: 51px;
  height: 51px;

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

  margin-bottom: 13px;

  border-radius: 50%;

  color: var(--white-color);

  font-size: 25px;
}

.whatsapp-icon {
  background-color: #20c768;
}

.automation-icon {
  background-color: #3189eb;
}

.wa-business-card-title {
  margin: 0 0 11px;

  font-family: var(--paragraph-font);

  font-size: 16px;

  line-height: 1.25;

  font-weight: 700;

  color: var(--text-color);
}

.wa-business-list {
  display: flex;

  flex-direction: column;

  gap: 8px;

  margin: 0;

  padding: 0;

  list-style: none;
}

.wa-business-list li {
  display: flex;

  align-items: center;

  gap: 8px;

  margin: 0;

  padding: 0;

  font-family: var(--paragraph-font);

  font-size: 12px;

  line-height: 1.3;

  font-weight: 400;

  color: #788591;
}

.wa-business-check {
  width: 16px;
  height: 16px;

  flex: 0 0 16px;

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

  border-radius: 50%;

  color: var(--white-color);

  font-size: 9px;
}

.wa-card .wa-business-check {
  background-color: #20c768;
}

.automation-card .wa-business-check {
  background-color: #3189eb;
}

@media (max-width: 1199.98px) {
  .wa-business-intro {
    width: 39%;

    padding-right: 25px;
  }

  .wa-business-cards {
    width: 61%;

    gap: 15px;
  }

  .wa-business-card {
    padding: 23px 22px;
  }

  .wa-business-title {
    font-size: 28px;
  }
}

@media (max-width: 991.98px) {
  .wa-business-section {
    padding: 42px 0 45px;
  }

  .wa-business-wrapper {
    flex-direction: column;

    align-items: stretch;
  }

  .wa-business-intro {
    width: 100%;

    padding-right: 0;

    margin-bottom: 28px;
  }

  .wa-business-title {
    font-size: 30px;
  }

  .wa-business-cards {
    width: 100%;
  }
}

@media (max-width: 767.98px) {
  .wa-business-section {
    padding: 35px 0 40px;
  }

  .wa-business-intro {
    margin-bottom: 25px;
  }

  .wa-business-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .wa-business-title {
    font-size: 27px;

    line-height: 1.15;
  }

  .wa-business-description {
    font-size: 12px;

    line-height: 1.5;
  }

  .desktop-break {
    display: none;
  }

  .wa-business-cards {
    grid-template-columns: 1fr;

    gap: 15px;
  }

  .wa-business-card {
    min-height: auto;

    padding: 23px 22px;
  }
}

@media (max-width: 400px) {
  .wa-business-title {
    font-size: 25px;
  }

  .wa-business-card-title {
    font-size: 15px;
  }

  .wa-business-list li {
    font-size: 11px;
  }
}

.messaging-journey-section {
  position: relative;
  overflow: hidden;
  padding: 48px 0 42px;
  background:
    radial-gradient(
      ellipse at 0% 50%,
      rgba(84, 187, 235, 0.1),
      transparent 34%
    ),
    linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
}

.messaging-journey-heading {
  max-width: 790px;
  margin: 0 auto 28px;
  text-align: center;
}

.messaging-journey-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: #53648c;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.messaging-journey-title {
  margin: 0;
  color: var(--heading-color);
  font-size: clamp(26px, 3vw, 34px);
  font-family: var(--heading-font);
  font-weight: 800;
  line-height: 1.08;
}

.messaging-journey-title span {
  display: block;
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.messaging-journey-description {
  margin: 10px 0 0;
  color: #53648c;
  font-size: 12px;
  line-height: 1.5;
}

.messaging-journey-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.messaging-journey-steps::before {
  position: absolute;
  top: 41px;
  right: 12%;
  left: 12%;
  border-top: 1px dashed #45b5f5;
  content: "";
}

.messaging-journey-step {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.messaging-journey-icon {
  position: relative;
  display: grid;
  width: 84px;
  height: 84px;
  margin: 0 auto 9px;
  place-items: center;
  border: 5px solid #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #dceffa;
  font-size: 31px;
}

.messaging-journey-icon-blue {
  background: #e6f6ff;
  color: #36a5dd;
}

.messaging-journey-icon-green {
  background: #fff0e9;
  color: #20c768;
}

.messaging-journey-icon-orange {
  background: #fff0e9;
  color: #ff795c;
}

.messaging-journey-step-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.messaging-journey-number {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  place-items: center;
  border-radius: 50%;
  background: #e1f5ff;
  color: #2798c8;
  font-size: 10px;
  font-weight: 700;
}

.messaging-journey-step h3 {
  margin: 0;
  color: #101638;
  font-size: 15px;
  font-weight: 750;
}

.messaging-journey-subtitle {
  margin: 1px 0 5px;
  color: #53648c;
  font-size: 11px;
  font-weight: 600;
}

.messaging-journey-copy {
  max-width: 225px;
  margin: 0 auto;
  color: #53648c;
  font-size: 11px;
  line-height: 1.4;
}

@media (max-width: 991.98px) {
  .messaging-journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 28px;
  }

  .messaging-journey-steps::before,
  .messaging-journey-step::after {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .messaging-journey-section {
    padding: 38px 0;
  }

  .messaging-journey-heading {
    margin-bottom: 24px;
  }

  .messaging-journey-eyebrow {
    font-size: 9px;
    letter-spacing: 1px;
  }

  .messaging-journey-title {
    font-size: 26px;
  }

  .messaging-journey-description {
    font-size: 11px;
  }

  .messaging-journey-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .messaging-journey-icon {
    width: 76px;
    height: 76px;
  }
}

.messaging-strategy-section {
  padding: 48px 0 52px;
  background: transparent;
}

.messaging-strategy-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
  gap: 30px;
  padding: 22px 26px;
  border-radius: 12px;
  background: transparent;
}

.messaging-strategy-intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding-right: 28px;
  border-right: 1px solid #d6eaf5;
}

.messaging-strategy-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  color: #53648c;
  font-weight: 600;
  letter-spacing: 1.2px;
}

.messaging-strategy-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--heading-font);
}

.messaging-strategy-title span {
  display: block;
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.messaging-strategy-intro > p {
  margin: 0 0 10px;
  color: #53648c !important;
  line-height: 1.55;
}

.messaging-strategy-cta {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  gap: 10px;
  margin-top: 3px;
  padding: 0 20px;
  border-radius: 6px;
  background: #35a5ca;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.messaging-strategy-cta:hover,
.messaging-strategy-cta:focus-visible {
  transform: translateY(-1px);
  background: #2389b1;
  color: #ffffff;
}

.messaging-strategy-content {
  min-width: 0;
}

.campaign-planning {
  padding: 0 4px 14px;
  border-bottom: 1px solid #d6eaf5;
}

.campaign-planning h3,
.example-customer-journey h3 {
  margin: 0 0 2px;
  color: var(--heading-color);
  font-weight: 750;
}

.campaign-planning-intro,
.example-customer-journey > p {
  margin: 0;
  line-height: 1.5;
}

.campaign-checklist {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: 18px;
  row-gap: 5px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.campaign-checklist li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  color: #53648c;
  line-height: 1.45;
  font-size: 13px;
}

.campaign-checklist li::before {
  display: grid;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  place-items: center;
  border-radius: 50%;
  background: #3ca7ca;
  color: #ffffff;
  content: "✓";
  font-size: 10px;
}

.example-customer-journey {
  padding: 10px 4px 0;
}

.example-journey-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.example-journey-card {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
}

.example-journey-icon {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
}

.example-journey-whatsapp {
  background: #23c66d;
}

.example-journey-card h4 {
  margin: 2px 0 5px;
  color: var(--heading-color);
  font-weight: 700;
  line-height: 1.25;
  font-size: 20px;
}

.example-journey-card p {
  margin: 0;
  color: var(--text-color);
  line-height: 1.45;
  font-size: 13px !important;
}

@media (max-width: 991.98px) {
  .messaging-strategy-panel {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 24px;
  }

  .messaging-strategy-intro {
    padding: 0 0 18px;
    border-right: 0;
    border-bottom: 1px solid #d6eaf5;
  }

  .messaging-strategy-intro > p {
    max-width: 700px;
  }
}

@media (max-width: 575.98px) {
  .messaging-strategy-panel {
    gap: 16px;
    padding: 20px 16px;
  }

  .messaging-strategy-intro > p {
    line-height: 1.5;
  }

  .campaign-checklist {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .example-journey-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.whatsapp-communication-section {
  padding: 48px 0 52px;
  background: transparent;
}

.whatsapp-communication-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.62fr) minmax(0, 0.72fr);
  align-items: center;
  gap: 28px;
}

.whatsapp-communication-copy {
  min-width: 0;
}

.whatsapp-communication-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  color: #53648c;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.whatsapp-communication-eyebrow::after {
  width: 34px;
  height: 1px;
  background: #ff765e;
  content: "";
}

.whatsapp-communication-copy h2 {
  margin: 0 0 12px;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 800;
  line-height: 1.08;
}

.whatsapp-communication-copy h2 span {
  display: block;
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.whatsapp-communication-copy > p {
  margin: 0 0 14px;
  color: #53648c !important;
  line-height: 1.5;
}

.whatsapp-communication-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.whatsapp-communication-features li,
.whatsapp-communication-highlights li {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e8f1f7;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 5px 16px rgba(48, 108, 146, 0.06);
}

.whatsapp-communication-features li > span:last-child,
.whatsapp-communication-highlights li > span:last-child {
  display: grid;
  gap: 4px;
}

.whatsapp-communication-features strong,
.whatsapp-communication-highlights strong {
  color: #101638;
  font-weight: 700;
}

.whatsapp-communication-features li > span:last-child > span,
.whatsapp-communication-highlights li > span:last-child > span {
  color: #53648c;
  line-height: 1.4;
}

.communication-feature-icon,
.communication-highlight-icon {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  border-radius: 50%;
}

.communication-feature-blue {
  background: #e5f6ff;
  color: #24a5e8;
}

.communication-feature-orange {
  background: #fff0e8;
  color: #ff795c;
}

.communication-feature-green {
  background: #e2f9e9;
  color: #19bd65;
}

.communication-feature-purple {
  background: #f0eafe;
  color: #8062ca;
}

.communication-phone {
  display: flex;
  min-height: 460px;
  align-items: center;
  justify-content: center;
}

.communication-phone-frame {
  position: relative;
  width: 224px;
  padding: 12px;
  border: 3px solid #40516a;
  border-radius: 32px;
  background: #101b2a;
  box-shadow:
    0 14px 30px rgba(20, 42, 68, 0.2),
    inset 0 0 0 2px #a9bacb;
}

.communication-phone-speaker {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 50%;
  width: 72px;
  height: 14px;
  border-radius: 0 0 10px 10px;
  background: #101b2a;
  transform: translateX(-50%);
}

.communication-phone-screen {
  overflow: hidden;
  min-height: 420px;
  border-radius: 21px;
  background: #f6f7f8;
}

.communication-phone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 22px 10px 10px;
  background: #ffffff;
  color: #1684c7;
}

.communication-brand-mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  border-radius: 50%;
  background: #14b878;
  color: #ffffff;
  font-weight: 700;
}

.communication-brand-name {
  display: grid;
  min-width: 0;
  flex: 1;
  color: var(--text-color);
  font-size: 7px;
}

.communication-brand-name > span {
  color: #6b7891;
}

.communication-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 380px;
  padding: 12px 10px;
  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(52, 174, 202, 0.08),
      transparent 30%
    ),
    #f2f4f4;
}

.communication-product-image {
  display: grid;
  min-height: 76px;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #dceaf2, #ffffff);
  color: #4a9cc3;
}

.communication-message {
  max-width: 92%;
  padding: 8px;
  border-radius: 10px;
  background: #ffffff;
  color: var(--text-color);
  line-height: 1.4;
  box-shadow: 0 2px 6px rgba(30, 60, 80, 0.06);
  font-size: 9px !important;
}

.communication-message span {
  display: block;
  margin-top: 4px;
  color: #8a97a8;
  text-align: right;
}

.communication-message-out {
  align-self: flex-end;
  background: #d9f9ca;
}

.communication-shop-button {
  padding: 6px;
  border: 1px solid #8cc9ff;
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary-color);
  text-align: center;
  font-size: 11px;
}

.whatsapp-communication-highlights {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.communication-highlight-icon {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

@media (max-width: 991.98px) {
  .whatsapp-communication-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: 24px;
  }

  .communication-phone {
    grid-column: 2;
    grid-row: 1;
  }

  .whatsapp-communication-copy {
    grid-column: 1;
    grid-row: 1;
  }

  .whatsapp-communication-highlights {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .whatsapp-communication-layout {
    grid-template-columns: 1fr;
  }

  .whatsapp-communication-copy,
  .communication-phone,
  .whatsapp-communication-highlights {
    grid-column: 1;
    grid-row: auto;
  }

  .whatsapp-communication-highlights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .whatsapp-communication-section {
    padding: 38px 0 42px;
  }

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

  .communication-phone {
    min-height: auto;
  }

  .communication-phone-frame {
    width: min(100%, 260px);
  }
}

.key-benefits-section {
  padding: 45px 0 50px;

  background-color: var(--white-color);

  overflow: hidden;
}

.key-benefits-wrapper {
  display: flex;
  align-items: flex-start;

  width: 100%;
}

.key-benefits-intro {
  width: 34%;

  flex-shrink: 0;

  padding-top: 13px;
}

.key-benefits-eyebrow {
  margin-bottom: 10px;

  font-family: var(--paragraph-font);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.key-benefits-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 30px;

  line-height: 1.18;

  font-weight: 700;

  letter-spacing: -0.6px;

  color: var(--text-color);
}

.key-benefits-list {
  width: 66%;

  display: grid;

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

  column-gap: 25px;
}

.key-benefit-item {
  min-width: 0;
}

.key-benefit-icon {
  width: 74px;
  height: 74px;

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

  margin-bottom: 16px;

  border-radius: 50%;

  background-color: #edf8fd;

  color: var(--primary-color);

  font-size: 27px;

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

.key-benefit-item:hover .key-benefit-icon {
  transform: translateY(-5px);

  background-color: var(--primary-color);

  color: var(--white-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

.key-benefit-title {
  margin: 0 0 8px;

  font-family: var(--paragraph-font);

  font-size: 14px;

  line-height: 1.35;

  font-weight: 700;

  color: var(--text-color);
}

.key-benefit-description {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 12px;

  line-height: 1.45;

  font-weight: 400;

  color: #7c8993;
}

@media (max-width: 1199.98px) {
  .key-benefits-intro {
    width: 31%;
  }

  .key-benefits-list {
    width: 69%;

    column-gap: 18px;
  }

  .key-benefits-title {
    font-size: 27px;
  }

  .key-benefit-icon {
    width: 68px;
    height: 68px;

    font-size: 24px;
  }
}

@media (max-width: 991.98px) {
  .key-benefits-section {
    padding: 40px 0 45px;
  }

  .key-benefits-wrapper {
    flex-direction: column;
  }

  .key-benefits-intro {
    width: 100%;

    padding-top: 0;

    margin-bottom: 30px;
  }

  .key-benefits-title {
    font-size: 30px;
  }

  .key-benefits-list {
    width: 100%;

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

    row-gap: 30px;

    column-gap: 35px;
  }
}

@media (max-width: 575.98px) {
  .key-benefits-section {
    padding: 35px 0 40px;
  }

  .key-benefits-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .key-benefits-title {
    font-size: 27px;
  }

  .key-benefits-intro {
    margin-bottom: 28px;
  }

  .key-benefits-list {
    grid-template-columns: 1fr;

    row-gap: 28px;
  }

  .key-benefit-item {
    display: grid;

    grid-template-columns: 62px 1fr;

    column-gap: 15px;

    align-items: center;
  }

  .key-benefit-icon {
    width: 62px;
    height: 62px;

    grid-row: span 2;

    margin: 0;

    font-size: 22px;
  }

  .key-benefit-title {
    margin-bottom: 4px;

    font-size: 14px;
  }

  .key-benefit-description {
    font-size: 11px;
  }
}

.use-cases-section {
  padding: 45px 0 55px;

  background-color: var(--white-color);

  overflow: hidden;
}
.use-cases-heading {
  margin-bottom: 22px;
}

.use-cases-eyebrow {
  margin-bottom: 9px;

  font-family: var(--paragraph-font);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.use-cases-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 30px;

  line-height: 1.12;

  font-weight: 700;

  letter-spacing: -0.6px;

  color: var(--text-color);
}

.use-cases-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.use-cases-grid {
  display: grid;

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

  gap: 18px;

  width: 100%;
}

.use-case-card {
  min-height: 125px;

  display: flex;

  align-items: center;

  padding: 18px 19px;

  border: 1px solid #e4ebef;

  border-radius: 10px;

  background-color: var(--white-color);

  text-decoration: none;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.025);

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

.use-case-card:hover {
  transform: translateY(-4px);

  border-color: rgba(79, 168, 197, 0.3);

  box-shadow: 0 10px 25px rgba(79, 168, 197, 0.09);
}

.use-case-icon {
  width: 62px;
  height: 62px;

  flex: 0 0 62px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: 17px;

  border-radius: 11px;

  background-color: #eef9fd;

  color: var(--primary-color);

  font-size: 26px;

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

.use-case-card:hover .use-case-icon {
  background-color: var(--primary-color);

  color: var(--white-color);

  transform: scale(1.04);
}

.use-case-content {
  flex: 1;

  min-width: 0;
}

.use-case-content h3 {
  margin: 0 0 8px;

  font-family: var(--paragraph-font);

  font-size: 14px;

  line-height: 1.25;

  font-weight: 700;

  color: var(--text-color);
}

.use-case-content p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.45;

  font-weight: 400;

  color: #7d8993;
}

.use-case-arrow {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-left: 12px;

  border: 1px solid rgba(79, 168, 197, 0.4);

  border-radius: 50%;

  background-color: var(--white-color);

  color: var(--primary-color);

  font-size: 14px;

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

.use-case-card:hover .use-case-arrow {
  background-color: var(--primary-color);

  color: var(--white-color);

  transform: translateX(3px);
}

@media (max-width: 991.98px) {
  .use-cases-section {
    padding: 40px 0 48px;
  }

  .use-cases-title {
    font-size: 28px;
  }

  .use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 15px;
  }

  .use-case-card:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 575.98px) {
  .use-cases-section {
    padding: 35px 0 40px;
  }

  .use-cases-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .use-cases-title {
    font-size: 26px;

    line-height: 1.15;
  }

  .use-cases-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }

  .use-case-card:last-child {
    grid-column: auto;
  }

  .use-case-card {
    min-height: 110px;

    padding: 16px;
  }

  .use-case-icon {
    width: 56px;
    height: 56px;

    flex-basis: 56px;

    margin-right: 14px;

    font-size: 23px;
  }

  .use-case-content h3 {
    font-size: 13px;

    margin-bottom: 6px;
  }

  .use-case-content p {
    font-size: 10px;
  }

  .use-case-arrow {
    width: 31px;
    height: 31px;

    flex-basis: 31px;

    margin-left: 8px;

    font-size: 12px;
  }
}

.integrations-section {
  padding: 25px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.integrations-wrapper {
  min-height: 193px;

  display: flex;
  align-items: center;

  padding: 25px 34px;

  border-radius: 9px;

  background-color: #f1f9fd;
}

.integrations-content {
  width: 38%;

  flex-shrink: 0;
}

.integrations-eyebrow {
  margin-bottom: 8px;

  font-family: var(--paragraph-font);

  font-size: 10px;
  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.integrations-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 28px;

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -0.5px;

  color: var(--text-color);
}

.integrations-description {
  margin: 13px 0 0;

  font-family: var(--paragraph-font);

  font-size: 12px;

  line-height: 1.45;

  font-weight: 400;

  color: #7c8993;
}

.integrations-divider {
  width: 1px;

  height: 132px;

  flex: 0 0 1px;

  margin: 0 45px 0 5px;

  background-color: rgba(79, 168, 197, 0.35);
}

.integrations-list {
  flex: 1;

  display: grid;

  grid-template-columns: repeat(6, minmax(0, 1fr));

  gap: 18px;

  align-items: center;
}

.integration-item {
  width: 100%;
  height: 78px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 7px;

  background-color: rgba(255, 255, 255, 0.9);

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

.integration-item:hover {
  transform: translateY(-4px);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.1);
}

.integration-item img {
  display: block;

  width: auto;

  max-width: 72px;

  max-height: 42px;

  object-fit: contain;
}

.integration-more {
  gap: 5px;
}

.integration-more span {
  width: 5px;
  height: 5px;

  display: block;

  border-radius: 50%;

  background-color: var(--primary-color);
}

@media (max-width: 1199.98px) {
  .integrations-wrapper {
    padding: 25px;
  }

  .integrations-content {
    width: 35%;
  }

  .integrations-divider {
    margin-left: 0;
    margin-right: 30px;
  }

  .integrations-list {
    gap: 12px;
  }

  .integration-item {
    height: 70px;
  }
}

@media (max-width: 991.98px) {
  .integrations-section {
    padding: 25px 0 35px;
  }

  .integrations-wrapper {
    flex-direction: column;

    align-items: stretch;

    padding: 28px;
  }

  .integrations-content {
    width: 100%;

    margin-bottom: 25px;
  }

  .integrations-divider {
    width: 100%;
    height: 1px;

    margin: 0 0 25px;
  }

  .integrations-list {
    width: 100%;

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

    gap: 14px;
  }
}

@media (max-width: 575.98px) {
  .integrations-section {
    padding: 20px 0 30px;
  }

  .integrations-wrapper {
    padding: 22px 18px;

    border-radius: 8px;
  }

  .integrations-eyebrow {
    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .integrations-title {
    font-size: 26px;
  }

  .integrations-description {
    font-size: 11px;
  }

  .integrations-description br {
    display: none;
  }

  .integrations-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .integration-item {
    height: 70px;
  }

  .integration-item img {
    max-width: 65px;

    max-height: 38px;
  }
}

.wa-business-faq-section {
  padding: 45px 0 55px;
  background: #fff;
  overflow: hidden;
}

.wa-business-faq-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}

.wa-business-faq-eyebrow {
  margin-bottom: 8px;

  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: #637486;
}

.wa-business-faq-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 30px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.6px;

  color: #000;
}

.wa-business-faq-contact {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 29px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  color: var(--primary-color);
  text-decoration: none;

  transition: 0.25s ease;
}

.wa-business-faq-contact span {
  font-size: 16px;
}

.wa-business-faq-contact:hover {
  color: var(--accent-color);
}

.wa-business-faq-grid {
  display: grid;

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

  gap: 24px;
}

.whatsapp-accordion {
  display: flex;
  flex-direction: column;

  gap: 7px;
}

.wa-business-faq-item {
  border: 1px solid #e1e8ed !important;

  border-radius: 7px !important;

  overflow: hidden;

  background: #fff;

  box-shadow: none !important;
}

.wa-business-faq-button {
  min-height: 40px;

  padding: 8px 14px !important;

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

  font-family: var(--paragraph-font) !important;

  font-weight: 500 !important;

  color: #344452 !important;

  background-color: #fff !important;

  box-shadow: none !important;
}

.wa-business-faq-button:focus {
  box-shadow: none !important;
}

.wa-business-faq-button:not(.collapsed) {
  color: var(--primary-color) !important;

  background-color: #fff !important;

  box-shadow: none !important;
}

.wa-business-faq-button::after {
  width: 12px;
  height: 12px;

  margin-left: auto;

  background-size: 12px;

  opacity: 0.7;
}

.wa-business-faq-answer {
  padding: 0 14px 12px !important;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.5;

  color: #7c8993;
}

.wa-business-faq-item .collapsing {
  transition: height 0.25s ease;
}

@media (max-width: 767.98px) {
  .wa-business-faq-section {
    padding: 35px 0 40px;
  }

  .wa-business-faq-header {
    flex-direction: column;
  }

  .wa-business-faq-title {
    font-size: 27px;
  }

  .wa-business-faq-contact {
    margin-top: 15px;
  }

  .wa-business-faq-grid {
    grid-template-columns: 1fr;
    gap: 7px;
  }
}

@media (max-width: 400px) {
  .wa-business-faq-title {
    font-size: 25px;
  }

  .wa-business-faq-button {
    font-size: 11px !important;
  }
}

.wa-business-cta-section {
  padding: 25px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.wa-business-cta {
  position: relative;

  min-height: 128px;

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

  padding: 20px 30px;

  overflow: hidden;

  border-radius: 7px;

  background: linear-gradient(115deg, #20b5df 0%, #11a8d7 48%, #1298cc 100%);

  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.wa-business-cta-content {
  position: relative;

  z-index: 3;

  width: 100%;

  text-align: center;
}

.wa-business-cta-eyebrow {
  margin-bottom: 6px;

  font-family: var(--paragraph-font);

  font-size: 8px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

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

.wa-business-cta-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 22px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.3px;

  color: var(--white-color);
}

.wa-business-cta-description {
  margin: 5px 0 12px;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.35;

  font-weight: 400;

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

.wa-business-cta-buttons {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 22px;
}

.wa-business-cta-btn {
  width: 166px;

  height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1;

  font-weight: 600;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.wa-business-cta-primary {
  background-color: var(--white-color);

  border: 1px solid var(--white-color);

  color: var(--primary-color);

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.wa-business-cta-primary:hover {
  transform: translateY(-2px);

  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--white-color);
}

.wa-business-cta-secondary {
  background-color: transparent;

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

  color: var(--white-color);
}

.wa-business-cta-secondary:hover {
  transform: translateY(-2px);

  background-color: var(--white-color);

  border-color: var(--white-color);

  color: var(--primary-color);
}

.wa-business-cta-shape-left {
  position: absolute;

  width: 320px;
  height: 220px;

  left: -105px;
  top: -120px;

  border-radius: 50%;

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

  transform: rotate(-18deg);

  pointer-events: none;
}

.wa-business-cta-shape-left::after {
  content: "";

  position: absolute;

  width: 270px;
  height: 190px;

  left: 50px;
  top: 55px;

  border-radius: 50%;

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

.wa-business-cta-shape-right {
  position: absolute;

  width: 300px;
  height: 210px;

  right: -110px;
  bottom: -125px;

  border-radius: 50%;

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

  transform: rotate(18deg);

  pointer-events: none;
}

.wa-business-cta-shape-right::after {
  content: "";

  position: absolute;

  width: 255px;
  height: 175px;

  right: 45px;
  bottom: 45px;

  border-radius: 50%;

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

@media (max-width: 991.98px) {
  .wa-business-cta {
    min-height: 130px;

    padding: 22px 25px;
  }

  .wa-business-cta-title {
    font-size: 21px;
  }

  .wa-business-cta-buttons {
    gap: 16px;
  }
}

@media (max-width: 767.98px) {
  .wa-business-cta-section {
    padding: 20px 0 30px;
  }

  .wa-business-cta {
    min-height: auto;

    padding: 28px 18px;

    border-radius: 8px;
  }

  .wa-business-cta-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .wa-business-cta-title {
    font-size: 21px;

    line-height: 1.25;
  }

  .wa-business-cta-description {
    max-width: 310px;

    margin: 7px auto 17px;

    font-size: 10px;

    line-height: 1.45;
  }

  .wa-business-cta-buttons {
    flex-direction: column;

    gap: 9px;
  }

  .wa-business-cta-btn {
    width: 180px;

    height: 38px;
  }
}

@media (max-width: 400px) {
  .wa-business-cta-title {
    font-size: 19px;
  }

  .wa-business-cta-description {
    font-size: 9px;
  }
}
/* ------------------------------------------------------------- */
/* Missed Call Service */
/* ------------------------------------------------------------- */
.mcs-hero {
  background-image: url("images/missed-call/missed-call-hero.png");
  background-position: center;
  min-height: 670px;
}

.missed-call-process-section {
  padding: 32px 0 38px;

  background-color: var(--white-color);

  overflow: hidden;
}

.missed-call-process-wrapper {
  display: flex;

  align-items: center;

  width: 100%;
}

.missed-call-process-heading {
  width: 32%;

  flex-shrink: 0;
}

.missed-call-process-eyebrow {
  margin-bottom: 8px;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.missed-call-process-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 27px;

  line-height: 1.15;

  font-weight: 700;

  letter-spacing: -0.5px;

  color: var(--text-color);
}

.missed-call-process-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.missed-call-process-steps {
  flex: 1;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;
}

.missed-call-process-step {
  width: 185px;

  flex-shrink: 0;
}

.missed-call-process-icon {
  width: 60px;
  height: 60px;

  display: flex;

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

  margin-bottom: 8px;

  border-radius: 50%;

  background-color: #eef9fd;

  color: var(--primary-color);

  font-size: 21px;

  box-shadow: 0 0 0 1px rgba(79, 168, 197, 0.04);
}

.missed-call-process-icon i {
  line-height: 1;
}

.missed-call-step-number {
  margin-bottom: 3px;

  font-family: var(--paragraph-font);

  font-size: 15px;

  line-height: 1;

  font-weight: 700;

  color: #244563;
}

.missed-call-process-step h3 {
  margin: 0 0 3px;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1.3;

  font-weight: 700;

  color: var(--text-color);
}

.missed-call-process-step p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1.4;

  font-weight: 400;

  color: #7d8993;
}

.missed-call-process-arrow {
  width: 45px;

  flex-shrink: 0;

  padding-top: 30px;

  display: flex;

  justify-content: center;
}

.missed-call-process-arrow span {
  display: block;

  font-family: Arial, sans-serif;

  font-size: 16px;

  line-height: 1;

  font-weight: 400;

  color: var(--primary-color);
}

.missed-call-process-step {
  transition: transform 0.3s ease;
}

.missed-call-process-step:hover {
  transform: translateY(-4px);
}

.missed-call-process-step:hover .missed-call-process-icon {
  background-color: var(--primary-color);

  color: var(--white-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

@media (max-width: 991.98px) {
  .missed-call-process-wrapper {
    flex-direction: column;

    align-items: flex-start;
  }

  .missed-call-process-heading {
    width: 100%;

    margin-bottom: 28px;
  }

  .missed-call-process-steps {
    width: 100%;
  }

  .missed-call-process-step {
    width: 160px;
  }

  .missed-call-process-arrow {
    width: 35px;
  }
}

@media (max-width: 767.98px) {
  .missed-call-process-section {
    padding: 30px 0 35px;
  }

  .missed-call-process-title {
    font-size: 26px;
  }

  .missed-call-process-steps {
    display: grid;

    grid-template-columns: 1fr;

    gap: 25px;
  }

  .missed-call-process-step {
    width: 100%;
  }

  .missed-call-process-arrow {
    display: none;
  }

  .missed-call-process-icon {
    width: 55px;
    height: 55px;

    font-size: 19px;
  }
}

@media (max-width: 400px) {
  .missed-call-process-title {
    font-size: 24px;
  }
}

.missed-growth-section {
  padding: 25px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.missed-growth-card {
  position: relative;

  min-height: 265px;

  display: flex;

  align-items: stretch;

  overflow: hidden;

  border-radius: 9px;

  background-image: url("images/missed-call/missed-growth-bg.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center right;
}

.missed-growth-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background: linear-gradient(
    90deg,
    rgba(239, 249, 253, 0.99) 0%,
    rgba(239, 249, 253, 0.96) 27%,
    rgba(239, 249, 253, 0.78) 43%,
    rgba(239, 249, 253, 0.35) 59%,
    rgba(239, 249, 253, 0.02) 76%
  );
}

.missed-growth-content {
  position: relative;

  z-index: 2;

  width: 100%;

  min-height: 265px;

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  padding: 25px 31px;
}

.missed-growth-copy {
  padding-top: 0;

  max-width: 390px;
}

.missed-growth-eyebrow {
  margin-bottom: 9px;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #637486;
}

.missed-growth-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 29px;

  line-height: 1.12;

  font-weight: 700;

  letter-spacing: -0.7px;

  color: #050505;
}

.missed-growth-description {
  margin: 14px 0 19px;

  font-family: var(--paragraph-font);

  font-size: 12px;

  line-height: 1.45;

  font-weight: 400;

  color: #687985;
}

.missed-growth-btn {
  width: 167px;

  height: 38px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 5px;

  background-color: #12a5da;

  border: 1px solid #12a5da;

  font-family: var(--paragraph-font);

  font-size: 10px;

  font-weight: 600;

  color: var(--white-color);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.missed-growth-btn:hover {
  transform: translateY(-2px);

  background-color: var(--primary-color);

  box-shadow: 0 7px 18px rgba(18, 165, 218, 0.2);

  color: var(--white-color);
}

.missed-growth-stats {
  position: relative;

  width: 400px;

  height: 82px;

  display: flex;

  align-items: center;

  margin-top: 7px;

  padding: 0 10px;

  border-radius: 8px;

  background-color: rgba(255, 255, 255, 0.93);

  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.04);

  backdrop-filter: blur(5px);
}

.missed-growth-stat {
  position: relative;

  flex: 1;

  height: 58px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.missed-growth-stat:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 7px;

  right: 0;

  width: 1px;

  height: 43px;

  background-color: #dce5e9;
}

.missed-growth-stat strong {
  display: block;

  margin-bottom: 3px;

  font-family: var(--paragraph-font);

  font-size: 20px;

  line-height: 1;

  font-weight: 700;

  color: #111827;
}

.missed-growth-stat span {
  display: block;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1.3;

  font-weight: 400;

  color: #7d8993;
}

@media (max-width: 991.98px) {
  .missed-growth-card {
    min-height: 280px;

    background-position: 60% center;
  }

  .missed-growth-content {
    min-height: 280px;

    padding: 25px;
  }

  .missed-growth-overlay {
    background: linear-gradient(
      90deg,
      rgba(239, 249, 253, 0.99) 0%,
      rgba(239, 249, 253, 0.94) 35%,
      rgba(239, 249, 253, 0.62) 58%,
      rgba(239, 249, 253, 0.12) 82%
    );
  }

  .missed-growth-copy {
    max-width: 360px;
  }

  .missed-growth-stats {
    width: 360px;
  }
}

@media (max-width: 767.98px) {
  .missed-growth-section {
    padding: 20px 0 30px;
  }

  .missed-growth-card {
    min-height: 430px;

    background-position: 65% center;
  }

  .missed-growth-overlay {
    background: linear-gradient(
      180deg,
      rgba(239, 249, 253, 0.98) 0%,
      rgba(239, 249, 253, 0.94) 43%,
      rgba(239, 249, 253, 0.62) 68%,
      rgba(239, 249, 253, 0.18) 100%
    );
  }

  .missed-growth-content {
    min-height: 430px;

    flex-direction: column;

    padding: 25px 20px;
  }

  .missed-growth-copy {
    max-width: 100%;
  }

  .missed-growth-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .missed-growth-title {
    font-size: 27px;
  }

  .missed-growth-description {
    font-size: 11px;

    max-width: 300px;
  }

  .missed-growth-btn {
    width: 150px;

    height: 37px;
  }

  .missed-growth-stats {
    width: 100%;

    height: 75px;

    margin-top: auto;

    padding: 0 5px;
  }

  .missed-growth-stat {
    height: 55px;
  }

  .missed-growth-stat strong {
    font-size: 16px;
  }

  .missed-growth-stat span {
    font-size: 8px;
  }
}

@media (max-width: 400px) {
  .missed-growth-card {
    min-height: 400px;
  }

  .missed-growth-content {
    min-height: 400px;

    padding: 22px 17px;
  }

  .missed-growth-title {
    font-size: 25px;
  }

  .missed-growth-description {
    font-size: 10px;
  }

  .missed-growth-stats {
    height: 70px;
  }

  .missed-growth-stat strong {
    font-size: 14px;
  }
}

.missed-call-cta-section {
  padding: 25px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.missed-call-cta {
  position: relative;

  min-height: 148px;

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

  padding: 22px 30px;

  overflow: hidden;

  border-radius: 8px;

  background: linear-gradient(115deg, #20b5df 0%, #10a8d8 48%, #1298cc 100%);
}

.missed-call-cta-content {
  position: relative;

  z-index: 3;

  width: 100%;

  text-align: center;
}

.missed-call-cta-eyebrow {
  margin-bottom: 6px;

  font-family: var(--paragraph-font);

  font-size: 8px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

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

.missed-call-cta-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 22px;

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.35px;

  color: var(--white-color);
}

.missed-call-cta-description {
  margin: 6px 0 13px;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1.4;

  font-weight: 400;

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

.missed-call-cta-buttons {
  display: flex;

  align-items: center;

  justify-content: center;
}

.missed-call-cta-btn {
  width: 195px;

  height: 36px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 6px;

  background-color: var(--white-color);

  border: 1px solid var(--white-color);

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1;

  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.08);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.missed-call-cta-btn:hover {
  transform: translateY(-2px);

  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--white-color);

  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}

.missed-call-cta-shape-left {
  position: absolute;

  width: 320px;
  height: 220px;

  left: -135px;
  top: -105px;

  border-radius: 50%;

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

  transform: rotate(-25deg);

  pointer-events: none;
}

.missed-call-cta-shape-left::before,
.missed-call-cta-shape-left::after {
  content: "";

  position: absolute;

  border-radius: 50%;

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

  pointer-events: none;
}

.missed-call-cta-shape-left::before {
  width: 290px;
  height: 195px;

  left: 22px;
  top: 18px;
}

.missed-call-cta-shape-left::after {
  width: 260px;
  height: 170px;

  left: 45px;
  top: 38px;
}

.missed-call-cta-shape-right {
  position: absolute;

  width: 330px;
  height: 230px;

  right: -145px;
  bottom: -125px;

  border-radius: 50%;

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

  transform: rotate(-22deg);

  pointer-events: none;
}

.missed-call-cta-shape-right::before,
.missed-call-cta-shape-right::after {
  content: "";

  position: absolute;

  border-radius: 50%;

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

  pointer-events: none;
}

.missed-call-cta-shape-right::before {
  width: 295px;
  height: 195px;

  right: 22px;
  bottom: 18px;
}

.missed-call-cta-shape-right::after {
  width: 260px;
  height: 165px;

  right: 45px;
  bottom: 40px;
}

@media (max-width: 991.98px) {
  .missed-call-cta {
    min-height: 145px;

    padding: 22px 25px;
  }

  .missed-call-cta-title {
    font-size: 21px;
  }
}

@media (max-width: 767.98px) {
  .missed-call-cta-section {
    padding: 20px 0 30px;
  }

  .missed-call-cta {
    min-height: 170px;

    padding: 25px 18px;

    border-radius: 8px;
  }

  .missed-call-cta-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .missed-call-cta-title {
    font-size: 20px;

    line-height: 1.25;
  }

  .missed-call-cta-description {
    max-width: 300px;

    margin: 7px auto 15px;

    font-size: 9px;

    line-height: 1.45;
  }

  .missed-call-cta-btn {
    width: 175px;

    height: 37px;
  }

  .missed-call-cta-shape-left {
    left: -190px;
  }

  .missed-call-cta-shape-right {
    right: -190px;
  }
}

@media (max-width: 400px) {
  .missed-call-cta {
    min-height: 165px;
  }

  .missed-call-cta-title {
    font-size: 18px;
  }

  .missed-call-cta-description {
    font-size: 9px;
  }
}

.missed-call-process-step h3 {
  font-size: 12px;
}

.missed-call-process-step p {
  font-size: 11px;
}

.missed-call-features-section {
  padding: 52px 0 58px;
  background: #f5f9fb;
}

.missed-call-features-heading {
  max-width: 620px;
  margin: 0 auto 28px;
  text-align: center;
}

.missed-call-features-eyebrow,
.missed-call-faq-eyebrow {
  margin-bottom: 9px;
  color: #247e9d;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.missed-call-features-heading h2,
.missed-call-faq-heading h2 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
}

.missed-call-features-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.missed-call-feature-card {
  min-height: 210px;
  padding: 24px 20px;
  border: 1px solid #e3ebef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(29, 53, 87, 0.04);
}

.missed-call-feature-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 13px;
  background: #eaf6fa;
  color: #247e9d;
  font-size: 21px;
}

.missed-call-feature-card h3 {
  margin: 0 0 8px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
}

.missed-call-feature-card p {
  margin: 0;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.missed-call-faq-section {
  padding: 52px 0 58px;
  background: #fff;
}

.missed-call-faq-heading {
  margin-bottom: 24px;
  text-align: center;
}

.missed-call-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 10px;
  margin: 0 auto;
}

.missed-call-faq-item {
  overflow: hidden;
  border: 1px solid #e1e8ed !important;
  border-radius: 9px !important;
  background: #fff;
}

.missed-call-faq-item .accordion-button {
  padding: 17px 20px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 650;
  box-shadow: none;
}

.missed-call-faq-item .accordion-button:not(.collapsed) {
  color: #247e9d;
  background: #f7fbfc;
}

.missed-call-faq-item .accordion-button:focus {
  border-color: #247e9d;
  box-shadow: 0 0 0 3px rgba(36, 126, 157, 0.15);
}

.missed-call-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .missed-call-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .missed-call-features-section,
  .missed-call-faq-section {
    padding: 38px 0 42px;
  }

  .missed-call-features-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .missed-call-feature-card {
    min-height: 0;
  }

  .missed-call-faq-item .accordion-button {
    padding: 15px 16px;
    font-size: 14px;
  }

  .missed-call-faq-item .accordion-body {
    padding: 0 16px 16px;
    font-size: 13px;
  }
}
/* ------------------------------------------------------------- */
/* EMAIL Service */
/* ------------------------------------------------------------- */
.email-hero {
  background-image: url("images/email-marketing/email-marketing-hero.png");
  background-position: center;
  min-height: 670px;
}

.email-benefits-section {
  padding: 28px 0 32px;

  background-color: var(--white-color);

  overflow: hidden;
}

.email-benefits-wrapper {
  display: flex;

  align-items: center;

  width: 100%;
}

.email-benefits-heading {
  width: 31%;

  flex-shrink: 0;
}

.email-benefits-eyebrow {
  margin-bottom: 8px;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #687985;
}

.email-benefits-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 32px;

  line-height: 1.12;

  font-weight: 700;

  letter-spacing: -0.6px;

  color: #050505;
}

.email-benefits-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.email-benefits-list {
  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;
}

.email-benefit-item {
  width: 130px;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.email-benefit-icon {
  width: 58px;
  height: 58px;

  display: flex;

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

  margin-bottom: 8px;

  border-radius: 50%;

  background-color: #eef9fd;

  color: #159fd4;

  font-size: 20px;

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

.email-benefit-item h3,
.email-benefit-item h4 {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1.25;

  font-weight: 700;

  color: #111111;
}

.email-benefit-item h4 {
  margin-top: 1px;
}

.email-benefit-divider {
  width: 1px;

  height: 43px;

  flex-shrink: 0;

  background-color: #dce7ec;
}

.email-benefit-item {
  transition: transform 0.3s ease;
}

.email-benefit-item:hover {
  transform: translateY(-4px);
}

.email-benefit-item:hover .email-benefit-icon {
  background-color: var(--primary-color);

  color: var(--white-color);

  transform: scale(1.06);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

@media (max-width: 991.98px) {
  .email-benefits-heading {
    width: 28%;
  }

  .email-benefits-title {
    font-size: 22px;
  }

  .email-benefit-item {
    width: 105px;
  }

  .email-benefit-icon {
    width: 54px;
    height: 54px;

    font-size: 18px;
  }
}

@media (max-width: 767.98px) {
  .email-benefits-section {
    padding: 32px 0 38px;
  }

  .email-benefits-wrapper {
    display: block;
  }

  .email-benefits-heading {
    width: 100%;

    margin-bottom: 28px;
  }

  .email-benefits-title {
    font-size: 27px;
  }

  .email-benefits-list {
    display: grid;

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

    gap: 28px 15px;
  }

  .email-benefit-item {
    width: 100%;
  }

  .email-benefit-divider {
    display: none;
  }

  .email-benefit-icon {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 400px) {
  .email-benefits-title {
    font-size: 25px;
  }

  .email-benefit-item h3,
  .email-benefit-item h4 {
    font-size: 9px;
  }
}

.email-use-cases-section {
  padding: 28px 0 30px;

  background: linear-gradient(180deg, #f2fbfe 0%, #f8fcfd 100%);

  overflow: hidden;
}

.email-use-cases-wrapper {
  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  margin-bottom: 12px;
}

.email-use-cases-eyebrow {
  margin-bottom: 5px;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #687985;
}

.email-use-cases-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 32px;

  line-height: 1.05;

  font-weight: 700;

  letter-spacing: -0.5px;

  color: #050505;
}

.email-use-cases-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.email-use-cases-link {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  margin-top: 6px;

  font-family: var(--paragraph-font);

  font-size: 9px;

  line-height: 1;

  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.email-use-cases-link span {
  font-size: 13px;

  line-height: 1;
}

.email-use-cases-link:hover {
  color: var(--accent-color);

  transform: translateX(2px);
}

.email-use-cases-grid {
  display: grid;

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

  gap: 10px;
}

.email-use-case-card {
  min-height: 70px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 10px 13px;

  border: 1px solid #e1e9ed;

  border-radius: 5px;

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

  text-decoration: none;

  box-shadow: 0 2px 8px rgba(40, 100, 120, 0.025);

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

.email-use-case-card:hover {
  transform: translateY(-4px);

  border-color: rgba(79, 168, 197, 0.35);

  background-color: var(--white-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.1);
}

.email-use-case-icon {
  width: 65px;
  height: 65px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 12px;

  background-color: #eef9fd;

  color: #159fd4;

  font-size: 18px;

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

.email-use-case-card:hover .email-use-case-icon {
  transform: scale(1.06);

  background-color: var(--primary-color);

  color: var(--white-color);
}

.email-use-case-content {
  min-width: 0;
}

.email-use-case-content h3 {
  margin: 0 0 4px;

  font-family: var(--paragraph-font);

  font-size: 15px;

  line-height: 1.2;

  font-weight: 700;

  color: #111111;
}

.email-use-case-content p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.35;

  font-weight: 400;

  color: #788692;
}

@media (max-width: 991.98px) {
  .email-use-cases-title {
    font-size: 22px;
  }

  .email-use-case-card {
    gap: 10px;

    padding: 10px;
  }

  .email-use-case-icon {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 767.98px) {
  .email-use-cases-section {
    padding: 30px 0 35px;
  }

  .email-use-cases-wrapper {
    display: block;

    margin-bottom: 18px;
  }

  .email-use-cases-title {
    font-size: 27px;
  }

  .email-use-cases-link {
    margin-top: 12px;
  }

  .email-use-cases-grid {
    grid-template-columns: 1fr;

    gap: 10px;
  }

  .email-use-case-card {
    min-height: 75px;
  }
}

@media (max-width: 400px) {
  .email-use-cases-title {
    font-size: 25px;
  }

  .email-use-case-content h3 {
    font-size: 10px;
  }

  .email-use-case-content p {
    font-size: 8.5px;
  }
}

.email-advantage-section {
  padding: 30px 0 35px;

  background-color: var(--white-color);

  overflow: hidden;
}

.email-advantage-wrapper {
  display: grid;

  grid-template-columns: 58% 42%;

  align-items: stretch;

  width: 100%;
}

.email-advantage-media {
  position: relative;

  min-height: 250px;

  overflow: hidden;

  border-radius: 6px;
}

.email-advantage-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position: center;

  display: block;

  transition: transform 0.5s ease;
}

.email-advantage-media:hover .email-advantage-image {
  transform: scale(1.025);
}

.email-advantage-media-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.52) 36%,
    rgba(0, 0, 0, 0.12) 72%,
    rgba(0, 0, 0, 0.02) 100%
  );
}

.email-advantage-media-content {
  position: relative;

  z-index: 2;

  height: 100%;

  min-height: 250px;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding: 25px 36px;
}

.email-advantage-media-eyebrow {
  margin-bottom: 9px;

  font-family: var(--paragraph-font);

  font-size: 8px;

  line-height: 1.4;

  font-weight: 600;

  letter-spacing: 2.5px;

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

.email-advantage-media-title {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 27px;

  line-height: 1.12;

  font-weight: 700;

  letter-spacing: -0.5px;

  color: var(--white-color);
}

.email-watch-btn {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  margin-top: 20px;

  font-family: var(--paragraph-font);

  font-size: 10px;

  font-weight: 600;

  color: var(--white-color);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    color 0.25s ease;
}

.email-watch-btn:hover {
  color: var(--white-color);

  transform: translateX(3px);
}

.email-watch-icon {
  width: 47px;
  height: 47px;

  display: flex;

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

  border-radius: 50%;

  background-color: #0ba5dd;

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

  color: var(--white-color);

  font-size: 19px;

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);

  transition:
    transform 0.25s ease,
    background-color 0.25s ease;
}

.email-watch-btn:hover .email-watch-icon {
  transform: scale(1.08);

  background-color: var(--primary-color);
}

.email-advantage-content {
  padding: 3px 0 0 25px;
}

.email-advantage-eyebrow {
  margin-bottom: 5px;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.2;

  font-weight: 600;

  letter-spacing: 2.8px;

  text-transform: uppercase;

  color: #687985;
}

.email-advantage-title {
  margin: 0 0 10px;

  font-family: var(--paragraph-font);

  font-size: 32px;

  line-height: 1.1;

  font-weight: 700;

  letter-spacing: -0.5px;

  color: #050505;
}

.email-advantage-features {
  display: grid;

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

  column-gap: 15px;

  row-gap: 12px;
}

.email-advantage-feature {
  display: flex;

  align-items: center;

  gap: 9px;
}

.email-feature-icon {
  width: 48px;
  height: 48px;

  flex-shrink: 0;

  display: flex;

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

  border-radius: 50%;

  background-color: #eef9fd;

  color: #159fd4;

  font-size: 17px;

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

.email-advantage-feature:hover .email-feature-icon {
  transform: scale(1.06);

  background-color: var(--primary-color);

  color: var(--white-color);
}

.email-feature-text h3 {
  margin: 0 0 2px;

  font-family: var(--paragraph-font);

  font-size: 11px;

  line-height: 1.25;

  font-weight: 700;

  color: #111111;
}

.email-feature-text p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 10px;

  line-height: 1.35;

  font-weight: 400;

  color: #7b8790;
}

.email-advantage-btn {
  width: 157px;

  height: 35px;

  display: inline-flex;

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

  margin-top: 14px;

  border-radius: 4px;

  background-color: var(--primary-color);

  border: 1px solid var(--primary-color);

  font-family: var(--paragraph-font);

  font-size: 9px;

  font-weight: 600;

  color: var(--white-color);

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}

.email-advantage-btn:hover {
  transform: translateY(-2px);

  background-color: var(--accent-color);

  border-color: var(--accent-color);

  color: var(--white-color);

  box-shadow: 0 6px 15px rgba(79, 168, 197, 0.18);
}

@media (max-width: 991.98px) {
  .email-advantage-wrapper {
    grid-template-columns: 55% 45%;
  }

  .email-advantage-content {
    padding-left: 18px;
  }

  .email-advantage-title {
    font-size: 21px;
  }

  .email-advantage-media-title {
    font-size: 23px;
  }

  .email-feature-icon {
    width: 42px;
    height: 42px;

    font-size: 15px;
  }

  .email-feature-text h3 {
    font-size: 8.5px;
  }

  .email-feature-text p {
    font-size: 7.5px;
  }
}

@media (max-width: 767.98px) {
  .email-advantage-section {
    padding: 30px 0 40px;
  }

  .email-advantage-wrapper {
    display: flex;

    flex-direction: column;

    gap: 25px;
  }

  .email-advantage-media {
    width: 100%;

    min-height: 260px;
  }

  .email-advantage-media-content {
    min-height: 260px;

    padding: 25px;
  }

  .email-advantage-media-title {
    font-size: 25px;
  }

  .email-advantage-content {
    width: 100%;

    padding: 0;
  }

  .email-advantage-title {
    font-size: 25px;
  }

  .email-advantage-features {
    column-gap: 10px;

    row-gap: 18px;
  }

  .email-feature-icon {
    width: 48px;
    height: 48px;
  }

  .email-advantage-btn {
    width: 165px;
  }
}

@media (max-width: 400px) {
  .email-advantage-media {
    min-height: 240px;
  }

  .email-advantage-media-content {
    min-height: 240px;

    padding: 20px;
  }

  .email-advantage-media-title {
    font-size: 22px;
  }

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

.email-cta-section {
  padding: 25px 0 35px;
  background: var(--white-color);
}

.email-cta {
  position: relative;
  overflow: hidden;

  min-height: 150px;

  border-radius: 10px;

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

  background: linear-gradient(135deg, #24b8e4 0%, #11a8da 55%, #0f98cf 100%);
}

.email-cta-shape {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.email-cta-left {
  width: 340px;
  height: 220px;
  left: -170px;
  top: -95px;
  transform: rotate(-20deg);
}

.email-cta-right {
  width: 340px;
  height: 220px;
  right: -170px;
  bottom: -105px;
  transform: rotate(-20deg);
}

.email-cta-left::before,
.email-cta-left::after,
.email-cta-right::before,
.email-cta-right::after {
  content: "";
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.email-cta-left::after,
.email-cta-right::after {
  inset: 40px;
}

.email-cta-content {
  position: relative;
  z-index: 2;

  text-align: center;

  padding: 28px 20px;
  max-width: 780px;
}

.email-cta-eyebrow {
  margin-bottom: 8px;

  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;

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

.email-cta-title {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;

  color: var(--white-color);
}

.email-cta-description {
  margin: 10px 0 22px;

  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;

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

.email-cta-btn {
  width: 230px;
  height: 46px;

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

  border-radius: 8px;

  background: var(--white-color);
  border: 2px solid var(--white-color);

  color: var(--primary-color);
  text-decoration: none;

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

  transition: 0.3s ease;
}

.email-cta-btn:hover {
  background: transparent;
  color: var(--white-color);
}

@media (max-width: 991px) {
  .email-cta-title {
    font-size: 28px;
  }

  .email-cta-description {
    font-size: 15px;
  }
}

@media (max-width: 767px) {
  .email-cta {
    min-height: 185px;
  }

  .email-cta-content {
    padding: 30px 18px;
  }

  .email-cta-title {
    font-size: 24px;
  }

  .email-cta-description {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .email-cta-btn {
    width: 180px;
    height: 42px;
    font-size: 13px;
  }

  .email-cta-left {
    left: -220px;
  }

  .email-cta-right {
    right: -220px;
  }
}

/* ------------------------------------------------------------- */
/* voice sms Service */
/* ------------------------------------------------------------- */
.voice-sms-hero {
  background-image: url("images/voice-sms/voice-sms-hero.png");
  background-position: center;
  min-height: 670px;
}

.voice-sms-key-benefits {
  position: relative;
  width: 100%;
  padding: 35px 0;
  overflow: hidden;
  background: var(--white-color);
}

.voice-sms-benefits-wrapper {
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: 36% 64%;
  align-items: center;

  min-height: 145px;
}

.voice-sms-benefits-heading {
  padding-right: 30px;
}

.voice-sms-benefits-eyebrow {
  display: block;
  margin-bottom: 9px;

  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: #6f7788;
}

.voice-sms-benefits-heading h2 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.8px;

  color: var(--heading-color);
}

.voice-sms-benefits-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.voice-sms-benefits-list {
  display: grid;

  grid-template-columns:
    minmax(95px, 1fr)
    1px
    minmax(95px, 1fr)
    1px
    minmax(125px, 1.2fr)
    1px
    minmax(105px, 1fr);

  align-items: center;
}

.voice-sms-benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 135px;
  padding: 0 10px;

  text-align: center;

  transition: transform 0.25s ease;
}

.voice-sms-benefit-icon {
  width: 62px;
  height: 62px;

  margin-bottom: 10px;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.voice-sms-benefit-icon i {
  font-size: 26px;
  line-height: 1;
}

.voice-sms-benefit h3 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;

  color: var(--heading-color);
}

.voice-sms-benefit-divider {
  width: 1px;
  height: 68px;

  background: rgba(79, 168, 197, 0.25);
}

.voice-sms-benefit:hover {
  transform: translateY(-3px);
}

.voice-sms-benefit:hover .voice-sms-benefit-icon {
  background: var(--primary-color);
  color: var(--white-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

@media (max-width: 1199.98px) {
  .voice-sms-benefits-wrapper {
    grid-template-columns: 34% 66%;
  }

  .voice-sms-benefits-heading h2 {
    font-size: 29px;
  }

  .voice-sms-benefit {
    padding: 0 7px;
  }

  .voice-sms-benefit-icon {
    width: 58px;
    height: 58px;
  }

  .voice-sms-benefit-icon i {
    font-size: 24px;
  }

  .voice-sms-benefit h3 {
    font-size: 11px;
  }
}

@media (max-width: 991.98px) {
  .voice-sms-key-benefits {
    padding: 45px 0;
  }

  .voice-sms-benefits-wrapper {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .voice-sms-benefits-heading {
    padding-right: 0;
    text-align: center;
  }

  .voice-sms-benefits-heading h2 {
    font-size: 32px;
  }

  .voice-sms-benefits-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .voice-sms-benefit-divider {
    display: none;
  }

  .voice-sms-benefit {
    min-height: 125px;
  }
}

@media (max-width: 767.98px) {
  .voice-sms-key-benefits {
    padding: 40px 0;
  }

  .voice-sms-benefits-wrapper {
    gap: 28px;
  }

  .voice-sms-benefits-heading {
    text-align: left;
  }

  .voice-sms-benefits-heading h2 {
    font-size: 28px;
  }

  .voice-sms-benefits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 25px 10px;
  }

  .voice-sms-benefit {
    min-height: 115px;
  }

  .voice-sms-benefit-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 8px;
  }

  .voice-sms-benefit-icon i {
    font-size: 21px;
  }

  .voice-sms-benefit h3 {
    font-size: 11px;
  }
}

@media (max-width: 400px) {
  .voice-sms-benefits-heading h2 {
    font-size: 25px;
  }

  .voice-sms-benefit {
    min-height: 105px;
  }

  .voice-sms-benefit-icon {
    width: 50px;
    height: 50px;
  }

  .voice-sms-benefit-icon i {
    font-size: 19px;
  }

  .voice-sms-benefit h3 {
    font-size: 10px;
  }
}

.voice-sms-business-section {
  position: relative;
  width: 100%;
  padding: 55px 0 65px;
  overflow: hidden;
  background: var(--white-color);
}

.voice-sms-business-wrapper {
  display: grid;
  grid-template-columns: 58% 42%;
  align-items: center;
  gap: 35px;
}

.voice-sms-business-visual {
  min-width: 0;
}

.voice-sms-business-image {
  position: relative;
  width: 100%;
  height: 360px;
  overflow: hidden;
  border-radius: 7px;
  background: #16232c;
}

.voice-sms-business-image img {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

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

  display: block;
}

.voice-sms-business-image-overlay {
  position: absolute;
  inset: 0;

  background: linear-gradient(
    90deg,
    rgba(8, 20, 29, 0.92) 0%,
    rgba(8, 20, 29, 0.72) 34%,
    rgba(8, 20, 29, 0.18) 70%,
    rgba(8, 20, 29, 0.08) 100%
  );

  z-index: 1;
}

.voice-sms-business-image-content {
  position: absolute;
  top: 28px;
  left: 32px;

  z-index: 2;

  max-width: 270px;
}

.voice-sms-business-image-eyebrow {
  display: block;

  margin-bottom: 12px;

  font-family: var(--paragraph-font);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 3px;

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

.voice-sms-business-image-content h2 {
  margin: 0 0 13px;

  font-family: var(--paragraph-font);
  font-size: 31px;
  font-weight: 700;
  line-height: 1.16;

  color: var(--white-color);
}

.voice-sms-business-image-content p {
  max-width: 240px;

  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;

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

.voice-sms-video-btn {
  width: 57px;
  height: 57px;

  margin-top: 17px;

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

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 50%;

  background: var(--primary-color);
  color: var(--white-color);

  cursor: pointer;

  transition: 0.25s ease;
}

.voice-sms-video-btn i {
  margin-left: 3px;
  font-size: 24px;
}

.voice-sms-video-btn:hover {
  background: var(--accent-color);
  transform: scale(1.05);
}

.voice-sms-video-text {
  display: inline-block;

  margin-left: 10px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  color: var(--white-color);

  vertical-align: middle;
}

.voice-sms-business-quote {
  position: absolute;

  right: 32px;
  bottom: 58px;

  z-index: 2;

  font-family: var(--secondary-heading-font);
  font-size: 23px;
  line-height: 1.25;
  font-style: italic;

  color: var(--white-color);

  text-align: center;
}

.voice-sms-business-content {
  min-width: 0;
  padding-left: 5px;
}

.voice-sms-business-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;

  color: #6f7788;
}

.voice-sms-business-content > h2 {
  margin: 0 0 20px;

  font-family: var(--paragraph-font);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;

  color: var(--heading-color);
}

.voice-sms-business-features {
  display: grid;

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

  column-gap: 25px;
  row-gap: 20px;

  margin-bottom: 25px;
}

.voice-sms-business-feature {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  min-width: 0;
}

.voice-sms-feature-icon {
  flex: 0 0 56px;

  width: 56px;
  height: 56px;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);
}

.voice-sms-feature-icon i {
  font-size: 23px;
}

.voice-sms-business-feature h3 {
  margin: 4px 0 5px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;

  color: var(--heading-color);
}

.voice-sms-business-feature p {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 10px;
  line-height: 1.45;

  color: #8b8f96;
}

.voice-sms-business-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 205px;
  min-height: 45px;

  padding: 0 22px;

  border-radius: 5px;

  background: var(--primary-color);
  color: var(--white-color);

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  transition: 0.25s ease;
}

.voice-sms-business-btn:hover {
  background: var(--accent-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
  .voice-sms-business-wrapper {
    grid-template-columns: 56% 44%;
    gap: 25px;
  }

  .voice-sms-business-image {
    height: 340px;
  }

  .voice-sms-business-image-content {
    left: 27px;
  }

  .voice-sms-business-image-content h2 {
    font-size: 28px;
  }

  .voice-sms-business-quote {
    right: 25px;
    font-size: 20px;
  }

  .voice-sms-business-content > h2 {
    font-size: 26px;
  }

  .voice-sms-feature-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 991.98px) {
  .voice-sms-business-section {
    padding: 45px 0 55px;
  }

  .voice-sms-business-wrapper {
    grid-template-columns: 1fr;
    gap: 35px;
  }

  .voice-sms-business-image {
    height: 390px;
  }

  .voice-sms-business-content {
    padding-left: 0;
  }

  .voice-sms-business-content > h2 {
    font-size: 30px;
  }

  .voice-sms-business-feature h3 {
    font-size: 12px;
  }

  .voice-sms-business-feature p {
    font-size: 11px;
  }
}

@media (max-width: 767.98px) {
  .voice-sms-business-section {
    padding: 40px 0 50px;
  }

  .voice-sms-business-wrapper {
    gap: 30px;
  }

  .voice-sms-business-image {
    height: 390px;
  }

  .voice-sms-business-image-content {
    top: 25px;
    left: 22px;
    max-width: 230px;
  }

  .voice-sms-business-image-content h2 {
    font-size: 26px;
  }

  .voice-sms-business-image-content p {
    font-size: 11px;
  }

  .voice-sms-business-quote {
    right: 15px;
    bottom: 35px;
    max-width: 150px;
    font-size: 18px;
  }

  .voice-sms-business-features {
    column-gap: 12px;
    row-gap: 20px;
  }

  .voice-sms-business-feature {
    gap: 9px;
  }

  .voice-sms-feature-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
  }

  .voice-sms-feature-icon i {
    font-size: 18px;
  }

  .voice-sms-business-feature h3 {
    font-size: 10px;
  }

  .voice-sms-business-feature p {
    font-size: 9px;
  }

  .voice-sms-business-btn {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 400px) {
  .voice-sms-business-image {
    height: 360px;
  }

  .voice-sms-business-image-content {
    left: 18px;
  }

  .voice-sms-business-image-content h2 {
    font-size: 23px;
  }

  .voice-sms-business-quote {
    font-size: 16px;
    max-width: 125px;
  }

  .voice-sms-business-features {
    grid-template-columns: 1fr;
  }
}

.voice-sms-use-cases {
  position: relative;
  width: 100%;
  padding: 35px 0 40px;
  overflow: hidden;
  background: var(--white-color);
}

.voice-sms-use-cases-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 30px;

  margin-bottom: 12px;
}

.voice-sms-use-cases-eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: #737b8c;
}

.voice-sms-use-cases-header h2 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.7px;

  color: var(--heading-color);
}

.voice-sms-use-cases-header h2 span {
  color: var(--heading-color);
}

.voice-sms-use-cases-link {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  margin-bottom: 5px;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  color: var(--primary-color);

  text-decoration: none;

  white-space: nowrap;

  transition: 0.25s ease;
}

.voice-sms-use-cases-link i {
  font-size: 13px;
}

.voice-sms-use-cases-link:hover {
  color: var(--accent-color);
  gap: 9px;
}

.voice-sms-use-cases-grid {
  display: grid;

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

  gap: 14px;
}

.voice-sms-use-case {
  min-width: 0;
  min-height: 108px;

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

  padding: 15px 15px;

  border: 1px solid rgba(79, 168, 197, 0.18);
  border-radius: 9px;

  background: linear-gradient(
    135deg,
    rgba(79, 168, 197, 0.035),
    rgba(255, 255, 255, 0.9)
  );

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.voice-sms-use-case-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  margin-bottom: 8px;

  color: var(--heading-color);
}

.voice-sms-use-case-icon i {
  font-size: 25px;
  line-height: 1;

  font-weight: 400;
}

.voice-sms-use-case h3 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;

  color: var(--text-color);
}

.voice-sms-use-case:hover {
  transform: translateY(-3px);

  border-color: rgba(79, 168, 197, 0.35);

  background: rgba(79, 168, 197, 0.045);

  box-shadow: 0 10px 25px rgba(79, 168, 197, 0.08);
}

.voice-sms-use-case:hover .voice-sms-use-case-icon {
  color: var(--primary-color);
}

@media (max-width: 1199.98px) {
  .voice-sms-use-cases-header h2 {
    font-size: 28px;
  }

  .voice-sms-use-case {
    min-height: 105px;
  }

  .voice-sms-use-case h3 {
    font-size: 11px;
  }
}

@media (max-width: 991.98px) {
  .voice-sms-use-cases {
    padding: 40px 0 45px;
  }

  .voice-sms-use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .voice-sms-use-case {
    min-height: 110px;
  }
}

@media (max-width: 767.98px) {
  .voice-sms-use-cases {
    padding: 35px 0 40px;
  }

  .voice-sms-use-cases-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 12px;

    margin-bottom: 20px;
  }

  .voice-sms-use-cases-header h2 {
    font-size: 26px;
  }

  .voice-sms-use-cases-link {
    margin-bottom: 0;
  }

  .voice-sms-use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .voice-sms-use-case {
    min-height: 105px;
    padding: 12px;
  }

  .voice-sms-use-case-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 6px;
  }

  .voice-sms-use-case-icon i {
    font-size: 22px;
  }

  .voice-sms-use-case h3 {
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .voice-sms-use-cases-header h2 {
    font-size: 23px;
  }

  .voice-sms-use-cases-grid {
    gap: 10px;
  }

  .voice-sms-use-case {
    min-height: 100px;
  }
}

.voice-sms-stats {
  position: relative;
  width: 100%;
  padding: 18px 0 35px;
  background: var(--white-color);
}

.voice-sms-stats-wrapper {
  display: grid;

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

  align-items: center;

  min-height: 95px;

  padding: 12px 25px;

  border-radius: 8px;

  background: rgba(79, 168, 197, 0.08);
}

.voice-sms-stat {
  display: flex;
  flex-direction: column;

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

  min-width: 0;

  text-align: center;
}

.voice-sms-stat strong {
  display: block;

  margin-bottom: 3px;

  font-family: var(--paragraph-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;

  color: var(--heading-color);
}

.voice-sms-stat span {
  display: block;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.3;

  color: #7d828b;
}

.voice-sms-stat-divider {
  width: 1px;
  height: 48px;

  background: rgba(79, 168, 197, 0.28);
}

@media (max-width: 1199.98px) {
  .voice-sms-stats-wrapper {
    min-height: 90px;
  }

  .voice-sms-stat strong {
    font-size: 20px;
  }

  .voice-sms-stat span {
    font-size: 10px;
  }
}

@media (max-width: 991.98px) {
  .voice-sms-stats {
    padding: 15px 0 35px;
  }

  .voice-sms-stats-wrapper {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    padding: 12px 15px;
  }

  .voice-sms-stat-divider {
    display: none;
  }

  .voice-sms-stat strong {
    font-size: 18px;
  }

  .voice-sms-stat span {
    font-size: 9px;
  }
}

@media (max-width: 767.98px) {
  .voice-sms-stats {
    padding: 12px 0 30px;
  }

  .voice-sms-stats-wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 10px;

    min-height: auto;

    padding: 20px 10px;

    border-radius: 7px;
  }

  .voice-sms-stat strong {
    font-size: 17px;
  }

  .voice-sms-stat span {
    font-size: 9px;
  }
}

@media (max-width: 400px) {
  .voice-sms-stats-wrapper {
    padding: 18px 8px;
    gap: 18px 5px;
  }

  .voice-sms-stat strong {
    font-size: 15px;
  }

  .voice-sms-stat span {
    font-size: 8px;
  }
}

.voice-sms-final-cta {
  position: relative;
  width: 100%;
  padding: 10px 0 20px;
  overflow: hidden;
  background: var(--white-color);
}

.voice-sms-cta-box {
  position: relative;

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

  min-height: 118px;

  padding: 20px 38px;

  overflow: hidden;

  border-radius: 7px;

  background: linear-gradient(
    105deg,
    var(--primary-color) 0%,
    #159bd1 55%,
    #1294cb 100%
  );

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

.voice-sms-cta-box::before {
  content: "";

  position: absolute;

  left: -70px;
  top: -100px;

  width: 300px;
  height: 230px;

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

  border-radius: 50%;

  transform: rotate(-15deg);

  pointer-events: none;
}

.voice-sms-cta-box::after {
  content: "";

  position: absolute;

  left: -40px;
  top: -75px;

  width: 270px;
  height: 200px;

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

  border-radius: 50%;

  transform: rotate(-15deg);

  pointer-events: none;
}

.voice-sms-cta-content {
  position: relative;
  z-index: 2;

  flex: 1;

  text-align: center;

  padding-left: 145px;
}

.voice-sms-cta-eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family: var(--paragraph-font);
  font-size: 8px;
  font-weight: 600;

  letter-spacing: 3px;

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

.voice-sms-cta-content h2 {
  margin: 0 0 5px;

  font-family: var(--paragraph-font);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;

  color: var(--white-color);
}

.voice-sms-cta-content p {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;

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

.voice-sms-cta-action {
  position: relative;
  z-index: 3;

  flex: 0 0 auto;

  margin-left: 30px;
}

.voice-sms-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 188px;
  height: 49px;

  border-radius: 7px;

  background: var(--white-color);
  color: var(--primary-color);

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;

  text-decoration: none;

  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.voice-sms-cta-btn:hover {
  background: var(--accent-color);
  color: var(--white-color);

  transform: translateY(-2px);
}

@media (max-width: 1199.98px) {
  .voice-sms-cta-content {
    padding-left: 80px;
  }

  .voice-sms-cta-content h2 {
    font-size: 19px;
  }

  .voice-sms-cta-btn {
    width: 175px;
  }
}

@media (max-width: 991.98px) {
  .voice-sms-final-cta {
    padding: 10px 0 30px;
  }

  .voice-sms-cta-box {
    min-height: 125px;

    padding: 20px 25px;
  }

  .voice-sms-cta-content {
    padding-left: 20px;
  }

  .voice-sms-cta-content h2 {
    font-size: 18px;
  }

  .voice-sms-cta-content p {
    font-size: 10px;
  }

  .voice-sms-cta-btn {
    width: 160px;
  }
}

@media (max-width: 767.98px) {
  .voice-sms-final-cta {
    padding: 10px 0 30px;
  }

  .voice-sms-cta-box {
    flex-direction: column;

    align-items: center;

    gap: 18px;

    min-height: auto;

    padding: 30px 20px;
  }

  .voice-sms-cta-content {
    padding-left: 0;

    text-align: center;
  }

  .voice-sms-cta-eyebrow {
    font-size: 8px;
  }

  .voice-sms-cta-content h2 {
    font-size: 19px;
    line-height: 1.3;
  }

  .voice-sms-cta-content p {
    font-size: 10px;
  }

  .voice-sms-cta-action {
    margin-left: 0;

    width: 100%;
  }

  .voice-sms-cta-btn {
    width: 100%;
    height: 45px;
  }
}

@media (max-width: 400px) {
  .voice-sms-cta-content h2 {
    font-size: 17px;
  }

  .voice-sms-cta-content p {
    font-size: 9px;
  }
}
/* --------------call center-------------- */
/* --------------call center-------------- */
.call-center-hero {
  background-image: url("images/call-center/call-center-hero.png");
  background-position: center;
  min-height: 670px;
}

.cc-key-benefits {
  position: relative;
  width: 100%;
  padding: 28px 0 32px;
  overflow: hidden;
  background: var(--white-color);
}

.cc-key-benefits-wrapper {
  display: grid;
  grid-template-columns: 36% 64%;
  align-items: center;

  min-height: 145px;
}

.cc-key-benefits-heading {
  padding-right: 30px;
}

.cc-key-benefits-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 3px;
  text-transform: uppercase;

  color: #737b8c;
}

.cc-key-benefits-heading h2 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.7px;

  color: var(--heading-color);
}

.cc-key-benefits-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.cc-key-benefits-list {
  display: grid;

  grid-template-columns:
    minmax(100px, 1fr)
    1px
    minmax(100px, 1fr)
    1px
    minmax(125px, 1.15fr)
    1px
    minmax(100px, 1fr);

  align-items: center;
}

.cc-key-benefit {
  display: flex;
  flex-direction: column;

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

  min-height: 125px;
  padding: 0 10px;

  text-align: center;

  transition: transform 0.25s ease;
}

.cc-key-benefit-icon {
  width: 60px;
  height: 60px;

  margin-bottom: 9px;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.cc-key-benefit-icon i {
  font-size: 25px;
  line-height: 1;
}

.cc-key-benefit h3 {
  margin: 0;

  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;

  color: var(--heading-color);
}

.cc-key-benefit-divider {
  width: 1px;
  height: 72px;

  background: rgba(79, 168, 197, 0.24);
}

.cc-key-benefit:hover {
  transform: translateY(-3px);
}

.cc-key-benefit:hover .cc-key-benefit-icon {
  background: var(--primary-color);
  color: var(--white-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

@media (max-width: 1199.98px) {
  .cc-key-benefits-wrapper {
    grid-template-columns: 34% 66%;
  }

  .cc-key-benefits-heading h2 {
    font-size: 28px;
  }

  .cc-key-benefit {
    padding: 0 7px;
  }

  .cc-key-benefit-icon {
    width: 56px;
    height: 56px;
  }

  .cc-key-benefit-icon i {
    font-size: 23px;
  }

  .cc-key-benefit h3 {
    font-size: 10px;
  }
}

@media (max-width: 991.98px) {
  .cc-key-benefits {
    padding: 42px 0;
  }

  .cc-key-benefits-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .cc-key-benefits-heading {
    padding-right: 0;
    text-align: center;
  }

  .cc-key-benefits-heading h2 {
    font-size: 30px;
  }

  .cc-key-benefits-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .cc-key-benefit-divider {
    display: none;
  }

  .cc-key-benefit {
    min-height: 120px;
  }
}

@media (max-width: 767.98px) {
  .cc-key-benefits {
    padding: 38px 0;
  }

  .cc-key-benefits-wrapper {
    gap: 25px;
  }

  .cc-key-benefits-heading {
    text-align: left;
  }

  .cc-key-benefits-heading h2 {
    font-size: 27px;
  }

  .cc-key-benefits-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px 10px;
  }

  .cc-key-benefit {
    min-height: 110px;
  }

  .cc-key-benefit-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 7px;
  }

  .cc-key-benefit-icon i {
    font-size: 21px;
  }

  .cc-key-benefit h3 {
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .cc-key-benefits-heading h2 {
    font-size: 24px;
  }

  .cc-key-benefit {
    min-height: 100px;
  }

  .cc-key-benefit-icon {
    width: 48px;
    height: 48px;
  }

  .cc-key-benefit-icon i {
    font-size: 19px;
  }

  .cc-key-benefit h3 {
    font-size: 9px;
  }
}

.cc-setup-complete-section {
  position: relative;
  width: 100%;
  padding: 45px 0 60px;
  overflow: hidden;
  background: var(--white-color);
}

.cc-setup-complete-wrapper {
  display: grid;

  grid-template-columns: 57% 43%;

  align-items: center;

  gap: 35px;
}

.cc-setup-complete-visual {
  position: relative;

  width: 100%;
  height: 360px;

  overflow: hidden;

  border-radius: 10px;

  background: #172936;
}

.cc-setup-complete-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

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

  transition: transform 0.5s ease;
}

.cc-setup-complete-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(
    90deg,
    rgba(7, 22, 34, 0.95) 0%,
    rgba(7, 22, 34, 0.82) 28%,
    rgba(7, 22, 34, 0.48) 53%,
    rgba(7, 22, 34, 0.08) 100%
  );
}

.cc-setup-complete-image-content {
  position: absolute;

  left: 34px;
  bottom: 30px;

  z-index: 2;

  max-width: 450px;
}

.cc-setup-complete-image-eyebrow {
  display: block;

  margin-bottom: 12px;

  font-family: var(--paragraph-font);

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

  line-height: 1.2;

  letter-spacing: 3px;

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

.cc-setup-complete-image-content h2 {
  margin: 0 0 13px;

  font-family: var(--paragraph-font);

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

  line-height: 1.12;

  letter-spacing: -0.5px;

  color: var(--white-color);
}

.cc-setup-complete-image-content p {
  max-width: 430px;

  margin: 0;

  font-family: var(--paragraph-font);

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

  line-height: 1.5;

  color: rgba(255, 255, 255, 0.85) !important;
}

.cc-setup-complete-visual:hover .cc-setup-complete-image {
  transform: scale(1.025);
}

.cc-setup-complete-content {
  min-width: 0;

  padding-right: 5px;
}

.cc-setup-complete-eyebrow {
  display: block;

  margin-bottom: 7px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;

  color: #718096;
}

.cc-setup-complete-content > h2 {
  margin: 0 0 14px;

  font-family: var(--paragraph-font);

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

  line-height: 1.13;

  letter-spacing: -0.7px;

  color: var(--heading-color);
}

.cc-setup-complete-content > h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.cc-setup-complete-description {
  max-width: 510px;

  margin: 0 0 22px;

  font-family: var(--paragraph-font);

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

  line-height: 1.55;

  color: #7b8490;
}

.cc-setup-complete-features {
  display: grid;

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

  column-gap: 25px;
  row-gap: 20px;

  margin-bottom: 23px;
}

.cc-setup-complete-feature {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  min-width: 0;
}

.cc-setup-complete-icon {
  flex: 0 0 58px;

  width: 58px;
  height: 58px;

  display: flex;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);

  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.cc-setup-complete-icon i {
  font-size: 24px;
  line-height: 1;
}

.cc-setup-complete-feature-text {
  padding-top: 3px;
}

.cc-setup-complete-feature-text h3 {
  margin: 0 0 5px;

  font-family: var(--paragraph-font);

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

  line-height: 1.25;

  color: var(--heading-color);
}

.cc-setup-complete-feature-text p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.45;

  color: #858b94;
}

.cc-setup-complete-feature:hover .cc-setup-complete-icon {
  background: var(--primary-color);

  color: var(--white-color);

  transform: translateY(-2px);
}

.cc-setup-complete-btn {
  display: inline-flex;

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

  gap: 9px;

  min-width: 205px;
  height: 46px;

  padding: 0 22px;

  border-radius: 5px;

  background: var(--primary-color);

  color: var(--white-color);

  font-family: var(--paragraph-font);

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

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cc-setup-complete-btn i {
  font-size: 13px;
}

.cc-setup-complete-btn:hover {
  background: var(--accent-color);

  color: var(--white-color);

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(29, 53, 87, 0.15);
}

@media (max-width: 1199.98px) {
  .cc-setup-complete-wrapper {
    grid-template-columns: 55% 45%;

    gap: 28px;
  }

  .cc-setup-complete-visual {
    height: 345px;
  }

  .cc-setup-complete-image-content {
    left: 28px;
    bottom: 27px;
  }

  .cc-setup-complete-image-content h2 {
    font-size: 28px;
  }

  .cc-setup-complete-content > h2 {
    font-size: 27px;
  }

  .cc-setup-complete-features {
    column-gap: 15px;
  }

  .cc-setup-complete-icon {
    flex-basis: 52px;

    width: 52px;
    height: 52px;
  }

  .cc-setup-complete-icon i {
    font-size: 21px;
  }
}

@media (max-width: 991.98px) {
  .cc-setup-complete-section {
    padding: 45px 0 55px;
  }

  .cc-setup-complete-wrapper {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .cc-setup-complete-visual {
    height: 390px;
  }

  .cc-setup-complete-image-content {
    left: 35px;
    bottom: 32px;
  }

  .cc-setup-complete-image-content h2 {
    font-size: 32px;
  }

  .cc-setup-complete-content {
    padding-right: 0;
  }

  .cc-setup-complete-content > h2 {
    font-size: 30px;
  }
}

@media (max-width: 767.98px) {
  .cc-setup-complete-section {
    padding: 35px 0 45px;
  }

  .cc-setup-complete-wrapper {
    gap: 28px;
  }

  .cc-setup-complete-visual {
    height: 390px;

    border-radius: 8px;
  }

  .cc-setup-complete-overlay {
    background: linear-gradient(
      180deg,
      rgba(7, 22, 34, 0.05) 15%,
      rgba(7, 22, 34, 0.42) 50%,
      rgba(7, 22, 34, 0.94) 100%
    );
  }

  .cc-setup-complete-image-content {
    left: 22px;
    right: 20px;
    bottom: 25px;

    max-width: none;
  }

  .cc-setup-complete-image-eyebrow {
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .cc-setup-complete-image-content h2 {
    font-size: 26px;
  }

  .cc-setup-complete-image-content p {
    font-size: 10px;
  }

  .cc-setup-complete-content > h2 {
    font-size: 26px;
  }

  .cc-setup-complete-description {
    font-size: 11px;
  }

  .cc-setup-complete-features {
    column-gap: 12px;
    row-gap: 20px;
  }

  .cc-setup-complete-feature {
    gap: 9px;
  }

  .cc-setup-complete-icon {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;
  }

  .cc-setup-complete-icon i {
    font-size: 19px;
  }

  .cc-setup-complete-feature-text h3 {
    font-size: 10px;
  }

  .cc-setup-complete-feature-text p {
    font-size: 9px;
  }

  .cc-setup-complete-btn {
    width: 100%;
    height: 45px;
  }
}

@media (max-width: 400px) {
  .cc-setup-complete-visual {
    height: 350px;
  }

  .cc-setup-complete-image-content {
    left: 18px;
    right: 18px;
  }

  .cc-setup-complete-image-content h2 {
    font-size: 23px;
  }

  .cc-setup-complete-features {
    grid-template-columns: 1fr;
  }
}

.cc-how-work-section {
  position: relative;
  width: 100%;
  padding: 38px 0 45px;

  overflow: hidden;

  background: linear-gradient(
    110deg,
    rgba(79, 168, 197, 0.08),
    rgba(79, 168, 197, 0.035)
  );
}

.cc-how-work-header {
  margin-bottom: 12px;
}

.cc-how-work-eyebrow {
  display: block;

  margin-bottom: 5px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: #718096;
}

.cc-how-work-header h2 {
  margin: 0;

  font-family: var(--paragraph-font);

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

  line-height: 1.12;

  letter-spacing: -0.6px;

  color: var(--heading-color);
}

.cc-how-work-header h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.cc-how-work-process {
  display: grid;

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

  align-items: center;

  width: 100%;
}

.cc-how-work-step {
  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 0;

  text-align: center;
}

.cc-how-work-number {
  width: 62px;
  height: 62px;

  margin-bottom: 8px;

  display: flex;

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

  border: 1px solid rgba(79, 168, 197, 0.3);

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.08);

  font-family: var(--paragraph-font);

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

  color: var(--primary-color);

  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, 0.5);
}

.cc-how-work-step h3 {
  margin: 0 0 4px;

  font-family: var(--paragraph-font);

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

  line-height: 1.2;

  color: var(--heading-color);
}

.cc-how-work-step p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 9px;
  font-weight: 400;

  line-height: 1.4;

  color: #77818d;
}

.cc-how-work-arrow {
  position: relative;

  height: 30px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary-color);
}

.cc-how-work-arrow span {
  position: absolute;

  left: 5px;
  right: 7px;

  top: 50%;

  height: 1px;

  border-top: 1px dashed rgba(79, 168, 197, 0.55);

  transform: translateY(-50%);
}

.cc-how-work-arrow i {
  position: relative;

  z-index: 1;

  padding-left: 4px;

  background: rgba(247, 252, 254, 0.9);

  font-size: 19px;
}

.cc-how-work-step {
  transition: transform 0.25s ease;
}

.cc-how-work-step:hover {
  transform: translateY(-3px);
}

.cc-how-work-step:hover .cc-how-work-number {
  background: var(--primary-color);

  color: var(--white-color);

  border-color: var(--primary-color);

  box-shadow: 0 8px 20px rgba(79, 168, 197, 0.18);
}

@media (max-width: 1199.98px) {
  .cc-how-work-process {
    grid-template-columns:
      1fr
      60px
      1fr
      60px
      1fr
      60px
      1fr;
  }

  .cc-how-work-number {
    width: 58px;
    height: 58px;
  }

  .cc-how-work-step h3 {
    font-size: 10px;
  }

  .cc-how-work-step p {
    font-size: 8px;
  }
}

@media (max-width: 991.98px) {
  .cc-how-work-section {
    padding: 42px 0 50px;
  }

  .cc-how-work-header h2 {
    font-size: 26px;
  }

  .cc-how-work-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 35px 20px;
  }

  .cc-how-work-arrow {
    display: none;
  }

  .cc-how-work-number {
    width: 60px;
    height: 60px;
  }

  .cc-how-work-step h3 {
    font-size: 11px;
  }

  .cc-how-work-step p {
    font-size: 9px;
  }
}

@media (max-width: 767.98px) {
  .cc-how-work-section {
    padding: 35px 0 42px;
  }

  .cc-how-work-header h2 {
    font-size: 24px;
  }

  .cc-how-work-process {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .cc-how-work-step {
    position: relative;
  }

  .cc-how-work-step:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -25px;

    width: 1px;
    height: 25px;

    border-left: 1px dashed rgba(79, 168, 197, 0.5);

    transform: translateX(-50%);
  }

  .cc-how-work-number {
    width: 56px;
    height: 56px;

    font-size: 17px;
  }

  .cc-how-work-step h3 {
    font-size: 11px;
  }

  .cc-how-work-step p {
    font-size: 9px;
  }
}

@media (max-width: 400px) {
  .cc-how-work-header h2 {
    font-size: 22px;
  }

  .cc-how-work-number {
    width: 52px;
    height: 52px;
  }

  .cc-how-work-step p {
    font-size: 8px;
  }
}

.cc-technology-section {
  position: relative;

  width: 100%;

  padding: 25px 0 28px;

  overflow: hidden;

  background: linear-gradient(110deg, #071b2d 0%, #0a2137 55%, #07192b 100%);

  color: var(--white-color);
}

.cc-technology-section::before {
  content: "";

  position: absolute;

  top: -100px;
  right: -80px;

  width: 380px;
  height: 380px;

  border-radius: 50%;

  background: radial-gradient(
    circle,
    rgba(79, 168, 197, 0.14) 0%,
    rgba(79, 168, 197, 0) 70%
  );

  pointer-events: none;
}

.cc-technology-section::after {
  content: "";

  position: absolute;

  right: -20px;
  bottom: -70px;

  width: 300px;
  height: 220px;

  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 20px,
    rgba(79, 168, 197, 0.06) 21px,
    transparent 22px
  );

  opacity: 0.5;

  pointer-events: none;
}

.cc-technology-wrapper {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns: 31% 69%;

  align-items: center;

  gap: 22px;
}

.cc-technology-intro {
  padding-right: 15px;
}

.cc-technology-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;
  text-transform: uppercase;

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

.cc-technology-intro h2 {
  margin: 0 0 10px;

  font-family: var(--paragraph-font);

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

  line-height: 1.12;

  letter-spacing: -0.5px;

  color: var(--white-color);
}

.cc-technology-intro h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.cc-technology-intro p {
  max-width: 350px;

  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.5;

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

.cc-technology-grid {
  display: grid;

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

  gap: 12px;
}

.cc-technology-card {
  position: relative;

  min-height: 153px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding: 16px 12px 13px;

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

  border-radius: 9px;

  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.095),
    rgba(255, 255, 255, 0.055)
  );

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);

  text-align: center;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.cc-technology-icon {
  width: 46px;
  height: 46px;

  margin-bottom: 9px;

  display: flex;

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

  color: var(--primary-color);
}

.cc-technology-icon i {
  font-size: 27px;

  line-height: 1;
}

.cc-technology-card h3 {
  margin: 0 0 7px;

  font-family: var(--paragraph-font);

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

  line-height: 1.25;

  color: var(--white-color);
}

.cc-technology-card p {
  max-width: 155px;

  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 8px;
  font-weight: 400;

  line-height: 1.45;

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

.cc-technology-card:hover {
  transform: translateY(-4px);

  border-color: rgba(79, 168, 197, 0.3);

  background: linear-gradient(
    145deg,
    rgba(79, 168, 197, 0.16),
    rgba(255, 255, 255, 0.06)
  );
}

.cc-technology-card:hover .cc-technology-icon {
  color: var(--accent-color);
}

@media (max-width: 1199.98px) {
  .cc-technology-wrapper {
    grid-template-columns: 30% 70%;

    gap: 18px;
  }

  .cc-technology-intro h2 {
    font-size: 24px;
  }

  .cc-technology-card {
    min-height: 145px;

    padding-left: 9px;
    padding-right: 9px;
  }

  .cc-technology-icon {
    width: 42px;
    height: 42px;
  }

  .cc-technology-icon i {
    font-size: 24px;
  }
}

@media (max-width: 991.98px) {
  .cc-technology-section {
    padding: 40px 0 45px;
  }

  .cc-technology-wrapper {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .cc-technology-intro {
    padding-right: 0;

    text-align: center;
  }

  .cc-technology-intro p {
    margin-left: auto;
    margin-right: auto;
  }

  .cc-technology-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;
  }
}

@media (max-width: 767.98px) {
  .cc-technology-section {
    padding: 38px 0 42px;
  }

  .cc-technology-intro {
    text-align: left;
  }

  .cc-technology-intro h2 {
    font-size: 25px;
  }

  .cc-technology-intro p {
    font-size: 10px;
  }

  .cc-technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
  }

  .cc-technology-card {
    min-height: 145px;

    padding: 15px 10px;
  }

  .cc-technology-icon {
    width: 43px;
    height: 43px;

    margin-bottom: 7px;
  }

  .cc-technology-icon i {
    font-size: 23px;
  }

  .cc-technology-card h3 {
    font-size: 10px;
  }

  .cc-technology-card p {
    font-size: 8px;
  }
}

@media (max-width: 400px) {
  .cc-technology-intro h2 {
    font-size: 22px;
  }

  .cc-technology-grid {
    gap: 9px;
  }

  .cc-technology-card {
    min-height: 140px;
  }

  .cc-technology-card h3 {
    font-size: 9px;
  }

  .cc-technology-card p {
    font-size: 7.5px;
  }
}

.cc-use-cases-section {
  position: relative;

  width: 100%;

  padding: 28px 0 32px;

  overflow: hidden;

  background: var(--white-color);
}

.cc-use-cases-wrapper {
  display: grid;

  grid-template-columns: 31% 69%;

  align-items: center;

  gap: 25px;
}

.cc-use-cases-heading {
  padding-left: 2px;
}

.cc-use-cases-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: #718096;
}

.cc-use-cases-heading h2 {
  margin: 0;

  font-family: var(--paragraph-font);

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

  line-height: 1.12;

  letter-spacing: -0.7px;

  color: var(--heading-color);
}

.cc-use-cases-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.cc-use-cases-content {
  position: relative;

  min-width: 0;
}

.cc-use-cases-link-wrapper {
  display: flex;

  justify-content: flex-end;

  margin-bottom: 7px;
}

.cc-use-cases-link {
  display: inline-flex;

  align-items: center;

  gap: 6px;

  font-family: var(--paragraph-font);

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

  color: var(--primary-color);

  text-decoration: none;

  transition:
    color 0.25s ease,
    gap 0.25s ease;
}

.cc-use-cases-link i {
  font-size: 11px;
}

.cc-use-cases-link:hover {
  gap: 9px;

  color: var(--accent-color);
}

.cc-use-cases-grid {
  display: grid;

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

  gap: 8px;
}

.cc-use-case-card {
  min-height: 125px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  padding: 15px 10px;

  border: 1px solid rgba(79, 168, 197, 0.12);

  border-radius: 10px;

  background: linear-gradient(
    145deg,
    rgba(79, 168, 197, 0.075),
    rgba(79, 168, 197, 0.035)
  );

  text-align: center;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.cc-use-case-icon {
  width: 48px;
  height: 48px;

  margin-bottom: 11px;

  display: flex;

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

  color: var(--primary-color);
}

.cc-use-case-icon i {
  font-size: 29px;

  line-height: 1;
}

.cc-use-case-card h3 {
  margin: 0;

  font-family: var(--paragraph-font);

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

  line-height: 1.35;

  color: var(--heading-color);
}

.cc-use-case-card:hover {
  transform: translateY(-3px);

  border-color: rgba(79, 168, 197, 0.25);

  background: rgba(79, 168, 197, 0.1);

  box-shadow: 0 8px 22px rgba(79, 168, 197, 0.08);
}

.cc-use-case-card:hover .cc-use-case-icon {
  color: var(--accent-color);
}

@media (max-width: 1199.98px) {
  .cc-use-cases-wrapper {
    grid-template-columns: 30% 70%;

    gap: 20px;
  }

  .cc-use-cases-heading h2 {
    font-size: 27px;
  }

  .cc-use-case-card {
    min-height: 118px;
  }

  .cc-use-case-icon {
    width: 44px;
    height: 44px;
  }

  .cc-use-case-icon i {
    font-size: 26px;
  }
}

@media (max-width: 991.98px) {
  .cc-use-cases-section {
    padding: 42px 0;
  }

  .cc-use-cases-wrapper {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .cc-use-cases-heading {
    text-align: center;
  }

  .cc-use-cases-heading h2 {
    font-size: 29px;
  }

  .cc-use-cases-grid {
    gap: 10px;
  }
}

@media (max-width: 767.98px) {
  .cc-use-cases-section {
    padding: 35px 0 40px;
  }

  .cc-use-cases-heading {
    text-align: left;
  }

  .cc-use-cases-heading h2 {
    font-size: 26px;
  }

  .cc-use-cases-link-wrapper {
    justify-content: flex-start;

    margin-bottom: 12px;
  }

  .cc-use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;
  }

  .cc-use-case-card {
    min-height: 120px;
  }

  .cc-use-case-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 8px;
  }

  .cc-use-case-icon i {
    font-size: 24px;
  }

  .cc-use-case-card h3 {
    font-size: 9px;
  }
}

@media (max-width: 400px) {
  .cc-use-cases-heading h2 {
    font-size: 23px;
  }

  .cc-use-cases-grid {
    gap: 8px;
  }

  .cc-use-case-card {
    min-height: 110px;

    padding: 12px 7px;
  }

  .cc-use-case-icon {
    width: 38px;
    height: 38px;
  }

  .cc-use-case-icon i {
    font-size: 22px;
  }

  .cc-use-case-card h3 {
    font-size: 8.5px;
  }
}

.hero-btn-primary {
  cursor: pointer;
}

.contact-modal-open {
  overflow: hidden;
}

.contact-modal[hidden] {
  display: none;
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(6, 17, 31, 0.78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-modal.is-visible {
  opacity: 1;
}

.contact-modal-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 0.85fr) minmax(390px, 1fr);
  width: min(900px, 100%);
  max-height: min(680px, calc(100vh - 48px));
  overflow: auto;
  background: var(--white-color);
  border-radius: 20px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(24px) scale(0.975);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-modal.is-visible .contact-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.contact-modal-aside {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  padding: 44px 36px;
  background:
    radial-gradient(
      ellipse at 10% 15%,
      rgba(255, 255, 255, 0.9),
      transparent 60%
    ),
    linear-gradient(145deg, #eaf4ff 0%, #d8eafa 57%, #a9cde5 100%);
}

.contact-modal-aside::before {
  position: absolute;
  right: -15%;
  bottom: 0;
  left: -10%;
  height: 43%;
  content: "";
  background: linear-gradient(155deg, #2d6689, #102e4b 75%);
  clip-path: polygon(
    0 31%,
    20% 31%,
    20% 15%,
    61% 0,
    100% 21%,
    100% 100%,
    0 100%
  );
  opacity: 0.96;
}

.contact-modal-aside::after {
  position: absolute;
  right: -3%;
  bottom: 0;
  width: 50%;
  height: 37%;
  content: "";
  background: repeating-linear-gradient(
    90deg,
    transparent 0 29px,
    rgba(221, 241, 255, 0.55) 30px 32px
  );
  border-top: 2px solid rgba(221, 241, 255, 0.65);
  transform: skewY(-10deg);
  transform-origin: bottom right;
  opacity: 0.8;
}

.contact-modal-aside-content {
  position: relative;
  z-index: 1;
}

.contact-modal-eyebrow {
  display: block;
  margin-bottom: 14px;
  color: #49657f;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.contact-modal-aside h2 {
  margin: 0;
  color: #132d4c;
  font-family: var(--paragraph-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -1px;
}

.contact-modal-aside h2 span {
  color: #078fd0;
  font-family: inherit;
}

.contact-modal-accent {
  display: block;
  width: 34px;
  height: 2px;
  margin: 18px 0;
  background: #078fd0;
}

.contact-modal-benefits {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  color: #263e5c;
  font-size: 11px;
  font-weight: 500;
  list-style: none;
}

.contact-modal-benefits li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.contact-modal-benefits i {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: #167bb0;
  font-size: 15px;
}

.contact-modal-building {
  position: absolute;
  right: 6%;
  bottom: 0;
  z-index: 1;
  width: 43%;
  height: 35%;
  overflow: hidden;
  border: 1px solid rgba(222, 242, 255, 0.5);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 25px,
      rgba(219, 240, 255, 0.68) 26px 28px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(41, 105, 144, 0.88) 0 27px,
      rgba(204, 232, 250, 0.85) 28px 31px
    );
  box-shadow: -12px 0 25px rgba(11, 43, 67, 0.12);
  clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
  transform: skewY(-5deg);
  transform-origin: bottom right;
}

.contact-modal-building span {
  position: absolute;
  bottom: 0;
  left: 16%;
  width: 8px;
  height: 25px;
  border-radius: 100% 0;
  background: #245e43;
  transform: rotate(-24deg);
}

.contact-modal-building span:nth-child(2) {
  left: 28%;
  height: 35px;
  transform: rotate(20deg);
}

.contact-modal-building span:nth-child(3) {
  left: 7%;
  height: 18px;
  transform: rotate(35deg);
}

.contact-modal-main {
  position: relative;
  align-self: center;
  padding: 54px 50px 40px;
}

.contact-modal-main h2 {
  margin: 0 0 6px;
  color: #152b49;
  font-family: var(--paragraph-font);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.7px;
}

.contact-modal-main > p {
  max-width: 390px;
  margin: 0 0 24px;
  color: #748196;
  font-size: 12px;
  line-height: 1.6;
}

.contact-modal-close {
  position: absolute;
  top: 19px;
  right: 19px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #253853;
  cursor: pointer;
  transition:
    background-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.contact-modal-close:hover {
  transform: rotate(90deg);
  background: #edf5fb;
  color: #078fd0;
}

.contact-modal-close-mobile {
  display: none;
}

.contact-modal-form {
  display: grid;
  gap: 12px;
}

.contact-modal-field {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  border: 1px solid #e6ebf1;
  border-radius: 10px;
  background: #fff;
  color: #54769e;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.contact-modal-field:focus-within {
  border-color: #43a8d4;
  box-shadow: 0 0 0 3px rgba(67, 168, 212, 0.12);
}

.contact-modal-field > i:first-child {
  flex: 0 0 auto;
  font-size: 18px;
}

.contact-modal-field input,
.contact-modal-field select {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #263e5c;
  font-family: var(--paragraph-font);
  font-size: 12px;
}

.contact-modal-field input::placeholder,
.contact-modal-field select:invalid {
  color: #8290a4;
  opacity: 1;
}

.contact-modal-select select {
  padding-right: 20px;
  appearance: none;
  cursor: pointer;
}

.contact-modal-select-caret {
  position: absolute;
  right: 15px;
  pointer-events: none;
  font-size: 13px;
}

.contact-modal-submit {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 3px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(105deg, #08a9e6, #0876e5);
  box-shadow: 0 8px 18px rgba(7, 125, 218, 0.2);
  color: var(--white-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.contact-modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgba(7, 125, 218, 0.3);
}

.contact-modal-privacy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  color: #8692a3;
  font-size: 9px;
  text-align: center;
}

.contact-modal-privacy i {
  color: #6f8196;
}

@media (max-width: 700px) {
  .contact-modal {
    padding: 14px;
  }

  .contact-modal-panel {
    grid-template-columns: minmax(0, 1fr);
    width: min(480px, 100%);
    max-height: calc(100vh - 28px);
    border-radius: 16px;
  }

  .contact-modal-aside {
    min-height: 0;
    padding: 25px 28px 22px;
  }

  .contact-modal-aside h2 {
    font-size: 25px;
  }

  .contact-modal-eyebrow {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .contact-modal-accent {
    margin: 10px 0;
  }

  .contact-modal-benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    font-size: 9px;
  }

  .contact-modal-benefits li {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .contact-modal-benefits i {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
    font-size: 13px;
  }

  .contact-modal-building,
  .contact-modal-close-desktop {
    display: none;
  }

  .contact-modal-close-mobile {
    display: grid;
    z-index: 2;
  }

  .contact-modal-main {
    padding: 22px 28px 25px;
  }

  .contact-modal-main h2 {
    font-size: 25px;
  }

  .contact-modal-main > p {
    margin-bottom: 16px;
    font-size: 11px;
  }

  .contact-modal-field {
    min-height: 49px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-modal,
  .contact-modal-panel,
  .contact-modal-close,
  .contact-modal-submit {
    transition-duration: 0.01ms;
  }
}

/* -------------about-us--------- */
.about-hero {
  background-image: url("images/about/about-hero.png");
  background-position: center;
  min-height: 670px;
}

.about-story-section {
  position: relative;
  width: 100%;

  padding: 45px 0 30px;

  overflow: hidden;

  background: var(--white-color);
}

.about-story-wrapper {
  display: grid;

  grid-template-columns: 42% 58%;

  align-items: center;

  gap: 35px;
}

.about-story-content {
  padding-left: 5px;
  padding-right: 15px;
}

.about-story-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;
  text-transform: uppercase;

  color: #718096;
}

.about-story-content h2 {
  margin: 0 0 12px;

  font-family: var(--paragraph-font);

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

  line-height: 1.08;

  letter-spacing: -0.8px;

  color: var(--heading-color);
}

.about-story-content p {
  max-width: 410px;

  margin: 0 0 18px;

  font-family: var(--paragraph-font);

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

  line-height: 1.55;

  color: #6f7b89;
}

.about-story-btn {
  display: inline-flex;

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

  gap: 8px;

  min-width: 142px;
  height: 40px;

  padding: 0 18px;

  border-radius: 6px;

  background: var(--primary-color);

  color: var(--white-color);

  font-family: var(--paragraph-font);

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

  text-decoration: none;

  transition:
    background-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.about-story-btn i {
  font-size: 12px;
}

.about-story-btn:hover {
  background: var(--heading-color);

  color: var(--white-color);

  transform: translateY(-2px);

  box-shadow: 0 8px 18px rgba(29, 53, 87, 0.15);
}

.about-story-visual {
  position: relative;

  width: 100%;

  padding-right: 5px;
}

.about-story-image {
  width: 100%;
  height: 280px;

  display: block;

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

  border-radius: 9px;

  box-shadow: 0 12px 30px rgba(29, 53, 87, 0.08);
}

.about-story-floating-card {
  position: absolute;

  right: -3px;
  bottom: -2px;

  min-width: 225px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px 17px;

  border-radius: 9px;

  background: var(--white-color);

  box-shadow: 0 10px 28px rgba(29, 53, 87, 0.18);

  border: 1px solid rgba(79, 168, 197, 0.08);
}

.about-story-floating-icon {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

  display: flex;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);
}

.about-story-floating-icon i {
  font-size: 21px;
}

.about-story-floating-content strong {
  display: block;

  margin-bottom: 2px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  color: var(--heading-color);
}

.about-story-floating-content span {
  display: block;

  font-family: var(--paragraph-font);

  font-size: 8px;
  font-weight: 400;

  line-height: 1.3;

  color: #737e8c;
}

.about-story-stats {
  display: grid;

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

  align-items: center;

  margin-top: 28px;

  min-height: 105px;

  padding: 12px 20px;

  border-radius: 9px;

  background: linear-gradient(
    110deg,
    rgba(79, 168, 197, 0.09),
    rgba(79, 168, 197, 0.045)
  );

  border: 1px solid rgba(79, 168, 197, 0.05);
}

.about-story-stat {
  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  text-align: center;
}

.about-story-stat-icon {
  height: 28px;

  margin-bottom: 4px;

  display: flex;

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

  color: var(--primary-color);
}

.about-story-stat-icon i {
  font-size: 25px;
}

.about-story-stat strong {
  display: block;

  margin-bottom: 2px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  color: var(--primary-color);
}

.about-story-stat span {
  display: block;

  font-family: var(--paragraph-font);

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

  line-height: 1.3;

  color: var(--heading-color);
}

.about-story-stat-divider {
  width: 1px;
  height: 50px;

  background: rgba(79, 168, 197, 0.3);
}

@media (max-width: 1199.98px) {
  .about-story-wrapper {
    grid-template-columns: 41% 59%;

    gap: 28px;
  }

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

  .about-story-image {
    height: 270px;
  }
}

@media (max-width: 991.98px) {
  .about-story-section {
    padding: 45px 0 35px;
  }

  .about-story-wrapper {
    grid-template-columns: 1fr;

    gap: 30px;
  }

  .about-story-content {
    padding: 0;
  }

  .about-story-content p {
    max-width: 600px;
  }

  .about-story-visual {
    padding-right: 0;
  }

  .about-story-image {
    height: 350px;
  }

  .about-story-floating-card {
    right: 15px;
  }
}

@media (max-width: 767.98px) {
  .about-story-section {
    padding: 35px 0 30px;
  }

  .about-story-wrapper {
    gap: 25px;
  }

  .about-story-content h2 {
    font-size: 28px;

    line-height: 1.1;
  }

  .about-story-content p {
    font-size: 10px;

    line-height: 1.6;
  }

  .about-story-image {
    height: 280px;

    border-radius: 8px;
  }

  .about-story-floating-card {
    right: 10px;
    bottom: -10px;

    min-width: 190px;

    padding: 10px 12px;
  }

  .about-story-floating-icon {
    width: 38px;
    height: 38px;

    flex-basis: 38px;
  }

  .about-story-floating-icon i {
    font-size: 18px;
  }

  .about-story-floating-content strong {
    font-size: 17px;
  }

  .about-story-floating-content span {
    font-size: 7px;
  }

  .about-story-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 20px 0;

    margin-top: 28px;

    padding: 18px 10px;
  }

  .about-story-stat-divider {
    display: none;
  }

  .about-story-stat {
    min-height: 65px;
  }

  .about-story-stat-icon {
    height: 25px;
  }

  .about-story-stat-icon i {
    font-size: 21px;
  }

  .about-story-stat strong {
    font-size: 19px;
  }

  .about-story-stat span {
    font-size: 8px;
  }
}

@media (max-width: 400px) {
  .about-story-content h2 {
    font-size: 25px;
  }

  .about-story-image {
    height: 240px;
  }

  .about-story-floating-card {
    min-width: 175px;

    right: 7px;
  }

  .about-story-stats {
    gap: 15px 0;
  }

  .about-story-stat strong {
    font-size: 17px;
  }
}
/* =========================================
   ABOUT US - OUR PURPOSE
========================================= */

.about-purpose-section {
  position: relative;

  width: 100%;

  padding: 32px 0 38px;

  overflow: hidden;

  background: var(--white-color);
}

/* =========================================
   MAIN WRAPPER
========================================= */

.about-purpose-wrapper {
  display: grid;

  grid-template-columns: 39% 61%;

  align-items: center;

  gap: 35px;
}

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

.about-purpose-intro {
  padding-left: 5px;
  padding-right: 15px;
}

.about-purpose-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;

  text-transform: uppercase;

  color: #718096;
}

.about-purpose-intro h2 {
  margin: 0 0 13px;

  font-family: var(--paragraph-font);

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

  line-height: 1.08;

  letter-spacing: -0.8px;

  color: var(--heading-color);
}

.about-purpose-intro p {
  max-width: 390px;

  margin: 0;

  font-family: var(--paragraph-font);

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

  line-height: 1.55;

  color: #718096;
}

.about-purpose-content {
  min-width: 0;
}

.about-purpose-top-cards {
  display: grid;

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

  gap: 14px;

  margin-bottom: 12px;
}

.about-purpose-card {
  display: flex;

  align-items: flex-start;

  gap: 12px;

  padding: 17px 17px;

  border: 1px solid rgba(79, 168, 197, 0.12);

  border-radius: 8px;

  background: var(--white-color);

  box-shadow: 0 3px 14px rgba(29, 53, 87, 0.055);

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

.about-purpose-card:hover {
  transform: translateY(-3px);

  border-color: rgba(79, 168, 197, 0.25);

  box-shadow: 0 10px 25px rgba(29, 53, 87, 0.09);
}

.about-purpose-icon {
  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  display: flex;

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

  border-radius: 50%;

  background: rgba(79, 168, 197, 0.1);

  color: var(--primary-color);
}

.about-purpose-icon i {
  font-size: 21px;

  line-height: 1;
}

.about-purpose-card-content {
  min-width: 0;
}

.about-purpose-card-content h3 {
  margin: 1px 0 6px;

  font-family: var(--paragraph-font);

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

  line-height: 1.2;

  color: var(--heading-color);
}

.about-purpose-card-content p {
  margin: 0;

  font-family: var(--paragraph-font);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.45;

  color: #7a8592;
}

.about-purpose-values {
  min-height: 82px;

  display: flex;

  align-items: center;

  gap: 13px;

  padding: 13px 17px;

  border: 1px solid rgba(79, 168, 197, 0.12);

  border-radius: 8px;

  background: var(--white-color);

  box-shadow: 0 3px 14px rgba(29, 53, 87, 0.055);

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

.about-purpose-values:hover {
  transform: translateY(-2px);

  box-shadow: 0 8px 22px rgba(29, 53, 87, 0.08);
}

.about-purpose-values-content {
  min-width: 0;
}

.about-purpose-values-content h3 {
  margin: 0 0 5px;

  font-family: var(--paragraph-font);

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

  line-height: 1.2;

  color: var(--heading-color);
}

.about-purpose-value-list {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 7px;

  font-family: var(--paragraph-font);

  font-size: 9px;
  font-weight: 400;

  line-height: 1.4;

  color: #7a8592;
}

.about-purpose-value-list b {
  font-weight: 400;

  color: #aab4be;
}

@media (max-width: 1199.98px) {
  .about-purpose-wrapper {
    grid-template-columns: 38% 62%;

    gap: 25px;
  }

  .about-purpose-intro h2 {
    font-size: 30px;
  }

  .about-purpose-card {
    min-height: 150px;

    padding: 15px;
  }

  .about-purpose-card-content h3 {
    font-size: 14px;
  }
}

@media (max-width: 991.98px) {
  .about-purpose-section {
    padding: 42px 0;
  }

  .about-purpose-wrapper {
    grid-template-columns: 1fr;

    gap: 28px;
  }

  .about-purpose-intro {
    padding: 0;
  }

  .about-purpose-intro p {
    max-width: 600px;
  }
}

@media (max-width: 767.98px) {
  .about-purpose-section {
    padding: 35px 0 42px;
  }

  .about-purpose-wrapper {
    gap: 25px;
  }

  .about-purpose-intro h2 {
    font-size: 27px;

    line-height: 1.1;
  }

  .about-purpose-intro p {
    font-size: 10px;

    line-height: 1.6;
  }

  .about-purpose-top-cards {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-bottom: 10px;
  }

  .about-purpose-card {
    min-height: auto;

    padding: 15px;
  }

  .about-purpose-card-content h3 {
    font-size: 13px;
  }

  .about-purpose-card-content p {
    font-size: 9px;
  }

  .about-purpose-values {
    align-items: flex-start;

    padding: 14px;
  }

  .about-purpose-value-list {
    gap: 5px;

    font-size: 8px;
  }
}

@media (max-width: 400px) {
  .about-purpose-intro h2 {
    font-size: 24px;
  }

  .about-purpose-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .about-purpose-card {
    gap: 10px;
  }

  .about-purpose-icon {
    flex-basis: 42px;

    width: 42px;
    height: 42px;
  }

  .about-purpose-icon i {
    font-size: 19px;
  }

  .about-purpose-card-content h3 {
    font-size: 12px;
  }

  .about-purpose-card-content p {
    font-size: 8px;
  }
}

.about-trust-section {
  position: relative;

  width: 100%;

  min-height: 305px;

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      #071a2b 0%,
      #071a2b 28%,
      rgba(7, 26, 43, 0.92) 43%,
      rgba(7, 26, 43, 0.6) 65%,
      rgba(7, 26, 43, 0.25) 100%
    ),
    url("images/about/about-trust-bg.png");

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center right;
}

.about-trust-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background: linear-gradient(
    90deg,
    rgba(4, 18, 31, 0.95) 0%,
    rgba(4, 18, 31, 0.82) 34%,
    rgba(4, 18, 31, 0.48) 60%,
    rgba(4, 18, 31, 0.15) 100%
  );

  pointer-events: none;
}

.about-trust-wrapper {
  position: relative;

  z-index: 2;

  min-height: 305px;

  display: flex;

  align-items: center;
}

.about-trust-content {
  width: 58%;

  padding: 30px 0;
}

.about-trust-eyebrow {
  display: block;

  margin-bottom: 8px;

  font-family: var(--paragraph-font);

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

  line-height: 1;

  letter-spacing: 3px;

  text-transform: uppercase;

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

.about-trust-content h2 {
  margin: 0 0 10px;

  font-family: var(--paragraph-font);

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

  line-height: 1.12;

  letter-spacing: -0.6px;

  color: var(--white-color);
}

.about-trust-content > p {
  max-width: 470px;

  margin: 0 0 18px;

  font-family: var(--paragraph-font);

  font-size: 10px;
  font-weight: 400;

  line-height: 1.5;

  color: #fff !important;
}

.about-trust-points {
  display: grid;

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

  max-width: 620px;
}

.about-trust-point {
  min-height: 60px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-start;

  padding: 0 12px;

  border-right: 1px solid rgba(255, 255, 255, 0.16);

  text-align: center;
}

.about-trust-point:first-child {
  padding-left: 0;
}

.about-trust-point:last-child {
  border-right: 0;
}

.about-trust-icon {
  height: 31px;

  margin-bottom: 5px;

  display: flex;

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

  color: #00a8e8;
}

.about-trust-icon i {
  font-size: 27px;

  line-height: 1;
}

.about-trust-point span {
  font-family: var(--paragraph-font);

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

  line-height: 1.35;

  color: var(--white-color);
}

.about-trust-point {
  transition: transform 0.25s ease;
}

.about-trust-point:hover {
  transform: translateY(-3px);
}

.about-trust-point:hover .about-trust-icon {
  color: var(--primary-color);
}

@media (max-width: 1199.98px) {
  .about-trust-section,
  .about-trust-wrapper {
    min-height: 295px;
  }

  .about-trust-content {
    width: 62%;
  }

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

@media (max-width: 991.98px) {
  .about-trust-section {
    min-height: 400px;

    background-position: center;
  }

  .about-trust-wrapper {
    min-height: 400px;
  }

  .about-trust-content {
    width: 75%;
  }

  .about-trust-points {
    max-width: 650px;
  }
}

@media (max-width: 767.98px) {
  .about-trust-section {
    min-height: auto;

    background-position: 65% center;
  }

  .about-trust-section::before {
    background: linear-gradient(
      180deg,
      rgba(4, 18, 31, 0.72) 0%,
      rgba(4, 18, 31, 0.9) 60%,
      rgba(4, 18, 31, 0.97) 100%
    );
  }

  .about-trust-wrapper {
    min-height: auto;
  }

  .about-trust-content {
    width: 100%;

    padding: 45px 0;
  }

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

  .about-trust-content > p {
    font-size: 10px;

    max-width: 500px;

    line-height: 1.6;
  }

  .about-trust-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    max-width: none;

    row-gap: 20px;
  }

  .about-trust-point {
    min-height: 65px;

    padding: 0 10px;

    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-trust-point:nth-child(2) {
    border-right: 0;
  }

  .about-trust-point:nth-child(3) {
    border-right: 1px solid rgba(255, 255, 255, 0.15);
  }

  .about-trust-point:nth-child(3),
  .about-trust-point:nth-child(4) {
    padding-top: 3px;
  }
}

@media (max-width: 400px) {
  .about-trust-content {
    padding: 38px 0;
  }

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

  .about-trust-eyebrow {
    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .about-trust-point span {
    font-size: 7.5px;
  }

  .about-trust-icon i {
    font-size: 24px;
  }
}

.whatsapp-contact-widget {
  position: fixed;
  right: 24px;
  bottom: 130px;
  z-index: 1050;
  display: flex;
  width: 60px;
  height: 60px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  font-size: 30px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* Contact page */
.contact-experience {
  --contact-accent: #4fa8c5;
  --contact-accent-rgb: 79, 168, 197;
  --contact-accent-deep: #247e9d;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(54px, 7vw, 96px) 0;
  background:
    radial-gradient(
      circle at 12% 22%,
      rgba(var(--contact-accent-rgb), 0.16),
      transparent 33%
    ),
    radial-gradient(
      circle at 88% 76%,
      rgba(var(--contact-accent-rgb), 0.12),
      transparent 28%
    ),
    #f7fbfc;
  transition: background 0.7s ease;
}

.contact-experience[data-service="managed-office"] {
  --contact-accent: #4fa8c5;
  --contact-accent-rgb: 79, 168, 197;
  --contact-accent-deep: #247e9d;
}

.contact-experience[data-service="bulk-sms"] {
  --contact-accent: #e35a3c;
  --contact-accent-rgb: 227, 90, 60;
  --contact-accent-deep: #a93626;
}

.contact-experience[data-service="bulk-whatsapp"] {
  --contact-accent: #25b77d;
  --contact-accent-rgb: 37, 183, 125;
  --contact-accent-deep: #147852;
}

.contact-experience[data-service="rcs"] {
  --contact-accent: #5a75d2;
  --contact-accent-rgb: 90, 117, 210;
  --contact-accent-deep: #394b9c;
}

.contact-experience[data-service="ivr"] {
  --contact-accent: #d79a35;
  --contact-accent-rgb: 215, 154, 53;
  --contact-accent-deep: #98621a;
}

.contact-experience[data-service="seo"] {
  --contact-accent: #3975c6;
  --contact-accent-rgb: 57, 117, 198;
  --contact-accent-deep: #254f91;
}

.contact-experience[data-service="smo"] {
  --contact-accent: #2b9b79;
  --contact-accent-rgb: 43, 155, 121;
  --contact-accent-deep: #187252;
}

.contact-experience[data-service="influencer-marketing"] {
  --contact-accent: #c25294;
  --contact-accent-rgb: 194, 82, 148;
  --contact-accent-deep: #873667;
}

.contact-experience[data-service="tata-tele-business-products"] {
  --contact-accent: #1d598f;
  --contact-accent-rgb: 29, 89, 143;
  --contact-accent-deep: #153d64;
}

.contact-experience-glow {
  position: absolute;
  z-index: 0;
  top: 12%;
  left: 18%;
  width: min(44vw, 600px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(var(--contact-accent-rgb), 0.11);
  filter: blur(90px);
  pointer-events: none;
  transition: background 0.7s ease;
}

.contact-experience-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  gap: clamp(38px, 7vw, 104px);
  align-items: center;
}

.contact-intro {
  min-width: 0;
}

.contact-eyebrow,
.contact-form-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: var(--contact-accent-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.contact-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--contact-accent);
  box-shadow: 0 0 0 5px rgba(var(--contact-accent-rgb), 0.14);
}

.contact-intro-copy h1 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -2.8px;
  line-height: 1.04;
}

.contact-intro-copy h1 span {
  color: var(--contact-accent);
  transition: color 0.5s ease;
}

.contact-intro-description {
  max-width: 450px;
  margin: 22px 0 0;
  color: #61717c;
  font-size: 16px;
  line-height: 1.8;
}

.contact-visual {
  position: relative;
  width: min(100%, 430px);

  margin: 24px auto 14px;
}

.contact-visual-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.21);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: border-color 0.6s ease;
}

.contact-visual-orbit-one {
  width: 252px;
  height: 252px;
}

.contact-visual-orbit-two {
  width: 192px;
  height: 192px;
  border-style: dashed;
  animation: contactOrbit 26s linear infinite;
}

.contact-visual-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 28px;
  background: linear-gradient(
    145deg,
    var(--contact-accent),
    var(--contact-accent-deep)
  );
  box-shadow:
    0 18px 44px rgba(var(--contact-accent-rgb), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 34px;
  transform: translate(-50%, -50%) rotate(-8deg);
  transition:
    background 0.6s ease,
    box-shadow 0.6s ease;
}

.contact-visual-node {
  position: absolute;
  z-index: 1;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.13);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 10px 28px rgba(29, 53, 87, 0.1);
  color: var(--contact-accent-deep);
  font-size: 20px;
  transition:
    color 0.5s ease,
    transform 0.5s ease;
}

.contact-visual-node-top {
  top: 22px;
  left: calc(50% + 72px);
}

.contact-visual-node-bottom {
  bottom: 23px;
  left: calc(50% - 118px);
}

.contact-visual-spark {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--contact-accent);
  box-shadow: 0 0 0 6px rgba(var(--contact-accent-rgb), 0.12);
  transition:
    background 0.5s ease,
    box-shadow 0.5s ease;
}

.contact-visual-spark-one {
  top: 55px;
  left: calc(50% - 111px);
}

.contact-visual-spark-two {
  right: calc(50% - 130px);
  bottom: 61px;
  width: 6px;
  height: 6px;
}

.contact-quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  margin-top: 14px;
}

.contact-quick-links > a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}

.contact-quick-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--contact-accent-deep);
  transition:
    color 0.5s ease,
    border-color 0.5s ease;
}

.contact-quick-links small,
.contact-quick-links strong {
  display: block;
}

.contact-quick-links small {
  margin-bottom: 3px;
  color: #809099;
  font-size: 10px;
}

.contact-quick-links strong {
  color: #263d4c;
  font-size: 12px;
  font-weight: 600;
}

.contact-form-card {
  position: relative;
  padding: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow:
    0 28px 80px rgba(29, 53, 87, 0.1),
    0 3px 10px rgba(29, 53, 87, 0.04);
  backdrop-filter: blur(16px);
}

.contact-form-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 27px;
}

.contact-form-kicker {
  margin-bottom: 11px;
  font-size: 10px;
  letter-spacing: 1.8px;
  transition: color 0.5s ease;
}

.contact-form-heading h2 {
  margin: 0;
  color: #1d3557;
  font-family: var(--secondary-heading-font);
  font-size: clamp(25px, 3vw, 31px);
  font-weight: 700;
  letter-spacing: -0.5px;
}

.contact-form-heading > div > p:last-child {
  margin: 8px 0 0;
  color: #7b8a93;
  font-size: 13px;
}

.contact-step-badge {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 14px;
  background: rgba(var(--contact-accent-rgb), 0.1);
  color: var(--contact-accent-deep);
  font-size: 18px;
  transition:
    color 0.5s ease,
    background 0.5s ease,
    transform 0.4s ease;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.contact-field {
  position: relative;
  min-width: 0;
}

.contact-field-wide {
  grid-column: 1 / -1;
}

.contact-field label {
  display: block;
  margin-bottom: 8px;
  color: #344c5b;
  font-size: 12px;
  font-weight: 600;
}

.contact-field label span {
  color: #d95847;
}

.contact-field input,
.contact-field textarea,
.contact-field select {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #e5ebee;
  border-radius: 11px;
  outline: none;
  background: #fbfcfd;
  color: #243746;
  font: 400 13px/1.5 var(--paragraph-font);
  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    background 0.22s ease;
}

.contact-field textarea {
  min-height: 96px;
  padding-right: 75px;
  resize: vertical;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #a3afb5;
}

.contact-field input:focus,
.contact-field textarea:focus,
.contact-field select:focus {
  border-color: var(--contact-accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--contact-accent-rgb), 0.12);
}

.contact-select-wrap {
  position: relative;
}

.contact-field select {
  appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.contact-select-wrap > i {
  position: absolute;
  top: 50%;
  right: 15px;
  color: #82919a;
  font-size: 12px;
  pointer-events: none;
  transform: translateY(-50%);
}

.contact-field-hint {
  display: block;
  margin: 7px 0 0;
  color: #91a0a7;
  font-size: 10px;
}

.contact-character-count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  color: #99a5ab;
  font-size: 10px;
  pointer-events: none;
}

.contact-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 22px;
}

.contact-submit-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 0 20px;
  border: 0;
  border-radius: 11px;
  background: var(--contact-accent-deep);
  color: #fff;
  font: 600 13px/1 var(--paragraph-font);
  cursor: pointer;
  box-shadow: 0 9px 20px rgba(var(--contact-accent-rgb), 0.2);
  transition:
    background 0.5s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-submit-button:hover {
  color: #fff;
  box-shadow: 0 12px 24px rgba(var(--contact-accent-rgb), 0.3);
  transform: translateY(-2px);
}

.contact-submit-button:focus-visible {
  outline: 3px solid rgba(var(--contact-accent-rgb), 0.35);
  outline-offset: 3px;
}

.contact-submit-button i {
  font-size: 15px;
  transition: transform 0.2s ease;
}

.contact-submit-button:hover i {
  transform: translate(2px, -2px);
}

.contact-form-footer > p {
  max-width: 210px;
  margin: 0;
  color: #8b989f;
  font-size: 10px;
  line-height: 1.6;
}

.contact-form-footer > p i {
  margin-right: 4px;
  color: var(--contact-accent);
}

.contact-form-status {
  min-height: 0;
  margin: 0;
  color: var(--contact-accent-deep);
  font-size: 12px;
}

.contact-form-status:not(:empty) {
  margin-top: 14px;
}

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

@media (max-width: 991.98px) {
  .contact-experience-inner {
    grid-template-columns: minmax(0, 0.85fr) minmax(390px, 1.15fr);
    gap: 32px;
  }

  .contact-intro-copy h1 {
    font-size: clamp(45px, 6vw, 60px);
  }

  .contact-visual {
    transform: scale(0.9);
    transform-origin: left center;
    width: 110%;
    margin-top: 4px;
    margin-bottom: 0;
  }

  .contact-quick-links {
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  .contact-experience {
    padding: 48px 0 64px;
  }

  .contact-experience-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .contact-intro-copy {
    text-align: center;
  }

  .contact-eyebrow {
    justify-content: center;
  }

  .contact-intro-copy h1 {
    font-size: clamp(46px, 11vw, 64px);
  }

  .contact-intro-description {
    margin-right: auto;
    margin-left: auto;
  }

  .contact-visual {
    width: min(100%, 430px);
    margin: 16px auto 0;
    transform: none;
  }

  .contact-quick-links {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    margin-top: 5px;
  }

  .contact-form-card {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .contact-experience-inner {
    gap: 22px;
  }

  .contact-intro-copy h1 {
    font-size: 44px;
    letter-spacing: -1.8px;
  }

  .contact-intro-description {
    font-size: 14px;
  }

  .contact-visual {
    height: 240px;
  }

  .contact-visual-orbit-one {
    width: 218px;
    height: 218px;
  }

  .contact-visual-orbit-two {
    width: 166px;
    height: 166px;
  }

  .contact-visual-node-top {
    left: calc(50% + 58px);
  }

  .contact-visual-node-bottom {
    left: calc(50% - 105px);
  }

  .contact-quick-links {
    align-items: flex-start;
    flex-direction: column;
    width: max-content;
    margin-right: auto;
    margin-left: auto;
  }

  .contact-form-card {
    padding: 24px 19px;
    border-radius: 19px;
  }

  .contact-form-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 15px;
  }

  .contact-field-wide {
    grid-column: auto;
  }

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

  .contact-form-footer > p {
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-experience *,
  .contact-experience *::before,
  .contact-experience *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

.contact-office-section {
  padding: clamp(48px, 7vw, 88px) 0;
  background: #f7fbfc;
}

.contact-office-card {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  overflow: hidden;
  border: 1px solid #e5edf0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(29, 53, 87, 0.08);
}

.contact-office-details {
  align-self: center;
  padding: clamp(28px, 5vw, 56px);
}

.contact-office-kicker {
  margin: 0 0 12px;
  color: #247e9d;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.contact-office-details h2 {
  margin: 0;
  color: #1d3557;
  font-family: var(--secondary-heading-font);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.7px;
}

.contact-office-details > p:not(.contact-office-kicker) {
  margin: 16px 0 24px;
  color: #61717c;
  font-size: 15px;
  line-height: 1.8;
}

.contact-office-directions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #247e9d;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.contact-office-directions:hover {
  color: #1d3557;
}

.contact-office-map {
  min-height: 340px;
}

.contact-office-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
  border: 0;
}

@media (max-width: 767.98px) {
  .contact-office-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-office-map,
  .contact-office-map iframe {
    min-height: 300px;
  }
}

/* Contact360 brand and accessible text contrast */
:root {
  --navy-color: #0b132b;
  --nav-hover-color: #38bdf8;
  --text-color: #333333;
  --heading-color: #333333;
}

.navbar.navbar-light.bg-white {
  background-color: var(--navy-color) !important;
}

.navbar .navbar-nav .nav-link {
  color: #ffffff;
}

.navbar .navbar-nav .nav-link::after {
  background: var(--nav-hover-color);
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link.active {
  color: var(--nav-hover-color);
}

.navbar .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.55);
}

.navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(1) brightness(2);
}

@media (max-width: 767.98px) {
  .navbar .navbar-collapse {
    background-color: var(--navy-color);
  }

  .navbar .navbar-nav .nav-link {
    padding: 0.65rem 0;
  }
}

body
  p:not(.business-hero.home-hero p):not(.connect-cta-section p):not(
    .site-footer p
  ) {
  color: #4a5568;
}

body h2,
body h3,
body h4,
body h5,
body h6 {
  color: #333333;
}

label,
.form-label {
  color: #333333;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #4a5568;
  opacity: 1;
}

.solution-card-body {
  min-height: 190px;
}

.solution-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 12px;
}

.about-story-stat span {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.35;
  color: #4a5568;
}

@media (max-width: 1199.98px) {
  .solution-card-body {
    min-height: 205px;
  }
}

@media (max-width: 575.98px) {
  .solution-card-body {
    min-height: 0;
  }
}

/* Keep all form prompts readable, including component-specific overrides. */
.hero-lead-field input::placeholder,
.contact-modal-field input::placeholder,
.contact-modal-field textarea::placeholder,
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: #4a5568;
  opacity: 1;
}

.industriesSwiper .industry-card span,
.presence-location-text span,
.contact-field-hint,
.contact-modal-field select:invalid {
  color: #4a5568;
}

.voice-sms-page .hero-demo-stack {
  right: 22px;
  bottom: 22px;
  top: auto;
  z-index: 10;
  transform: none;
}

.voice-sms-page .hero-demo-btn {
  width: 164px;
  min-height: 46px;
  padding: 8px 14px;
  gap: 12px;
}

.voice-sms-capabilities {
  padding: 48px 0 54px;
  background: #f5f9fb;
}

.voice-sms-capabilities-heading,
.voice-sms-faq-heading {
  margin: 0 auto 26px;
  text-align: center;
}

.voice-sms-capabilities-eyebrow,
.voice-sms-faq-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #247e9d;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.voice-sms-capabilities-heading h2,
.voice-sms-faq-heading h2 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
}

.voice-sms-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.voice-sms-capability-card {
  min-height: 210px;
  padding: 24px 20px;
  border: 1px solid #e3ebef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(29, 53, 87, 0.04);
}

.voice-sms-capability-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 13px;
  background: #eaf6fa;
  color: #247e9d;
  font-size: 21px;
}

.voice-sms-capability-card h3 {
  margin: 0 0 8px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
}

.voice-sms-capability-card p {
  margin: 0;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.voice-sms-use-case-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.voice-sms-use-case-enquiry:hover {
  gap: 8px;
  color: var(--accent-color);
}

.voice-sms-use-case-enquiry:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.voice-sms-faq-section {
  padding: 48px 0 54px;
  background: #fff;
}

.voice-sms-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 10px;
  margin: 0 auto;
}

.voice-sms-faq-item {
  overflow: hidden;
  border: 1px solid #e1e8ed !important;
  border-radius: 9px !important;
  background: #fff;
}

.voice-sms-faq-item .accordion-button {
  padding: 17px 20px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 650;
  box-shadow: none;
}

.voice-sms-faq-item .accordion-button:not(.collapsed) {
  color: #247e9d;
  background: #f7fbfc;
}

.voice-sms-faq-item .accordion-button:focus {
  border-color: #247e9d;
  box-shadow: 0 0 0 3px rgba(36, 126, 157, 0.15);
}

.voice-sms-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .voice-sms-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .voice-sms-page .hero-demo-stack {
    right: 12px;
    bottom: 12px;
    top: auto;
    width: auto;
    flex-direction: column;
    gap: 8px;
    transform: none;
  }

  .voice-sms-page .hero-demo-btn {
    width: 164px;
    min-height: 46px;
    justify-content: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
  }
}

@media (max-width: 575.98px) {
  .voice-sms-capabilities,
  .voice-sms-faq-section {
    padding: 38px 0 42px;
  }

  .voice-sms-capabilities-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .voice-sms-capability-card {
    min-height: 0;
  }

  .voice-sms-faq-item .accordion-button {
    padding: 15px 16px;
    font-size: 14px;
  }

  .voice-sms-faq-item .accordion-body {
    padding: 0 16px 16px;
    font-size: 13px;
  }
}

.business-hero.home-hero .business-hero-stats {
  margin-top: 42px;
  margin-bottom: 22px;
  padding-block: 16px;
}

.email-marketing-page .hero-demo-stack {
  top: auto;
  right: 22px;
  bottom: 22px;
  z-index: 10;
  transform: none;
}

.email-marketing-page .hero-demo-btn {
  width: 164px;
  min-height: 46px;
  padding: 8px 14px;
  gap: 12px;
}

.solution-card-action {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  margin-bottom: 9px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #0b132b;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  line-height: 1;
}

.solution-card-title {
  min-height: 0;
  margin-bottom: 10px;
  font-size: 21px;
  font-weight: 700;
}

.solution-card-tags a {
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f1f5f9;
  color: #333333;
  font-size: 10px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.solution-card-tags a:hover {
  transform: translateY(-1px);
  border-color: #cbd5e1;
  background: #e2e8f0;
  color: #0b132b;
}

.solution-card-tags a:focus-visible {
  outline: 2px solid #247e9d;
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .business-hero.home-hero .business-hero-stats {
    margin-top: 30px;
    margin-bottom: 0;
    padding-block: 10px;
  }
}

.wa-business-cards .wa-business-list li {
  color: #475569;
}

.use-case-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.use-case-enquiry:hover {
  gap: 8px;
  color: var(--accent-color);
}

.use-case-enquiry:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.integrations-list .integration-item {
  box-sizing: border-box;
  height: 78px;
  min-height: 78px;
  padding: 10px 14px;
}

.integrations-list .integration-item img {
  width: 100%;
  max-width: 120px;
  max-height: 42px;
  object-fit: contain;
}

.wa-business-faq-button::after,
.wa-business-faq-button:not(.collapsed)::after {
  opacity: 1;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F172A'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

.wa-business-faq-button:not(.collapsed)::after {
  transform: rotate(-180deg);
}

@media (max-width: 767.98px) {
  .email-marketing-page .hero-demo-stack {
    top: auto;
    right: 12px;
    bottom: 12px;
    width: auto;
    flex-direction: column;
    gap: 8px;
    transform: none;
  }

  .email-marketing-page .hero-demo-btn {
    width: 164px;
    min-height: 46px;
    justify-content: flex-start;
    padding: 8px 12px;
    border-radius: 999px;
  }
}

@media (max-width: 767.98px) {
  .email-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991.98px) {
  .integrations-list .integration-item {
    height: 78px;
  }
}

.email-capabilities-section,
.email-faq-section {
  padding: 48px 0 54px;
}

.email-capabilities-section {
  background: #f5f9fb;
}

.email-capabilities-heading,
.email-faq-heading {
  margin: 0 auto 26px;
  text-align: center;
}

.email-capabilities-eyebrow,
.email-faq-eyebrow {
  margin-bottom: 9px;
  color: #247e9d;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.email-capabilities-heading h2,
.email-faq-heading h2 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
}

.email-capabilities-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.email-capability-card {
  min-height: 220px;
  padding: 24px 20px;
  border: 1px solid #e3ebef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(29, 53, 87, 0.04);
}

.email-capability-icon {
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 17px;
  place-items: center;
  border-radius: 13px;
  background: #eaf6fa;
  color: #247e9d;
  font-size: 21px;
}

.email-capability-card h3 {
  margin: 0 0 8px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
}

.email-capability-card p {
  margin: 0;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.email-use-case-card {
  position: relative;
  align-items: flex-start;
}

.email-use-case-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.email-use-case-enquiry:hover {
  gap: 8px;
  color: var(--accent-color);
}

.email-use-case-enquiry:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.email-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 10px;
  margin: 0 auto;
}

.email-faq-item {
  overflow: hidden;
  border: 1px solid #e1e8ed !important;
  border-radius: 9px !important;
  background: #fff;
}

.email-faq-item .accordion-button {
  padding: 17px 20px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 650;
  box-shadow: none;
}

.email-faq-item .accordion-button:not(.collapsed) {
  color: #247e9d;
  background: #f7fbfc;
}

.email-faq-item .accordion-button:focus {
  border-color: #247e9d;
  box-shadow: 0 0 0 3px rgba(36, 126, 157, 0.15);
}

.email-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .email-capabilities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .email-capabilities-section,
  .email-faq-section {
    padding: 38px 0 42px;
  }

  .email-capabilities-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .email-capability-card {
    min-height: 0;
  }

  .email-faq-item .accordion-button {
    padding: 15px 16px;
    font-size: 14px;
  }

  .email-faq-item .accordion-body {
    padding: 0 16px 16px;
    font-size: 13px;
  }
}

.call-center-page .whatsapp-contact-widget {
  right: 22px;
  bottom: 22px;
}

.call-center-page .cc-technology-wrapper {
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
}

.call-center-page .cc-technology-intro {
  /* max-width: 680px; */
  padding-right: 0;
  text-align: center;
}

.call-center-page .cc-technology-intro p {
  max-width: 600px;
  margin-right: auto;
  margin-left: auto;
  color: #fff !important;
}

.call-center-page .cc-technology-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.call-center-page .cc-technology-card {
  min-height: 220px;
  align-items: flex-start;
  padding: 22px 20px;
  text-align: left;
}

.call-center-page .cc-technology-card h3 {
  font-size: 15px;
}

.call-center-page .cc-technology-card p {
  max-width: none;
  font-size: 13px;
  line-height: 1.6;
  color: #fff !important;
}

.call-center-page .cc-use-case-card {
  justify-content: flex-start;
}

.cc-use-case-enquiry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.2s ease;
}

.cc-use-case-enquiry:hover {
  gap: 8px;
  color: var(--accent-color);
}

.cc-use-case-enquiry:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--primary-color);
  outline-offset: 3px;
}

.cc-faq-section {
  padding: 48px 0 54px;
  background: #f5f9fb;
}

.cc-faq-heading {
  margin: 0 auto 26px;
  text-align: center;
}

.cc-faq-eyebrow {
  display: block;
  margin-bottom: 9px;
  color: #247e9d;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.cc-faq-heading h2 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.6px;
}

.cc-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 10px;
  margin: 0 auto;
}

.cc-faq-item {
  overflow: hidden;
  border: 1px solid #e1e8ed !important;
  border-radius: 9px !important;
  background: #fff;
}

.cc-faq-item .accordion-button {
  padding: 17px 20px;
  color: #1d3557;
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 650;
  box-shadow: none;
}

.cc-faq-item .accordion-button:not(.collapsed) {
  color: #247e9d;
  background: #fff;
}

.cc-faq-item .accordion-button:focus {
  border-color: #247e9d;
  box-shadow: 0 0 0 3px rgba(36, 126, 157, 0.15);
}

.cc-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: #526371;
  font-family: var(--paragraph-font);
  font-size: 14px;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .call-center-page .cc-technology-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .call-center-page .whatsapp-contact-widget {
    right: 14px;
    bottom: 14px;
  }

  .call-center-page .cc-technology-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .call-center-page .cc-technology-card {
    min-height: 0;
  }

  .cc-faq-section {
    padding: 38px 0 42px;
  }

  .cc-faq-item .accordion-button {
    padding: 15px 16px;
    font-size: 14px;
  }

  .cc-faq-item .accordion-body {
    padding: 0 16px 16px;
    font-size: 13px;
  }
}

.communication-hub {
  color: #182b3a;
  font-family: var(--paragraph-font);
}

.communication-hero {
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 600px;
  padding: 0;
  background-color: #f8f9fa;
  background-image: url("images/hero-bg.png");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
}

.communication-hero-row {
  min-height: 600px;
}

.communication-eyebrow {
  margin: 0 0 12px;
  color: #247e9d !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.communication-hero-description {
  max-width: 610px;
  margin: 22px 0 26px;
  line-height: 1.75;
}

.communication-primary-link,
.communication-consultation-primary,
.communication-consultation-secondary {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.communication-hero .communication-primary-link {
  width: auto;
  min-width: 250px;
}

.communication-primary-link,
.communication-consultation-primary {
  background: #0c789b;
  color: #fff;
}

.communication-primary-link:hover,
.communication-consultation-primary:hover {
  transform: translateY(-2px);
  background: #095d79;
  color: #fff;
}

.communication-hero-visual {
  position: relative;
  width: min(100%, 430px);
  aspect-ratio: 1;
  justify-self: center;
}

.communication-hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(36, 126, 157, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.communication-hero-orbit-one {
  width: 82%;
  height: 82%;
}

.communication-hero-orbit-two {
  width: 58%;
  height: 58%;
  border-style: dashed;
}

.communication-hero-core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border: 8px solid rgba(255, 255, 255, 0.8);
  border-radius: 32px;
  background: linear-gradient(145deg, #2ba4c3, #145d7a);
  box-shadow: 0 20px 48px rgba(20, 93, 122, 0.24);
  color: #fff;
  font-size: 38px;
  transform: translate(-50%, -50%) rotate(-6deg);
}

.communication-hero-node {
  position: absolute;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid #e1edf1;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(29, 53, 87, 0.1);
  color: #247e9d;
  font-size: 23px;
}

.communication-node-sms {
  top: 12%;
  left: 48%;
}

.communication-node-whatsapp {
  top: 40%;
  right: 3%;
  color: #20a965;
}

.communication-node-voice {
  right: 22%;
  bottom: 8%;
}

.communication-node-email {
  bottom: 20%;
  left: 4%;
}

.communication-metrics {
  position: relative;
  z-index: 1;
  margin-top: -22px;
}

.communication-metrics-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid #e5edf0;
  border-radius: 15px;
  background: #e5edf0;
  box-shadow: 0 16px 36px rgba(29, 53, 87, 0.08);
}

.communication-metric {
  display: flex;
  min-height: 108px;
  flex-direction: column;
  justify-content: center;
  padding: 18px;
  background: #fff;
  text-align: center;
}

.communication-metric strong {
  color: #1d5e78;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.2;
}

.communication-metric span {
  margin-top: 5px;
  color: #5e707c;
  font-size: 12px;
  line-height: 1.35;
}

.communication-channels,
.communication-routing {
  padding: 78px 0;
}

.communication-section-heading {
  max-width: 730px;
  margin: 0 auto 38px;
  text-align: center;
}

.communication-section-heading h2 {
  margin: 0;
  color: #172c3c;
  font-family: var(--secondary-heading-font);
  font-size: clamp(29px, 4vw, 42px);
  font-weight: 700;
  letter-spacing: -1px;
}

.communication-section-heading > p:last-child {
  max-width: 650px;
  margin: 14px auto 0;
  color: #61717c;
  font-size: 15px;
  line-height: 1.7;
}

.communication-channel-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}

.communication-channel-card {
  display: flex;
  width: 350px;
  grid-column: span 2;
  min-height: 350px;
  flex-direction: column;
  padding: 26px 24px;
  border: 1px solid #e4edf0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(29, 53, 87, 0.045);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.communication-channel-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.communication-channel-card:hover {
  transform: translateY(-4px);
  border-color: rgba(36, 126, 157, 0.35);
  box-shadow: 0 16px 36px rgba(29, 53, 87, 0.1);
}

.communication-channel-art {
  position: relative;
  display: grid;
  height: 275px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.1);
  border-radius: 12px;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(var(--contact-accent-rgb), 0.15),
      transparent 58%
    ),
    linear-gradient(145deg, #fff, #f5f9fa 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.communication-channel-art::before,
.communication-channel-art::after {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.communication-channel-art::before {
  width: 70%;
  border: 1px dashed rgba(var(--contact-accent-rgb), 0.2);
  animation: communicationArtOrbit 28s linear infinite;
}

.communication-channel-art::after {
  width: 48%;
  border: 1px solid rgba(var(--contact-accent-rgb), 0.1);
  box-shadow:
    0 0 0 18px rgba(var(--contact-accent-rgb), 0.035),
    0 0 0 38px rgba(var(--contact-accent-rgb), 0.025);
  animation: communicationArtPulse 4s ease-in-out infinite;
}

.communication-art-sms {
  --contact-accent: #e35a3c;
  --contact-accent-rgb: 227, 90, 60;
  --contact-accent-deep: #a93626;
}

.communication-art-whatsapp {
  --contact-accent: #25a568;
  --contact-accent-rgb: 37, 165, 104;
  --contact-accent-deep: #187348;
}

.communication-art-missed {
  --contact-accent: #7d65d5;
  --contact-accent-rgb: 125, 101, 213;
  --contact-accent-deep: #5540a6;
}

.communication-art-voice {
  --contact-accent: #d79a35;
  --contact-accent-rgb: 215, 154, 53;
  --contact-accent-deep: #98621a;
}

.communication-art-email {
  --contact-accent: #2b9b79;
  --contact-accent-rgb: 43, 155, 121;
  --contact-accent-deep: #187252;
}

.communication-channel-art .contact-scene {
  z-index: 1;
  animation: communicationSceneReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.communication-channel-art .contact-scene {
  top: 50%;
  width: 210px;
  height: 200px;
  transform: translate(-50%, -50%) scale(0.72);
}

.communication-channel-art .contact-scene.is-active {
  transform: translate(-50%, -50%) scale(0.78);
}

.communication-channel-card:nth-child(1)
  .communication-channel-art
  .contact-scene {
  animation-delay: 0.05s;
}

.communication-channel-card:nth-child(2)
  .communication-channel-art
  .contact-scene {
  animation-delay: 0.15s;
}

.communication-channel-card:nth-child(3)
  .communication-channel-art
  .contact-scene {
  animation-delay: 0.25s;
}

.communication-channel-card:nth-child(4)
  .communication-channel-art
  .contact-scene {
  animation-delay: 0.35s;
}

.communication-channel-card:nth-child(5)
  .communication-channel-art
  .contact-scene {
  animation-delay: 0.45s;
}

.communication-channel-card:hover .communication-channel-art {
  transform: translateY(-3px);
  border-color: rgba(var(--contact-accent-rgb), 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 12px 24px rgba(var(--contact-accent-rgb), 0.08);
}

.communication-channel-card:hover .communication-channel-art::before {
  animation-duration: 14s;
}

.communication-channel-card:hover .communication-channel-art::after {
  animation-duration: 2.6s;
}

.communication-channel-card:hover
  .communication-channel-art
  .contact-scene.is-active {
  transform: translate(-50%, -50%) scale(0.84);
}

.communication-whatsapp-mark {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 50%;
  background: #25a568;
  color: #fff !important;
  font-size: 17px !important;
}

.communication-channel-card h3 {
  margin: 0 0 8px;
  color: #1d3557;
  font-size: 18px;
  font-weight: 700;
}

.communication-channel-card p {
  min-height: 0;
  margin: 0 0 20px;
  color: #61717c;
  font-size: 13px;
  line-height: 1.6;
}

.communication-channel-card > a {
  display: inline-flex;
  width: fit-content;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding: 0 15px;
  border: 1px solid rgba(24, 122, 154, 0.22);
  border-radius: 8px;
  background: #f3fafc;
  color: #187a9a;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition:
    gap 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    background-color 0.2s ease,
    transform 0.2s ease;
}

.communication-channel-card > a:hover {
  gap: 11px;
  transform: translateY(-1px);
  border-color: #187a9a;
  background: #187a9a;
  color: #fff;
}

@keyframes communicationArtOrbit {
  to {
    rotate: 360deg;
  }
}

@keyframes communicationArtPulse {
  0%,
  100% {
    opacity: 0.55;
    scale: 0.92;
  }
  50% {
    opacity: 1;
    scale: 1.08;
  }
}

@keyframes communicationSceneReveal {
  from {
    opacity: 0;
    translate: 0 12px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

.communication-routing {
  background: #f5f9fb;
}

.communication-routing-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) 110px minmax(
      0,
      1fr
    );
  align-items: center;
}

.communication-route-step {
  position: relative;
  min-height: 240px;
  padding: 27px 24px 24px;
  border: 1px solid #e1ebef;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 9px 26px rgba(29, 53, 87, 0.05);
  text-align: center;
}

.communication-route-number {
  position: absolute;
  top: 15px;
  right: 17px;
  color: #a2b6c0;
  font-size: 11px;
  font-weight: 800;
}

.communication-route-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 15px;
  place-items: center;
  border-radius: 18px;
  background: #eaf6fa;
  color: #247e9d;
  font-size: 25px;
}

.communication-route-step h3 {
  margin: 0 0 9px;
  color: #1d3557;
  font-size: 17px;
  font-weight: 700;
}

.communication-route-step p {
  margin: 0 auto 14px;
  color: #61717c;
  font-size: 12px;
  line-height: 1.55;
}

.communication-route-tag {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  background: #f0f6f8;
  color: #476473;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.communication-route-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #3989a2;
}

.communication-route-connector span {
  color: #61717c;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.communication-route-connector i {
  font-size: 25px;
}

.communication-consultation {
  padding: 0 0 78px;
  background: #f5f9fb;
}

.communication-consultation-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  padding: clamp(30px, 5vw, 52px);
  border-radius: 20px;
  background:
    radial-gradient(
      circle at 95% 0%,
      rgba(255, 255, 255, 0.16),
      transparent 31%
    ),
    linear-gradient(115deg, #0b2437, #125875);
  box-shadow: 0 20px 48px rgba(11, 36, 55, 0.16);
}

.communication-consultation-banner .communication-eyebrow {
  color: #9bdeef;
}

.communication-consultation-banner h2 {
  max-width: 660px;
  margin: 0;
  color: #fff;
  font-family: var(--secondary-heading-font);
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 700;
  letter-spacing: -0.7px;
  line-height: 1.15;
}

.communication-consultation-banner > div:first-child > p:last-child {
  max-width: 650px;
  margin: 13px 0 0;
  color: #fff !important;
  font-size: 14px;
  line-height: 1.65;
}

.communication-consultation-actions {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
}

.communication-consultation-primary {
  background: #fff;
  color: #124f67;
}

.communication-consultation-primary:hover {
  background: #eaf6fa;
  color: #0b3f54;
}

.communication-consultation-secondary {
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: transparent;
  color: #fff;
}

.communication-consultation-secondary:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.communication-primary-link:focus-visible,
.communication-channel-card > a:focus-visible,
.communication-consultation-actions a:focus-visible {
  outline: 3px solid #55bfd8;
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .communication-hero-row {
    min-height: 500px;
  }

  .communication-hero-visual {
    width: min(100%, 350px);
  }

  .communication-metric {
    min-height: 100px;
    padding: 14px 10px;
  }

  .communication-metric strong {
    font-size: 22px;
  }

  .communication-channel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .communication-channel-card,
  .communication-channel-card:nth-child(4) {
    grid-column: auto;
  }

  .communication-channel-card:last-child {
    grid-column: 1 / -1;
  }

  .communication-routing-flow {
    grid-template-columns: minmax(0, 1fr) 70px minmax(0, 1fr) 70px minmax(
        0,
        1fr
      );
  }

  .communication-consultation-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .communication-consultation-actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 767.98px) {
  .communication-hero {
    min-height: 0;
  }

  .communication-hero-row {
    min-height: 0;
  }

  .communication-hero-description {
    margin-right: auto;
    margin-left: auto;
    font-size: 14px;
  }

  .communication-hero .communication-primary-link {
    width: 100%;
  }

  .communication-hero-visual {
    width: min(78vw, 320px);
    margin: 0 auto 36px;
  }

  .communication-metrics {
    margin-top: -26px;
  }

  .communication-metrics-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .communication-metric {
    min-height: 88px;
  }

  .communication-channels,
  .communication-routing {
    padding: 56px 0;
  }

  .communication-section-heading {
    margin-bottom: 28px;
  }

  .communication-section-heading > p:last-child {
    font-size: 14px;
  }

  .communication-routing-flow {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .communication-route-step {
    min-height: 0;
  }

  .communication-route-connector {
    min-height: 44px;
    flex-direction: row;
    justify-content: center;
  }

  .communication-route-connector i {
    transform: rotate(90deg);
  }

  .communication-consultation {
    padding-bottom: 56px;
  }
}

@media (max-width: 575.98px) {
  .communication-channel-grid {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .communication-channel-card,
  .communication-channel-card:last-child {
    grid-column: auto;
    min-height: 0;
  }

  .communication-channel-card p {
    min-height: 0;
  }

  .communication-consultation-actions {
    width: 100%;
    flex-direction: column;
  }

  .communication-consultation-actions a {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .communication-channel-art,
  .communication-channel-art::before,
  .communication-channel-art::after,
  .communication-channel-art .contact-scene,
  .communication-channel-card > a {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.navbar.navbar-light.bg-white,
.navbar {
  background-color: #ffffff !important;
}

.navbar .navbar-nav .nav-link {
  color: #0f172a;
}

.navbar .navbar-nav .nav-link::after {
  background: #0284c7;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus-visible,
.navbar .navbar-nav .nav-link.active {
  color: #0284c7;
}

.navbar .navbar-toggler {
  border-color: rgba(15, 23, 42, 0.22);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(2, 132, 199, 0.2);
}

.navbar .navbar-toggler-icon {
  filter: none;
}

.site-footer {
  margin-top: 160px;
  overflow: visible;
  padding: 0;
  background: rgb(3, 30, 66);
  color: #fff;
}

.footer-cta-wrap {
  position: relative;
  z-index: 2;
  margin-bottom: -34px;
  transform: translateY(-50%);
}

.footer-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 26px 32px;
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.19);
}

.footer-cta-copy h2 {
  margin: 0;
  color: #0f172a;
  font-family: var(--secondary-heading-font);
  font-size: clamp(21px, 2.8vw, 29px);
  font-weight: 700;
  line-height: 1.2;
}

.footer-cta-copy p {
  margin: 7px 0 0;
  color: #475569;
  font-size: 13px;
}

.footer-cta-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.footer-cta-actions a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #dbe3ed;
  border-radius: 8px;
  background: #fff;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.footer-cta-actions a:hover {
  transform: translateY(-2px);
}

.footer-cta-actions .footer-cta-send {
  border-color: #e35a3c;
  background: #e35a3c;
  color: #fff;
}

.footer-cta-actions .footer-cta-send:hover {
  border-color: #c9472e;
  background: #c9472e;
  color: #fff;
}

.footer-cta-actions .footer-cta-call:hover,
.footer-cta-actions .footer-cta-whatsapp:hover {
  border-color: #b8c9e5;
  background: #f4f7fc;
  color: #1e3a8a;
}

.site-footer > .container {
  padding-top: 8px;
}

.footer-main-row {
  row-gap: 32px;
  padding-top: 0;
  padding-bottom: 46px;
}

.footer-about {
  max-width: 340px;
  margin-top: 0;
}

.footer-logo {
  width: 132px;
  margin-bottom: 14px;
}

.footer-about p {
  color: #e0e7ff;
  font-size: 12px;
  line-height: 1.65;
}

.footer-about strong {
  color: #fff;
}

.footer-trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 15px;
}

.footer-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid rgba(224, 231, 255, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 9px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.footer-trust-badge i {
  color: #a5f3fc;
  font-size: 11px;
}

.footer-socials {
  gap: 11px;
  margin-top: 20px;
  padding-left: 0;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(224, 231, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  color: #e0e7ff;
  font-size: 15px;
}

.footer-socials a:hover {
  border-color: #fff;
  background: #fff;
  color: #1e3a8a;
}

.footer-column {
  padding-left: 0;
}

.footer-column h3 {
  margin-bottom: 17px;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.footer-column ul li {
  margin-bottom: 11px;
}

.footer-column ul li a {
  color: #e0e7ff;
  font-size: 12px;
  line-height: 1.5;
}

.footer-column ul li a:hover,
.footer-contact-item a:hover {
  color: #bae6fd;
}

.footer-contact {
  padding-left: 0;
}

.footer-contact-item {
  gap: 9px;
  margin-bottom: 12px;
}

.footer-contact-item i {
  flex-basis: 16px;
  color: #bfdbfe;
}

.footer-contact-item a {
  color: #e0e7ff;
  font-size: 11px;
  line-height: 1.5;
}

.footer-branches {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
}

.footer-branches a {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(224, 231, 255, 0.28);
  border-radius: 999px;
  color: #f8fafc;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}

.footer-branches a:hover {
  border-color: #fff;
  background: #fff;
  color: #1e3a8a;
}

.footer-bottom {
  border-top: 1px solid rgba(224, 231, 255, 0.25);
  background: rgba(10, 28, 79, 0.23);
}

.footer-bottom-inner {
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.footer-copyright {
  margin: 0;
  color: #e0e7ff !important;
  font-size: 11px;
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal-links a {
  color: #e0e7ff;
  font-size: 11px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-legal-links a:hover {
  color: #bae6fd;
}

.footer-cta-actions a:focus-visible,
.footer-branches a:focus-visible,
.footer-legal-links a:focus-visible {
  outline: 3px solid #7dd3fc;
  outline-offset: 3px;
}

@media (max-width: 991.98px) {
  .footer-cta-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
    padding: 24px;
  }

  .footer-cta-actions {
    flex-wrap: wrap;
  }

  .footer-main-row {
    padding-bottom: 38px;
  }
}

@media (max-width: 575.98px) {
  .site-footer {
    margin-top: 180px;
  }

  .footer-cta-wrap {
    margin-bottom: -24px;
  }

  .footer-cta-card {
    padding: 21px 18px;
    border-radius: 14px;
  }

  .footer-cta-copy h2 {
    font-size: 22px;
  }

  .footer-cta-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .footer-cta-actions a {
    width: 100%;
  }

  .footer-main-row {
    row-gap: 29px;
    padding-bottom: 30px;
  }

  .footer-about {
    max-width: none;
    margin-bottom: 0;
  }

  .footer-column,
  .footer-contact {
    margin-top: 0;
  }

  .footer-bottom-inner {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .footer-legal-links {
    gap: 14px;
  }
}

/* Site-wide paragraph and primary navigation refinements. */
p {
  color: #000 !important;
  font-size: 15px !important;
}

.navbar-nav .nav-link {
  font-size: 17px;
}

.navbar .dropdown-menu {
  min-width: 14rem;
  max-height: min(70vh, 28rem);
  overflow-y: auto;
  padding: 0.5rem;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(29, 53, 87, 0.16);
}

.navbar .dropdown-item {
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  color: #182875;
  background-color: #f1f6fa;
}

.communication-nav-controls {
  display: flex;
  align-items: center;
}

.digital-marketing-nav-controls {
  display: flex;
  align-items: center;
}

.communication-nav-link {
  padding-right: 0.2rem !important;
}

.digital-marketing-nav-link {
  padding-right: 0.2rem !important;
}

.communication-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.digital-marketing-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.35rem;
  border: 0;
  background: transparent;
  color: inherit;
}

.communication-dropdown-toggle::after {
  display: none;
}

.digital-marketing-dropdown-toggle::after {
  display: none;
}

.communication-dropdown-toggle .nav-dropdown-arrow {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.digital-marketing-dropdown-toggle .nav-dropdown-arrow {
  display: inline-block;
  font-size: 0.8rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.communication-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
  transform: rotate(180deg);
}

.digital-marketing-dropdown-toggle[aria-expanded="true"] .nav-dropdown-arrow {
  transform: rotate(180deg);
}

@media (min-width: 768px) and (hover: hover) {
  .navbar .communication-nav-item:hover .dropdown-menu,
  .navbar .communication-nav-item:focus-within .dropdown-menu,
  .navbar .digital-marketing-nav-item:hover .dropdown-menu,
  .navbar .digital-marketing-nav-item:focus-within .dropdown-menu {
    display: block;
  }

  .navbar .communication-nav-item:hover .communication-dropdown-toggle,
  .navbar .communication-nav-item:focus-within .communication-dropdown-toggle,
  .navbar .digital-marketing-nav-item:hover .digital-marketing-dropdown-toggle,
  .navbar
    .digital-marketing-nav-item:focus-within
    .digital-marketing-dropdown-toggle {
    color: #182875;
  }

  .navbar
    .communication-nav-item:hover
    .communication-dropdown-toggle
    .nav-dropdown-arrow,
  .navbar
    .communication-nav-item:focus-within
    .communication-dropdown-toggle
    .nav-dropdown-arrow,
  .navbar
    .digital-marketing-nav-item:hover
    .digital-marketing-dropdown-toggle
    .nav-dropdown-arrow,
  .navbar
    .digital-marketing-nav-item:focus-within
    .digital-marketing-dropdown-toggle
    .nav-dropdown-arrow {
    transform: rotate(180deg);
  }
}

.communication-dropdown-toggle:hover,
.communication-dropdown-toggle:focus-visible,
.communication-dropdown-toggle[aria-expanded="true"],
.digital-marketing-dropdown-toggle:hover,
.digital-marketing-dropdown-toggle:focus-visible,
.digital-marketing-dropdown-toggle[aria-expanded="true"] {
  color: #182875;
}

.navbar .navbar-nav {
  gap: 25px;
}

.navbar .navbar-nav .nav-link {
  font-size: clamp(0.75rem, calc(0.55rem + 0.55vw), 0.9rem);
  white-space: nowrap;
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .navbar .navbar-nav {
    gap: 12px;
  }

  .navbar .navbar-brand {
    font-size: 1.5rem;
  }
}

@media (max-width: 767.98px) {
  .navbar-collapse {
    padding-block: 0.75rem;
  }

  .navbar-nav {
    align-items: stretch;
    gap: 0;
  }

  .navbar .nav-link {
    padding: 0.65rem 0.75rem;
  }

  .navbar .dropdown-menu {
    max-height: 50vh;
    box-shadow: none;
  }
}

.navbar .nav-contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0.35rem 0.5rem;
  padding: 6px 15px;
  font-size: 12px;
  text-decoration: none;
}

.navbar .navbar-toggler {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid #dbe5ed;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.navbar .navbar-toggler:focus {
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.18);
}

.navbar-menu-icon {
  display: flex;
  width: 20px;
  flex-direction: column;
  gap: 5px;
}

.navbar-menu-icon span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #0f172a;
  transition:
    transform 0.22s ease,
    opacity 0.18s ease,
    width 0.22s ease;
}

.navbar-menu-icon span:last-child {
  width: 70%;
  align-self: flex-end;
}

.navbar-toggler[aria-expanded="true"] .navbar-menu-icon span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] .navbar-menu-icon span:nth-child(2) {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .navbar-menu-icon span:last-child {
  width: 100%;
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 767.98px) {
  .navbar .navbar-toggler {
    display: inline-flex;
  }

  .navbar .navbar-collapse {
    flex-basis: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e7edf3;
    border-radius: 14px;
    background: #fff !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  }

  .navbar .navbar-nav {
    align-items: stretch;
    gap: 0;
  }

  .navbar .navbar-nav .nav-link {
    display: flex;
    min-height: 46px;
    align-items: center;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    color: #172b3e !important;
    font-weight: 500;
    text-align: left;
  }

  .navbar .navbar-nav .nav-link::after {
    display: none;
  }

  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link:focus-visible,
  .navbar .navbar-nav .nav-link.active,
  .navbar .navbar-nav .dropdown-toggle[aria-expanded="true"] {
    background: #eff7fb;
    color: #087da7 !important;
  }

  .navbar .navbar-nav .nav-item.dropdown {
    width: 100%;
  }

  .navbar .communication-nav-controls,
  .navbar .digital-marketing-nav-controls {
    width: 100%;
    flex-wrap: wrap;
  }

  .navbar .communication-nav-link,
  .navbar .digital-marketing-nav-link {
    flex: 1;
    min-width: 0;
  }

  .navbar .communication-dropdown-toggle,
  .navbar .digital-marketing-dropdown-toggle {
    min-width: 46px;
    min-height: 46px;
    padding: 0.7rem;
    border-radius: 9px;
  }

  .navbar .communication-dropdown-toggle:hover,
  .navbar .communication-dropdown-toggle:focus-visible,
  .navbar .communication-dropdown-toggle[aria-expanded="true"],
  .navbar .digital-marketing-dropdown-toggle:hover,
  .navbar .digital-marketing-dropdown-toggle:focus-visible,
  .navbar .digital-marketing-dropdown-toggle[aria-expanded="true"] {
    background: #eff7fb;
    color: #087da7;
  }

  .navbar .navbar-nav .dropdown-menu {
    position: static;
    flex-basis: 100%;
    width: 100%;
    max-height: 45vh;
    margin: 0.15rem 0 0.45rem;
    padding: 0.35rem;
    overflow-y: auto;
    border: 0;
    border-left: 2px solid #d8edf5;
    border-radius: 0 10px 10px 0;
    background: #f8fbfd;
    box-shadow: none;
  }

  .navbar .navbar-nav .dropdown-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    color: #334155;
    font-size: 0.9rem;
  }

  .navbar .navbar-nav .dropdown-item:hover,
  .navbar .navbar-nav .dropdown-item:focus {
    background: #eaf4f8;
    color: #087da7;
  }

  .navbar .nav-contact-btn {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbar-menu-icon span {
    transition-duration: 0.01ms;
  }
}

.top-contact-bar {
  width: 100%;
  min-height: 43px;
  background: #2b2a5b;
  color: #ffffff;
}

.top-contact-content {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 43px;
}

.top-contact-content a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.top-contact-content i {
  color: #ffffff;
  font-size: 18px;
}

@media (max-width: 575px) {
  .top-contact-content {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .top-contact-content a {
    font-size: 13px;
  }
}

@media (max-width: 767.98px) {
  .navbar .communication-nav-item .dropdown-menu,
  .navbar .digital-marketing-nav-item .dropdown-menu {
    flex-basis: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .navbar .navbar-toggler {
    display: inline-flex;
  }

  .navbar .navbar-collapse {
    flex-basis: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #e7edf3;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
  }

  .navbar .navbar-nav {
    align-items: stretch;
    gap: 0;
  }

  .navbar .navbar-nav .nav-link {
    display: flex;
    min-height: 44px;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-radius: 9px;
    color: #172b3e;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
  }

  .navbar .navbar-nav .nav-link::after {
    display: none;
  }

  .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link:focus-visible,
  .navbar .navbar-nav .nav-link.active,
  .navbar .navbar-nav .dropdown-toggle[aria-expanded="true"] {
    background: #eff7fb;
    color: #087da7;
  }

  .navbar .navbar-nav .nav-item.dropdown,
  .navbar .communication-nav-controls,
  .navbar .digital-marketing-nav-controls {
    width: 100%;
  }

  .navbar .communication-nav-controls,
  .navbar .digital-marketing-nav-controls {
    flex-wrap: wrap;
  }

  .navbar .communication-nav-link,
  .navbar .digital-marketing-nav-link {
    flex: 1;
    min-width: 0;
  }

  .navbar .communication-dropdown-toggle,
  .navbar .digital-marketing-dropdown-toggle {
    min-width: 44px;
    min-height: 44px;
    padding: 0.65rem;
    border-radius: 9px;
  }

  .navbar .communication-dropdown-toggle:hover,
  .navbar .communication-dropdown-toggle:focus-visible,
  .navbar .communication-dropdown-toggle[aria-expanded="true"],
  .navbar .digital-marketing-dropdown-toggle:hover,
  .navbar .digital-marketing-dropdown-toggle:focus-visible,
  .navbar .digital-marketing-dropdown-toggle[aria-expanded="true"] {
    background: #eff7fb;
    color: #087da7;
  }

  .navbar .navbar-nav .dropdown-menu {
    position: static;
    flex-basis: 100%;
    width: 100%;
    max-height: 45vh;
    margin: 0.15rem 0 0.45rem;
    padding: 0.35rem;
    overflow-y: auto;
    border: 0;
    border-left: 2px solid #d8edf5;
    border-radius: 0 10px 10px 0;
    background: #f8fbfd;
    box-shadow: none;
  }

  .navbar .navbar-nav .dropdown-item {
    min-height: 42px;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    color: #334155;
    font-size: 0.9rem;
  }

  .navbar .navbar-nav .dropdown-item:hover,
  .navbar .navbar-nav .dropdown-item:focus {
    background: #eaf4f8;
    color: #087da7;
  }

  .navbar .nav-contact-btn {
    display: none !important;
  }
}

/* --------------Managed office-------------- */
/* --------------managed office-------------- */
.managed-hero {
  background-image: url("images/managed-office/hero.png");
  background-position: center;
  min-height: 660px;
}

.managed-hero .business-hero-overlay {
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(3, 10, 19, 0.82) 0%,
      rgba(3, 10, 19, 0.62) 48%,
      rgba(3, 10, 19, 0.2) 100%
    ),
    linear-gradient(0deg, rgba(3, 10, 19, 0.3), transparent 55%);
}

.managed-hero .business-hero-eyebrow,
.managed-hero .business-hero-description {
  color: rgba(255, 255, 255, 0.84);
}

.managed-hero .business-hero-title {
  color: #ffffff;
}

.managed-hero .business-hero-title span {
  color: #4fa8c5;
}
.managed-hero .business-hero-description {
  color: #fff !important;
}
.shared-office-section {
  position: relative;
  width: 100%;
  padding: 36px 0;
  overflow: hidden;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.shared-office-section *,
.shared-office-section *::before,
.shared-office-section *::after {
  box-sizing: border-box;
}

.shared-office-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 46px;
}

.shared-office-image {
  position: relative;
  width: 100%;
  height: 325px;
  overflow: hidden;
  border-radius: 13px;
  background: var(--light-bg);
}

.shared-office-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.shared-office-image:hover img {
  transform: scale(1.035);
}

.shared-office-content {
  min-width: 0;
  padding: 4px 0;
}

.shared-office-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.shared-office-title {
  margin: 0 0 13px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.8px;
}

.shared-office-description {
  max-width: 620px;
  margin: 0;
  color: #687487;
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.75;
}

.shared-office-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 15px;
  margin-top: 27px;
}

.shared-office-benefit {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.shared-office-benefit-icon {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 23px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.shared-office-benefit:hover .shared-office-benefit-icon {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(29, 53, 87, 0.12);
}

.shared-office-benefit-icon.icon-blue {
  color: #ffffff;
  background: #2857ed;
}

.shared-office-benefit-icon.icon-cyan {
  color: #ffffff;
  background: #56c6d6;
}

.shared-office-benefit-icon.icon-coral {
  color: #ffffff;
  background: var(--accent-color);
}

.shared-office-benefit h3 {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 1400px) {
  .shared-office-grid {
    gap: 54px;
  }

  .shared-office-image {
    height: 350px;
  }

  .shared-office-description {
    font-size: 14px;
  }

  .shared-office-benefits {
    gap: 20px;
    margin-top: 30px;
  }
}

@media (max-width: 1199.98px) {
  .shared-office-grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: 30px;
  }

  .shared-office-image {
    height: 290px;
  }

  .shared-office-title {
    font-size: 29px;
  }

  .shared-office-description {
    font-size: 12px;
    line-height: 1.7;
  }

  .shared-office-benefits {
    gap: 10px;
    margin-top: 22px;
  }

  .shared-office-benefit {
    gap: 8px;
  }

  .shared-office-benefit-icon {
    flex-basis: 45px;
    width: 45px;
    height: 45px;
    font-size: 20px;
  }

  .shared-office-benefit h3 {
    font-size: 10px;
  }
}

@media (max-width: 991.98px) {
  .shared-office-section {
    padding: 32px 0;
  }

  .shared-office-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .shared-office-image {
    height: 300px;
  }

  .shared-office-title {
    font-size: 26px;
    letter-spacing: -0.5px;
  }

  .shared-office-description {
    font-size: 11px;
    line-height: 1.7;
  }

  .shared-office-benefits {
    grid-template-columns: 1fr;
    gap: 13px;
    margin-top: 20px;
  }

  .shared-office-benefit {
    gap: 12px;
  }

  .shared-office-benefit-icon {
    flex-basis: 43px;
    width: 43px;
    height: 43px;
  }

  .shared-office-benefit h3 {
    font-size: 11px;
  }
}

@media (max-width: 767.98px) {
  .shared-office-section {
    padding: 26px 0 32px;
  }

  .shared-office-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .shared-office-image {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 11px;
  }

  .shared-office-content {
    padding: 0;
  }

  .shared-office-eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
    letter-spacing: 1.6px;
  }

  .shared-office-title {
    margin-bottom: 12px;
    font-size: clamp(25px, 6vw, 32px);
    line-height: 1.2;
    letter-spacing: -0.5px;
  }

  .shared-office-title .desktop-break {
    display: none;
  }

  .shared-office-description {
    max-width: none;
    font-size: 13px;
    line-height: 1.8;
  }

  .shared-office-benefits {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 23px;
  }

  .shared-office-benefit {
    gap: 13px;
  }

  .shared-office-benefit-icon {
    flex-basis: 48px;
    width: 48px;
    height: 48px;
    font-size: 21px;
  }

  .shared-office-benefit h3 {
    font-size: 12px;
    line-height: 1.5;
  }
}

@media (max-width: 400px) {
  .shared-office-section {
    padding: 22px 0 28px;
  }

  .shared-office-grid {
    gap: 20px;
  }

  .shared-office-title {
    font-size: 25px;
  }

  .shared-office-description {
    font-size: 12px;
  }

  .shared-office-benefits {
    gap: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-office-image img,
  .shared-office-benefit-icon {
    transition: none;
  }
}

.freedom-work-section {
  position: relative;
  padding: 35px 0;
  overflow: hidden;
  background: linear-gradient(
    110deg,
    var(--white-color) 0%,
    var(--light-bg) 65%,
    #eef8fc 100%
  );
  font-family: var(--paragraph-font);
}

.freedom-work-section * {
  box-sizing: border-box;
}

.freedom-work-content {
  max-width: 600px;
}

.freedom-work-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.freedom-work-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.7px;
}

.freedom-work-description {
  margin: 0;
  color: #647184;
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.7;
}

.freedom-work-image {
  position: relative;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border: 1px solid rgba(79, 168, 197, 0.16);
  border-radius: 12px;
  background: var(--light-bg);
  box-shadow: 0 8px 24px rgba(29, 53, 87, 0.06);
}

.freedom-work-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.freedom-work-image:hover img {
  transform: scale(1.035);
}

@media (min-width: 1400px) {
  .freedom-work-section {
    padding: 42px 0;
  }

  .freedom-work-image {
    height: 290px;
  }

  .freedom-work-description {
    font-size: 13px;
  }
}

@media (max-width: 991.98px) {
  .freedom-work-section {
    padding: 32px 0;
  }

  .freedom-work-title {
    font-size: 30px;
  }

  .freedom-work-description {
    font-size: 12px;
  }

  .freedom-work-image {
    height: 250px;
  }
}

@media (max-width: 767.98px) {
  .freedom-work-section {
    padding: 28px 0;
  }

  .freedom-work-title {
    font-size: clamp(26px, 6vw, 32px);
    line-height: 1.2;
  }

  .freedom-work-description {
    font-size: 13px;
    line-height: 1.8;
  }

  .freedom-work-image {
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }
}

@media (max-width: 400px) {
  .freedom-work-section {
    padding: 24px 0;
  }

  .freedom-work-title {
    font-size: 26px;
  }

  .freedom-work-description {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .freedom-work-image img {
    transition: none;
  }
}

.coworking-types-section {
  width: 100%;
  padding: 28px 0 34px;
  background: linear-gradient(
    115deg,
    #f3faff 0%,
    var(--white-color) 50%,
    #eef8fc 100%
  );
  font-family: var(--paragraph-font);
}

.coworking-types-section *,
.coworking-types-section *::before,
.coworking-types-section *::after {
  box-sizing: border-box;
}

.coworking-types-header {
  margin-bottom: 17px;
}

.coworking-types-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.coworking-types-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.7px;
}

.coworking-types-intro {
  max-width: 900px;
  margin: 0;
  color: #657184;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.7;
}

.coworking-types-row {
  align-items: stretch;
}

.coworking-type-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(79, 168, 197, 0.12);
  border-radius: 10px;
  background: var(--white-color);
  box-shadow: 0 5px 18px rgba(29, 53, 87, 0.035);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.coworking-type-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px rgba(29, 53, 87, 0.09);
}

.coworking-type-image {
  width: 100%;
  height: 100px;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--light-bg);
}

.coworking-type-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.coworking-type-card:hover .coworking-type-image img {
  transform: scale(1.04);
}

.coworking-type-icon {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  margin: -21px 0 0 12px;
  border: 1px solid rgba(79, 168, 197, 0.13);
  border-radius: 50%;
  background: var(--white-color);
  color: var(--primary-color);
  font-size: 19px;
  box-shadow: 0 3px 10px rgba(29, 53, 87, 0.06);
}

.coworking-type-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 12px 14px;
}

.coworking-type-body h3 {
  margin: 8px 0 9px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.1px;
}

.coworking-type-body p {
  margin: 0;
  color: #697589;
  font-family: var(--paragraph-font);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.65;
}

@media (min-width: 1200px) {
  .coworking-types-section {
    padding: 30px 0 36px;
  }

  .coworking-types-header {
    margin-bottom: 18px;
  }

  .coworking-type-image {
    height: 175px;
  }

  .coworking-type-body {
    padding-right: 13px;
    padding-left: 13px;
  }
}

@media (max-width: 991.98px) {
  .coworking-types-title {
    font-size: 23px;
  }

  .coworking-type-image {
    height: 125px;
  }

  .coworking-type-body h3 {
    font-size: 12px;
  }

  .coworking-type-body p {
    font-size: 11px;
  }
}

@media (max-width: 575.98px) {
  .coworking-types-section {
    padding: 25px 0 30px;
  }

  .coworking-types-header {
    margin-bottom: 18px;
  }

  .coworking-types-title {
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: -0.35px;
  }

  .coworking-types-intro {
    font-size: 12px;
    line-height: 1.75;
  }

  .coworking-type-image {
    height: 165px;
  }

  .coworking-type-icon {
    width: 45px;
    height: 45px;
    margin-left: 14px;
    font-size: 20px;
  }

  .coworking-type-body {
    padding: 0 14px 17px;
  }

  .coworking-type-body h3 {
    margin-top: 9px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.45;
  }

  .coworking-type-body p {
    font-size: 12px;
    line-height: 1.75;
  }
}

@media (max-width: 380px) {
  .coworking-types-title {
    font-size: 20px;
  }

  .coworking-type-image {
    height: 145px;
  }

  .coworking-type-body h3 {
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .coworking-type-card,
  .coworking-type-image img {
    transition: none;
  }
}

.cowork-benefits-section {
  position: relative;
  width: 100%;
  padding: 65px 0;
  background: var(--white-color);
  font-family: var(--paragraph-font);
  overflow: hidden;
}

.cowork-benefits-section *,
.cowork-benefits-section *::before,
.cowork-benefits-section *::after {
  box-sizing: border-box;
}

.cowork-benefits-intro {
  max-width: 460px;
}

.cowork-benefits-eyebrow {
  display: block;
  margin-bottom: 12px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.5;
}

.cowork-benefits-title {
  margin: 0 0 16px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(27px, 2.5vw, 35px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.cowork-benefits-title span {
  display: block;
}

.cowork-benefits-description {
  max-width: 430px;
  margin: 0 0 22px;
  color: #687589;
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}

.cowork-benefits-description strong {
  color: var(--heading-color);
  font-weight: 600;
}

.cowork-benefits-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 44px;
  padding: 12px 25px;
  border: 1px solid var(--btn-primary-bg);
  border-radius: 7px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.cowork-benefits-btn i {
  font-size: 15px;
  transition: transform 0.25s ease;
}

.cowork-benefits-btn:hover {
  background: var(--accent-color);
  color: var(--white-color);
  transform: translateY(-2px);
  box-shadow: 0 7px 18px rgba(29, 53, 87, 0.14);
}

.cowork-benefits-btn:hover i {
  transform: translateX(4px);
}

.cowork-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  height: 100%;
  min-width: 0;
}

.cowork-benefit-icon {
  display: flex;
  flex: 0 0 64px;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f6fc;
  color: var(--primary-color);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.cowork-benefit-icon i {
  font-size: 25px;
  line-height: 1;
}

.cowork-benefit-item:hover .cowork-benefit-icon {
  background: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-3px);
}

.cowork-benefit-content {
  flex: 1;
  min-width: 0;
  padding-top: 5px;
}

.cowork-benefit-content h3 {
  margin: 0 0 7px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.cowork-benefit-content p {
  margin: 0;
  color: #758093;
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
}

@media (max-width: 991.98px) {
  .cowork-benefits-section {
    padding: 55px 0;
  }

  .cowork-benefits-intro {
    max-width: 600px;
  }

  .cowork-benefits-title {
    font-size: 30px;
  }

  .cowork-benefit-icon {
    flex-basis: 58px;
    width: 58px;
    height: 58px;
  }

  .cowork-benefit-icon i {
    font-size: 23px;
  }

  .cowork-benefit-item {
    gap: 12px;
  }
}

@media (max-width: 575.98px) {
  .cowork-benefits-section {
    padding: 42px 0;
  }

  .cowork-benefits-eyebrow {
    margin-bottom: 9px;
    font-size: 11px;
    letter-spacing: 1.8px;
  }

  .cowork-benefits-title {
    margin-bottom: 13px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }

  .cowork-benefits-description {
    margin-bottom: 19px;
    font-size: 13px;
    line-height: 1.7;
  }

  .cowork-benefits-btn {
    min-height: 43px;
    padding: 11px 20px;
    font-size: 12px;
  }

  .cowork-benefit-item {
    gap: 12px;
  }

  .cowork-benefit-icon {
    flex-basis: 52px;
    width: 52px;
    height: 52px;
  }

  .cowork-benefit-icon i {
    font-size: 21px;
  }

  .cowork-benefit-content {
    padding-top: 2px;
  }

  .cowork-benefit-content h3 {
    margin-bottom: 5px;
    font-size: 13px;
  }

  .cowork-benefit-content p {
    font-size: 11px;
    line-height: 1.6;
  }
}

@media (max-width: 359.98px) {
  .cowork-benefits-title {
    font-size: 24px;
  }

  .cowork-benefit-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .cowork-benefit-icon i {
    font-size: 19px;
  }

  .cowork-benefit-item {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cowork-benefits-btn,
  .cowork-benefits-btn i,
  .cowork-benefit-icon {
    transition: none;
  }
}

.cowork-amenities-section {
  width: 100%;
  padding: 65px 0;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.cowork-amenities-section *,
.cowork-amenities-section *::before,
.cowork-amenities-section *::after {
  box-sizing: border-box;
}

.cowork-amenities-intro {
  width: 100%;
}

.cowork-amenities-eyebrow {
  display: block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.5;
}

.cowork-amenities-title {
  margin: 0 0 12px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(25px, 2.3vw, 32px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.6px;
}

.cowork-amenities-description {
  margin: 0 0 18px;
  color: #69778b;
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}

.cowork-amenities-image {
  width: 100%;
  height: 339px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--light-bg);
}

.cowork-amenities-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

.cowork-amenities-image:hover img {
  transform: scale(1.035);
}

.cowork-amenities-grid {
  width: 100%;
}

.cowork-amenity-item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: 78px;
  height: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid #e8edf2;
}

.cowork-amenities-grid > .col-md-6:nth-last-child(-n + 2) .cowork-amenity-item {
  border-bottom: none;
}

.cowork-amenities-grid > .col-md-6:nth-child(odd) .cowork-amenity-item {
  border-right: 1px solid #e8edf2;
}

.cowork-amenity-icon {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eaf7fd;
  color: var(--primary-color);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.cowork-amenity-icon i {
  font-size: 23px;
  line-height: 1;
}

.cowork-amenity-item:hover .cowork-amenity-icon {
  background: var(--primary-color);
  color: var(--white-color);
  transform: translateY(-2px);
}

.cowork-amenity-content {
  flex: 1;
  min-width: 0;
}

.cowork-amenity-content h3 {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.cowork-amenity-content p {
  margin: 2px 0 0;
  color: #69778b;
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .cowork-amenities-section {
    padding: 50px 0;
  }

  .cowork-amenities-title {
    font-size: 28px;
  }

  .cowork-amenities-image {
    height: 220px;
  }

  .cowork-amenity-item {
    gap: 12px;
    padding: 12px 10px;
  }

  .cowork-amenity-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .cowork-amenity-icon i {
    font-size: 21px;
  }

  .cowork-amenity-content h3,
  .cowork-amenity-content p {
    font-size: 11px;
  }
}

@media (max-width: 767.98px) {
  .cowork-amenities-section {
    padding: 42px 0;
  }

  .cowork-amenities-title {
    max-width: 540px;
    font-size: 27px;
    line-height: 1.25;
  }

  .cowork-amenities-description {
    font-size: 13px;
  }

  .cowork-amenities-image {
    height: 230px;
    margin-bottom: 8px;
  }

  .cowork-amenities-grid {
    margin-top: 8px;
  }

  .cowork-amenity-item {
    min-height: 76px;
    padding: 12px 8px;
  }

  .cowork-amenity-icon {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
    border-radius: 10px;
  }

  .cowork-amenity-icon i {
    font-size: 20px;
  }

  .cowork-amenity-content h3 {
    font-size: 12px;
  }

  .cowork-amenity-content p {
    font-size: 11px;
  }
}

@media (max-width: 399.98px) {
  .cowork-amenities-title {
    font-size: 24px;
  }

  .cowork-amenities-image {
    height: 190px;
  }

  .cowork-amenity-item {
    gap: 8px;
    padding: 10px 5px;
  }

  .cowork-amenity-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }

  .cowork-amenity-icon i {
    font-size: 18px;
  }

  .cowork-amenity-content h3,
  .cowork-amenity-content p {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cowork-amenities-image img,
  .cowork-amenity-icon {
    transition: none;
  }
}

.workspace-comparison-section {
  position: relative;
  padding: 55px 0;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 8% 50%,
      rgba(79, 168, 197, 0.09),
      transparent 40%
    ),
    linear-gradient(105deg, #f2f9fc 0%, var(--white-color) 55%, #f6fbfd 100%);
  font-family: var(--paragraph-font);
}

.workspace-comparison-section .container {
  max-width: 1320px;
}

.comparison-content {
  max-width: 420px;
}

.comparison-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  line-height: 1.5;
  text-transform: uppercase;
}

.comparison-title {
  margin: 0 0 17px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.8px;
}

.comparison-title span {
  display: block;
}

.comparison-description {
  max-width: 390px;
  margin: 0;
  color: #687789;
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}

.comparison-table-wrapper {
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(29, 53, 87, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 20px rgba(29, 53, 87, 0.045);
}

.comparison-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.45;
}

.comparison-table th,
.comparison-table td {
  padding: 11px 16px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid rgba(29, 53, 87, 0.1);
  border-bottom: 1px solid rgba(29, 53, 87, 0.1);
}

.comparison-table th:last-child,
.comparison-table td:last-child {
  border-right: 0;
}

.comparison-table tbody tr:last-child th,
.comparison-table tbody tr:last-child td {
  border-bottom: 0;
}

.comparison-table thead th {
  padding-top: 13px;
  padding-bottom: 13px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.comparison-table thead th:first-child {
  width: 29%;
  border-top-left-radius: 10px;
}

.comparison-table thead th:nth-child(2) {
  width: 32%;
}

.comparison-table thead th:last-child {
  width: 39%;
  border-top-right-radius: 10px;
}

.comparison-table tbody th {
  color: #263b55;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.65);
}

.comparison-table tbody td {
  color: #000;
  font-weight: 400;
}

.comparison-table tbody tr:nth-child(even) th,
.comparison-table tbody tr:nth-child(even) td {
  background-color: #f0f7fb;
}

.comparison-table tbody tr {
  transition: background-color 0.2s ease;
}

.comparison-table tbody tr:hover th,
.comparison-table tbody tr:hover td {
  background-color: rgba(79, 168, 197, 0.1);
}

@media (max-width: 991.98px) {
  .workspace-comparison-section {
    padding: 45px 0;
  }

  .comparison-content {
    max-width: 600px;
  }

  .comparison-title {
    max-width: 520px;
    font-size: 32px;
  }

  .comparison-description {
    max-width: 550px;
  }

  .comparison-table {
    font-size: 12px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 11px 13px;
  }
}

@media (max-width: 575.98px) {
  .workspace-comparison-section {
    padding: 35px 0;
  }

  .comparison-eyebrow {
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: 2px;
  }

  .comparison-title {
    margin-bottom: 12px;
    font-size: 27px;
    line-height: 1.25;
    letter-spacing: -0.5px;
  }

  .comparison-description {
    font-size: 13px;
    line-height: 1.7;
  }

  .comparison-table-wrapper {
    overflow-x: auto;
    border-radius: 9px;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table {
    min-width: 540px;
    font-size: 12px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 11px 12px;
  }

  .comparison-table thead th {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .comparison-table tbody tr {
    transition: none;
  }
}
/* ---------------------tata-tele-hero------------------------ */
/* ---------------------tata-tele-hero------------------------ */
.tata-tele-hero {
  background-image: url("images/tata-tele/hero.png");

  background-position: center;
  min-height: 520px;
}
.tata-tele-hero span {
  font-family: var(--heading-font);
}
.marketing360-benefits {
  width: 100%;
  padding: 18px 0;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.marketing360-benefits__container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

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

.marketing360-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.marketing360-benefit__icon {
  width: 42px;
  height: 42px;
  min-width: 42px;

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

  color: var(--heading-color);
  background: rgba(79, 168, 197, 0.12);
  border: 1px solid rgba(79, 168, 197, 0.35);
  border-radius: 50%;
}

.marketing360-benefit__icon svg {
  width: 22px;
  height: 22px;
}

.marketing360-benefit p {
  margin: 0;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.marketing360-benefit__divider {
  width: 1px;
  height: 38px;
  flex: 0 0 1px;
  background: rgba(29, 53, 87, 0.12);
}

@media (max-width: 768px) {
  .marketing360-benefits__container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .marketing360-benefit__divider {
    display: none;
  }

  .marketing360-benefit {
    gap: 10px;
  }

  .marketing360-benefit p {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .marketing360-benefits {
    padding: 22px 0;
  }

  .marketing360-benefits__container {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 24px;
  }

  .marketing360-benefit__icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

  .marketing360-benefit__icon svg {
    width: 20px;
    height: 20px;
  }

  .marketing360-benefit p {
    font-size: 14px;
  }
}

.m360-about {
  width: 100%;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

/* Eyebrow */
.m360-about__eyebrow {
  display: inline-block;
  margin-bottom: 14px;

  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Main Heading */
.m360-about__title {
  margin: 0 0 22px;

  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.2;
}

/* Highlighted Heading */
.m360-about__title span {
  display: block;

  color: var(--primary-color);
  /* font-family: var(--secondary-heading-font); */
}

/* Paragraphs */
.m360-about__content p {
  margin: 0 0 16px;

  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

.m360-about__content p:last-child {
  margin-bottom: 0;
}

.m360-about__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Individual Statistic */
.m360-about__stat {
  min-width: 0;
  min-height: 180px;
  padding: 25px;

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

  border-color: var(--light-bg);
  border-style: solid;
  border-width: 0;

  transition: transform 0.3s ease;
}

/* Vertical Dividers */
.m360-about__stat:nth-child(odd) {
  border-right-width: 1px;
}

/* Horizontal Dividers */
.m360-about__stat:nth-child(-n + 2) {
  border-bottom-width: 1px;
}

.m360-about__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  flex-shrink: 0;

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

  background: var(--primary-color);
  color: var(--white-color);

  border-radius: 50%;

  font-size: 21px;

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

/* Icon Hover */
.m360-about__stat:hover .m360-about__icon {
  background: var(--accent-color);
  color: var(--white-color);
  transform: translateY(-4px);
}

.m360-about__stat h3 {
  margin: 0 0 8px;

  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(27px, 2.5vw, 36px);
  font-weight: 700;
  line-height: 1.1;
}

.m360-about__stat h3 span {
  font-size: 0.75em;
}

/* Statistic Labels */
.m360-about__stat p {
  margin: 0;

  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .m360-about__stats {
    margin-top: 10px;
  }

  .m360-about__stat {
    min-height: 160px;
    padding: 22px;
  }
}

@media (max-width: 575.98px) {
  .m360-about__eyebrow {
    font-size: 11px;
    letter-spacing: 1.5px;
  }

  .m360-about__title {
    font-size: 30px;
    line-height: 1.25;
  }

  .m360-about__content p {
    font-size: 14px;
    line-height: 1.75;
  }

  .m360-about__stat {
    min-height: 145px;
    padding: 16px;
  }

  .m360-about__icon {
    width: 42px;
    height: 42px;
    margin-bottom: 12px;

    font-size: 18px;
  }

  .m360-about__stat h3 {
    font-size: 25px;
  }

  .m360-about__stat p {
    font-size: 12px;
  }
}

/* =========================================
   MARKETING 360 SOLUTIONS SECTION
========================================= */

.m360-solutions {
  width: 100%;

  font-family: var(--paragraph-font);
}

/* Section Header */

.m360-solutions__header {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.m360-solutions__eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 12px;

  color: var(--primary-color);
  border-radius: 999px;
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.m360-solutions__title {
  margin: 0 0 16px;

  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 700;
  line-height: 1.16;
}
.m360-solutions__title span {
  color: var(--primary-color);
  /* font-family: var(--secondary-heading-font); */
}
.m360-solutions__subtitle {
  max-width: 720px;
  margin: 0 auto;

  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 16px;
  line-height: 1.75;
}

.m360-solutions__slider-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: -20px 0 18px;
}

.m360-solutions__slider-button {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  background: var(--white-color);
  border: 1px solid rgba(24, 40, 117, 0.14);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(24, 40, 117, 0.08);
  cursor: pointer;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    opacity 0.2s ease,
    transform 0.2s ease;
}

.m360-solutions__slider-button:hover:not(:disabled) {
  color: var(--white-color);
  background: var(--primary-color);
  transform: translateY(-2px);
}

.m360-solutions__slider-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.m360-solutions__slider-button:focus-visible {
  outline: 3px solid rgba(8, 125, 167, 0.35);
  outline-offset: 3px;
}

.m360-solutions__slider {
  overflow: hidden;
}

.m360-solutions__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 2px 22px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.m360-solutions__track::-webkit-scrollbar {
  display: none;
}

.m360-solutions__slide {
  flex: 0 0 calc((100% - 40px) / 3);
  min-width: 0;
  scroll-snap-align: start;
}

/* =========================================
   SOLUTION CARD
========================================= */

.m360-solution-card {
  position: relative;
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;
  min-height: 350px;
  overflow: hidden;

  background: var(--white-color);
  border: 1px solid rgba(24, 40, 117, 0.08);
  border-radius: 18px;

  box-shadow: 0 8px 24px rgba(24, 40, 117, 0.07);

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

.m360-solution-card:hover {
  transform: translateY(-6px);
  border-color: rgba(24, 40, 117, 0.16);
  box-shadow: 0 18px 36px rgba(24, 40, 117, 0.13);
}

/* Card Content */

.m360-solution-card__content {
  flex: 1;
  width: 100%;
  min-height: 0;
  padding: 18px 20px 20px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;

  background: var(--white-color);
}

/* Image Visual */

.m360-solution-card__visual {
  position: relative;
  order: -1;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: #e9f1f6;
}

.m360-solution-card__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    180deg,
    rgba(15, 32, 68, 0.02),
    rgba(15, 32, 68, 0.16)
  );
  pointer-events: none;
}

.m360-solution-card__visual img {
  display: block;

  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: transform 0.5s ease;
}

.m360-solution-card:hover .m360-solution-card__visual img {
  transform: scale(1.06);
}

/* =========================================
   CARD ICON
========================================= */

.m360-solution-card__icon {
  width: 42px;
  height: 42px;
  margin-bottom: 13px;
  flex-shrink: 0;

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

  color: var(--primary-color);
  background: #edf4f8;

  border-radius: 14px;
  font-size: 19px;

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

.m360-solution-card:hover .m360-solution-card__icon {
  background: rgba(24, 40, 117, 0.12);
  transform: translateY(-3px);
}

/* Customer Engagement Icon */

.m360-solution-card__icon--accent {
  color: var(--accent-color);
  background: rgba(8, 125, 167, 0.1);
}

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

.m360-solution-card__content h3 {
  margin: 0 0 10px;

  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

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

.m360-solution-card__content ul {
  display: grid;
  gap: 5px;

  margin: 0;
  padding: 0;

  list-style: none;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.m360-solution-card__content li {
  position: relative;
  padding-left: 17px;
}

.m360-solution-card__content li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 1px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-color);
}

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

@media (max-width: 991.98px) {
  .m360-solutions__slide {
    flex-basis: calc((100% - 20px) / 2);
  }

  .m360-solution-card {
    min-height: 340px;
  }

  .m360-solution-card__content {
    padding: 18px;
  }

  .m360-solution-card__visual {
    height: 135px;
  }

  .m360-solution-card__content h3 {
    font-size: 16px;
  }

  .m360-solution-card__content ul {
    font-size: 12px;
  }
}

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

@media (max-width: 575.98px) {
  .m360-solutions__header {
    margin-bottom: 30px !important;
  }

  .m360-solutions__eyebrow {
    font-size: 11px;
    letter-spacing: 1.2px;
  }

  .m360-solutions__title {
    font-size: 29px;
  }

  .m360-solutions__subtitle {
    font-size: 14px;
  }

  .m360-solutions__slider-controls {
    margin: -12px 0 12px;
  }

  .m360-solutions__slider-button {
    width: 38px;
    height: 38px;
  }

  .m360-solutions__track {
    gap: 14px;
    padding-right: 14px;
  }

  .m360-solutions__slide {
    flex-basis: 88%;
  }

  .m360-solution-card {
    min-height: 0;
  }

  .m360-solution-card__content {
    padding: 18px;
  }

  .m360-solution-card__visual {
    height: 145px;
  }

  .m360-solution-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 11px;
    font-size: 18px;
  }

  .m360-solution-card__content h3 {
    font-size: 16px;
  }

  .m360-solution-card__content ul {
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .m360-solutions__track {
    scroll-behavior: auto;
  }

  .m360-solution-card,
  .m360-solution-card__visual img {
    transition: none;
  }
}

.tata-partner-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(8, 125, 167, 0.08),
      transparent 55%
    ),
    #f8fbfd;
  font-family: var(--paragraph-font);
}

.tata-partner-section__header {
  max-width: 850px;
  margin: 0 auto 36px;
  text-align: center;
}

.tata-partner-section__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.tata-partner-section__title {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.tata-partner-section__title span {
  color: var(--primary-color);
  /* font-family: var(--secondary-heading-font); */
}

.tata-partner-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
  margin: 0 auto;
}

.tata-partner-item {
  position: relative;
  padding: 8px 24px;
  text-align: center;
}

.tata-partner-item + .tata-partner-item {
  border-left: 1px solid rgba(29, 53, 87, 0.13);
}

.tata-partner-item__icon {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: var(--white-color);
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 5px 16px rgba(24, 40, 117, 0.08);
  font-size: 24px;
  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.tata-partner-item:hover .tata-partner-item__icon {
  background: var(--btn-secondary-bg);
  border-color: var(--btn-secondary-bg);
  transform: translateY(-3px);
}

.tata-partner-item h3 {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.tata-partner-item p {
  max-width: 220px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 767.98px) {
  .tata-partner-section__header {
    margin-bottom: 28px;
  }

  .tata-partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .tata-partner-item {
    padding: 4px 16px;
  }

  .tata-partner-item:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 479.98px) {
  .tata-partner-section__eyebrow {
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .tata-partner-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .tata-partner-item,
  .tata-partner-item + .tata-partner-item {
    padding: 0 12px 20px;
    border-left: 0;
    border-bottom: 1px solid rgba(29, 53, 87, 0.13);
  }

  .tata-partner-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.tata-process-section {
  position: relative;
  overflow: hidden;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.tata-process-section__header {
  max-width: 850px;
  margin: 0 auto 42px;
  text-align: center;
}

.tata-process-section__eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
}

.tata-process-section__title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.tata-process-section__title span {
  color: var(--primary-color);
  /* font-family: var(--secondary-heading-font); */
}

.tata-process-section__subtitle {
  max-width: 680px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.7;
}

.tata-process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  max-width: 1160px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.tata-process-step {
  position: relative;
  min-width: 0;
  padding: 0 22px;
}

.tata-process-step:not(:last-child)::after {
  content: "\F138";
  position: absolute;
  top: 18px;
  right: -6px;
  z-index: 1;
  color: var(--primary-color);
  font-family: "bootstrap-icons";
  font-size: 16px;
}

.tata-process-step__number {
  display: flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--white-color);
  background: var(--primary-color);
  border: 3px solid rgba(79, 168, 197, 0.18);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(29, 53, 87, 0.1);
  font-size: 15px;
  font-weight: 700;
}

.tata-process-step h3 {
  margin: 0 0 5px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.tata-process-step p {
  max-width: 190px;
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.6;
}

@media (max-width: 991.98px) {
  .tata-process-steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 30px;
  }

  .tata-process-step {
    padding: 0 16px;
  }

  .tata-process-step::after {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .tata-process-section__header {
    margin-bottom: 30px;
  }

  .tata-process-section__eyebrow {
    font-size: 10px;
    letter-spacing: 1.4px;
  }

  .tata-process-steps {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 380px;
  }

  .tata-process-step {
    min-height: 94px;
    padding: 0 0 22px 64px;
  }

  .tata-process-step:not(:last-child)::after {
    content: "";
    top: 48px;
    right: auto;
    left: 23px;
    display: block;
    width: 2px;
    height: calc(100% - 48px);
    background: rgba(79, 168, 197, 0.35);
  }

  .tata-process-step__number {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .tata-process-step h3 {
    padding-top: 2px;
  }
}

.ivr-process-section {
  position: relative;
  overflow: hidden;
  padding: 56px 0 50px;
  font-family: var(--paragraph-font);
}

.ivr-process-overview {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 44px;
}

.ivr-process-intro {
  min-width: 0;
}

.ivr-process-eyebrow,
.ivr-journey-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 17px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ivr-process-eyebrow::after,
.ivr-journey-eyebrow::after {
  width: 42px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.ivr-process-title {
  margin: 0 0 17px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.5px;
}

.ivr-process-title span {
  display: block;
  color: var(--primary-color);
}

.ivr-process-description {
  max-width: 560px;
  margin: 0;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.65;
}

.ivr-process-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 35px;
}

.ivr-process-stat {
  min-width: 0;
  padding: 0 12px;
  border-right: 1px solid
    color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.ivr-process-stat:first-child {
  padding-left: 6px;
}

.ivr-process-stat:last-child {
  padding-right: 0;
  border-right: 0;
}

.ivr-process-stat strong,
.ivr-process-stat span {
  display: block;
}

.ivr-process-stat strong {
  margin-bottom: 5px;
  color: var(--heading-color);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.ivr-process-stat span {
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.4;
}

.ivr-process-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}

.ivr-process-feature {
  display: flex;
  min-width: 0;
  min-height: 170px;
  align-items: flex-start;
  gap: 17px;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 13%, transparent);
  border-radius: 15px;
  background: var(--white-color);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
}

.ivr-process-feature-icon,
.ivr-journey-icon {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 15%, var(--white-color));
  color: var(--primary-color);
  font-size: 24px;
}

.ivr-process-feature-icon-accent,
.ivr-journey-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.ivr-process-feature h3 {
  margin: 10px 0 11px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.ivr-process-feature p {
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.55;
}

.ivr-journey {
  position: relative;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid
    color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.ivr-journey-eyebrow {
  margin-bottom: 23px;
}

.ivr-journey-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ivr-journey-step {
  position: relative;
  min-width: 0;
}

.ivr-journey-step:not(:last-child)::after {
  position: absolute;
  top: 27px;
  right: -28px;
  left: calc(50% + 58px);
  border-top: 2px dashed
    color-mix(in srgb, var(--primary-color) 65%, transparent);
  content: "";
}

.ivr-journey-step-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.ivr-journey-number {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 700;
}

.ivr-journey-number-accent {
  background: var(--accent-color);
}

.ivr-journey-icon {
  width: 54px;
  height: 54px;
  flex-basis: 54px;
  font-size: 22px;
}

.ivr-journey-step-content {
  padding-left: 52px;
}

.ivr-journey-step h3 {
  min-height: 38px;
  margin: 0 0 7px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.ivr-journey-step p {
  margin: 0;
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .ivr-process-overview {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .ivr-process-intro {
    max-width: 760px;
  }

  .ivr-process-stats {
    max-width: 650px;
  }

  .ivr-journey-steps {
    gap: 16px;
  }

  .ivr-journey-step:not(:last-child)::after {
    right: -20px;
    left: calc(50% + 52px);
  }

  .ivr-journey-step-content {
    padding-left: 0;
  }
}

@media (max-width: 767.98px) {
  .ivr-process-section {
    padding: 44px 0;
  }

  .ivr-process-title {
    font-size: clamp(32px, 7vw, 43px);
  }

  .ivr-process-features {
    gap: 10px;
  }

  .ivr-process-feature {
    min-height: 0;
    flex-direction: column;
    gap: 7px;
    padding: 16px;
  }

  .ivr-process-feature h3 {
    margin: 3px 0 7px;
  }

  .ivr-journey-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 26px;
  }

  .ivr-journey-step::after {
    display: none;
  }

  .ivr-journey-step-visual {
    gap: 8px;
  }
}

@media (max-width: 479.98px) {
  .ivr-process-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .ivr-process-stat:nth-child(2) {
    border-right: 0;
  }

  .ivr-process-stat:nth-child(3) {
    padding-left: 6px;
  }

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

  .ivr-process-feature {
    flex-direction: row;
    align-items: flex-start;
    gap: 13px;
    padding: 16px;
  }

  .ivr-process-feature-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 20px;
  }

  .ivr-process-feature h3 {
    margin: 5px 0 6px;
  }

  .ivr-journey-steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .ivr-journey-step {
    display: grid;
    grid-template-columns: 94px 1fr;
    align-items: start;
    gap: 12px;
  }

  .ivr-journey-step-visual {
    margin: 0;
  }

  .ivr-journey-step-content {
    padding-top: 4px;
  }

  .ivr-journey-step h3 {
    min-height: 0;
  }
}

.ivr-experience-section {
  position: relative;
  overflow: hidden;
  padding: 58px 0 42px;

  font-family: var(--paragraph-font);
}

.ivr-experience-header {
  max-width: 900px;
  margin: 0 auto 32px;
  text-align: center;
}

.ivr-experience-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ivr-experience-eyebrow::after {
  width: 42px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.ivr-experience-title {
  margin: 0 auto 12px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -1.2px;
}

.ivr-experience-title span {
  display: block;
  color: var(--primary-color);
}

.ivr-experience-description {
  max-width: 780px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
}

.ivr-experience-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.ivr-experience-card {
  display: flex;
  min-width: 0;
  min-height: 270px;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 13%, transparent);
  border-radius: 14px;
  background: var(--white-color);
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ivr-experience-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
  box-shadow: 0 12px 26px
    color-mix(in srgb, var(--heading-color) 9%, transparent);
}

.ivr-experience-icon {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--white-color));
  color: var(--primary-color);
  font-size: 27px;
}

.ivr-experience-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.ivr-experience-card h3 {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.ivr-experience-card p {
  margin: 0 0 12px;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

.ivr-experience-arrow {
  display: grid;
  width: 30px;
  height: 30px;
  margin-top: auto;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 12%, var(--white-color));
  color: var(--primary-color);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.ivr-experience-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 5px 0;
  padding: 21px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 8%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--primary-color) 5%, var(--white-color));
}

.ivr-experience-stat {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 14px;
  border-right: 1px solid
    color-mix(in srgb, var(--primary-color) 24%, transparent);
}

.ivr-experience-stat:last-child {
  border-right: 0;
}

.ivr-experience-stat-icon {
  display: grid;
  width: 68px;
  height: 68px;
  flex: 0 0 68px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--white-color));
  color: var(--primary-color);
  font-size: 30px;
}

.ivr-experience-stat-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.ivr-experience-stat strong,
.ivr-experience-stat div > span {
  display: block;
  white-space: nowrap;
}

.ivr-experience-stat strong {
  color: var(--heading-color);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1.1;
}

.ivr-experience-stat div > span {
  margin-top: 5px;
  color: var(--text-color);
  font-size: 12px;
}

@media (max-width: 1199.98px) {
  .ivr-experience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ivr-experience-card {
    min-height: 225px;
  }
}

@media (max-width: 767.98px) {
  .ivr-experience-section {
    padding: 44px 0 34px;
  }

  .ivr-experience-header {
    margin-bottom: 25px;
  }

  .ivr-experience-title {
    font-size: clamp(28px, 6vw, 38px);
    letter-spacing: -0.7px;
  }

  .ivr-experience-description {
    font-size: 13px;
  }

  .ivr-experience-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ivr-experience-card {
    min-height: 0;
    padding: 15px;
  }

  .ivr-experience-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 0;
    margin: 16px 0 0;
    padding: 18px 8px;
  }

  .ivr-experience-stat {
    justify-content: flex-start;
    gap: 10px;
    padding: 0 10px;
  }

  .ivr-experience-stat:nth-child(2) {
    border-right: 0;
  }

  .ivr-experience-stat:nth-child(3) {
    border-right: 1px solid
      color-mix(in srgb, var(--primary-color) 24%, transparent);
  }

  .ivr-experience-stat-icon {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
    font-size: 22px;
  }

  .ivr-experience-stat strong {
    font-size: 25px;
  }

  .ivr-experience-stat div > span {
    white-space: normal;
    font-size: 10px;
  }
}

@media (max-width: 399.98px) {
  .ivr-experience-card {
    padding: 12px;
  }

  .ivr-experience-icon {
    width: 52px;
    height: 52px;
    flex-basis: 52px;
    font-size: 23px;
  }

  .ivr-experience-card h3 {
    font-size: 12px;
  }

  .ivr-experience-card p {
    font-size: 11px;
  }

  .ivr-experience-stat {
    flex-direction: column;
    align-items: flex-start;
  }
}

.ivr-use-cases-section {
  position: relative;
  overflow: hidden;
  padding: 58px 0 42px;

  font-family: var(--paragraph-font);
}

.ivr-use-cases-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.9fr);
  align-items: center;
  gap: 34px;
}

.ivr-use-cases-intro {
  min-width: 0;
}

.ivr-use-cases-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ivr-use-cases-eyebrow::after {
  width: 42px;
  height: 2px;
  background: var(--accent-color);
  content: "";
}

.ivr-use-cases-title {
  margin: 0 0 16px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(32px, 3.7vw, 48px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -1.3px;
}

.ivr-use-cases-title span {
  display: block;
  color: var(--primary-color);
}

.ivr-use-cases-description {
  margin: 0 0 23px;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.65;
}

.ivr-use-cases-button {
  display: inline-flex;
  min-width: 180px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 18px;
  border: 1px solid var(--primary-color);
  border-radius: 6px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.ivr-use-cases-button:hover {
  transform: translateY(-2px);
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: var(--white-color);
}

.ivr-use-cases-button span {
  font-size: 18px;
  line-height: 1;
}

.ivr-use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ivr-use-case-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 205px;
  flex-direction: column;
  align-items: flex-start;
  padding: 17px 18px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 13%, transparent);
  border-radius: 15px;
  background: var(--white-color);
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
  transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.ivr-use-case-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
  box-shadow: 0 12px 25px
    color-mix(in srgb, var(--heading-color) 8%, transparent);
}

.ivr-use-case-icon {
  display: grid;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  place-items: center;
  margin-bottom: 10px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--white-color));
  color: var(--primary-color);
  font-size: 24px;
}

.ivr-use-case-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.ivr-use-case-card h3 {
  margin: 0 0 7px;
  padding-right: 21px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}

.ivr-use-case-card p {
  margin: 0;
  padding-right: 13px;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

.ivr-use-case-arrow {
  position: absolute;
  right: 13px;
  bottom: 13px;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 12%, var(--white-color));
  color: var(--primary-color);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

.ivr-industries {
  display: grid;
  grid-template-columns: 1.3fr repeat(9, minmax(0, 1fr));
  align-items: center;
  margin-top: 26px;
  padding: 15px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 9%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--white-color) 88%, var(--light-bg));
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--heading-color) 3%, transparent);
}

.ivr-industries-heading {
  padding: 0 12px;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.7;
}

.ivr-industry {
  display: flex;
  min-width: 0;
  min-height: 74px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 5px;
  border-left: 1px solid
    color-mix(in srgb, var(--primary-color) 20%, transparent);
  color: var(--heading-color);
  text-align: center;
}

.ivr-industry-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 14%, var(--white-color));
  color: var(--primary-color);
  font-size: 20px;
}

.ivr-industry-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 11%, var(--white-color));
  color: var(--accent-color);
}

.ivr-industry > span:last-child {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}

@media (max-width: 1199.98px) {
  .ivr-use-cases-layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr);
    gap: 25px;
  }

  .ivr-use-cases-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ivr-use-case-card {
    min-height: 180px;
  }

  .ivr-industries {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    row-gap: 10px;
  }

  .ivr-industries-heading {
    min-height: 74px;
    display: flex;
    align-items: center;
  }

  .ivr-industry:nth-child(6) {
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .ivr-use-cases-section {
    padding: 44px 0 35px;
  }

  .ivr-use-cases-layout {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .ivr-use-cases-intro {
    max-width: 620px;
  }

  .ivr-use-cases-title {
    font-size: clamp(32px, 7vw, 42px);
    letter-spacing: -0.8px;
  }

  .ivr-use-cases-description {
    font-size: 13px;
  }

  .ivr-industries {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 12px 8px;
  }

  .ivr-industries-heading {
    grid-column: 1 / -1;
    min-height: 0;
    justify-content: center;
    padding: 7px;
    text-align: center;
  }

  .ivr-industry {
    border-left: 0;
  }
}

@media (max-width: 479.98px) {
  .ivr-use-cases-grid {
    grid-template-columns: 1fr;
  }

  .ivr-use-case-card {
    min-height: 0;
    padding: 15px;
  }

  .ivr-industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ivr-faq-section {
  padding: 58px 0 64px;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.ivr-faq-heading {
  max-width: 760px;
  margin: 0 auto 27px;
  text-align: center;
}

.ivr-faq-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
}

.ivr-faq-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1.2;
}

.ivr-faq-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.ivr-faq-heading p {
  margin: 0;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
}

.ivr-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 10px;
  margin: 0 auto;
}

.ivr-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 4px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.ivr-faq-item .accordion-button {
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
}

.ivr-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, var(--white-color));
}

.ivr-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 15%, transparent);
}

.ivr-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .ivr-faq-section {
    padding: 42px 0 48px;
  }

  .ivr-faq-heading {
    margin-bottom: 20px;
  }

  .ivr-faq-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .ivr-faq-heading p {
    font-size: 13px;
  }

  .ivr-faq-accordion {
    gap: 8px;
  }

  .ivr-faq-item .accordion-button {
    padding: 15px 16px;
    font-size: 13px;
  }

  .ivr-faq-item .accordion-body {
    padding: 0 16px 16px;
    font-size: 12px;
  }
}

/* ------------------IVR--------------------- */
/* ------------------IVR--------------------- */
.ivr-hero {
  background-image: url("images/ivr/hero.png");
  background-position: center;
  min-height: 670px;
}
.ivr-benefits-section {
  position: relative;
  overflow: hidden;
  padding: 72px 0;
  font-family: var(--paragraph-font);
}

.ivr-benefits-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 42px;
}

.ivr-benefits-visual {
  grid-column: 1;
  min-width: 0;

  overflow: hidden;
}

.ivr-benefits-visual img {
  display: block;
  width: 100%;
  height: 100%;

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

.ivr-benefits-content {
  min-width: 0;
  grid-column: 2;
}

.ivr-benefits-eyebrow {
  margin-bottom: 12px;
  color: var(--primary-color);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.ivr-benefits-title {
  margin: 0 0 15px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3vw, 43px);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -1.3px;
}

.ivr-benefits-title span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.ivr-benefits-description {
  margin: 0 0 25px;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.65;
}

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

.ivr-benefit-card {
  min-width: 0;
  min-height: 158px;
  padding: 17px 15px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, transparent);
  border-radius: 13px;
  background: var(--white-color);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}

.ivr-benefit-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary-color) 32%, transparent);
  box-shadow: 0 14px 30px
    color-mix(in srgb, var(--heading-color) 10%, transparent);
}

.ivr-benefit-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ivr-benefit-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(
    in srgb,
    var(--primary-color) 14.000000000000002%,
    transparent
  );
  color: var(--primary-color);
  font-size: 20px;
}

.ivr-benefit-icon-accent {
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  color: var(--accent-color);
}

.ivr-benefit-card h3 {
  margin: 0;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.ivr-benefit-card p {
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1199.98px) {
  .ivr-benefits-layout {
    gap: 28px;
  }

  .ivr-benefit-card {
    padding: 15px 12px;
  }

  .ivr-benefit-card-heading {
    gap: 8px;
  }

  .ivr-benefit-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
}

@media (max-width: 991.98px) {
  .ivr-benefits-section {
    padding: 55px 0;
  }

  .ivr-benefits-layout {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .ivr-benefits-visual {
    grid-column: 1;
    width: min(100%, 760px);
    min-height: 0;
    margin: 0 auto;
  }

  .ivr-benefits-visual img {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .ivr-benefits-content {
    grid-column: 1;
    max-width: 760px;
    margin: 0 auto;
  }
}

@media (max-width: 575.98px) {
  .ivr-benefits-section {
    padding: 42px 0;
  }

  .ivr-benefits-layout {
    gap: 30px;
  }

  .ivr-benefits-visual img {
    aspect-ratio: 1 / 1;
  }

  .ivr-benefits-eyebrow {
    font-size: 10px;
    letter-spacing: 2px;
  }

  .ivr-benefits-title {
    font-size: 30px;
    letter-spacing: -0.7px;
  }

  .ivr-benefits-description {
    font-size: 13px;
  }

  .ivr-benefits-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .ivr-benefit-card {
    min-height: 0;
    padding: 14px 11px;
  }

  .ivr-benefit-card-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .ivr-benefit-card h3 {
    font-size: 12px;
  }

  .ivr-benefit-card p {
    font-size: 11px;
  }
}
/* ------------------rcs--------------------- */
/* ------------------rcs--------------------- */
.rcs-hero {
  background-image: url("images/rcs/hero.png");
  background-position: center;
  min-height: 670px;
}
.rcs-hero-section {
  overflow: hidden;
  padding: 56px 0 64px;
  background:
    radial-gradient(
      circle at 84% 48%,
      rgba(79, 168, 197, 0.13),
      transparent 35%
    ),
    var(--white-color);
}

.rcs-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.9fr);
  align-items: center;
  gap: 30px;
}

.rcs-hero-content {
  min-width: 0;
}

.rcs-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
}

.rcs-hero-title {
  max-width: 800px;
  margin: 0 0 14px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(34px, 3.4vw, 48px);
  font-weight: 700;
  letter-spacing: -1.8px;
  line-height: 1.1;
}

.rcs-hero-title > span:first-child {
  color: var(--primary-color);
}

.rcs-hero-title .rcs-hero-title-period {
  color: var(--accent-color);
}

.rcs-hero-description {
  max-width: 720px;
  margin: 0 0 26px;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.6;
}

.rcs-hero-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.rcs-hero-feature {
  display: flex;
  min-height: 136px;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  border: 1px solid rgba(79, 168, 197, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 5px 18px rgba(29, 53, 87, 0.04);
}

.rcs-hero-feature-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 19px;
}

.rcs-hero-feature-icon-accent {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.rcs-hero-feature h2 {
  margin: 7px 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

.rcs-hero-feature p {
  margin: 0;
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.5;
}

.rcs-hero-cta {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0 6px;
  padding: 0 28px;
  border-radius: 9px;
  background: var(--primary-color);
  color: var(--white-color);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.rcs-hero-cta:hover {
  transform: translateY(-2px);
  background: var(--heading-color);
  color: var(--white-color);
}

.rcs-hero-cta i {
  font-size: 18px;
}

.rcs-hero-visual {
  display: grid;
  min-width: 0;
  min-height: 560px;
  margin: 0;
  place-items: center;
  border-radius: 28px;
  background: radial-gradient(
    circle,
    rgba(79, 168, 197, 0.2),
    rgba(79, 168, 197, 0.04) 68%,
    transparent 69%
  );
}

.rcs-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 620px;
  object-fit: contain;
}

.rcs-hero-image-placeholder {
  display: grid;
  width: 100%;
  min-height: 440px;
  place-items: center;
  border: 2px dashed rgba(79, 168, 197, 0.36);
  border-radius: 24px;
  color: var(--heading-color);
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 1199.98px) {
  .rcs-hero-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.85fr);
    gap: 20px;
  }

  .rcs-hero-feature {
    min-height: 150px;
    flex-direction: column;
    gap: 4px;
  }

  .rcs-hero-feature h2 {
    margin-top: 4px;
  }
}

@media (max-width: 991.98px) {
  .rcs-hero-section {
    padding: 48px 0;
  }

  .rcs-hero-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rcs-hero-content {
    max-width: 820px;
    margin: 0 auto;
  }

  .rcs-hero-visual {
    width: min(100%, 640px);
    min-height: 400px;
    margin: 0 auto;
  }

  .rcs-hero-image-placeholder {
    min-height: 360px;
  }

  .rcs-hero-feature {
    min-height: 130px;
    flex-direction: row;
  }
}

@media (max-width: 575.98px) {
  .rcs-hero-section {
    padding: 38px 0;
  }

  .rcs-hero-title {
    font-size: 34px;
    letter-spacing: -1.1px;
  }

  .rcs-hero-description {
    font-size: 13px;
  }

  .rcs-hero-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .rcs-hero-feature {
    min-height: 0;
    flex-direction: column;
    gap: 4px;
    padding: 12px 10px;
  }

  .rcs-hero-feature-icon {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
    font-size: 17px;
  }

  .rcs-hero-feature h2 {
    margin: 4px 0 6px;
    font-size: 11px;
  }

  .rcs-hero-feature p {
    font-size: 10px;
  }

  .rcs-hero-cta {
    min-height: 48px;
    margin-left: 0;
    padding: 0 20px;
    font-size: 13px;
  }

  .rcs-hero-visual {
    min-height: 280px;
  }

  .rcs-hero-image-placeholder {
    min-height: 260px;
  }
}

.rcs-benefits-section {
  padding: 24px 0 42px;
}

.rcs-benefits-layout {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  padding: 26px;
  border-radius: 28px;
  background: rgba(79, 168, 197, 0.08);
}

.rcs-benefits-intro {
  margin: 0 0 18px;
  padding: 0 8px;
}

.rcs-benefits-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
}

.rcs-benefits-title {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 700;
  letter-spacing: -1.2px;
  line-height: 1.12;
  white-space: nowrap;
}

.rcs-benefits-title span {
  display: inline;
  color: var(--primary-color);
}

.rcs-benefits-intro > p {
  max-width: 620px;
  margin: 0;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.55;
}

.rcs-benefit {
  display: flex;
  min-height: 170px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  border-left: 1px solid rgba(79, 168, 197, 0.2);
  text-align: center;
}

.rcs-benefit:first-child {
  border-left: 0;
}

.rcs-benefit-icon {
  display: inline-grid;
  width: 62px;
  height: 62px;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.15);
  color: var(--primary-color);
  font-size: 26px;
}

.rcs-benefit-accent .rcs-benefit-icon {
  background: rgba(227, 90, 60, 0.13);
  color: var(--accent-color);
}

.rcs-benefit h3 {
  margin: 0 0 5px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.rcs-benefit p {
  max-width: 190px;
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.45;
}

@media (max-width: 1199.98px) {
  .rcs-benefits-intro {
    padding: 0 4px;
  }

  .rcs-benefit {
    padding: 8px 12px;
  }

  .rcs-benefit h3 {
    font-size: 13px;
  }

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

@media (max-width: 991.98px) {
  .rcs-benefits-layout {
    padding: 24px 18px;
  }

  .rcs-benefits-intro > p {
    max-width: 680px;
  }
}

@media (max-width: 767.98px) {
  .rcs-benefits-section {
    padding: 12px 0 30px;
  }

  .rcs-benefits-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    padding: 22px 16px;
    border-radius: 20px;
  }

  .rcs-benefits-intro {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding: 0 2px;
  }

  .rcs-benefits-title {
    font-size: clamp(23px, 5vw, 30px);
    letter-spacing: -0.8px;
    white-space: normal;
  }

  .rcs-benefits-intro > p {
    font-size: 12px;
  }

  .rcs-benefit {
    min-height: 155px;
    padding: 8px 12px;
  }

  .rcs-benefit:nth-child(2n) {
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .rcs-benefit-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .rcs-benefit h3 {
    font-size: 11px;
  }

  .rcs-benefit p {
    font-size: 10px;
  }
}

.rcs-conversation-section {
  overflow: hidden;
  padding: 56px 0 46px;
  background:
    radial-gradient(
      circle at 86% 34%,
      rgba(79, 168, 197, 0.12),
      transparent 34%
    ),
    var(--white-color);
}

.rcs-conversation-main {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(36px, 7vw, 100px);
  padding: 0 24px 42px;
}

.rcs-conversation-intro {
  max-width: 620px;
}

.rcs-conversation-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
}

.rcs-conversation-title {
  margin: 0 0 18px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.04;
}

.rcs-conversation-title > span:first-of-type {
  color: var(--primary-color);
}

.rcs-conversation-title .rcs-conversation-period {
  color: var(--accent-color);
}

.rcs-conversation-intro > p {
  max-width: 600px;
  margin: 0;
  color: var(--text-color);
  font-size: 15px;
  line-height: 1.6;
}

.rcs-conversation-features {
  position: relative;
  display: grid;
  gap: 20px;
  padding: 10px 0 10px 42px;
}

.rcs-conversation-feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
}

.rcs-conversation-feature::before {
  position: absolute;
  left: -47px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  background: var(--primary-color);
  box-shadow: 0 0 0 1px rgba(79, 168, 197, 0.35);
  content: "";
}

.rcs-conversation-feature-accent::before {
  background: var(--accent-color);
  box-shadow: 0 0 0 1px rgba(227, 90, 60, 0.35);
}

.rcs-conversation-icon {
  display: inline-grid;
  width: 82px;
  height: 82px;
  flex: 0 0 82px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 32px;
}

.rcs-conversation-feature-accent .rcs-conversation-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.rcs-conversation-feature h3 {
  margin: 0 0 6px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.rcs-conversation-feature p {
  max-width: 400px;
  margin: 0;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.5;
}

.rcs-conversation-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px 20px;
  border: 1px solid rgba(79, 168, 197, 0.2);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
}

.rcs-conversation-stat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 4px 22px;
}

.rcs-conversation-stat + .rcs-conversation-stat {
  border-left: 1px solid rgba(79, 168, 197, 0.3);
}

.rcs-conversation-stat-icon {
  display: inline-grid;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  place-items: center;
  border-radius: 16px;
  background: rgba(79, 168, 197, 0.14);
  color: var(--primary-color);
  font-size: 30px;
}

.rcs-conversation-stat-accent .rcs-conversation-stat-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.rcs-conversation-stat-copy strong {
  display: block;
  margin-bottom: 2px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -2px;
  line-height: 1;
}

.rcs-conversation-stat-accent .rcs-conversation-stat-copy strong {
  color: var(--accent-color);
}

.rcs-conversation-stat-copy h3 {
  margin: 3px 0 5px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.rcs-conversation-stat-copy p {
  max-width: 250px;
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .rcs-conversation-main {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .rcs-conversation-title {
    font-size: clamp(30px, 4vw, 38px);
  }

  .rcs-conversation-features {
    gap: 24px;
    padding-left: 34px;
  }

  .rcs-conversation-feature {
    gap: 14px;
  }

  .rcs-conversation-feature::before {
    left: -39px;
  }

  .rcs-conversation-icon {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
    font-size: 26px;
  }

  .rcs-conversation-feature h3 {
    font-size: 15px;
  }

  .rcs-conversation-feature p {
    font-size: 12px;
  }

  .rcs-conversation-stat {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 4px 18px;
  }
}

@media (max-width: 767.98px) {
  .rcs-conversation-section {
    padding: 40px 0 32px;
  }

  .rcs-conversation-main {
    grid-template-columns: 1fr;
    gap: 38px;
    padding: 0 4px 32px;
  }

  .rcs-conversation-title {
    max-width: 620px;
    font-size: clamp(30px, 6vw, 38px);
  }

  .rcs-conversation-intro > p {
    font-size: 14px;
  }

  .rcs-conversation-features {
    width: min(100%, 600px);
    gap: 18px;
    padding-left: 30px;
  }

  .rcs-conversation-features::before {
    left: 7px;
  }

  .rcs-conversation-feature::before {
    left: -29px;
    width: 12px;
    height: 12px;
  }

  .rcs-conversation-stats {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 18px;
  }

  .rcs-conversation-stat {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 18px 8px;
  }

  .rcs-conversation-stat + .rcs-conversation-stat {
    border-top: 1px solid rgba(79, 168, 197, 0.25);
    border-left: 0;
  }

  .rcs-conversation-stat-copy strong {
    font-size: 34px;
  }
}

@media (max-width: 479.98px) {
  .rcs-conversation-title {
    font-size: 29px;
    letter-spacing: -1px;
  }

  .rcs-conversation-feature {
    align-items: flex-start;
    gap: 12px;
  }

  .rcs-conversation-icon {
    width: 54px;
    height: 54px;
    flex-basis: 54px;
    font-size: 22px;
  }

  .rcs-conversation-feature h3 {
    font-size: 14px;
  }

  .rcs-conversation-feature p {
    font-size: 11px;
  }

  .rcs-conversation-stat {
    gap: 14px;
  }

  .rcs-conversation-stat-icon {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    font-size: 24px;
  }
}

.rcs-steps-section {
  overflow: hidden;
  padding: 48px 0 40px;
  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(79, 168, 197, 0.1),
      transparent 36%
    ),
    var(--white-color);
}

.rcs-steps-layout {
  display: grid;
  grid-template-columns: minmax(260px, 0.9fr) minmax(0, 2.1fr);
  align-items: center;
  gap: clamp(26px, 4vw, 58px);
  padding: 0 18px 34px;
}

.rcs-steps-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

.rcs-steps-title {
  margin: 0 0 14px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  letter-spacing: -1.3px;
  line-height: 1.08;
}

.rcs-steps-title > span:first-of-type {
  color: var(--primary-color);
}

.rcs-steps-title .rcs-steps-period {
  color: var(--accent-color);
}

.rcs-steps-intro > p {
  max-width: 480px;
  margin: 0;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.6;
}

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

.rcs-step {
  min-width: 0;
}

.rcs-step-visual {
  position: relative;
  display: grid;
  width: 112px;
  height: 112px;
  margin: 0 auto 16px;
  place-items: center;
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.12);
  color: var(--primary-color);
  font-size: 38px;
}

.rcs-step-accent .rcs-step-visual {
  background: rgba(227, 90, 60, 0.11);
  color: var(--accent-color);
}

.rcs-step-number {
  position: absolute;
  top: 2px;
  left: 0;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid var(--white-color);
  border-radius: 50%;
  background: var(--primary-color);
  color: var(--white-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  font-weight: 600;
}

.rcs-step-accent .rcs-step-number {
  background: var(--accent-color);
}

.rcs-step h3 {
  margin: 0 0 7px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.rcs-step p {
  margin: 0;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

.rcs-steps-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 18px 12px;
  border-radius: 22px;
  background: rgba(79, 168, 197, 0.08);
}

.rcs-steps-stat {
  padding: 4px 14px;
  text-align: center;
}

.rcs-steps-stat + .rcs-steps-stat {
  border-left: 1px solid rgba(79, 168, 197, 0.28);
}

.rcs-steps-stat strong {
  display: block;
  margin-bottom: 4px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.rcs-steps-stat-accent strong {
  color: var(--accent-color);
}

.rcs-steps-stat h3 {
  margin: 0 0 5px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.rcs-steps-stat p {
  margin: 0;
  color: var(--text-color);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1199.98px) {
  .rcs-steps-layout {
    grid-template-columns: minmax(230px, 0.8fr) minmax(0, 2fr);
    gap: 30px;
    padding-right: 8px;
    padding-left: 8px;
  }

  .rcs-steps-grid {
    gap: 14px;
  }

  .rcs-step-visual {
    width: 96px;
    height: 96px;
    font-size: 32px;
  }
}

@media (max-width: 991.98px) {
  .rcs-steps-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .rcs-steps-intro {
    max-width: 650px;
  }

  .rcs-steps-grid {
    gap: 22px;
  }

  .rcs-step-visual {
    width: 104px;
    height: 104px;
  }
}

@media (max-width: 767.98px) {
  .rcs-steps-section {
    padding: 38px 0 30px;
  }

  .rcs-steps-layout {
    gap: 26px;
    padding: 0 4px 28px;
  }

  .rcs-steps-title {
    font-size: clamp(27px, 6vw, 34px);
  }

  .rcs-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 18px;
  }

  .rcs-step-visual {
    width: 88px;
    height: 88px;
    margin-right: 0;
    margin-left: 0;
    font-size: 30px;
  }

  .rcs-steps-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 0;
    padding: 16px 10px;
  }

  .rcs-steps-stat:nth-child(3) {
    border-left: 0;
  }
}

@media (max-width: 479.98px) {
  .rcs-steps-title {
    font-size: 27px;
    letter-spacing: -0.8px;
  }

  .rcs-steps-grid {
    gap: 20px 12px;
  }

  .rcs-step-visual {
    width: 76px;
    height: 76px;
    font-size: 26px;
  }

  .rcs-step-number {
    width: 29px;
    height: 29px;
    font-size: 10px;
  }

  .rcs-step h3 {
    font-size: 12px;
  }

  .rcs-step p {
    font-size: 11px;
  }

  .rcs-steps-stats {
    padding-right: 6px;
    padding-left: 6px;
  }

  .rcs-steps-stat {
    padding: 4px 8px;
  }

  .rcs-steps-stat strong {
    font-size: 28px;
  }

  .rcs-steps-stat h3 {
    font-size: 11px;
  }

  .rcs-steps-stat p {
    font-size: 10px;
  }
}

.rcs-difference-section {
  overflow: hidden;
  padding: 48px 0 56px;
  background:
    radial-gradient(
      circle at 84% 48%,
      rgba(79, 168, 197, 0.08),
      transparent 34%
    ),
    var(--white-color);
}

.rcs-difference-heading {
  max-width: 860px;
  margin: 0 auto 34px;
  text-align: center;
}

.rcs-difference-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
  color: var(--heading-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.rcs-difference-title {
  margin: 0 0 12px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 700;
  letter-spacing: -1.3px;
  line-height: 1.12;
}

.rcs-difference-title > span:first-of-type {
  color: var(--primary-color);
}

.rcs-difference-title .rcs-difference-period {
  color: var(--accent-color);
}

.rcs-difference-heading > p {
  max-width: 800px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.6;
}

.rcs-difference-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.rcs-difference-item {
  position: relative;
  z-index: 1;
  min-width: 0;
  text-align: center;
}

.rcs-difference-icon {
  display: grid;
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  place-items: center;
  border: 7px solid var(--white-color);
  border-radius: 50%;
  background: rgba(79, 168, 197, 0.13);
  color: var(--primary-color);
  font-size: 33px;
  box-shadow: 0 0 0 1px rgba(79, 168, 197, 0.04);
}

.rcs-difference-item-accent .rcs-difference-icon {
  background: rgba(227, 90, 60, 0.12);
  color: var(--accent-color);
}

.rcs-difference-item h3 {
  margin: 0 0 7px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.rcs-difference-item p {
  max-width: 270px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 991.98px) {
  .rcs-difference-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 22px;
  }

  .rcs-difference-grid::before {
    display: none;
  }

  .rcs-difference-item h3 {
    font-size: 13px;
  }
}

@media (max-width: 575.98px) {
  .rcs-difference-section {
    padding: 36px 0 40px;
  }

  .rcs-difference-heading {
    margin-bottom: 26px;
  }

  .rcs-difference-title {
    font-size: 27px;
    letter-spacing: -0.8px;
  }

  .rcs-difference-heading > p {
    font-size: 12px;
  }

  .rcs-difference-grid {
    gap: 24px 12px;
  }

  .rcs-difference-icon {
    width: 76px;
    height: 76px;
    margin-bottom: 11px;
    border-width: 5px;
    font-size: 27px;
  }

  .rcs-difference-item h3 {
    font-size: 12px;
  }

  .rcs-difference-item p {
    font-size: 11px;
  }
}

.rcs-faq-section {
  padding: 50px 0 62px;
  background: var(--white-color);
  font-family: var(--paragraph-font);
}

.rcs-faq-heading {
  max-width: 720px;
  margin: 0 auto 26px;
  text-align: center;
}

.rcs-faq-eyebrow {
  margin-bottom: 9px;
  color: var(--primary-color);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}

.rcs-faq-title {
  margin: 0 0 9px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.rcs-faq-title span {
  color: var(--primary-color);
}

.rcs-faq-heading > p {
  margin: 0;
  color: var(--text-color);
  font-size: 13px;
  line-height: 1.55;
}

.rcs-faq-accordion {
  display: grid;
  max-width: 900px;
  gap: 9px;
  margin: 0 auto;
}

.rcs-faq-item {
  overflow: hidden;
  border: 1px solid rgba(79, 168, 197, 0.2) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 4px 16px rgba(29, 53, 87, 0.04);
}

.rcs-faq-item .accordion-button {
  padding: 16px 19px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
  box-shadow: none;
}

.rcs-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: rgba(79, 168, 197, 0.06);
}

.rcs-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(79, 168, 197, 0.15);
}

.rcs-faq-item .accordion-body {
  padding: 0 19px 17px;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 12px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .rcs-faq-section {
    padding: 38px 0 46px;
  }

  .rcs-faq-heading {
    margin-bottom: 20px;
  }

  .rcs-faq-heading > p {
    font-size: 12px;
  }

  .rcs-faq-accordion {
    gap: 8px;
  }

  .rcs-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 12px;
  }

  .rcs-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 11px;
  }
}

@media (min-width: 1200px) {
  .navbar .communication-nav-controls,
  .navbar .digital-marketing-nav-controls {
    position: relative;
  }

  .navbar .communication-nav-controls .dropdown-menu,
  .navbar .digital-marketing-nav-controls .dropdown-menu {
    position: absolute;
    top: 100%;
    right: auto;
    bottom: auto;
    left: 0;
    margin-top: 0.125rem;
  }
}
/* ---------------- SEO PAGE ---------------- */
.seo-hero {
  background-image: url("images/seo/hero.png");
  background-position: center;
  min-height: 670px;
}
.seo-page-sections {
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.seo-page-sections .container {
  max-width: 1320px;
}

.seo-section-heading {
  max-width: 800px;
  margin: 0 auto 30px;
  text-align: center;
}

.seo-section-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.3 !important;
}

.seo-section-heading h2 {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.seo-section-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.seo-section-heading > p {
  max-width: 760px;
  margin: 0 auto;
  color: var(--text-color);
  font-size: 14px;
  line-height: 1.6;
}

.seo-services-section {
  padding: 42px 0 46px;
  background: var(--white-color);
}

.seo-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-service-card {
  display: flex;
  min-width: 0;
  min-height: 112px;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  border-radius: 10px;
  background: var(--white-color);
  box-shadow: 0 4px 14px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.seo-service-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.seo-service-card strong {
  color: var(--heading-color);
  font-size: 16px;
  line-height: 1.4;
}

.seo-service-card > span:last-child > span {
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-size: 13px;
  line-height: 1.5;
}

.seo-service-icon,
.seo-process-icon,
.seo-benefit-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
}

.seo-service-icon {
  width: 60px;
  height: 60px;
  font-size: 25px;
}

.seo-icon-blue {
  background: color-mix(in srgb, var(--primary-color) 14%, white);
  color: var(--primary-color);
}

.seo-icon-orange {
  background: color-mix(in srgb, var(--accent-color) 13%, white);
  color: var(--accent-color);
}

.seo-icon-green {
  background: #ddf9ee;
  color: #0c9d7c;
}

.seo-icon-purple {
  background: #eee9ff;
  color: #7956d8;
}

.seo-icon-yellow {
  background: #fff3d8;
  color: #df9800;
}

.seo-icon-pink {
  background: #ffe8f0;
  color: #df3973;
}

.seo-process-section {
  padding: 42px 0 46px;
  background: color-mix(in srgb, var(--primary-color) 7%, white);
}

.seo-process-section .seo-section-heading {
  margin-bottom: 46px;
}

.seo-process-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
  margin: 0;
  padding: 38px 0 0;
  list-style: none;
}

.seo-process-step {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  min-height: 280px;
  padding: 42px 14px 18px;
  border-radius: 9px;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
  font-family: var(--paragraph-font) !important;
}

.seo-process-number {
  position: absolute;
  top: -25px;
  left: 12px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 16%, white);
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.seo-process-icon {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 80px;
  height: 80px;
  border: 1px solid currentColor;
  transform: translateX(-50%);
  font-size: 30px !important;
}

.seo-process-step > strong {
  display: flex;
  min-height: 34px;
  align-items: center;
  margin: 0 0 6px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

.seo-process-step > p {
  min-height: 68px;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
}

.seo-process-step > ul {
  display: grid;
  width: 100%;
  gap: 7px;
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}

.seo-process-step > ul li {
  position: relative;
  padding-left: 20px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
}

.seo-process-step > ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary-color);
  content: "\F26A";
  font-family: "bootstrap-icons";
  font-size: 14px !important;
}

.seo-benefits-section {
  padding: 56px 0 60px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--primary-color) 5%, white),
    var(--white-color)
  );
}

.seo-benefits-section .seo-section-heading {
  margin-bottom: 38px;
}

.seo-impact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 30px;
}

.seo-impact-column {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seo-impact-feature {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.seo-impact-column-left .seo-impact-feature {
  justify-content: flex-end;
  text-align: right;
}

.seo-impact-copy {
  display: grid;
  max-width: 260px;
  gap: 4px;
}

.seo-impact-copy strong {
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.seo-impact-copy > span {
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.seo-impact-feature .seo-benefit-icon {
  width: 58px;
  height: 58px;
  font-size: 23px;
}

.seo-impact-visual {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.98) 0 29%,
    rgba(199, 233, 245, 0.86) 32%,
    rgba(199, 233, 245, 0.36) 48%,
    rgba(140, 188, 212, 0.1) 68%,
    transparent 74%
  );
  box-shadow:
    inset 0 18px 26px rgba(255, 255, 255, 0.98),
    0 24px 42px rgba(65, 121, 147, 0.08);
}

.seo-impact-visual::before,
.seo-impact-visual::after {
  position: absolute;
  border-radius: 50%;
  content: "";
}

.seo-impact-visual::before {
  inset: 7%;
  border: 1px dashed rgba(84, 141, 168, 0.4);
  box-shadow:
    inset 0 0 0 12px rgba(255, 255, 255, 0.2),
    0 0 0 14px rgba(84, 141, 168, 0.04);
}

.seo-impact-visual::after {
  inset: 16%;
  border: 1px solid rgba(84, 141, 168, 0.2);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 22px rgba(128, 191, 220, 0.12);
}

.seo-impact-orbit {
  position: absolute;
  border-radius: 50%;
}

.seo-impact-orbit-outer {
  width: 94%;
  height: 94%;
  border: 1.5px dashed rgba(84, 141, 168, 0.48);
  box-shadow: inset 0 0 18px rgba(84, 141, 168, 0.06);
  animation: seoPulseOrbit 4.4s ease-in-out infinite;
}

.seo-impact-orbit-inner {
  width: 72%;
  height: 72%;
  border: 1px solid rgba(84, 141, 168, 0.26);
  background: rgba(255, 255, 255, 0.08);
  animation: seoPulseOrbit 4.4s ease-in-out infinite 0.5s;
}

.seo-impact-core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58%;
  height: 58%;
  align-content: center;
  justify-items: center;
  gap: 2px;
  border: 1px solid rgba(84, 141, 168, 0.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #ffffff 0%, #edf9ff 55%, #dfeefb 100%);
  box-shadow:
    0 22px 46px rgba(43, 115, 150, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -10px 18px rgba(124, 197, 230, 0.14);
  color: var(--primary-color);
}

.seo-impact-core::before {
  position: absolute;
  top: 10%;
  right: 18%;
  width: 18%;
  height: 18%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  content: "";
}

.seo-impact-core > i {
  font-size: 46px;
  line-height: 1;
}

.seo-impact-core > strong {
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: 0.08em;
}

@keyframes seoPulseOrbit {
  0%,
  100% {
    transform: scale(0.98);
    opacity: 0.78;
  }
  50% {
    transform: scale(1.02);
    opacity: 1;
  }
}

.seo-industries-section {
  margin: 0 10px 24px;
  padding: 42px 0 36px;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 90% 20%,
      color-mix(in srgb, var(--primary-color) 12%, transparent),
      transparent 30%
    ),
    color-mix(in srgb, var(--primary-color) 7%, white);
}

.seo-industries-section .seo-section-heading {
  margin-bottom: 28px;
}

.seo-industries-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.seo-industry-card {
  display: flex;
  min-width: 0;
  min-height: 230px;
  align-items: center;
  flex-direction: column;
  padding: 16px 12px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 8%, white);
  border-radius: 10px;
  background: var(--white-color);
  text-align: center;
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.seo-industry-icon {
  display: grid;
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  margin-bottom: 10px;
  place-items: center;
  border-radius: 50%;
  font-size: 26px;
}

.seo-industry-card h3 {
  margin: 0 0 7px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.seo-industry-card p {
  flex: 1 1 auto;
  margin: 0 0 12px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}

.seo-industry-card a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-decoration: none;
}

.seo-industry-card a:hover,
.seo-industry-card a:focus-visible {
  color: var(--heading-color);
}

@media (max-width: 991.98px) {
  .seo-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .seo-process-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 50px;
  }

  .seo-process-list::before {
    display: none;
  }

  .seo-process-step > p {
    min-height: 60px;
  }

  .seo-impact-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .seo-impact-visual {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 280px);
  }

  .seo-impact-column-left {
    grid-column: 1;
  }

  .seo-impact-column-right {
    grid-column: 2;
  }

  .seo-impact-column-left .seo-impact-feature {
    flex-direction: row-reverse;
    text-align: left;
  }

  .seo-industries-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .seo-page-sections .container {
    padding-right: 20px;
    padding-left: 20px;
  }

  .seo-services-section,
  .seo-benefits-section {
    padding-top: 34px;
    padding-bottom: 36px;
  }

  .seo-section-heading {
    margin-bottom: 24px;
  }

  .seo-benefits-section {
    padding-top: 40px;
    padding-bottom: 42px;
  }

  .seo-impact-layout {
    gap: 20px 16px;
  }

  .seo-impact-column {
    gap: 20px;
  }

  .seo-impact-feature {
    align-items: flex-start;
    gap: 10px;
  }

  .seo-impact-feature .seo-benefit-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  .seo-industries-section {
    margin-right: 8px;
    margin-left: 8px;
    padding: 34px 0;
  }
}

@media (max-width: 575.98px) {
  .seo-page-sections .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .seo-section-heading h2 {
    font-size: 25px;
  }

  .seo-process-section {
    padding: 34px 0 38px;
  }

  .seo-process-section .seo-section-heading {
    margin-bottom: 24px;
  }

  .seo-benefits-section .seo-section-heading {
    margin-bottom: 22px;
  }

  .seo-benefits-section {
    padding-top: 34px;
    padding-bottom: 36px;
  }

  .seo-section-heading > p {
    font-size: 13px;
  }

  .seo-services-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .seo-service-card {
    min-height: 92px;
    padding: 14px;
  }

  .seo-process-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 10px;
  }

  .seo-process-step > p {
    min-height: 72px;
  }

  .seo-process-step {
    padding-right: 10px;
    padding-left: 10px;
  }

  .seo-process-step > strong {
    font-size: 12px !important;
  }

  .seo-process-step > ul li {
    font-size: 10px !important;
  }

  .seo-process-icon {
    width: 72px;
    height: 72px;
    font-size: 27px !important;
  }

  .seo-impact-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .seo-impact-visual {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 250px);
  }

  .seo-impact-column-left,
  .seo-impact-column-right {
    grid-column: 1;
    gap: 18px;
  }

  .seo-impact-column-left .seo-impact-feature {
    flex-direction: row;
    text-align: left;
  }

  .seo-impact-copy {
    max-width: none;
  }

  .seo-impact-copy strong {
    font-size: 13px !important;
  }

  .seo-impact-copy > span {
    font-size: 11px !important;
  }

  .seo-industries-section {
    margin: 0 6px 16px;
    padding: 30px 0;
  }

  .seo-industries-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .seo-industry-card {
    min-height: 220px;
    padding: 14px 10px;
  }

  .seo-industry-icon {
    width: 56px;
    height: 56px;
    font-size: 23px;
  }

  .seo-industry-card h3 {
    font-size: 13px !important;
  }

  .seo-industry-card p {
    font-size: 10px !important;
  }
}

.seo-faq-section {
  padding: 48px 0 56px;
  background: var(--white-color);
}

.seo-faq-section .seo-section-heading {
  margin-bottom: 30px;
}

.seo-faq-accordion {
  display: grid;
  max-width: 920px;
  gap: 12px;
  margin: 0 auto;
}

.seo-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.seo-faq-item .accordion-header {
  margin: 0;
}

.seo-faq-item .accordion-button {
  gap: 16px;
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  background: var(--white-color);
  box-shadow: none;
}

.seo-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.seo-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.seo-faq-item .accordion-button::after {
  flex: 0 0 auto;
}

.seo-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

@media (max-width: 575.98px) {
  .seo-faq-section {
    padding: 36px 0 42px;
  }

  .seo-faq-accordion {
    gap: 9px;
  }

  .seo-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 13px !important;
  }

  .seo-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 12px !important;
  }
}

/* ---------SMO Page----------- */
.smo-hero {
  background-image: url("images/smo/hero.png");
  background-position: center;
  min-height: 670px;
}
.smo-page-sections {
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.smo-page-sections .container {
  max-width: 1320px;
}

.smo-section-heading {
  max-width: 850px;
  margin: 0 auto 28px;
  text-align: center;
}

.smo-section-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.3 !important;
}

.smo-section-heading h2 {
  margin: 0 0 9px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.smo-section-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.smo-section-heading > p {
  max-width: 740px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.smo-services-section {
  margin: 0 10px;
  padding: 38px 0 40px;
  border-radius: 16px;
  background:
    radial-gradient(
      circle at 90% 15%,
      color-mix(in srgb, var(--primary-color) 10%, transparent),
      transparent 30%
    ),
    color-mix(in srgb, var(--primary-color) 6%, white);
}

.smo-services-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.smo-service-card {
  display: flex;
  min-width: 0;
  min-height: 104px;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 8%, white);
  border-radius: 10px;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.smo-service-icon,
.smo-impact-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
}

.smo-service-icon {
  width: 58px;
  height: 58px;
  font-size: 24px;
}

.smo-icon-purple {
  background: #eee9ff;
  color: #7956d8;
}

.smo-icon-coral {
  background: color-mix(in srgb, var(--accent-color) 13%, white);
  color: var(--accent-color);
}

.smo-icon-green {
  background: #ddf9ee;
  color: #0c9d7c;
}

.smo-icon-blue {
  background: color-mix(in srgb, var(--primary-color) 14%, white);
  color: var(--primary-color);
}

.smo-icon-yellow {
  background: #fff3d8;
  color: #df9800;
}

.smo-icon-pink {
  background: #ffe8f0;
  color: #df3973;
}

.smo-service-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.smo-service-card strong {
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.smo-service-card > span:last-child > span {
  color: var(--text-color);
  font-family: var(--paragraph-font) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
}

.smo-impact-section {
  padding: 52px 0 56px;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--primary-color) 5%, transparent),
      transparent 50%
    ),
    var(--white-color);
}

.smo-impact-section .smo-section-heading {
  margin-bottom: 32px;
}

.smo-impact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px) minmax(0, 1fr);
  align-items: center;
  gap: 28px;
}

.smo-impact-column {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smo-impact-feature {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.smo-impact-column-left .smo-impact-feature {
  justify-content: flex-end;
  text-align: right;
}

.smo-impact-copy {
  display: grid;
  max-width: 260px;
  gap: 4px;
}

.smo-impact-copy strong {
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.smo-impact-copy > span {
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}

.smo-impact-icon {
  width: 58px;
  height: 58px;
  font-size: 23px;
}

.smo-impact-visual {
  position: relative;
  display: grid;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--primary-color) 15%, white) 0 34%,
    color-mix(in srgb, var(--primary-color) 7%, white) 35% 48%,
    transparent 49%
  );
}

.smo-impact-orbit {
  position: absolute;
  border: 1px dashed color-mix(in srgb, var(--primary-color) 55%, white);
  border-radius: 50%;
}

.smo-impact-orbit-outer {
  width: 94%;
  height: 94%;
}

.smo-impact-orbit-inner {
  width: 76%;
  height: 76%;
  border-style: solid;
  border-color: color-mix(in srgb, var(--primary-color) 28%, white);
}

.smo-impact-core {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58%;
  height: 58%;
  align-content: center;
  justify-items: center;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, white, #dff4ff);
  box-shadow: 0 12px 30px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
  color: var(--primary-color);
}

.smo-impact-core > i {
  font-size: 42px;
  line-height: 1;
}

.smo-impact-core > strong {
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.smo-process-section {
  padding: 52px 0 56px;
  background:
    radial-gradient(
      circle at 8% 18%,
      color-mix(in srgb, var(--primary-color) 8%, transparent),
      transparent 28%
    ),
    color-mix(in srgb, var(--primary-color) 5%, white);
}

.smo-process-section .smo-section-heading {
  margin-bottom: 34px;
}

.smo-process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smo-process-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 300px;
  flex-direction: column;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  border-radius: 14px;
  background: var(--white-color);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
  font-family: var(--paragraph-font) !important;
}

.smo-process-number {
  position: absolute;
  top: 18px;
  right: 18px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--primary-color) 11%, white);
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.smo-process-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin-bottom: 18px;
  place-items: center;
  border-radius: 16px;
  font-size: 25px;
}

.smo-process-card h3 {
  margin: 0 44px 9px 0;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.smo-process-card > p {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.smo-process-card > ul {
  display: grid;
  gap: 9px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--primary-color) 14%, white);
  list-style: none;
}

.smo-process-card > ul li {
  position: relative;
  padding-left: 22px;
  color: color-mix(in srgb, var(--heading-color) 82%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.smo-process-card > ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary-color);
  content: "\F26A";
  font-family: "bootstrap-icons";
  font-size: 15px;
}

.smo-process-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 18%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 8%, white);
}

.smo-process-note-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--white-color);
  color: var(--accent-color);
  font-size: 20px;
}

.smo-process-note > p {
  margin: 0;
  color: color-mix(in srgb, var(--heading-color) 82%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.smo-process-note > p strong {
  color: var(--heading-color);
  font-weight: 700;
}

.smo-process-note > a {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  background: var(--primary-color);
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.smo-process-note > a:hover,
.smo-process-note > a:focus-visible {
  transform: translateY(-1px);
  background: var(--heading-color);
  color: var(--white-color);
}

.smo-channels-section {
  padding: 58px 0 62px;
  background: var(--white-color);
}

.smo-channels-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(0, 1.22fr);
  align-items: center;
  gap: 42px;
}

.smo-channels-intro {
  max-width: 430px;
}

.smo-channels-intro h2 {
  margin: 0 0 14px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(27px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.smo-channels-intro h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.smo-channels-intro > p {
  margin: 0 0 20px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.smo-channels-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, white);
  border-radius: 7px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.smo-channels-link:hover,
.smo-channels-link:focus-visible {
  transform: translateY(-1px);
  background: var(--primary-color);
  color: var(--white-color);
}

.smo-channel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.smo-channel-card {
  min-width: 0;
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 11%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 3%, white);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.smo-channel-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px
    color-mix(in srgb, var(--heading-color) 8%, transparent);
}

.smo-channel-icon,
.smo-deliverable-icon {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  place-items: center;
  border-radius: 13px;
  font-size: 21px;
}

.smo-channel-card h3,
.smo-deliverable-card h3 {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.smo-channel-card > p {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.smo-channel-focus {
  display: block;
  padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15px;
  line-height: 1.45 !important;
}

.smo-deliverables-section {
  padding: 54px 0 58px;
  background:
    radial-gradient(
      circle at 90% 10%,
      color-mix(in srgb, var(--primary-color) 8%, transparent),
      transparent 30%
    ),
    color-mix(in srgb, var(--primary-color) 5%, white);
}

.smo-deliverables-section .smo-section-heading {
  margin-bottom: 32px;
}

.smo-deliverables-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.smo-deliverable-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 22px 18px 20px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 11%, white);
  border-radius: 12px;
  background: var(--white-color);
  box-shadow: 0 7px 22px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
}

.smo-deliverable-step {
  position: absolute;
  top: 16px;
  right: 16px;
  color: color-mix(in srgb, var(--primary-color) 55%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

.smo-deliverable-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 17px;
  border-radius: 14px;
  font-size: 22px;
}

.smo-deliverable-card h3 {
  padding-right: 22px;
}

.smo-deliverable-card > p {
  min-height: 58px;
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.smo-deliverable-card > ul {
  display: grid;
  gap: 10px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  list-style: none;
}

.smo-deliverable-card > ul li {
  position: relative;
  padding-left: 18px;
  color: color-mix(in srgb, var(--heading-color) 82%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.smo-deliverable-card > ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary-color);
  content: "\F26A";
  font-family: "bootstrap-icons";
  font-size: 14px;
}

.smo-deliverables-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 900px;
  margin: 20px auto 0;
  padding: 13px 16px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, white);
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary-color) 7%, white);
  color: var(--primary-color);
}

.smo-deliverables-note > i {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 15px;
}

.smo-deliverables-note > p {
  margin: 0;
  color: color-mix(in srgb, var(--heading-color) 82%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

@media (max-width: 991.98px) {
  .smo-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smo-channels-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .smo-channels-intro {
    max-width: 700px;
  }

  .smo-deliverables-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smo-process-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .smo-impact-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }

  .smo-impact-visual {
    grid-column: 1 / -1;
    grid-row: 1;
    width: min(100%, 280px);
  }

  .smo-impact-column-left {
    grid-column: 1;
  }

  .smo-impact-column-right {
    grid-column: 2;
  }

  .smo-impact-column-left .smo-impact-feature {
    flex-direction: row-reverse;
    text-align: left;
  }
}

@media (max-width: 767.98px) {
  .smo-services-section {
    margin: 0 8px;
    padding: 34px 0 36px;
  }

  .smo-section-heading {
    margin-bottom: 24px;
  }

  .smo-impact-section {
    padding: 40px 0 44px;
  }

  .smo-process-section {
    padding: 42px 0 46px;
  }

  .smo-channels-section,
  .smo-deliverables-section {
    padding: 42px 0 46px;
  }

  .smo-impact-layout {
    gap: 22px 16px;
  }

  .smo-impact-column {
    gap: 20px;
  }

  .smo-impact-feature {
    align-items: flex-start;
    gap: 10px;
  }

  .smo-impact-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
}

@media (max-width: 575.98px) {
  .smo-page-sections .container {
    padding-right: 16px;
    padding-left: 16px;
  }

  .smo-section-heading h2 {
    font-size: 25px;
  }

  .smo-section-heading > p {
    font-size: 12px !important;
  }

  .smo-services-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .smo-service-card {
    min-height: 88px;
    align-items: center;
    padding: 13px;
  }

  .smo-service-icon {
    width: 52px;
    height: 52px;
    font-size: 22px;
  }

  .smo-impact-section {
    padding: 36px 0 40px;
  }

  .smo-process-section {
    padding: 36px 0 40px;
  }

  .smo-channels-section,
  .smo-deliverables-section {
    padding: 36px 0 40px;
  }

  .smo-process-section .smo-section-heading {
    margin-bottom: 24px;
  }

  .smo-channels-layout {
    gap: 20px;
  }

  .smo-channels-intro h2 {
    font-size: 25px !important;
  }

  .smo-channels-intro > p {
    font-size: 12px !important;
  }

  .smo-channel-grid,
  .smo-deliverables-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .smo-channel-card {
    padding: 17px;
  }

  .smo-channel-icon {
    width: 42px;
    height: 42px;
    margin-bottom: 11px;
    font-size: 19px;
  }

  .smo-deliverables-section .smo-section-heading {
    margin-bottom: 22px;
  }

  .smo-deliverable-card {
    padding: 19px;
  }

  .smo-deliverable-card > p {
    min-height: 0;
  }

  .smo-process-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .smo-process-card {
    min-height: 0;
    padding: 20px;
  }

  .smo-process-card > ul {
    margin-top: 0;
  }

  .smo-process-note {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .smo-process-note > a {
    grid-column: 1 / -1;
    width: 100%;
  }

  .smo-impact-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .smo-impact-visual {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 240px);
  }

  .smo-impact-column-left,
  .smo-impact-column-right {
    grid-column: 1;
    gap: 18px;
  }

  .smo-impact-column-left .smo-impact-feature {
    flex-direction: row;
    text-align: left;
  }

  .smo-impact-copy {
    max-width: none;
  }

  .smo-impact-copy strong {
    font-size: 13px !important;
  }

  .smo-impact-copy > span {
    font-size: 11px !important;
  }
}

.smo-faq-section {
  padding: 48px 0 56px;
  background:
    radial-gradient(
      circle at 90% 15%,
      color-mix(in srgb, var(--primary-color) 7%, transparent),
      transparent 30%
    ),
    var(--white-color);
}

.smo-faq-heading {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
}

.smo-faq-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
}

.smo-faq-heading h2 {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.smo-faq-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
}

.smo-faq-heading > p {
  max-width: 660px;
  margin: 0 auto;
  color: var(--text-color);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.6;
}

.smo-faq-accordion {
  display: grid;
  max-width: 920px;
  gap: 12px;
  margin: 0 auto;
}

.smo-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.smo-faq-item .accordion-header {
  margin: 0;
}

.smo-faq-item .accordion-button {
  gap: 16px;
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  background: var(--white-color);
  box-shadow: none;
}

.smo-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.smo-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.smo-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-family: var(--paragraph-font);
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .smo-faq-section {
    padding: 36px 0 42px;
  }

  .smo-faq-heading {
    margin-bottom: 22px;
  }

  .smo-faq-heading h2 {
    font-size: 25px;
  }

  .smo-faq-accordion {
    gap: 9px;
  }

  .smo-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 13px;
  }

  .smo-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 12px;
  }
}
/* -----------influance-marketing--------------*/
.influencer-hero {
  background-image: url("images/influencer-marketing/hero.png");
  background-position: center;
  min-height: 670px;
}
.influencer-program-section {
  padding: 58px 0 64px;
  background:
    radial-gradient(
      circle at 4% 5%,
      color-mix(in srgb, var(--primary-color) 8%, transparent),
      transparent 27%
    ),
    color-mix(in srgb, var(--primary-color) 3%, white);
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.influencer-program-section .container {
  max-width: 1280px;
}

.influencer-program-heading {
  max-width: 850px;
  margin: 0 auto 30px;
  text-align: center;
}

.influencer-program-eyebrow {
  margin-bottom: 10px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  line-height: 1.4 !important;
}

.influencer-program-heading h2 {
  margin: 0 0 11px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

.influencer-program-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.influencer-program-heading > p {
  max-width: 740px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.influencer-program-intro {
  display: flex;
  max-width: 960px;
  align-items: center;
  gap: 18px;
  margin: 0 auto 26px;
  padding: 20px 24px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 16%, white);
  border-radius: 13px;
  background: var(--white-color);
  box-shadow: 0 7px 22px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
}

.influencer-program-intro-icon {
  display: grid;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 15px;
  background: color-mix(in srgb, var(--primary-color) 11%, white);
  color: var(--primary-color);
  font-size: 23px;
}

.influencer-program-intro h3 {
  margin: 0 0 5px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.influencer-program-intro p {
  margin: 0;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

.influencer-program-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.influencer-program-card {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 290px;
  flex-direction: column;
  padding: 22px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 11%, white);
  border-radius: 13px;
  background: var(--white-color);
  box-shadow: 0 7px 22px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.influencer-program-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px
    color-mix(in srgb, var(--heading-color) 9%, transparent);
}

.influencer-program-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 15px;
  place-items: center;
  border-radius: 15px;
  font-size: 22px;
}

.influencer-tone-purple {
  background: #eee9ff;
  color: #7956d8;
}

.influencer-tone-blue {
  background: color-mix(in srgb, var(--primary-color) 13%, white);
  color: var(--primary-color);
}

.influencer-tone-coral {
  background: color-mix(in srgb, var(--accent-color) 13%, white);
  color: var(--accent-color);
}

.influencer-tone-green {
  background: #ddf9ee;
  color: #0c9d7c;
}

.influencer-tone-yellow {
  background: #fff3d8;
  color: #df9800;
}

.influencer-tone-pink {
  background: #ffe8f0;
  color: #df3973;
}

.influencer-program-card-kicker {
  margin-bottom: 7px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  line-height: 1.3 !important;
}

.influencer-program-card h3 {
  margin: 0 0 8px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.influencer-program-card > p {
  margin: 0 0 16px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.influencer-program-card > ul {
  display: grid;
  gap: 9px;
  margin: auto 0 0;
  padding: 14px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--primary-color) 13%, white);
  list-style: none;
}

.influencer-program-card > ul li {
  position: relative;
  padding-left: 21px;
  color: color-mix(in srgb, var(--heading-color) 82%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

.influencer-program-card > ul li::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--primary-color);
  content: "\F26A";
  font-family: "bootstrap-icons";
  font-size: 14px;
}

.influencer-program-footer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 22px;
  padding: 18px 22px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 17%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 7%, white);
}

.influencer-program-footer-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--white-color);
  color: var(--accent-color);
  font-size: 19px;
}

.influencer-program-footer-copy strong {
  display: block;
  margin-bottom: 4px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.influencer-program-footer-copy p {
  margin: 0;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.influencer-program-cta {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 7px;
  background: var(--primary-color);
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.influencer-program-cta:hover,
.influencer-program-cta:focus-visible {
  transform: translateY(-1px);
  background: var(--heading-color);
  color: var(--white-color);
}

@media (max-width: 991.98px) {
  .influencer-program-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .influencer-program-card {
    min-height: 280px;
  }
}

@media (max-width: 767.98px) {
  .influencer-program-section {
    padding: 44px 0 48px;
  }

  .influencer-program-heading {
    margin-bottom: 24px;
  }

  .influencer-program-heading > p {
    font-size: 13px !important;
  }

  .influencer-program-intro {
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 20px;
    padding: 17px;
  }

  .influencer-program-grid {
    gap: 12px;
  }

  .influencer-program-card {
    min-height: 0;
    padding: 19px;
  }

  .influencer-program-footer {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .influencer-program-cta {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .influencer-program-section {
    padding: 36px 0 40px;
  }

  .influencer-program-heading {
    margin-bottom: 21px;
  }

  .influencer-program-eyebrow {
    font-size: 10px !important;
    letter-spacing: 1.1px !important;
  }

  .influencer-program-heading h2 {
    font-size: 26px !important;
  }

  .influencer-program-heading > p {
    font-size: 12px !important;
  }

  .influencer-program-intro {
    display: block;
    padding: 16px;
  }

  .influencer-program-intro-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    font-size: 20px;
  }

  .influencer-program-intro h3 {
    font-size: 15px !important;
  }

  .influencer-program-intro p {
    font-size: 12px !important;
  }

  .influencer-program-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .influencer-program-card {
    padding: 18px;
  }

  .influencer-program-footer {
    margin-top: 14px;
    padding: 14px;
  }

  .influencer-program-footer-copy strong {
    font-size: 13px !important;
  }
}

.influencer-creators-section {
  padding: 62px 0 58px;
  background: var(--white-color);
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.influencer-creators-section .container,
.influencer-campaign-section .container {
  max-width: 1280px;
}

.influencer-creators-heading {
  max-width: 840px;
  margin: 0 auto 34px;
  text-align: center;
}

.influencer-creators-heading h2 {
  margin: 0 0 11px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

.influencer-creators-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.influencer-creators-heading > p {
  max-width: 730px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

.influencer-creators-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
  align-items: start;
  gap: 30px;
}

.influencer-creators-aside {
  position: sticky;
  top: 24px;
  padding: 26px;
  border-radius: 15px;
  background:
    radial-gradient(
      circle at 90% 8%,
      color-mix(in srgb, var(--primary-color) 30%, transparent),
      transparent 38%
    ),
    var(--heading-color);
  color: var(--white-color);
}

.influencer-creators-aside-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 20px;
  place-items: center;
  border: 1px solid color-mix(in srgb, white 25%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, white 10%, transparent);
  color: var(--white-color);
  font-size: 23px;
}

.influencer-creators-aside h3 {
  margin: 0 0 10px;
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 23px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

.influencer-creators-aside > p {
  margin: 0 0 21px;
  color: color-mix(in srgb, white 80%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.influencer-creators-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, white 16%, transparent);
}

.influencer-creators-check > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #83e3c2;
  font-size: 16px;
}

.influencer-creators-check > span {
  color: color-mix(in srgb, white 88%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
}

.influencer-creator-types {
  display: grid;
  gap: 12px;
}

.influencer-creator-type {
  display: grid;
  grid-template-columns: 34px 48px minmax(0, 1fr);
  align-items: start;
  gap: 15px;
  padding: 19px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--primary-color) 3%, white);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.influencer-creator-type:hover {
  transform: translateX(3px);
  box-shadow: 0 8px 22px
    color-mix(in srgb, var(--heading-color) 7%, transparent);
}

.influencer-creator-type-number {
  padding-top: 3px;
  color: color-mix(in srgb, var(--primary-color) 60%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
}

.influencer-creator-type-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 14px;
  font-size: 20px;
}

.influencer-creator-type-copy {
  min-width: 0;
}

.influencer-creator-type-label {
  display: block;
  margin-bottom: 5px;
  color: var(--primary-color);
  font-family: var(--paragraph-font) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 1px;
  line-height: 1.4 !important;
}

.influencer-creator-type-copy h3 {
  margin: 0 0 6px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.influencer-creator-type-copy > p {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

.influencer-creator-fit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: color-mix(in srgb, var(--heading-color) 84%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}

.influencer-creator-fit::before {
  color: var(--accent-color);
  content: "\F26A";
  font-family: "bootstrap-icons";
  font-size: 13px;
}

.influencer-creators-disclaimer {
  margin: 17px 0 0;
  color: color-mix(in srgb, var(--heading-color) 64%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: right;
}

.influencer-campaign-section {
  padding: 56px 0 62px;
  background: var(--white-color);
  color: var(--white-color);
  font-family: var(--paragraph-font);
}

.influencer-campaign-panel {
  overflow: hidden;
  padding: 42px;
  border-radius: 18px;
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(in srgb, var(--primary-color) 32%, transparent),
      transparent 34%
    ),
    var(--heading-color);
}

.influencer-campaign-heading {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.influencer-campaign-eyebrow {
  margin-bottom: 10px;
  color: color-mix(in srgb, white 78%, var(--primary-color));
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px;
  line-height: 1.4 !important;
}

.influencer-campaign-heading h2 {
  margin: 0 0 10px;
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(27px, 3vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.influencer-campaign-heading h2 span {
  color: #91dfff;
  font-family: var(--secondary-heading-font) !important;
}

.influencer-campaign-heading > p {
  max-width: 680px;
  margin: 0 auto;
  color: color-mix(in srgb, white 76%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}

.influencer-campaign-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.influencer-campaign-timeline::before {
  position: absolute;
  top: 21px;
  right: 8%;
  left: 8%;
  height: 1px;
  background: color-mix(in srgb, white 24%, transparent);
  content: "";
}

.influencer-campaign-step {
  position: relative;
  min-width: 0;
  padding: 0 4px;
}

.influencer-campaign-step-number {
  position: absolute;
  top: -4px;
  right: 0;
  color: color-mix(in srgb, white 58%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

.influencer-campaign-step-icon {
  position: relative;
  z-index: 1;
  display: grid;
  width: 44px;
  height: 44px;
  margin-bottom: 17px;
  place-items: center;
  border: 1px solid color-mix(in srgb, white 22%, transparent);
  border-radius: 14px;
  background: color-mix(
    in srgb,
    var(--heading-color) 82%,
    var(--primary-color)
  );
  color: #91dfff;
  font-size: 18px;
}

.influencer-campaign-step h3 {
  margin: 0 0 7px;
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.influencer-campaign-step > p {
  margin: 0;
  color: color-mix(in srgb, white 72%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  line-height: 1.55 !important;
}

.influencer-campaign-measures {
  display: grid;
  grid-template-columns: minmax(230px, 1.35fr) repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
  margin-top: 36px;
  padding: 17px;
  border: 1px solid color-mix(in srgb, white 16%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, white 7%, transparent);
}

.influencer-campaign-measures-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px;
}

.influencer-campaign-measures-icon {
  display: grid;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, white 12%, transparent);
  color: #91dfff;
  font-size: 18px;
}

.influencer-campaign-measures-intro strong {
  display: block;
  margin-bottom: 3px;
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.influencer-campaign-measures-intro p {
  margin: 0;
  color: color-mix(in srgb, white 70%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

.influencer-campaign-metric {
  display: grid;
  min-height: 72px;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 9px;
  border-left: 1px solid color-mix(in srgb, white 15%, transparent);
  text-align: center;
}

.influencer-campaign-metric > i {
  color: #91dfff;
  font-size: 15px;
}

.influencer-campaign-metric > span {
  color: var(--white-color);
  font-family: var(--paragraph-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.influencer-campaign-metric > small {
  color: color-mix(in srgb, white 68%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 9px !important;
  line-height: 1.4 !important;
}

.influencer-campaign-footnote {
  margin: 12px 0 0;
  color: color-mix(in srgb, white 60%, transparent);
  font-family: var(--paragraph-font) !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  text-align: right;
}

@media (max-width: 991.98px) {
  .influencer-creators-layout {
    grid-template-columns: minmax(210px, 0.78fr) minmax(0, 1.22fr);
    gap: 20px;
  }

  .influencer-creators-aside {
    padding: 21px;
  }

  .influencer-creator-type {
    grid-template-columns: 28px 42px minmax(0, 1fr);
    gap: 11px;
    padding: 16px;
  }

  .influencer-creator-type-icon {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }

  .influencer-campaign-panel {
    padding: 34px;
  }

  .influencer-campaign-timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 26px;
  }

  .influencer-campaign-timeline::before {
    display: none;
  }

  .influencer-campaign-measures {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .influencer-campaign-measures-intro {
    grid-column: 1 / -1;
    padding: 0 4px 12px;
    border-bottom: 1px solid color-mix(in srgb, white 15%, transparent);
  }

  .influencer-campaign-metric:nth-child(2) {
    border-left: 0;
  }
}

@media (max-width: 767.98px) {
  .influencer-creators-section,
  .influencer-campaign-section {
    padding: 44px 0 48px;
  }

  .influencer-creators-heading {
    margin-bottom: 25px;
  }

  .influencer-creators-heading > p {
    font-size: 13px !important;
  }

  .influencer-creators-layout {
    grid-template-columns: 1fr;
  }

  .influencer-creators-aside {
    position: static;
  }

  .influencer-creators-aside h3 {
    font-size: 20px !important;
  }

  .influencer-creator-type {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  .influencer-campaign-panel {
    padding: 28px 22px;
  }

  .influencer-campaign-heading {
    margin-bottom: 28px;
  }

  .influencer-campaign-timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 15px;
  }

  .influencer-campaign-measures {
    gap: 7px;
    margin-top: 27px;
    padding: 13px;
  }
}

@media (max-width: 575.98px) {
  .influencer-creators-section,
  .influencer-campaign-section {
    padding: 36px 0 40px;
  }

  .influencer-creators-heading h2,
  .influencer-campaign-heading h2 {
    font-size: 26px !important;
  }

  .influencer-creators-heading > p,
  .influencer-campaign-heading > p {
    font-size: 12px !important;
  }

  .influencer-creators-layout {
    gap: 15px;
  }

  .influencer-creators-aside {
    padding: 19px;
  }

  .influencer-creators-aside-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 15px;
  }

  .influencer-creator-types {
    gap: 9px;
  }

  .influencer-creator-type {
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 6px 11px;
    padding: 15px;
  }

  .influencer-creator-type-number {
    grid-column: 1;
    grid-row: 1;
  }

  .influencer-creator-type-icon {
    grid-column: 1;
    grid-row: 2;
    width: 40px;
    height: 40px;
  }

  .influencer-creator-type-copy {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .influencer-creator-type-copy h3 {
    font-size: 15px !important;
  }

  .influencer-creators-disclaimer {
    font-size: 10px !important;
    text-align: left;
  }

  .influencer-campaign-panel {
    padding: 24px 17px;
    border-radius: 14px;
  }

  .influencer-campaign-eyebrow {
    font-size: 9px !important;
    letter-spacing: 1px;
  }

  .influencer-campaign-timeline {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .influencer-campaign-step {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    column-gap: 13px;
    padding: 0 0 20px;
  }

  .influencer-campaign-step:not(:last-child)::after {
    position: absolute;
    top: 44px;
    bottom: 0;
    left: 20px;
    width: 1px;
    background: color-mix(in srgb, white 20%, transparent);
    content: "";
  }

  .influencer-campaign-step-number {
    top: 0;
    right: 0;
  }

  .influencer-campaign-step-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    margin: 0;
    border-radius: 12px;
  }

  .influencer-campaign-step h3,
  .influencer-campaign-step > p {
    grid-column: 2;
  }

  .influencer-campaign-step h3 {
    padding-right: 28px;
    font-size: 13px !important;
  }

  .influencer-campaign-measures {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 15px;
    padding: 12px;
  }

  .influencer-campaign-measures-intro {
    grid-column: 1;
    padding: 0 0 12px;
  }

  .influencer-campaign-metric {
    grid-template-columns: 22px minmax(75px, auto) minmax(0, 1fr);
    min-height: 0;
    justify-items: start;
    gap: 9px;
    padding: 10px 4px;
    border-top: 1px solid color-mix(in srgb, white 13%, transparent);
    border-left: 0;
    text-align: left;
  }

  .influencer-campaign-metric > small {
    justify-self: end;
    text-align: right;
  }

  .influencer-campaign-footnote {
    font-size: 9px !important;
    text-align: left;
  }
}

.influencer-program-section,
.influencer-campaign-section {
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.influencer-creators-section {
  background: var(--white-color);
}

.influencer-tone-purple,
.influencer-tone-blue,
.influencer-tone-coral,
.influencer-tone-green,
.influencer-tone-yellow,
.influencer-tone-pink {
  background: color-mix(in srgb, var(--primary-color) 13%, white);
  color: var(--primary-color);
}

.influencer-program-card,
.influencer-program-intro,
.influencer-creator-type,
.influencer-campaign-panel {
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, white);
  background: var(--white-color);
  box-shadow: 0 7px 22px
    color-mix(in srgb, var(--heading-color) 6%, transparent);
  color: var(--heading-color);
}

.influencer-creators-aside {
  border: 1px solid color-mix(in srgb, var(--primary-color) 15%, white);
  background: color-mix(in srgb, var(--primary-color) 8%, white);
  color: var(--heading-color);
}

.influencer-creators-aside h3,
.influencer-campaign-heading h2,
.influencer-campaign-step h3,
.influencer-campaign-measures-intro strong,
.influencer-campaign-metric > span {
  color: var(--heading-color);
}

.influencer-creators-aside > p,
.influencer-creators-check > span,
.influencer-campaign-heading > p,
.influencer-campaign-step > p,
.influencer-campaign-measures-intro p,
.influencer-campaign-metric > small {
  color: color-mix(in srgb, var(--heading-color) 78%, white);
}

.influencer-creators-aside-icon {
  border-color: color-mix(in srgb, var(--primary-color) 18%, white);
  background: var(--white-color);
  color: var(--primary-color);
}

.influencer-creators-check {
  border-color: color-mix(in srgb, var(--primary-color) 15%, white);
}

.influencer-creators-check > i,
.influencer-campaign-step-icon,
.influencer-campaign-measures-icon,
.influencer-campaign-metric > i {
  color: var(--primary-color);
}

.influencer-campaign-heading h2 span {
  color: var(--accent-color);
}

.influencer-campaign-eyebrow {
  color: var(--primary-color);
}

.influencer-campaign-timeline::before {
  background: color-mix(in srgb, var(--primary-color) 28%, white);
}

.influencer-campaign-step-icon,
.influencer-campaign-measures-icon {
  border: 1px solid color-mix(in srgb, var(--primary-color) 16%, white);
  background: color-mix(in srgb, var(--primary-color) 10%, white);
}

.influencer-campaign-measures {
  border-color: color-mix(in srgb, var(--primary-color) 14%, white);
  background: color-mix(in srgb, var(--primary-color) 4%, white);
}

.influencer-campaign-measures-intro {
  border-color: color-mix(in srgb, var(--primary-color) 14%, white);
}

.influencer-campaign-metric {
  border-color: color-mix(in srgb, var(--primary-color) 15%, white);
}

.influencer-campaign-footnote {
  color: color-mix(in srgb, var(--heading-color) 70%, white);
}

.influencer-program-heading > p,
.influencer-creators-heading > p {
  font-size: 15px !important;
}

.influencer-program-intro h3,
.influencer-creator-type-copy h3,
.influencer-program-card h3 {
  font-size: 18px !important;
}

.influencer-program-intro p,
.influencer-program-card > p,
.influencer-creator-type-copy > p,
.influencer-creators-aside > p,
.influencer-creators-check > span,
.influencer-campaign-heading > p,
.influencer-campaign-step > p {
  font-size: 13px !important;
}

.influencer-program-card > ul li,
.influencer-creator-fit,
.influencer-campaign-metric > small {
  font-size: 12px !important;
}

.influencer-program-card-kicker,
.influencer-creator-type-label,
.influencer-campaign-eyebrow {
  font-size: 11px !important;
}

.influencer-program-footer-copy p,
.influencer-campaign-measures-intro p,
.influencer-campaign-footnote {
  font-size: 12px !important;
}

.influencer-campaign-step h3,
.influencer-campaign-measures-intro strong,
.influencer-campaign-metric > span {
  font-size: 14px !important;
}

@media (max-width: 575.98px) {
  .influencer-program-heading > p,
  .influencer-creators-heading > p {
    font-size: 13px !important;
  }

  .influencer-program-intro h3,
  .influencer-creator-type-copy h3,
  .influencer-program-card h3 {
    font-size: 16px !important;
  }

  .influencer-program-intro p,
  .influencer-program-card > p,
  .influencer-creator-type-copy > p,
  .influencer-creators-aside > p,
  .influencer-creators-check > span,
  .influencer-campaign-heading > p,
  .influencer-campaign-step > p {
    font-size: 12px !important;
  }
}

.influencer-faq-section {
  padding: 54px 0 62px;
  background: var(--white-color);
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.influencer-faq-heading {
  max-width: 780px;
  margin: 0 auto 30px;
  text-align: center;
}

.influencer-faq-heading h2 {
  margin: 0 0 10px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: clamp(27px, 2.8vw, 36px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

.influencer-faq-heading h2 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font) !important;
}

.influencer-faq-heading > p {
  max-width: 680px;
  margin: 0 auto;
  color: color-mix(in srgb, var(--heading-color) 76%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

.influencer-faq-accordion {
  display: grid;
  max-width: 920px;
  gap: 12px;
  margin: 0 auto;
}

.influencer-faq-item {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white) !important;
  border-radius: 10px !important;
  background: var(--white-color);
  box-shadow: 0 5px 16px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
}

.influencer-faq-item .accordion-header {
  margin: 0;
}

.influencer-faq-item .accordion-button {
  gap: 16px;
  padding: 17px 20px;
  color: var(--heading-color);
  font-family: var(--paragraph-font) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  background: var(--white-color);
  box-shadow: none;
}

.influencer-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--primary-color) 5%, white);
}

.influencer-faq-item .accordion-button:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary-color) 18%, transparent);
}

.influencer-faq-item .accordion-body {
  padding: 0 20px 18px;
  color: color-mix(in srgb, var(--heading-color) 80%, white);
  font-family: var(--paragraph-font) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

@media (max-width: 767.98px) {
  .influencer-faq-section {
    padding: 44px 0 48px;
  }
}

@media (max-width: 575.98px) {
  .influencer-faq-section {
    padding: 36px 0 42px;
  }

  .influencer-faq-heading {
    margin-bottom: 22px;
  }

  .influencer-faq-heading h2 {
    font-size: 25px !important;
  }

  .influencer-faq-heading > p {
    font-size: 12px !important;
  }

  .influencer-faq-accordion {
    gap: 9px;
  }

  .influencer-faq-item .accordion-button {
    padding: 14px 15px;
    font-size: 13px !important;
  }

  .influencer-faq-item .accordion-body {
    padding: 0 15px 15px;
    font-size: 12px !important;
  }
}

/* Privacy Policy Page */
.privacy-page {
  color: var(--heading-color);
  font-family: var(--paragraph-font);
}

.privacy-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(54px, 7vw, 88px) 0;
  background:
    radial-gradient(
      circle at 84% 45%,
      color-mix(in srgb, var(--primary-color) 12%, transparent),
      transparent 30%
    ),
    linear-gradient(
      120deg,
      color-mix(in srgb, var(--primary-color) 7%, white),
      white 72%
    );
}

.privacy-hero .container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center;
  gap: 42px;
}

.privacy-hero-content {
  max-width: 790px;
}

.privacy-eyebrow,
.privacy-section-kicker,
.privacy-toc-heading {
  color: var(--primary-color);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  line-height: 1.4;
}

.privacy-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.privacy-eyebrow i {
  font-size: 14px;
}

.privacy-hero h1 {
  margin: 0 0 15px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: -1.6px;
  line-height: 1.08;
}

.privacy-hero h1 span {
  color: var(--primary-color);
  font-family: var(--secondary-heading-font);
  font-weight: 500;
}

.privacy-hero-copy {
  max-width: 740px;
  margin: 0;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-size: 15px;
  line-height: 1.75;
}

.privacy-hero-copy strong {
  color: var(--heading-color);
}

.privacy-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 21px;
}

.privacy-date-row > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: color-mix(in srgb, var(--heading-color) 73%, white);
  font-size: 12px;
  line-height: 1.5;
}

.privacy-date-row i {
  color: var(--primary-color);
}

.privacy-date-row strong {
  color: var(--heading-color);
}

.privacy-hero-mark {
  position: relative;
  display: grid;
  width: 220px;
  aspect-ratio: 1;
  margin: 0 auto;
  place-items: center;
}

.privacy-hero-ring {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--primary-color) 28%, white);
  border-radius: 50%;
}

.privacy-hero-ring-one {
  inset: 5px;
}

.privacy-hero-ring-two {
  inset: 25px;
  border-style: dashed;
  animation: privacyOrbit 22s linear infinite;
}

.privacy-hero-shield {
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--primary-color) 20%, white);
  border-radius: 30px;
  background: var(--white-color);
  box-shadow: 0 18px 45px
    color-mix(in srgb, var(--heading-color) 12%, transparent);
  color: var(--primary-color);
  font-size: 46px;
  animation: privacyShieldFloat 3.8s ease-in-out infinite;
}

.privacy-content-section {
  padding: 48px 0 72px;
  background: color-mix(in srgb, var(--primary-color) 2.5%, white);
}

.privacy-content-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
}

.privacy-toc {
  position: sticky;
  top: 24px;
  padding: 20px 17px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 14%, white);
  border-radius: 12px;
  background: var(--white-color);
  box-shadow: 0 8px 24px
    color-mix(in srgb, var(--heading-color) 5%, transparent);
}

.privacy-toc-heading {
  margin: 0 0 12px;
  font-size: 10px;
}

.privacy-toc nav {
  display: grid;
  gap: 2px;
}

.privacy-toc nav a {
  padding: 8px 9px;
  border-radius: 6px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    padding 0.2s ease;
}

.privacy-toc nav a:hover,
.privacy-toc nav a:focus-visible {
  padding-left: 13px;
  background: color-mix(in srgb, var(--primary-color) 8%, white);
  color: var(--primary-color);
}

.privacy-toc-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding: 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-color) 7%, white);
  color: color-mix(in srgb, var(--heading-color) 80%, white);
  font-size: 10px;
  line-height: 1.5;
}

.privacy-toc-note i {
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--accent-color);
}

.privacy-policy-content {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.privacy-policy-card,
.privacy-contact-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  padding: 24px;
  scroll-margin-top: 24px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  border-radius: 12px;
  background: var(--white-color);
  box-shadow: 0 6px 20px
    color-mix(in srgb, var(--heading-color) 4%, transparent);
}

.privacy-section-icon,
.privacy-contact-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--primary-color) 10%, white);
  color: var(--primary-color);
  font-size: 19px;
}

.privacy-section-kicker {
  margin: 0 0 5px;
  font-size: 9px;
  letter-spacing: 1.2px;
}

.privacy-policy-card h2,
.privacy-contact-card h2 {
  margin: 0 0 11px;
  color: var(--heading-color);
  font-family: var(--paragraph-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
}

.privacy-policy-card p,
.privacy-contact-card p {
  margin: 0 0 11px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-size: 13px;
  line-height: 1.7;
}

.privacy-policy-card p:last-child,
.privacy-contact-card p:last-child {
  margin-bottom: 0;
}

.privacy-policy-card strong,
.privacy-contact-card strong {
  color: var(--heading-color);
  font-weight: 600;
}

.privacy-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.privacy-prompt {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 12%, white);
  border-radius: 8px;
  background: color-mix(in srgb, var(--primary-color) 3%, white);
}

.privacy-prompt strong {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
  font-size: 12px;
}

.privacy-prompt strong i {
  color: var(--primary-color);
  font-size: 14px;
}

.privacy-prompt p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
}

.privacy-policy-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 15px;
  padding: 0;
  list-style: none;
}

.privacy-policy-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: color-mix(in srgb, var(--heading-color) 78%, white);
  font-size: 12px;
  line-height: 1.6;
}

.privacy-policy-list li i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary-color);
}

.privacy-editor-note,
.privacy-inline-callout {
  padding: 12px 14px;
  border-left: 3px solid var(--accent-color);
  border-radius: 0 7px 7px 0;
  background: color-mix(in srgb, var(--accent-color) 6%, white);
}

.privacy-editor-note {
  font-size: 11px !important;
}

.privacy-inline-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 15px;
}

.privacy-inline-callout > i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--accent-color);
}

.privacy-inline-callout p {
  margin: 0;
  font-size: 12px;
}

.privacy-rights-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.privacy-rights-row span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--primary-color) 13%, white);
  border-radius: 7px;
  background: color-mix(in srgb, var(--primary-color) 4%, white);
  color: var(--heading-color);
  font-size: 11px;
  font-weight: 600;
}

.privacy-rights-row i {
  color: var(--primary-color);
}

.privacy-contact-card {
  border-color: color-mix(in srgb, var(--primary-color) 25%, white);
  background:
    radial-gradient(
      circle at 100% 0,
      color-mix(in srgb, var(--primary-color) 9%, transparent),
      transparent 40%
    ),
    var(--white-color);
}

.privacy-contact-icon {
  background: var(--primary-color);
  color: var(--white-color);
}

.privacy-contact-card address {
  display: grid;
  gap: 8px;
  margin: 13px 0 0;
  font-style: normal;
}

.privacy-contact-card address span,
.privacy-contact-card address a {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  color: color-mix(in srgb, var(--heading-color) 80%, white);
  font-size: 12px;
  line-height: 1.5;
  text-decoration: none;
}

.privacy-contact-card address a:hover {
  color: var(--primary-color);
}

.privacy-contact-card address i {
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--primary-color);
}

@keyframes privacyOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes privacyShieldFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 991.98px) {
  .privacy-hero .container {
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 20px;
  }

  .privacy-hero-mark {
    width: 180px;
  }

  .privacy-content-layout {
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 18px;
  }

  .privacy-toc {
    padding: 16px 12px;
  }

  .privacy-policy-card,
  .privacy-contact-card {
    padding: 20px;
  }
}

@media (max-width: 767.98px) {
  .privacy-hero {
    padding: 48px 0 42px;
  }

  .privacy-hero .container {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-hero-mark {
    position: absolute;
    top: 0;
    right: 12px;
    width: 105px;
    opacity: 0.3;
  }

  .privacy-hero-ring-two {
    inset: 13px;
  }

  .privacy-hero-shield {
    width: 52px;
    height: 52px;
    border-radius: 17px;
    font-size: 24px;
  }

  .privacy-content-section {
    padding: 28px 0 46px;
  }

  .privacy-content-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-toc {
    position: static;
  }

  .privacy-toc nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .privacy-toc-note {
    max-width: 460px;
  }
}

@media (max-width: 575.98px) {
  .privacy-hero {
    padding: 39px 0 34px;
  }

  .privacy-hero h1 {
    font-size: 39px;
    letter-spacing: -1px;
  }

  .privacy-hero-copy {
    font-size: 13px;
  }

  .privacy-hero-mark {
    top: 4px;
    right: 4px;
    width: 76px;
  }

  .privacy-date-row {
    display: grid;
    gap: 7px;
    margin-top: 16px;
  }

  .privacy-date-row > span {
    font-size: 11px;
  }

  .privacy-toc nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-policy-content {
    gap: 10px;
  }

  .privacy-policy-card,
  .privacy-contact-card {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 11px;
    padding: 16px 14px;
    border-radius: 10px;
  }

  .privacy-section-icon,
  .privacy-contact-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 16px;
  }

  .privacy-policy-card h2,
  .privacy-contact-card h2 {
    font-size: 19px;
  }

  .privacy-policy-card p,
  .privacy-contact-card p {
    font-size: 12px;
  }

  .privacy-prompt-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .privacy-rights-row {
    gap: 6px;
  }

  .privacy-rights-row span {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .privacy-hero-ring-two,
  .privacy-hero-shield {
    animation: none;
  }
}