/* SIDDIQIYA Technology: shared responsive fixes for every page.
   Loaded last, after each page's own styles. Breakpoints match the pages:
   phone <=767px, tablet 768-1100px (menu button), laptop and desktop
   >=1101px (full navigation bar). */

/* ---------- All sizes ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }
/* long words, e-mail addresses and links never push the page sideways */
p, li, label, td, th, dd, dt, h1, h2, h3, h4, small, .muted { overflow-wrap: break-word; }
label { min-width: 0; }
/* consent check boxes sit beside their sentence, never stretched full width */
/* (":not(#_)" only raises priority above the pages' own form rules) */
label input[type=checkbox]:not(#_), label input[type=radio]:not(#_) {
  width: 20px !important; height: 20px !important; min-width: 20px !important; max-width: 20px !important;
  padding: 0 !important; flex: 0 0 20px !important; display: inline-block !important;
  vertical-align: -4px; margin: 0 8px 0 0 !important;
}
/* tables scroll inside their own box */
.tablewrap, .table-wrap, .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* ---------- Laptop and desktop (>=1101px): full navigation bar ----------
   Seven sections, "Client Login" and "Get a Quote" fit from 1101px at
   readable 14px text. (Some pages still carry an older rule that switched
   1101-1359px to the menu button; this overrides it.) */
@media (min-width: 1101px) {
  nav { height: 82px !important; }
  .menu-btn { display: none !important; }
  .navlinks {
    display: flex !important; position: static !important; inset: auto !important;
    width: auto !important; max-height: none !important; overflow: visible !important;
    padding: 0 !important; flex-direction: row !important; align-items: center !important;
    justify-content: flex-end !important; flex: 1 1 auto; gap: clamp(14px, 1.2vw, 22px) !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important;
    box-shadow: none !important; white-space: nowrap;
  }
  .navlinks a:not(.btn) {
    display: inline-block !important; padding: 8px 0 !important; border: 0 !important;
    font-size: .875rem !important; letter-spacing: .01em;
  }
  .navlinks .nav-cta { width: auto !important; flex: 0 0 auto !important; margin: 0 0 0 4px !important; padding: 11px 18px !important; font-size: .84rem !important; }
}
/* Nine sections since "Pricing" was added: tighter spacing and 13px text on small laptops keep one line. */
@media (min-width: 1101px) and (max-width: 1279px) {
  .navlinks { gap: 8px !important; }
  .navlinks a:not(.btn) { font-size: .8125rem !important; letter-spacing: 0; }
  .navlinks .nav-caret { margin-left: 4px; }
  .navlinks .nav-cta { padding: 10px 14px !important; }
}

/* ---------- Every size that uses the menu button (<=1100px) ---------- */
@media (max-width: 1100px) {
  /* The open menu scrolls inside itself on short screens. It starts at the
     top: with the desktop "flex-end" alignment the first links (Home) were
     pushed above the box where they could not be scrolled to. */
  .navlinks.open {
    justify-content: flex-start !important;
    max-height: calc(100dvh - 124px) !important; overflow-y: auto !important; overscroll-behavior: contain;
  }
  .navlinks.open > * { flex-shrink: 0; }
  /* the open menu sits above the floating WhatsApp button */
  .nav-wrap:has(.navlinks.open), header:has(.navlinks.open) { z-index: 1300 !important; }
}

