/* =========================================================
   TICL — GLOBAL MOBILE PAGE TOP SPACING
   PURPOSE:
   Make all public pages start at the same vertical position
   below the fixed Brand Header + HN Bar.

   Reference page: About Us
========================================================= */

@media (max-width: 600px) {

  /* =====================================================
     COMMON MAIN CONTENT POSITION
  ===================================================== */

  body.home main.content,
  body.about main.content,
  body.products main.content,
  body.services main.content,
  body.publications main.content,
  body.news main.content,
  body.faqs main.content,
  body.tender-search main.content,
  body.contact main.content {
    margin-top: 0 !important;

    /*
      SAME vertical gap as About Us mobile.
    */
    padding-top: 5px !important;
  }

  /* =====================================================
     HOME
     Remove page-specific mobile spacing from index.css
     so Home matches the other public pages.
  ===================================================== */

  body.home main.content>.ticl-slider {
    margin-top: 0 !important;
  }

  /*
    index.css adds padding-top: 20px to .slider-track
    on mobile. Remove it so the slider starts at the
    same vertical level as the other pages.
  */
  body.home main.content>.ticl-slider>.slider-track {
    padding-top: 0 !important;
  }


  /* =====================================================
     ABOUT US
     Slightly reduce mobile top spacing only.
     Desktop margin-top: 48px remains untouched.
  ===================================================== */

  body.about main.content {
    padding-top: 0 !important;
  }

  body.about main.content>.ticl-slider {
    margin-top: 0 !important;
  }

  /* =====================================================
     PRODUCTS
  ===================================================== */

  body.products main.content>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     SERVICES

     services.php has:
       main.content
         -> .services-section
             -> .page-hero

     Therefore remove top padding from the wrapper itself.
  ===================================================== */

  body.services main.content>.services-section {
    padding-top: 0 !important;
  }

  body.services main.content>.services-section>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     PUBLICATIONS
  ===================================================== */

  body.publications main.content>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     NEWS
  ===================================================== */

  body.news main.content>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     FAQs
  ===================================================== */

  body.faqs main.content>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     CONTACT
  ===================================================== */

  body.contact main.content>.page-hero {
    margin-top: 0 !important;
  }


  /* =====================================================
     TENDER SEARCH
  ===================================================== */

  body.tender-search main.content> :first-child {
    margin-top: 0 !important;
  }

  /* =====================================================
     MOBILE HORIZONTAL CONTENT ALIGNMENT
     Keep all public pages on the same 15px main-content frame
  ===================================================== */

  /* SERVICES */
  body.services main.content>.services-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.services .services-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* PUBLICATIONS */
  body.publications .news-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* NEWS */
  body.news .news-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* FAQs */
  body.faqs .faqs-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* CONTACT */
  body.contact .contact-layout {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.contact #mapTitle {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }


  /* COMMON HERO WIDTH */
  body.products .page-hero,
  body.services .page-hero,
  body.publications .page-hero,
  body.news .page-hero,
  body.faqs .page-hero,
  body.contact .page-hero {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

}

/* =========================================================
   TICL — SMALL PHYSICAL TOUCH DEVICE FALLBACK

   PURPOSE:
   Force true small touch devices to use mobile single-column
   content even when a browser / in-app browser opened from an
   external link reports an unusually wide layout viewport.

   Applies to links opened from:
   - WhatsApp
   - Email
   - SMS
   - Telegram
   - Messenger / Facebook
   - Other apps / shared links

   This is NOT an SEO rule.
========================================================= */

@media (max-device-width: 768px) and (hover: none) and (pointer: coarse) {

  /* =====================================================
     HOME
     Core Services + Why Us
  ===================================================== */
  body.home .home-services-grid,
  body.home .why-grid {
    grid-template-columns: 1fr !important;
  }


  /* =====================================================
     ABOUT US
     Mission / Focus / Team
  ===================================================== */
  body.about .mission-grid,
  body.about .focus-block .mission-grid,
  body.about .team-grid,
  body.about .team-grid-lead {
    grid-template-columns: 1fr !important;
  }


  /* =====================================================
     OUR PRODUCTS
  ===================================================== */
  body.products .products-grid {
    grid-template-columns: 1fr !important;
  }


  /* =====================================================
     SERVICES
  ===================================================== */
  body.services .services-grid {
    grid-template-columns: 1fr !important;
  }

  body.services .service-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }


  /* =====================================================
     FOOTER — SINGLE COLUMN (ALL PAGES)
     Mirrors the 600px footer rules, but keyed to the
     physical device width so it also works in in-app
     browsers that report a wide layout viewport.
  ===================================================== */
  footer.footer {
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

  footer.footer .footer-top {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  footer.footer .footer-brand {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  footer.footer .footer-brand p {
    max-width: 100% !important;
  }

  footer.footer .footer-col {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  footer.footer .footer-visitor-stats {
    grid-template-columns: 1fr !important;
  }

  footer.footer .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    margin-left: -15px !important;
    margin-right: -15px !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
  }

}


/* =========================================================
   LINK-OPENED VIEW (small phone, browser lays out ~980px wide)
   Active ONLY when header.php adds  html.ticl-wide
   (small touch screen + wide layout viewport).
   --ticl-z = layout width / screen width (about 2.7).
   Chrome typed-URL view never gets this class = unchanged.
========================================================= */

/* 1. Logo + company name: lowered onto the HN Bar by the phone
      rules of global-hnbar.css re-applied below (header section). */

/* 2 + 3 + 4. Content and footer drawn at phone scale:
      text sizes, side margins and footer alignment then
      match the Chrome view. */
html.ticl-wide body {
  padding-top: calc(110px * var(--ticl-z, 1));   /* 60 brand header + 50 HN bar, phone scale */
}

html.ticl-wide main.content,
html.ticl-wide footer.footer,
html.ticl-wide .brand-header,
html.ticl-wide .hn-wrapper,
html.ticl-wide .hamburger,
html.ticl-wide .verticalnav {
  zoom: var(--ticl-z, 1);
}

html.ticl-wide body main.content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  margin-top: 0 !important;
  padding-top: 5px !important;
}


/* =========================================================
   LINK-OPENED VIEW — BRAND HEADER + HN BAR
   Phone rules of global-hnbar.css (768 / 480 / 420 / 360) re-applied
   through html.ticl-wide (zero extra specificity via :where).
   html.ticl-le480 / le420 / le360 come from the real screen width.
========================================================= */

/* from max-width: 768px */
:where(html.ticl-wide) .brand-header {
  padding: 8px 12px 0;
  justify-content: flex-start;
  align-items: flex-end;
  min-height: 60px;
  height: 60px;
}

:where(html.ticl-wide) .company-name {
  font-size: 16px;
  margin-top: 0;
  margin-left: 0;
  margin-bottom: 0;
  gap: 6px;
  max-width: calc(100% - 175px);
  min-width: 0;
}

:where(html.ticl-wide) .company-name span {
  margin-top: 0;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

:where(html.ticl-wide) .logo {
  height: 30px;
  max-width: 120px;
  object-fit: contain;
}

:where(html.ticl-wide) .lang-links {
  gap: 4px;
  right: 8px;
  top: 4px;
}

:where(html.ticl-wide) .lang-links a {
  padding: 3px 8px;
  font-size: 12px;
  white-space: nowrap;
}

:where(html.ticl-wide) .hn-wrapper {
  top: 60px;
  height: 50px;
  padding: 0 4px 0 50px;
  overflow: visible !important;
}

:where(html.ticl-wide) .topnav-scrollable {
  overflow-x: auto;
  overflow-y: visible;
  white-space: nowrap;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

:where(html.ticl-wide) .topnav-scrollable> :first-child {
  margin-left: 0;
}

:where(html.ticl-wide) .topnav-scrollable> :last-child {
  margin-right: 0;
}

:where(html.ticl-wide) .topnav-scrollable a,
:where(html.ticl-wide) .topnav-scrollable .nav-link {
  padding: 10px 10px;
  font-size: 12px;
}

:where(html.ticl-wide) .hn-wrapper>.tender-dropdown-panel {
  top: 118px;
  left: 8px !important;
  right: 8px !important;
  width: auto !important;
  min-width: 0;
  max-width: none;
  max-height: calc((100vh / var(--ticl-z, 1)) - 126px);
  max-height: calc((100dvh / var(--ticl-z, 1)) - 126px);
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 18px;
  border-top-width: 3px;
  transform: translateY(12px);
  box-sizing: border-box;
  z-index: 12000;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scroll-padding-bottom: env(safe-area-inset-bottom);
}

:where(html.ticl-wide) .hn-wrapper>.tender-dropdown-panel.dropdown-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

:where(html.ticl-wide) .dropdown-content a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  line-height: 1.35;
  box-sizing: border-box;
}

:where(html.ticl-wide) .dropdown-content a span {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  font-size: 16px;
  line-height: 1.35;
}

:where(html.ticl-wide) .dropdown-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  flex: 0 0 58px;
}

:where(html.ticl-wide) .dropdown-content a:hover {
  padding-left: 10px;
  background: var(--dropdown-hover-bg);
}

:where(html.ticl-wide) .dropdown-content::-webkit-scrollbar {
  width: 8px;
}

:where(html.ticl-wide) .dropdown-content::-webkit-scrollbar-thumb {
  border-width: 2px;
}

:where(html.ticl-wide) .scroll-btn {
  height: 50px;
  padding: 0 5px;
  font-size: 14px;
}

/* from max-width: 480px */
:where(html.ticl-wide.ticl-le480) .brand-header {
  padding-left: 8px;
  padding-right: 8px;
}

:where(html.ticl-wide.ticl-le480) .company-name {
  font-size: 13px;
  gap: 5px;
  max-width: calc(100% - 45px);
}

:where(html.ticl-wide.ticl-le480) .company-name span {
  width: 205px;
  max-width: 205px;
  flex: 0 0 205px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

:where(html.ticl-wide.ticl-le480) .logo {
  height: 28px;
  max-width: 105px;
}

:where(html.ticl-wide.ticl-le480) .lang-links {
  right: 5px;
  gap: 3px;
}

:where(html.ticl-wide.ticl-le480) .lang-links a {
  padding: 3px 6px;
  font-size: 11px;
}

:where(html.ticl-wide.ticl-le480) .hn-wrapper {
  padding-left: 48px;
  padding-right: 2px;
}

:where(html.ticl-wide.ticl-le480) .topnav-scrollable a,
:where(html.ticl-wide.ticl-le480) .topnav-scrollable .nav-link {
  padding: 10px 8px;
  font-size: 12px;
}

:where(html.ticl-wide.ticl-le480) .hn-wrapper>.tender-dropdown-panel {
  left: 6px !important;
  right: 6px !important;
  top: 118px;
  max-height: calc((100vh / var(--ticl-z, 1)) - 124px);
  max-height: calc((100dvh / var(--ticl-z, 1)) - 124px);
  border-radius: 14px;
}

:where(html.ticl-wide.ticl-le480) .dropdown-content a {
  gap: 8px;
  padding: 7px 8px;
}

:where(html.ticl-wide.ticl-le480) .dropdown-content a span {
  font-size: 15px;
}

:where(html.ticl-wide.ticl-le480) .dropdown-logo {
  width: 52px;
  height: 52px;
  flex-basis: 52px;
}

/* from max-width: 360px */
:where(html.ticl-wide.ticl-le360) .company-name {
  font-size: 12px;
  max-width: calc(100% - 138px);
}

:where(html.ticl-wide.ticl-le360) .logo {
  height: 26px;
  max-width: 92px;
}

:where(html.ticl-wide.ticl-le360) .lang-links a {
  padding: 2px 5px;
  font-size: 10px;
}

:where(html.ticl-wide.ticl-le360) .dropdown-content a span {
  font-size: 14.5px;
}

:where(html.ticl-wide.ticl-le360) .dropdown-logo {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

/* from max-width: 768px */
:where(html.ticl-wide) .tender-dropdown-hero {
  padding: 14px 12px 12px;
  border-radius: 15px 15px 8px 8px;
  margin-bottom: 6px;
}

:where(html.ticl-wide) .tender-dropdown-title {
  font-size: 18px;
}

:where(html.ticl-wide) .tender-dropdown-subtitle {
  font-size: 12px;
}

:where(html.ticl-wide) .tender-dropdown-label {
  font-size: 9px;
  padding: 4px 10px;
}

/* from max-width: 768px */
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navHome"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navAbout"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navProducts"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navServices"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navPublications"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navNews"],
:where(html.ticl-wide) .topnav-scrollable a[data-translate="navContact"],
:where(html.ticl-wide) #tenderSearchToggle {
  font-size: 15px !important;
}

:where(html.ticl-wide) .topnav-scrollable a[data-translate="navFaqs"] {
  font-size: 12px !important;
}

/* from max-width: 768px */
:where(html.ticl-wide) .topnav-scrollable.tender-search-engaged>a.active {
  background-color: var(--nav-dark) !important;
  color: var(--white) !important;
}

:where(html.ticl-wide) .topnav-scrollable.tender-search-engaged .nav-item.active>.nav-link {
  background-color: var(--nav-dark) !important;
  color: var(--white) !important;
}

/* from max-width: 768px */
:where(html.ticl-wide) .far-left .desktop-double-arrow,
:where(html.ticl-wide) .far-right .desktop-double-arrow {
  display: none;
}

:where(html.ticl-wide) .far-left .mobile-double-arrow,
:where(html.ticl-wide) .far-right .mobile-double-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

:where(html.ticl-wide) .far-left .mobile-double-arrow i,
:where(html.ticl-wide) .far-right .mobile-double-arrow i {
  font-size: 14px;
  line-height: 1;
}

:where(html.ticl-wide) .far-left .mobile-double-arrow i+i,
:where(html.ticl-wide) .far-right .mobile-double-arrow i+i {
  margin-left: -2px;
}

/* from max-width: 768px */
:where(html.ticl-wide) .scroll-btn {
  padding: 0 4px;
}

:where(html.ticl-wide) .hn-wrapper {
  padding-right: 2px;
}

:where(html.ticl-wide) .topnav-scrollable a,
:where(html.ticl-wide) .topnav-scrollable .nav-link {
  padding: 10px 7px;
}

/* from max-width: 420px */
:where(html.ticl-wide.ticl-le420) .scroll-btn {
  padding: 0 3px;
}

:where(html.ticl-wide.ticl-le420) .topnav-scrollable a,
:where(html.ticl-wide.ticl-le420) .topnav-scrollable .nav-link {
  padding: 10px 6px;
}

:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navHome"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navAbout"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navProducts"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navServices"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navPublications"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navNews"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navContact"],
:where(html.ticl-wide.ticl-le420) .topnav-scrollable #tenderSearchToggle {
  font-size: 12.5px !important;
}

:where(html.ticl-wide.ticl-le420) .topnav-scrollable a[data-translate="navFaqs"] {
  font-size: 10.5px !important;
}

:where(html.ticl-wide.ticl-le420) .nav-link .nav-caret {
  margin-left: 4px;
}

/* Desktop-only (min-width: 769px) dropdown rules in global-hnbar.css
   also match in the wide view; put the phone values back. */
html.ticl-wide .hn-wrapper>.tender-dropdown-panel>a { padding: 8px 10px !important; gap: 10px !important; }
html.ticl-wide .hn-wrapper>.tender-dropdown-panel .dropdown-logo { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }
html.ticl-wide .hn-wrapper>.tender-dropdown-panel a span { line-height: 1.35 !important; }
html.ticl-wide.ticl-le480 .hn-wrapper>.tender-dropdown-panel>a { padding: 7px 8px !important; gap: 8px !important; }
html.ticl-wide.ticl-le480 .hn-wrapper>.tender-dropdown-panel .dropdown-logo { width: 52px !important; height: 52px !important; flex-basis: 52px !important; }
html.ticl-wide.ticl-le360 .hn-wrapper>.tender-dropdown-panel .dropdown-logo { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }

/* =========================================================
   LINK-OPENED VIEW — HAMBURGER + VERTICAL NAV (VN BAR)
   Phone rules of global-vnbar.css (max-width: 600px).
========================================================= */

/* from max-width: 600px */
:where(html.ticl-wide) .hamburger {
  top: 70px;
  left: 10px;
  width: 42px;
  height: 42px;
}

:where(html.ticl-wide) .verticalnav {
  left: -100vw;
  width: 100vw;
  max-width: 100vw;
  top: 134px;
  height: auto;
  max-height: calc(100dvh - 134px);
  padding: 16px 18px 24px;
  margin: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav.show {
  left: 0;
  right: 0;
  width: 100vw;
  max-width: 100vw;
  margin: 0;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .auth-links {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 18px 0;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .auth-links a {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  font-size: 13px;
  line-height: 1.25;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .welcoming-text {
  width: 100%;
  margin-top: 4px;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .welcoming-text h1 {
  width: 100%;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 12px;
  margin-left: 0;
  font-size: 18px;
  line-height: 1.35;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .welcoming-text p {
  width: 100%;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .account-area {
  width: 100%;
  margin-top: 16px;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .account-area-heading {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 11px 12px;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav .account-area-heading span {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

:where(html.ticl-wide) .verticalnav .account-area-description {
  width: 100%;
  max-width: 100%;
  margin: 8px 0 16px 0;
  padding: 0 10px;
  font-size: 14px;
  line-height: 1.55;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

:where(html.ticl-wide) .verticalnav *,
:where(html.ticl-wide) .verticalnav *::before,
:where(html.ticl-wide) .verticalnav *::after {
  max-width: 100%;
  box-sizing: border-box;
}

html.ticl-wide .verticalnav {
  left: calc(-100vw / var(--ticl-z, 1));
  width: calc(100vw / var(--ticl-z, 1));
  max-width: calc(100vw / var(--ticl-z, 1));
  max-height: calc(100dvh / var(--ticl-z, 1) - 134px);
}
html.ticl-wide .verticalnav.show {
  left: 0;
  width: calc(100vw / var(--ticl-z, 1));
  max-width: calc(100vw / var(--ticl-z, 1));
}

/* =========================================================
   LINK-OPENED VIEW — FOOTER
   Phone rules of global-footer.css (700 / 600 / 576px).
========================================================= */

/* from max-width: 700px */
:where(html.ticl-wide) .footer-top {
  grid-template-columns: 1fr;
}

/* from max-width: 600px */
:where(html.ticl-wide) .footer-bottom {
  flex-direction: column;
  align-items: center;
}

:where(html.ticl-wide) .footer-top {
  grid-template-columns: 1fr;
}

/* from max-width: 576px */
:where(html.ticl-wide) .footer-visitor-stats {
  grid-template-columns: 1fr;
}

:where(html.ticl-wide) .footer-visitor-stats .fv-label {
  font-weight: 800;
}

/* from max-width: 600px */
:where(html.ticl-wide) footer.footer {
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

:where(html.ticl-wide) footer.footer .footer-top {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

:where(html.ticl-wide) footer.footer .footer-brand {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

:where(html.ticl-wide) footer.footer .footer-col {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

:where(html.ticl-wide) footer.footer .footer-bottom {
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* =========================================================
   LINK-OPENED VIEW — PAGE CONTENT (all 9 pages)
   Phone rules of each page CSS, limited to their own page by the body class.
========================================================= */

/* ---- home (index.css) ---- */
/* from max-width: 1000px */
:where(html.ticl-wide body.home) .home-services-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* from max-width: 700px */
:where(html.ticl-wide body.home) .ticl-slider {
  margin-top: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

:where(html.ticl-wide body.home) .slider-overlay-text {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  width: auto;
  max-width: none;
  margin: 0 5px 14px;
  padding: 18px;
  z-index: 1;
}

:where(html.ticl-wide body.home) .slider-overlay-text h1 {
  font-size: 20px;
}

:where(html.ticl-wide body.home) .slider-overlay-text p {
  font-size: 13.5px;
}

:where(html.ticl-wide body.home) .slider-track {
  padding-top: 0;
  gap: 14px;
  order: 2;
}

:where(html.ticl-wide body.home) .slide-item {
  width: 300px;
  height: 220px;
}

:where(html.ticl-wide body.home) .slider-arrow {
  position: absolute;
  width: 44px;
  height: 44px;
  font-size: 18px;
  top: 110px;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 8000;
}

:where(html.ticl-wide body.home) .slider-arrow.next {
  left: 8px;
}

:where(html.ticl-wide body.home) .slider-arrow.prev {
  right: 8px;
}

:where(html.ticl-wide body.home) .slider-arrow:hover {
  transform: translateY(-50%) scale(1.08);
}

:where(html.ticl-wide body.home) .page-hero {
  margin-top: 15px;
}

:where(html.ticl-wide body.home) .page-hero h1 {
  font-size: 26px;
}

:where(html.ticl-wide body.home) .home-services-grid,
:where(html.ticl-wide body.home) .why-grid {
  grid-template-columns: 1fr;
}

:where(html.ticl-wide body.home) .stats-bar {
  grid-template-columns: 1fr 1fr;
}

:where(html.ticl-wide body.home) .section-title {
  font-size: 24px;
}

:where(html.ticl-wide body.home) .cta-band {
  padding: 36px 1.25rem;
}

:where(html.ticl-wide body.home) .cta-band h2 {
  font-size: 24px;
}

/* from max-width: 600px */
:where(html.ticl-wide) body.home .ticl-slider {
  display: flex;
  flex-direction: column;
}

:where(html.ticl-wide) body.home .ticl-slider .slider-track {
  order: 1;
}

:where(html.ticl-wide) body.home .ticl-slider .slider-overlay-text {
  order: 2;
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  max-width: none;
  margin-top: 14px;
  margin-bottom: 0;
  box-sizing: border-box;
}

:where(html.ticl-wide) body.home .page-hero {
  margin-top: 14px;
}

/* ---- about (about.css) ---- */
/* from max-width: 700px */
:where(html.ticl-wide body.about) .ticl-slider {
  overflow-x: clip;
}

:where(html.ticl-wide body.about) .slider-track {
  gap: 0;
}

:where(html.ticl-wide body.about) .slide-item {
  box-sizing: border-box;
  flex: 0 0 auto;
  width: var(--slide-w, 100%);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px;
  font-size: 14px;
  text-align: center;
  white-space: normal;
}

:where(html.ticl-wide body.about) .slide-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

:where(html.ticl-wide body.about) .slide-item span:empty {
  display: none;
}

:where(html.ticl-wide body.about) .slide-item.is-selected {
  transform: translateY(-12px);
}

/* from max-width: 700px */
:where(html.ticl-wide body.about) .team-grid-lead {
  grid-template-columns: 1fr;
}

/* from max-width: 1000px */
:where(html.ticl-wide body.about) .mission-grid,
:where(html.ticl-wide body.about) .focus-block .mission-grid,
:where(html.ticl-wide body.about) .team-grid {
  grid-template-columns: 1fr 1fr;
}

/* from max-width: 700px */
:where(html.ticl-wide body.about) .content {
  margin-left: 0;
  padding-top: 140px;
}

:where(html.ticl-wide body.about) .page-hero {
  padding: 40px 1.25rem 32px;
}

:where(html.ticl-wide body.about) .page-hero h1 {
  font-size: 28px;
}

:where(html.ticl-wide body.about) .section-title {
  font-size: 24px;
}

:where(html.ticl-wide body.about) .mission-grid,
:where(html.ticl-wide body.about) .focus-block .mission-grid,
:where(html.ticl-wide body.about) .team-grid {
  grid-template-columns: 1fr;
}

:where(html.ticl-wide body.about) .cta-band {
  padding: 36px 1.25rem;
}

:where(html.ticl-wide body.about) .cta-band h2 {
  font-size: 24px;
}

/* ---- products (products.css) ---- */
/* from max-width: 1000px */
:where(html.ticl-wide body.products) .products-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* from max-width: 700px */
:where(html.ticl-wide body.products) .products-grid {
  grid-template-columns: 1fr;
}

:where(html.ticl-wide body.products) .page-hero h1 {
  font-size: 26px;
}

:where(html.ticl-wide body.products) .section-title {
  font-size: 24px;
}

:where(html.ticl-wide body.products) .cta-band {
  padding: 36px 1.25rem;
}

:where(html.ticl-wide body.products) .cta-band h2 {
  font-size: 24px;
}

/* ---- services (services.css) ---- */
/* from max-width: 1200px */
:where(html.ticl-wide body.services) .services-grid {
  grid-template-columns:
  minmax(260px, 1fr) minmax(320px, 1.15fr);
}

/* from max-width: 768px */
:where(html.ticl-wide body.services) .services-grid {
  grid-template-columns: 1fr;
  padding: 0 1rem;
}

:where(html.ticl-wide body.services) .service-card {
  max-width: 100%;
}

/* from max-width: 600px */
:where(html.ticl-wide body.services) .page-hero {
  padding: 40px 1rem 32px;
}

:where(html.ticl-wide body.services) .page-hero h1 {
  font-size: 28px;
}

:where(html.ticl-wide body.services) .services-section {
  padding: 40px 1rem;
}

/* from max-width: 600px */
:where(html.ticl-wide body.services) .service-card {
  gap: 18px;
}

/* from max-width: 600px */
:where(html.ticl-wide body.services) #hrppj-manual {
  gap: 26px !important;
}

/* ---- publications (publications.css) ---- */
/* from max-width: 600px */
:where(html.ticl-wide body.publications) .news-card {
  flex-direction: column;
  gap: 12px;
}

:where(html.ticl-wide body.publications) .news-date-box {
  min-width: unset;
  width: fit-content;
}

:where(html.ticl-wide) body.publications .page-hero {
  padding: 40px 1rem 32px;
}

:where(html.ticl-wide) body.publications .page-hero h1 {
  font-size: 28px;
}

:where(html.ticl-wide body.publications) .news-section {
  padding: 40px 1rem;
}

/* from max-width: 600px */
:where(html.ticl-wide body.publications) .folder-pagination-bar {
  flex-direction: column;
  align-items: stretch;
}

:where(html.ticl-wide body.publications) .folder-pagination-bar .folder-pagination {
  justify-content: center;
}

/* ---- news (news.css) ---- */
/* from max-width: 900px */
:where(html.ticl-wide body.news) .pub-grid {
  grid-template-columns: 1fr;
}

/* from max-width: 1024px */
:where(html.ticl-wide body.news) .events-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* from max-width: 600px */
:where(html.ticl-wide body.news) .events-grid {
  grid-template-columns: 1fr;
}

/* from max-width: 600px */
:where(html.ticl-wide body.news) .events-pagination-bar {
  flex-direction: column;
  align-items: stretch;
}

:where(html.ticl-wide body.news) .events-pagination-bar .events-pagination {
  justify-content: center;
}

/* from max-width: 600px */
:where(html.ticl-wide body.news) .page-hero {
  padding: 40px 1rem 32px;
}

:where(html.ticl-wide body.news) .page-hero h1 {
  font-size: 28px;
}

:where(html.ticl-wide body.news) .news-subnav {
  gap: 4px;
}

:where(html.ticl-wide body.news) .news-tab {
  padding: 8px 14px;
  font-size: 12px;
}

:where(html.ticl-wide body.news) .pub-section {
  padding: 0;
}

/* from max-width: 600px */
:where(html.ticl-wide body.news) .folder-pagination-bar {
  flex-direction: column;
  align-items: stretch;
}

:where(html.ticl-wide body.news) .folder-pagination-bar .folder-pagination {
  justify-content: center;
}

/* ---- faqs (faqs.css) ---- */
/* from max-width: 600px */
:where(html.ticl-wide) body.faqs main.content {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

:where(html.ticl-wide) body.faqs .page-hero,
:where(html.ticl-wide) body.faqs .faqs-section {
  width: 100%;
  box-sizing: border-box;
}

:where(html.ticl-wide) body.faqs .faqs-section {
  padding-left: 0;
  padding-right: 0;
}

/* ---- tender-search (tender-search.css) ---- */
/* from max-width: 600px */
:where(html.ticl-wide body.tender-search) #tender-section {
  padding: 40px 1rem 32px;
}

:where(html.ticl-wide body.tender-search) #tender-section h1 {
  font-size: 28px;
}

/* ---- contact (contact.css) ---- */
/* from max-width: 900px */
:where(html.ticl-wide body.contact) .contact-grid {
  grid-template-columns: 1fr;
}

/* from max-width: 600px */
:where(html.ticl-wide body.contact) .cf-row {
  grid-template-columns: 1fr;
}

/* from max-width: 600px */
:where(html.ticl-wide body.contact) .contact-layout {
  padding: 10px 1rem 30px;
}

:where(html.ticl-wide body.contact) .contact-main-card {
  padding: 24px;
}

:where(html.ticl-wide body.contact) .contact-main-title {
  font-size: 24px;
}

:where(html.ticl-wide body.contact) .contact-block {
  gap: 14px;
}

:where(html.ticl-wide body.contact) .contact-icon {
  width: 46px;
  height: 46px;
  font-size: 18px;
}

/* =========================================================
   LINK-OPENED VIEW — GLOBAL MOBILE PAGE SPACING (600px block above, re-applied)
========================================================= */

:where(html.ticl-wide) body.home main.content,
:where(html.ticl-wide) body.about main.content,
:where(html.ticl-wide) body.products main.content,
:where(html.ticl-wide) body.services main.content,
:where(html.ticl-wide) body.publications main.content,
:where(html.ticl-wide) body.news main.content,
:where(html.ticl-wide) body.faqs main.content,
:where(html.ticl-wide) body.tender-search main.content,
:where(html.ticl-wide) body.contact main.content {
  margin-top: 0 !important;
  padding-top: 5px !important;
}

:where(html.ticl-wide) body.home main.content>.ticl-slider {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.home main.content>.ticl-slider>.slider-track {
  padding-top: 0 !important;
}

:where(html.ticl-wide) body.about main.content {
  padding-top: 0 !important;
}

:where(html.ticl-wide) body.about main.content>.ticl-slider {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.products main.content>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.services main.content>.services-section {
  padding-top: 0 !important;
}

:where(html.ticl-wide) body.services main.content>.services-section>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.publications main.content>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.news main.content>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.faqs main.content>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.contact main.content>.page-hero {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.tender-search main.content> :first-child {
  margin-top: 0 !important;
}

:where(html.ticl-wide) body.services main.content>.services-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.services .services-grid {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.publications .news-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.news .news-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.faqs .faqs-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.contact .contact-layout {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.contact #mapTitle {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

:where(html.ticl-wide) body.products .page-hero,
:where(html.ticl-wide) body.services .page-hero,
:where(html.ticl-wide) body.publications .page-hero,
:where(html.ticl-wide) body.news .page-hero,
:where(html.ticl-wide) body.faqs .page-hero,
:where(html.ticl-wide) body.contact .page-hero {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}


/* ===== LINK VIEW: stop the browser's automatic text inflation (text autosizing)
   so fonts in Company Name, Lang Links and HN Bar match Chrome exactly ===== */
html.ticl-wide, html.ticl-wide body, html.ticl-wide .brand-header, html.ticl-wide .brand-header *,
html.ticl-wide .hn-wrapper, html.ticl-wide .hn-wrapper * {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}
html.ticl-wide .company-name span { max-width: 205px; }
html.ticl-wide .hn-wrapper>.tender-dropdown-panel { overflow-y: auto !important; overscroll-behavior: contain !important; }

/* ===== LINK VIEW: HN Bar items a little smaller so that
   previous + active + next (e.g. FAQs + Tender Search + Contact Us)
   fit completely between the "<" and ">" buttons ===== */
html.ticl-wide .topnav-scrollable a[data-translate="navHome"],
html.ticl-wide .topnav-scrollable a[data-translate="navAbout"],
html.ticl-wide .topnav-scrollable a[data-translate="navProducts"],
html.ticl-wide .topnav-scrollable a[data-translate="navServices"],
html.ticl-wide .topnav-scrollable a[data-translate="navPublications"],
html.ticl-wide .topnav-scrollable a[data-translate="navNews"],
html.ticl-wide .topnav-scrollable a[data-translate="navContact"],
html.ticl-wide .topnav-scrollable #tenderSearchToggle {
  font-size: 12px !important;
}
html.ticl-wide .topnav-scrollable a[data-translate="navFaqs"] {
  font-size: 10.5px !important;
}
html.ticl-wide .topnav-scrollable a,
html.ticl-wide .topnav-scrollable .nav-link {
  padding-left: 5px !important;
  padding-right: 5px !important;
}
html.ticl-wide .nav-link .nav-caret { margin-left: 3px !important; }











/* =========================================================
   CHROME SMALL DEVICES — FONT MATCH WITH LINK-OPENED VIEW
   ---------------------------------------------------------
   PASTE AT THE VERY END of assets/css/core/mobile-page-spacing.css
   (LIVE and LOCAL, same block).

   WHY:
   The in-app browser used for LINKS draws text about 15-17% larger
   than the CSS values it receives (company name, language links,
   HN Bar). Chrome draws exactly the CSS value, so it looks smaller.
   Here Chrome gets the SAME base values as the link view
   (html.ticl-wide rules) multiplied by --ticl-boost.

   ONLY ONE NUMBER TO TUNE:  --ticl-boost
     bigger number = bigger Chrome text, smaller = smaller.

   Applies only when html does NOT have .ticl-wide (= normal Chrome)
   and only on small screens (max-width: 768px). Desktop unchanged.
   Logo is NOT touched (it measures the same in both views).
========================================================= */

/* ---- base values = what the link view CSS uses (481px - 768px) ---- */
@media (max-width: 768px) {
  html:not(.ticl-wide) {
    --ticl-boost: 1.16;
    --ticl-fs-company: 16px;
    --ticl-fs-lang: 12px;
    --ticl-fs-hn: 12px;
    --ticl-fs-faq: 10.5px;
  }
}

/* ---- screens up to 480px ---- */
@media (max-width: 480px) {
  html:not(.ticl-wide) {
    --ticl-fs-company: 13px;
    --ticl-fs-lang: 11px;
  }
}

/* ---- screens up to 360px ---- */
@media (max-width: 360px) {
  html:not(.ticl-wide) {
    --ticl-fs-company: 12px;
    --ticl-fs-lang: 10px;
  }
}

/* ---- apply ---- */
@media (max-width: 768px) {

  /* Company name */
  html:not(.ticl-wide) .company-name {
    font-size: calc(var(--ticl-fs-company) * var(--ticl-boost));
  }

  /* Language links: English / Swahili / 中文 */
  html:not(.ticl-wide) .lang-links a {
    font-size: calc(var(--ticl-fs-lang) * var(--ticl-boost));
  }

  /* HN Bar items (all pages + Tender Search) */
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navHome"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navAbout"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navProducts"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navServices"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navPublications"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navNews"],
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navContact"],
  html:not(.ticl-wide) .topnav-scrollable #tenderSearchToggle {
    font-size: calc(var(--ticl-fs-hn) * var(--ticl-boost)) !important;
  }

  /* FAQs is intentionally smaller, same as in the link view */
  html:not(.ticl-wide) .topnav-scrollable a[data-translate="navFaqs"] {
    font-size: calc(var(--ticl-fs-faq) * var(--ticl-boost)) !important;
  }

  /* Same side padding as the link view (5px) so item boxes match */
  html:not(.ticl-wide) .topnav-scrollable a,
  html:not(.ticl-wide) .topnav-scrollable .nav-link {
    padding-left: 5px;
    padding-right: 5px;
  }

  html:not(.ticl-wide) .nav-link .nav-caret {
    margin-left: 3px;
  }
}


/* =========================================================
   SMALL PHONES (<= 480px) — BRAND HEADER (iPhone + link view)
   ---------------------------------------------------------
   PASTE AT THE VERY END of assets/css/core/mobile-page-spacing.css
   (pamoja na kipande cha JS: fitCompanyName() kwenye global-hnbar.js)

   MATOKEO:
   1. Gap ya wima kati ya Language Links na Logo + Company Name.
   2. Company Name = mistari 2 (EN na SW) — upana unarekebishwa na JS.
   3. Urefu wa Company Name (mistari 2) = urefu wa Logo.

   Ukubwa wa herufi HAUGUSWI (unabaki kama ulivyo kwenye kila view).
   Simu pana (> 480px, mf. Android yako) HAIGUSWI.
   --nm-lh = urefu wa mstari mmoja wa jina; Logo = 2 x --nm-lh.
   --nm-w  = upana wa dharura (JS ikishindwa); JS inaubadilisha.
========================================================= */

/* ---- Chrome ya kawaida, simu <= 480px ---- */
@media (max-width: 480px) {

  html:not(.ticl-wide) {
    --nm-lh: 15px;
    --nm-w: 16.5em;
    --nm-pad: 1px;
  }

  html:not(.ticl-wide) body .brand-header .logo {
    height: calc(var(--nm-lh) * 2);
    width: auto;
    max-width: 105px;
    object-fit: contain;
  }

  html:not(.ticl-wide) body .brand-header .company-name {
    align-items: center;
    margin: 0;
  }

  html:not(.ticl-wide) body .brand-header .company-name span {
    width: var(--nm-w) !important;
    max-width: var(--nm-w) !important;
    flex: 0 0 var(--nm-w) !important;
    align-self: center;
    margin: 0 !important;
    line-height: var(--nm-lh);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  html:not(.ticl-wide) body .brand-header .lang-links {
    top: 3px;
  }

  html:not(.ticl-wide) body .brand-header .lang-links a {
    padding-top: var(--nm-pad);
    padding-bottom: var(--nm-pad);
    line-height: 1.2;
  }
}

/* ---- Link view (in-app browser, html.ticl-wide), simu <= 480px ---- */
html.ticl-wide.ticl-le480 {
  --nm-lh: 14px;
  --nm-w: 16.5em;
  --nm-pad: 2px;
}

html.ticl-wide.ticl-le480 body .brand-header .logo {
  height: calc(var(--nm-lh) * 2);
  width: auto;
  max-width: 105px;
  object-fit: contain;
}

html.ticl-wide.ticl-le480 body .brand-header .company-name {
  align-items: center;
  margin: 0;
}

html.ticl-wide.ticl-le480 body .brand-header .company-name span {
  width: var(--nm-w) !important;
  max-width: var(--nm-w) !important;
  flex: 0 0 var(--nm-w) !important;
  align-self: center;
  margin: 0 !important;
  line-height: var(--nm-lh);
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

html.ticl-wide.ticl-le480 body .brand-header .lang-links {
  top: 3px;
}

html.ticl-wide.ticl-le480 body .brand-header .lang-links a {
  padding-top: var(--nm-pad);
  padding-bottom: var(--nm-pad);
  line-height: 1.2;
}