.fw-logo img {
    max-height: 90px !important;
}
.tgmenu__navbar-wrap>ul>li a {
    color: var(--heading-color) !important;
}
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line, 
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line:after {
    background-color: var(--heading-color);
}
.about__bg-two {
    padding: 50px 0;
}
@media (max-width: 767.98px) {
    .counter-area {
        padding: 50px 0 0px;
    }
    .services-bg {
        padding: 50px 0;
    }
}

/* === CodeBrillo block — managed by scripts/push-custom-css.php === */
/* ==========================================================================
   CodeBrillo — spacing for Apexa theme blocks
   Source: ghafdynamicsv2/theme-custom.css · pushed with ./push-css.sh
   Last updated 2026-09-12

   Keeps the rhythm of theme blocks on pages built from Apexa shortcodes
   (Homepage, About Us, HealthConnect). The cb-* section styles are NOT here:
   they ship with the codebrillo-blocks plugin (public/css/cb-blocks.css).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Theme blocks — consistent rhythm
   The theme gives every style different padding (0/120 · 120/120 · 118/78).
   -------------------------------------------------------------------------- */
.shortcode-about-us-information {
    padding-block: 76px;
}

.shortcode-about-us-information .section-title {
    margin-bottom: 18px !important;
}

.shortcode-about-us-information .about__list-box .list-wrap li {
    margin-bottom: 10px;
}

/* A long list in half the width is one tall column with empty space beside it. */
@media (min-width: 768px) {
    .shortcode-about-us-information .about__list-box .list-wrap {
        columns: 2;
        column-gap: 36px;
    }

    .shortcode-about-us-information .about__list-box .list-wrap li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }
}

.shortcode-contact-block.request__area-two {
    padding-block: 88px;
}

@media (max-width: 767.98px) {
    .shortcode-about-us-information {
        padding-block: 48px;
    }

    .shortcode-contact-block.request__area-two {
        padding-block: 56px;
    }
}

/* --------------------------------------------------------------------------
   2) Header menu on one row
   Since 2026-09-12 the main menu has 7 top-level items (Who We Are was added
   back). With the theme's 30px gaps, the logo, menu and the language/Let's Talk
   actions need ~1290px, but the header container stops at 1250px, so the
   actions wrapped onto a second row at every desktop width.
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
    body .tgmenu__wrap .tgmenu__main-menu ul.navigation > li {
        margin-right: 0;
        margin-left: 0;
        margin-inline-end: 22px;
    }

    body .tgmenu__wrap .tgmenu__main-menu ul.navigation > li:last-child {
        margin-inline-end: 0;
    }

    body .tgmenu__wrap .tgmenu__main-menu ul.navigation > li > a {
        font-size: 15px;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    body .tgmenu__wrap .tgmenu__main-menu ul.navigation > li {
        margin-inline-end: 16px;
    }
}

/* Between 992px and 1199px the theme still shows the full menu (d-lg-flex) and hides the mobile
   toggler (it only appears below 992px). Seven items cannot fit there: the menu broke into several
   rows. Use the mobile menu for that range too. !important matches Bootstrap's d-lg-flex. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    body .tgmenu__wrap .tgmenu__main-menu.d-lg-flex {
        display: none !important;
    }

    body .tgmenu__wrap .tgmenu__nav {
        justify-content: space-between;
    }

    body .tgmenu__wrap .mobile-nav-toggler {
        display: flex;
        margin-inline-start: 16px;
    }

    body .tgmenu__wrap .tgmenu__action {
        margin-inline-start: auto;
    }
}

/* --------------------------------------------------------------------------
   Non-content headings (2026-09-13)
   Widget titles, contact labels, "Tags:" / "Share:" and similar labels were h4/h5, which put site
   chrome into the page outline. The theme templates now print them as 
   (see docs/theme-modifications.md). These rules give them exactly what h4/h5 received from
   Bootstrap's reboot and the theme's heading rules. :where() keeps specificity at zero, so every
   component rule (.fw-title, .sidebar__widget-title, .post-tags .title …) still wins as it did.
   -------------------------------------------------------------------------- */