/* ---------- Phones, and touch tablets up to 1100px ---------- */
@media (max-width: 767px), (pointer: coarse) and (max-width: 1100px) {
  /* 16px form text stops iPhone Safari from zooming in on every field */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]),
  select, textarea { font-size: 16px !important; }

  /* finger-sized tap targets (WCAG 2.2: at least 24px, aim for ~44px) */
  .menu-btn { min-width: 44px; min-height: 44px; }
  button, .btn, [role=button], input[type=submit], input[type=button] { min-height: 44px; }
  .card a, .product-card a, .service-card a, a.text-link, .card-link {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* footer links: 24px text rows become ~40px rows (same overall spacing) */
  html body footer a:not(.brand), html body .footer-grid a:not(.brand), .footer-links a, .legal-links a, .footer-bottom a {
    padding-block: 8px !important; margin-block: 0 3px !important;
  }
  .breadcrumb a, .crumbs a, nav[aria-label="Breadcrumb"] a { display: inline-block; padding-block: 10px; }
  a[href^="mailto:"], a[href^="tel:"] { display: inline-block; padding-block: 8px; }
  p a[href^="mailto:"], p a[href^="tel:"] { padding-block: 2px; }
  label:has(input[type=checkbox]), label:has(input[type=radio]) { min-height: 44px; }
  label:has(input[type=checkbox]) span, label:has(input[type=radio]) span { overflow-wrap: break-word; min-width: 0; }
  .cookie-consent a, label a { padding-block: 4px; }
  a.muted, a.sub, #forgotPassword, .back-link, .back, .topnav a, header a.muted, .legal-top a, .brand-back {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  /* readable small print */
  .brand-sub { font-size: max(.5rem, 8px) !important; letter-spacing: .22em !important; }
  .topbar, .topbar span { font-size: 12px !important; }

  /* an icon tile holding text (e.g. "20%") grows instead of cutting it off */
  .card-icon:not(#_) { width: auto !important; min-width: 62px !important; padding-inline: 12px !important; }

  /* money and count tiles shrink instead of being cut off */
  .stat strong, .stats strong, .metric strong:not(.metric-title), .kpi strong, .card strong[id], .summary strong {
    font-size: clamp(1.05rem, 6vw, 1.6rem) !important; overflow-wrap: anywhere;
  }
}

/* very small phones (320px) */
@media (max-width: 360px) {
  .stat strong, .stats strong, .metric strong:not(.metric-title), .kpi strong, .card strong[id] { font-size: 1.05rem !important; }
}

/* touch screens of any size: no hover-only affordances get stuck */
@media (hover: none) {
  .card:hover, .btn:hover { transform: none; }
}

/* ---------- Navigation sub-menus (built by site.js) ----------
   Services, Products, Live Demos, Courses and Portfolio open a list of their
   items: a dropdown on laptops and desktops, an expanding list in the phone
   and tablet menu. */
.nav-item { position: relative; }
.nav-caret {
  display: inline-block; width: 6px; height: 6px; margin-left: 7px; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg); transition: transform .2s ease; opacity: .75;
}
.nav-item.sub-open .nav-caret { transform: translateY(1px) rotate(-135deg); }
.nav-sub[hidden] { display: none !important; }
.navlinks .nav-sub a:not(.btn):not(#_) {
  display: block !important; white-space: normal !important; border: 0 !important;
  font-size: .86rem !important; line-height: 1.35 !important; letter-spacing: 0 !important;
  padding: 9px 12px !important; border-radius: 9px; color: #e7ece8;
}
.navlinks .nav-sub a:not(.btn):not(#_):hover,
.navlinks .nav-sub a:not(.btn):not(#_):focus-visible { background: rgba(240,217,141,.1); color: #f0d98d; }
.navlinks .nav-sub a.nav-sub-all:not(#_) { color: #f0d98d; font-weight: 700; }

@media (min-width: 1101px) {
  .nav-item { display: flex; align-items: center; }
  .nav-sub {
    position: absolute; top: calc(100% + 12px); left: -14px; z-index: 80;
    min-width: 250px; max-width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 130px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; display: grid; gap: 1px;
    background: #0b241a; border: 1px solid rgba(214,180,92,.32); border-radius: 14px;
    box-shadow: 0 22px 60px rgba(0,0,0,.5);
  }
  .nav-sub::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
  .nav-sub-wide { grid-template-columns: 1fr 1fr; width: 540px; }
  .nav-sub-wide .nav-sub-all { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .navlinks .nav-item { display: block; width: 100%; flex-shrink: 0; }
  .navlinks .nav-parent:not(#_) { display: flex !important; align-items: center; justify-content: space-between; }
  .nav-caret { margin-right: 6px; width: 8px; height: 8px; }
  .nav-sub {
    display: grid; gap: 0; margin: 4px 0 8px; padding: 4px 0 4px 12px;
    border-left: 2px solid rgba(214,180,92,.35); background: rgba(255,255,255,.02); border-radius: 0 10px 10px 0;
  }
  .navlinks .nav-sub a:not(.btn):not(#_) { font-size: .9rem !important; padding: 11px 12px !important; min-height: 44px; display: flex !important; align-items: center; }
}