/**
 * First-paint / CLS guards. Desktop carousel layout stays intact;
 * image cropping and compact stacks apply on mobile only.
 */
:root {
  --heading-font: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Segoe UI", Arial, sans-serif;
  --body-color-font: "Be Vietnam Pro", "Be Vietnam Pro Fallback", "Segoe UI", Arial, sans-serif;
}

/*
 * Owl sets `.owl-carousel { display: none }` until `.owl-loaded`.
 * Keep the container visible so the first slide can paint, and hide
 * extra slides only until Owl wraps them.
 */
.hero-active.owl-carousel,
.testi_inner.owl-carousel {
  display: block;
}

.hero-active.owl-carousel:not(.owl-loaded) > .hero-area:nth-child(n + 2),
.hero-active.is-mobile-static > .hero-area.is-hidden-slide,
.testi_inner.owl-carousel:not(.owl-loaded) > :nth-child(n + 3) {
  display: none !important;
}

.hero-left-shape,
.hero-thumb-shape {
  display: none;
}

/* Decorative about blob is 68KB PNG in style.css — do not fetch it during LCP. */
.about-area::before {
  background-image: none !important;
}

/* Keep floating buttons out of document flow before the full sheet loads. */
.floating-contact {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right, 0px));
  bottom: calc(20px + env(safe-area-inset-bottom, 0px) + 57px);
  z-index: 9990;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.floating-contact__btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
}
#scrollUp {
  display: none !important;
}

/* WCAG contrast: primary red on white is ~3.9:1. Darken text/buttons. */
span.section-sub-title,
h5.section-sub-title,
h3.testi-title span,
h3.faq-title span {
  color: #b71c1c !important;
}

/* Match heading-hierarchy box model so late CSS does not grow section titles. */
span.section-sub-title {
  display: inline-block;
  padding: 6px 29px;
  margin: 0 0 22px;
  line-height: 25px;
  font-size: 16px;
  font-weight: 600;
}

.solutek-btn a,
a.btn-2 {
  background: #c62828 !important;
  color: #fff !important;
}

.language-switcher .lang-btn.is-active,
.language-switcher .lang-btn[aria-current="page"],
.mobile-lang-switcher .lang-btn.is-active,
.mobile-lang-switcher .lang-btn[aria-current="page"] {
  background: #c62828;
  color: #fff !important;
}

.mobile-lang-switcher .lang-btn {
  color: #fff !important;
  border-color: #fff;
}

.faq-description,
.section-title-descr,
input.wpcf7-form-control::placeholder,
textarea.wpcf7-form-control::placeholder {
  color: #4a4f5c;
}

@media (max-width: 991.98px) {
  /* Reserve the 56px mean-bar before meanmenu JS runs, and hide the raw
     nav list so it cannot expand <main> then collapse (CLS ~0.25). */
  .mobile-menu-area {
    min-height: 56px;
    background: #050a1e;
  }
  .mobile-menu-area .mobile-menu > nav:not(.mean-nav) > ul {
    display: none !important;
  }
}

@media (max-width: 767.98px) {
  .hero-active.is-mobile-static,
  .testi_inner.is-mobile-static {
    display: block;
    width: 100%;
  }

  /* Compact testimonials: first two stay in flow without waiting for JS. */
  .testi_inner > :nth-child(2) {
    display: block !important;
  }

  .testi_inner > :nth-child(n + 3) {
    display: none !important;
  }

  /* Lock hero size in this blocking sheet so style.css's 800px / 130px
     padding cannot paint first and then collapse when mobile.css applies. */
  .hero-area.style-three {
    height: auto !important;
    min-height: 0 !important;
    padding: 20px 0 36px !important;
  }

  .hero-area.style-three .hero-contant {
    padding: 8px 0 0 !important;
  }

  .hero-area.style-three .hero-contant h1,
  .hero-area.style-three .hero-contant h1 span {
    font-size: clamp(1.5rem, 6.2vw, 1.875rem) !important;
    line-height: 1.25 !important;
  }

  .hero-area.style-three .hero-img {
    aspect-ratio: 16 / 10;
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    border-radius: 12px;
  }

  .hero-area.style-three .hero-img img {
    width: 100%;
    height: 100%;
    max-height: 220px;
    object-fit: cover;
    object-position: top center;
  }

  .about-area .about-thumb img {
    width: 100%;
    height: auto;
  }
}

