/* =========================================================
   UZMI – Custom fixes (loaded after bizro-responsive.css)
   Fixes: heading typography, text-on-image overlap, mobile
   alignment, image overflow/cutting, "Background" section.
   ========================================================= */

/* ---- 1. Image safety: never let an image overflow / get cut ---- */
.page-wrapper { overflow-x: hidden; }

img { max-width: 100%; height: auto; }

.about-one__img-box img,
.about-two__img img,
.about-three__img img,
.about-one__img-box > div > img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
}

/* Keep the decorative "5+ years" badge inside the viewport on
   tablets too (template only fixed it below 768px). */
@media only screen and (max-width: 991px) {
  .about-three__experience { right: 0; }
  .about-two__shape-1,
  .about-three__shape-1 { display: none; }
}

/* ---- 2. Professional, consistent body text (left-aligned, not justified) ---- */
.about-two-text,
.vision-box,
.about-text,
.about-two__text,
.about-three__text,
.cta-one__text {
  text-align: left;
  -webkit-hyphens: none;
  hyphens: none;
}

/* ---- 3. Heading polish (works with the corrected dark color) ---- */
.about-title,
.section-title__title,
.section-title-three__title,
.cta-one__title,
.about-two-title,
.vision-subtitle {
  letter-spacing: -0.01em;
}

/* =========================================================
   4. Responsive layout for the custom "modern" blocks.
   These replaced the template's __right wrappers, so they
   lost the responsive top-margin → text was overlapping the
   image on mobile. Restore proper spacing & remove the
   desktop-only side padding.
   ========================================================= */
@media only screen and (max-width: 991px) {
  .vision-modern,
  .about-modern,
  .about-two-modern {
    padding-left: 0;
    padding-right: 0;
    margin-top: 50px;
    text-align: left;
  }

  /* On the "Our Vision" row the image column comes first and the
     text second, so give the text real breathing room. */
  .about-one .vision-modern { margin-top: 60px; }
}

@media only screen and (max-width: 767px) {
  .vision-modern,
  .about-modern,
  .about-two-modern {
    margin-top: 40px;
  }

  .about-one .vision-modern { margin-top: 50px; }

  .about-two-title { font-size: 24px; }
  .about-title,
  .section-title__title { font-size: 28px; line-height: 1.25; }
}

/* =========================================================
   5. "Background" (CTA One) section – was a flat low-contrast
   grey. Give it an intentional, professional dark-teal look.
   ========================================================= */
.cta-one {
  background-color: #0d121e;
  background-image: linear-gradient(135deg, #0d121e 0%, #122a3a 60%, #0e3f44 100%);
}

.cta-one__title { color: #ffffff; }

.cta-one__text { color: rgba(255, 255, 255, 0.82); }

.cta-one__btn.thm-btn {
  background-color: var(--bizro-base);
  color: #06262a;
}

.cta-one__btn.thm-btn:hover {
  background-color: #ffffff;
  color: #0d121e;
}