/* Xinzex common header - sabhi pages me includes/header.php se load hota hai */
#xh{font-family:Inter,system-ui,sans-serif;color:var(--xh-ink,#1a1a1a);line-height:1.4}
#xh,#xh *{box-sizing:border-box}
#xh *{margin:0;padding:0}
#xh a{color:inherit;text-decoration:none}

        #xh {
            --xh-red: #ed3e22;
            --xh-red2: #ed3e22;
            --xh-tint: #fdeee9;
            --xh-ink: #1a1a1a;
            --xh-mut: #666;
            --xh-line: #ececec;
            --xh-bg: #fff
        }
#xh svg.xh-i {
            width: 1em;
            height: 1em;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex: none
        }

        #xh {
            position: sticky;
            top: 0;
            z-index: 100;
            background: var(--xh-bg);
            box-shadow: 0 6px 24px rgba(0, 0, 0, .06)
        }
#xh .xh-bar {
            max-width: 1320px;
            margin: auto;
            height: 84px;
            padding: 0 24px;
            display: flex;
            align-items: center;
            gap: 40px
        }
#xh .xh-logo {
            font-weight: 700;
            font-size: 34px;
            letter-spacing: 2px;
            line-height: 1
        }
#xh .xh-logo b {
            color: var(--xh-red)
        }
#xh .xh-logo img {
            display: block;
            height: 58px;
            width: auto
        }

        #xh nav {
            display: flex;
            gap: 6px;
            margin-left: auto
        }

        #xh nav button {
            font: 500 16px Inter, sans-serif;
            color: var(--xh-ink);
            background: none;
            border: 0;
            padding: 10px 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 3px solid transparent
        }

        #xh nav button svg {
            width: 12px;
            height: 12px;
            stroke-width: 3
        }

        #xh nav button:hover,
        #xh nav button[aria-expanded=true] {
            color: var(--xh-red)
        }

        #xh nav button[aria-expanded=true] {
            border-bottom-color: var(--xh-red)
        }
#xh .xh-cta {
            margin-left: auto;
            background: linear-gradient(180deg, var(--xh-red2), #e8300a);
            color: #fff;
            font-weight: 600;
            padding: 14px 26px;
            border-radius: 6px;
            display: flex;
            gap: 8px;
            align-items: center;
            box-shadow: 0 6px 16px rgba(238, 58, 18, .28)
        }

        #xh nav+.xh-cta {
            margin-left: 20px
        }
#xh .xh-burger {
            display: none;
            margin-left: auto;
            background: none;
            border: 0;
            font-size: 28px;
            cursor: pointer
        }
#xh .xh-wrap {
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            padding: 0 24px;
            pointer-events: none
        }
#xh .xh-panel {
            display: none;
            max-width: 1320px;
            margin: 10px auto 0;
            background: var(--xh-bg);
            border-radius: 0 0 22px 22px;
            padding: 28px;
            box-shadow: 0 24px 50px rgba(0, 0, 0, .14);
            pointer-events: auto;
            position: relative;
            max-height: calc(100vh - 110px);
            overflow: auto
        }
#xh .xh-panel.xh-open {
            display: block;
            animation: xh-in .18s ease-out
        }

        @keyframes xh-in {
            from {
                opacity: 0;
                transform: translateY(-6px)
            }
        }
#xh .xh-panel::before {
            content: "";
            position: absolute;
            top: -8px;
            left: var(--xh-ax, 120px);
            width: 16px;
            height: 16px;
            background: var(--xh-bg);
            transform: rotate(45deg);
            box-shadow: -3px -3px 6px rgba(0, 0, 0, .04)
        }
#xh .xh-pill {
            display: flex;
            align-items: center;
            gap: 14px;
            background: var(--xh-tint);
            color: var(--xh-red);
            font-weight: 600;
            border-radius: 10px;
            padding: 14px 18px
        }
#xh .xh-pill svg {
            font-size: 30px
        }
#xh .xh-pill.xh-up {
            text-transform: uppercase;
            font-size: 14px;
            white-space: nowrap;
            gap: 10px;
            padding: 14px 12px
        }
#xh .xh-lk {
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 11px 6px;
            font-weight: 500;
            font-size: 16px;
            transition: color .15s, transform .15s
        }
#xh .xh-lk>svg:first-child {
            color: var(--xh-red);
            font-size: 16px;
            stroke-width: 2.6
        }