:where(.tg-h4, .tg-h5) {
    margin-top: 0;
    margin-bottom: .5rem;
    color: var(--tg-heading-color);
    font-family: var(--tg-heading-font-family);
    font-weight: var(--tg-fw-bold);
    line-height: var(--tg-heading-line-height);
    text-transform: unset;
}

:where(.tg-h4) {
    font-size: 1.5rem;
}

:where(.tg-h5) {
    font-size: 1.25rem;
}

:where(.tg-h4, .tg-h5) a {
    color: inherit;
}

footer :where(.tg-h4, .tg-h5) {
    color: var(--footer-heading-color);
}

.offCanvas__side-info .contact-list .tg-h4 {
    color: var(--tg-heading-color);
    font-size: 18px;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Phone scale (2026-09-13)
   Client: on a phone everything reads too large — text, breadcrumb and buttons should look small and
   refined. The theme's own phone sizes stay close to the desktop ones (the breadcrumb title is 40px
   against 48px), so the type scale is stepped down here in one place for the whole site.
   The breadcrumb also carries post and service names now, which are long, so it is sized down on
   desktop and tablet too.
   -------------------------------------------------------------------------- */
.breadcrumb__content .title {
    font-size: 40px;
    line-height: 1.18;
}

@media (max-width: 1199.98px) {
    .breadcrumb__content .title {
        font-size: 34px;
    }
}

@media (max-width: 991.98px) {
    .breadcrumb__content .title {
        font-size: 30px;
    }
}

@media (max-width: 767.98px) {
    /* Breadcrumb */
    .breadcrumb__content .title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .breadcrumb__content .breadcrumb-item {
        font-size: 13px;
        line-height: 1.5;
    }

    .breadcrumb__content .breadcrumb-item + .breadcrumb-item {
        padding-left: 6px;
    }

    .breadcrumb__content .breadcrumb-item + .breadcrumb-item::before {
        font-size: 11px;
        margin-top: 5px;
        padding-right: 6px;
    }

    /* Headings: the theme's h1…h6 rem sizes are desktop sizes */
    h1 {
        font-size: 28px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 21px;
    }

    h4,
    .tg-h4 {
        font-size: 19px;
    }

    h5,
    .tg-h5 {
        font-size: 17px;
    }

    h6 {
        font-size: 15px;
    }

    .section-title .title {
        font-size: 26px;
    }

    .blog__details-content > .title,
    .services__details-content > .title {
        font-size: 22px;
    }

    .blog-post-content .title {
        font-size: 19px;
    }

    .sidebar__widget-title,
    .fw-title {
        font-size: 18px;
    }

    /* Buttons: smaller and less padding, still comfortably tappable (44px tall) */
    .btn,
    .cb-sec .cb-btn {
        font-size: 13px;
        padding: 15px 20px;
    }

    /* Body copy */
    body,
    p,
    .blog-post-content p,
    li {
        font-size: 15px;
    }
}

/* Post cards: the thumbnail box was a fixed 248px strip that cut the sides off the client's wide images
   (the ones carrying the article title). The card now prints the image itself (see
   scripts/patch-post-card-image.php) and it is shown whole inside a fixed box, so cards keep one height
   whether the image is a wide banner or a near-square logo. */
.blog-post-thumb img {
    height: auto;
    aspect-ratio: 850 / 480;
    object-fit: contain;
    background-color: #f6f8f3;
}

/* The article's own image: the theme forced `min-height: 250px` and `object-fit: cover`, which crops a wide
   image (the client's images carry the article title). Shown at its own height, nothing cut. */
.blog__details-thumb img {
    min-height: 0;
    object-fit: unset;
    width: 100%;
    height: auto;
}
/* === end CodeBrillo block === */
.services-content .title {
    font-size: 20px !important;
}
.truncate-2-custom {
    -webkit-line-clamp: 3 !important;
}



@media (min-width: 991.98px) {
  #page-home > main > div > section.shortcode-hero-banner.banner-area.banner-bg > div.container > div.row > div > div > p{
      color: var(--tg-theme-secondary);
      font-weight: 600;
  }
}