/* css/about-viewchat.css
   Scope: about.html only (ViewChat). Safe to include globally because everything is under .vc-about.
*/

.vc-about {
  overflow-x: hidden; /* small safety net for widened hero media */
}

/* ------------------------------ */
/* HERO */
/* ------------------------------ */

.vc-about-hero {
  padding-top: 140px; /* keeps content below header */
  padding-bottom: 56px;
}

@media (max-width: 991.98px) {
  .vc-about-hero {
    padding-top: 100px;
    padding-bottom: 40px;
  }
}

/* Only the FIRST hero row (title + desc) must be left-aligned */
.vc-about-hero > .container > .row:nth-of-type(1) {
  justify-content: flex-start !important;
}

/* Keep the SECOND hero row (image + CTA) centered (default bootstrap) */
.vc-about-hero > .container > .row:nth-of-type(2) {
  justify-content: center !important;
}

/* Push the title/desc block a bit lower (requested) */
.vc-about-hero > .container > .row:nth-of-type(1) {
  margin-top: 10px;
}

.vc-about-hero__title,
.vc-about-hero__desc {
  text-align: left;
}

/* Desktop-only: increase typography ~1.5x (mobile stays as-is) */
@media (min-width: 992px) {
  .vc-about-hero__title {
    font-size: 3.15rem;
    line-height: 1.08;
    margin-bottom: 18px;
  }

  .vc-about-hero__desc {
    font-size: 1.3rem;
    line-height: 1.55;
    margin-bottom: 0;
  }

  .vc-about-h2 {
    font-size: 2.55rem;
    line-height: 1.1;
  }

  .vc-about-subtitle,
  .vc-about-subhead,
  .vc-about-trusted__subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
  }

  .vc-about-list,
  .vc-about-bullets {
    font-size: 1.05rem;
    line-height: 1.7;
  }
}

.vc-about-hero__media {
  margin-top: 22px;
  border-radius: 18px;
  overflow: visible; /* do not crop the image */
}

/* Ensure images never get cropped by fixed heights/object-fit rules */
.vc-about-hero__img,
.vc-about-split__img,
.vc-about-card > img {
  width: 100%;
  height: auto !important;
  display: block;
  object-fit: contain !important;
  border-radius: 2%;
}

/* Make hero image a bit wider (+10~20px) without breaking layout */
@media (min-width: 768px) {
  .vc-about-hero__media {
    width: calc(100% + 16px);
    margin-left: -8px;
    margin-right: -8px;
  }
}

@media (min-width: 992px) {
  .vc-about-hero__media {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
  }
}

/* CTA under hero image */
.vc-about-hero__cta {
  margin-top: 22px;
  text-align: center;
}

.vc-about-download-btn {
  min-width: 220px;
  padding-left: 36px;
  padding-right: 36px;
}

.vc-about-download-sub {
  margin-top: 10px;
  margin-bottom: 4px;
}

.vc-about-download-cta {
  margin-bottom: 0;
  font-weight: 800;
  color:rgb(18, 0, 54);
}

/* ------------------------------ */
/* SPLIT SECTIONS (Patent / AR / Global) */
/* ------------------------------ */

.vc-about-split {
  padding: 72px 0;
}

@media (max-width: 991.98px) {
  .vc-about-split {
    padding: 52px 0;
  }
}

.vc-about-split__media {
  border-radius: 18px;
  overflow: visible; /* do not crop bottom */
}

@media (max-width: 991.98px) {
  .vc-about-split__media {
    margin-bottom: 22px;
  }
}

/* Shared: subtitle/subhead + bullets must start from the same left edge */
.vc-about-subtitle,
.vc-about-subhead {
  margin-top: 18px;
  margin-bottom: 14px;
  padding-left: 0;
  font-weight: 800;
  color:rgb(18, 0, 54);
}

/* Reset any custom bullets and use "disc inside" so left edge matches subtitle (Patent/AR/Global) */
.vc-about-list,
.vc-about-bullets {
  list-style: disc inside;
  padding-left: 0;
  margin: 0;
}

.vc-about-list li,
.vc-about-bullets li {
  margin-top: 10px;
  padding-left: 0;
}

.vc-about-list li::before,
.vc-about-bullets li::before {
  content: none !important; /* override previous pseudo bullets */
}

/* Bullet paragraphs shouldn't add extra vertical gaps */
.vc-about-bullets p {
  display: inline;
  margin: 0;
}

/* ------------------------------ */
/* Trusted Technology */
/* ------------------------------ */

.vc-about-trusted {
  padding: 72px 0;
}

@media (max-width: 991.98px) {
  .vc-about-trusted {
    padding: 52px 0;
  }
}

.vc-about-trusted__head {
  text-align: center;
  margin-bottom: 26px;
}

.vc-about-trusted__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

@media (max-width: 991.98px) {
  .vc-about-trusted__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Fix: remove any cropping in cards */
.vc-about-trusted .vc-about-card {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  overflow: visible !important;
  height: auto !important;
  padding: 0px;
  background: #fff;
}

.vc-about-trusted .vc-about-card > img {
  border-radius: 12px;
  max-height: none !important;
  object-fit: contain !important;
}

/* Keep stacked global title readable */
.vc-about-h2--stacked {
  white-space: normal;
}

/* Trusted Technology: force bottom alignment inside equal-height grid cells */
.vc-about-trusted__grid > article.vc-about-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: stretch !important;
}

.vc-about-trusted__grid > article.vc-about-card > img {
  margin-top: auto !important;
}

@media (max-width: 767.98px) {
  .vc-about .vc-about-hero__title { font-size: 2rem !important; line-height: 1.15 !important; }
  .vc-about .vc-about-hero__desc { font-size: 1rem !important; line-height: 1.55 !important; }

  .vc-about .vc-about-h2 { font-size: 2rem !important; line-height: 1.2 !important; }
  .vc-about .vc-about-subtitle,
  .vc-about .vc-about-subhead,
  .vc-about .vc-about-trusted__subtitle { font-size: 1rem !important; line-height: 1.55 !important; }

  .vc-about .vc-about-list,
  .vc-about .vc-about-bullets,
  .vc-about p,
  .vc-about li { font-size: 1rem !important; line-height: 1.65 !important; }

  .vc-about .vc-about-download-btn { font-size: 1rem !important; }
  .vc-about .vc-about-download-sub { font-size: 0.75rem !important; }
  .vc-about .vc-about-download-cta { font-size: 1.1rem !important; }
}

  .vc-about .vc-about-download-sub { font-size: 0.75rem !important; }
  .vc-about .vc-about-download-cta { font-size: 1.1rem !important; }

  /* Render newline characters (\n) as real line breaks */
.vc-about [data-i18n],
.vc-about [data-i18n-html],
.vc-about p,
.vc-about li,
.vc-about h1,
.vc-about h2,
.vc-about h3,
.vc-about span {
  white-space: pre-line;
}

/* More spacing between: h2 + subtitle + ul inside split content */
.vc-about .vc-about-split__content {
  display: flex;
  flex-direction: column;
  gap: 25px; 
}

/* чтобы gap работал предсказуемо и не суммировался с margin */
.vc-about .vc-about-split__content > .vc-about-h2,
.vc-about .vc-about-split__content > .vc-about-subtitle,
.vc-about .vc-about-split__content > .vc-about-list {
  margin: 0 !important;
}

/* чуть меньше на мобилке, если нужно */
@media (max-width: 767.98px) {
  .vc-about .vc-about-split__content {
    gap: 14px;
  }
}