#xh .xh-lk:hover {
            color: var(--xh-red);
            transform: translateX(3px)
        }
#xh .xh-cols {
            display: grid;
            gap: 0
        }
#xh .xh-cols>div {
            padding: 0 22px;
            border-left: 1px solid var(--xh-line)
        }
#xh .xh-cols>div:first-child {
            border-left: 0;
            padding-left: 0
        }
#xh /* services */
        .xh-svc {
            display: grid;
            grid-template-columns: 340px minmax(0, 1fr);
            gap: 20px
        }
#xh .xh-svc .xh-left {
            padding-right: 20px;
            border-right: 1px solid var(--xh-line)
        }
#xh .xh-sl {
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 15px 14px;
            border-radius: 10px;
            font-weight: 500;
            font-size: 15px
        }
#xh .xh-sl .xh-ic {
            font-size: 34px;
            color: var(--xh-red);
            width: 40px;
            display: grid;
            place-items: center
        }
#xh .xh-sl .xh-ch {
            margin-left: auto;
            color: var(--xh-red);
            font-size: 16px;
            stroke-width: 2.6
        }
#xh .xh-sl:hover,
#xh .xh-sl.xh-on {
            background: var(--xh-tint);
            color: var(--xh-red);
            font-weight: 600
        }
#xh .xh-svc .xh-cols {
            grid-template-columns: repeat(4, 1fr)
        }
#xh .xh-svc .xh-cols>div {
            padding: 0 12px;
            min-width: 0
        }
#xh .xh-svc .xh-cols .xh-lk {
            font-size: 15px
        }
#xh /* simple + tech */
        .xh-c3 {
            grid-template-columns: repeat(3, 1fr)
        }
#xh .xh-c3 .xh-lk {
            padding: 16px 6px
        }
#xh .xh-c5 {
            grid-template-columns: repeat(5, 1fr)
        }
#xh .xh-grp .xh-pill {
            background: none;
            padding: 6px 0 14px;
            font-size: 17px
        }
#xh .xh-grp h4 {
            display: flex;
            gap: 12px;
            align-items: center;
            color: var(--xh-red);
            font-size: 17px;
            font-weight: 600;
            padding: 16px 0 6px
        }
#xh .xh-grp .xh-pill svg {
            font-size: 28px
        }
#xh .xh-two {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 10px
        }
#xh .xh-sep {
            border-top: 1px solid var(--xh-line);
            margin: 22px 0
        }
#xh .xh-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #000;
            color: #fff;
            font-weight: 600;
            padding: 16px 26px;
            border-radius: 6px;
            margin-top: 18px
        }
#xh .xh-mid {
            text-align: center
        }
#xh .xh-tag {
            border-top: 1px solid var(--xh-line);
            margin-top: 22px;
            padding-top: 18px;
            color: var(--xh-mut);
            font-size: 15px
        }
#xh .xh-sup {
            display: flex;
            gap: 16px;
            align-items: center;
            margin: 14px 0 6px
        }
#xh .xh-sup .xh-ph {
            background: var(--xh-red);
            color: #fff;
            border-radius: 10px;
            width: 56px;
            height: 56px;
            display: grid;
            place-items: center;
            font-size: 28px
        }
#xh .xh-sup b {
            font-size: 22px;
            font-weight: 500;
            display: block
        }
#xh .xh-sup span {
            color: var(--xh-mut)
        }
/* mobile */
        @media(max-width:1024px) {
#xh .xh-bar {
                height: 68px;
                gap: 12px
            }
#xh .xh-logo img {
                height: 44px
            }
#xh .xh-burger {
                display: block
            }
#xh .xh-cta {
                display: none
            }

            #xh nav {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #fff;
                flex-direction: column;
                padding: 8px 24px 20px;
                margin: 0;
                max-height: calc(100vh - 68px);
                overflow: auto;
                box-shadow: 0 18px 30px rgba(0, 0, 0, .12)
            }

            #xh nav.xh-show {
                display: flex
            }

            #xh nav button {
                width: 100%;
                justify-content: space-between;
                padding: 14px 0;
                border-bottom: 1px solid var(--xh-line)
            }
#xh .xh-wrap {
                position: static;
                padding: 0;
                pointer-events: auto
            }