/* Blog teaser cards: the theme paints a fixed PNG frame (blog-box.png).
   Different title/image heights crop that frame so one card shows a
   border and the other does not. Use a real CSS card instead. */
.blog-area.style-two .single-blog-box {
  background: #f7f8fa;
  background-image: none;
  border: 1px solid #e6e8ee;
  border-radius: 12px;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.blog-area.style-two .single-blog-thumb {
  position: relative;
}

.blog-area.style-two .single-blog-thumb img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.blog-area.style-two .blog-box-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.blog-area.style-two .blog-box-content h3 {
  flex: 1 1 auto;
}

.blog-area.style-two .blog-box-content h3 a {
  display: block;
  overflow: visible;
  padding: 16px 0 20px;
}

.blog-area.style-two .blog-button {
  margin-top: auto;
}

.footer-area img.image {
  width: 220px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 849 / 200;
  display: block;
}

/* Contact CTA: white section, dark title, consistent fields. */
.contact-area {
  background: #ffffff !important;
  background-image: none !important;
}

.contact-area h2.section-main-title {
  color: #050a1e !important;
}

.contact-area .section-title-descr,
.contact-area .section-title-descr p {
  color: #4a4f5c !important;
}

.contact-area .form_box input,
.contact-area .form_box textarea {
  box-sizing: border-box;
  width: 100%;
  background: #ffffff;
  border: 1px solid #d5d8e0 !important;
  border-radius: 12px !important;
  color: #1c2333;
}

.contact-area .form_box input {
  height: 56px;
  padding: 0 18px;
}

.contact-area .form_box textarea {
  min-height: 140px;
  height: 140px;
  padding: 14px 18px;
}

.contact-area .form_box input::placeholder,
.contact-area .form_box textarea::placeholder {
  color: #5c6370 !important;
}

/* Unicode icons — homepage no longer loads Font Awesome / Bootstrap Icons. */
.bi, .fa, .fas, .far, .fab {
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  font-family: "Be Vietnam Pro Fallback", Arial, sans-serif;
  line-height: 1;
  speak: never;
}
.bi::before, .fa::before, .fas::before, .far::before, .fab::before {
  font-family: inherit;
}
.bi-star-fill::before { content: "★"; color: #f5b301; }
.bi-send::before,
.bi-arrow-right::before,
.fas.fa-arrow-right::before { content: "→"; }
.bi-envelope::before { content: "@"; }
.bi-geo-alt::before,
.bi-geo-alt-fill::before,
.fas.fa-map-marker-alt::before { content: "⌖"; }
.bi-alarm::before { content: "◷"; }
.bi-telephone::before { content: "☎"; }
.bi-search::before,
.fas.fa-search::before { content: "⌕"; }
.fas.fa-arrow-up::before { content: "↑"; }
.fas.fa-bars::before { content: "☰"; }
.far.fa-times-circle::before { content: "×"; }
.fab.fa-facebook-f::before { content: "f"; }
.fab.fa-linkedin-in::before { content: "in"; font-size: 0.78em; }
.far.fa-user::before { content: "•"; }
.far.fa-calendar-alt::before { content: "▦"; }
.fas.fa-globe::before { content: "◎"; }
.fas.fa-angle-double-left::before { content: "«"; }
.fas.fa-angle-double-right::before { content: "»"; }

.testi-rating {
  list-style: none;
  display: flex;
  gap: 2px;
  padding: 0;
  margin: 0 0 8px;
}