#xh .xh-panel {
                margin: 0;
                box-shadow: none;
                border-radius: 0;
                padding: 12px 0;
                max-height: none
            }
#xh .xh-panel::before {
                display: none
            }
#xh .xh-svc,
#xh .xh-svc .xh-cols,
#xh .xh-c3,
#xh .xh-c5,
#xh .xh-two {
                grid-template-columns: 1fr
            }
#xh .xh-svc .xh-left {
                border: 0;
                padding: 0
            }
#xh .xh-cols>div {
                border-left: 0;
                padding: 0 0 12px !important
            }
#xh .xh-mm {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: #fff
            }
        }

        @media(prefers-reduced-motion:reduce) {
#xh .xh-panel.xh-open {
                animation: none
            }
        }
    
/* Industries listing navigation */
#xh .xh-industries-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}
#xh .xh-industries-head strong{display:block;font-size:20px;color:#111}
#xh .xh-industries-head span{display:block;margin-top:4px;color:#6d6d6d;font-size:13px}
#xh .xh-industries-head .xh-btn{margin:0;white-space:nowrap}
@media(max-width:900px){#xh .xh-industries-head{align-items:flex-start;flex-direction:column}}

/* Mobile-only 'View All Services' link */
#xh .xh-mobonly{display:none}
@media(max-width:1024px){#xh .xh-mobonly{display:block;padding:4px 0 12px}}


/* =========================================================
   RESPONSIVE PASS — layout only, desktop styling unchanged
   ========================================================= */
@media (max-width: 767px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  img, svg, video, canvas, iframe { max-width: 100%; }
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  table { max-width: 100%; overflow-x: auto; display: block; }

  .container,
  .cx-wrap,
  .cp-container,
  .indsol-container,
  .ds-services__container,
  .ip-container,
  .legacy-container,
  .trust-container,
  .callback-container,
  .xzf-container,
  .xq-container {
    max-width: 100%;
  }

  .hero-grid,
  .dx-hero-container,
  .callback-container,
  .cx-intro,
  .cx-main,
  .career-cta,
  .about-grid,
  .job-grid,
  .trust-container,
  .legacy-container,
  .indsol-hero,
  .dsh,
  .why {
    grid-template-columns: 1fr;
  }

  .features,
  .fgrid,
  .dgrid,
  .scg,
  .cx-reviews-grid {
    grid-template-columns: 1fr;
  }

  .stats { grid-template-columns: 1fr; }

  .hero-content,
  .dx-hero-content,
  .copy,
  .svc .copy,
  .cx-copy {
    min-width: 0;
  }

  .hero h1,
  .dx-hero-content h1,
  .cx-title,
  .about-hero h1,
  .career-hero h1 {
    overflow-wrap: anywhere;
  }

  .hero img,
  .dx-hero-image,
  .visual img,
  .svc img {
    height: auto;
    max-width: 100%;
  }

  .cta-row { flex-wrap: wrap; }
  .cta-row > * { max-width: 100%; }

  .nav .container,
  .xzf-container {
    min-width: 0;
  }

  .menu,
  .nav nav {
    max-width: calc(100vw - 30px);
    box-sizing: border-box;
  }

  .service-card,
  .other-tech-card,
  .xq-field,
  .career-field,
  .cx-field {
    min-width: 0;
  }

  .service-card h3,
  .other-tech-content h3,
  .xq-field input,
  .xq-field select,
  .xq-field textarea,
  .career-field input,
  .career-field textarea,
  .cx-field input,
  .cx-field select,
  .cx-field textarea {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 480px) {
  .container { width: calc(100% - 30px); }
  .xq-container,
  .cx-wrap,
  .cp-container { width: calc(100% - 30px); }

  .hero,
  .svc,
  .feat,
  .why,
  .cs,
  .plt,
  .faq,
  .fm,
  .ds,
  .sv,
  .prc,
  .services-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero h1,
  .dx-hero-content h1,
  .cx-title,
  .about-hero h1,
  .career-hero h1 {
    font-size: clamp(30px, 9vw, 42px);
    line-height: 1.08;
  }

  .service-card,
  .other-tech-card,
  .xq-form-wrap,
  .career-cta {
    padding-left: 16px;
    padding-right: 16px;
  }

  .xq-submit,
  .cx-submit,
  .career-form button {
    width: 100%;
  }
}