/* ==========================================================================
   Site overrides — loaded after main.css
   main.css is the compiled theme bundle, so project-specific tweaks live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. HEADER — reduced height and font sizes
   -------------------------------------------------------------------------- */

:root {
    --hd-logo-height: 54px;
    --hd-logo-height-sticky: 44px;
    /* Bottom padding of the main header row. The dropdown uses this to sit
       flush against the header's bottom edge, so keep them in sync. */
    --hd-row-pad-bottom: 10px;
    --hd-nav-line: 46px;
}

/* Top utility bar (email / socials) */
.homepage1-body .vl-transparent-header .header-top-area {
    padding-bottom: 10px;
}

.homepage1-body .vl-transparent-header .header-top-area .header-list p,
.homepage1-body .vl-transparent-header .header-top-area .header-list p a,
.homepage1-body .vl-transparent-header .header-top-area ul li:nth-child(1) a {
    font-size: 13px;
    line-height: 16px;
}

.homepage1-body .vl-transparent-header .header-top-area ul li .social {
    height: 30px;
    width: 30px;
    line-height: 28px;
    font-size: 14px;
}

.homepage1-body .vl-transparent-header .header-top-area ul li:nth-child(1) a svg {
    width: 16px;
    height: 16px;
}

/* Logo — sized explicitly so the vector scales predictably everywhere */
.homepage1-body .vl-transparent-header .vl-logo img {
    height: 80px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    transition: height 0.25s ease;
}

/* Primary navigation.
   The link fills the row's full height so the dropdown can be anchored to the
   bottom of the header rather than floating below the text. It also gives the
   hover target the whole header height instead of just the text line.

   The top-level list becomes a flex row so the now-taller items don't pick up
   the inline-block baseline descender gap, which would otherwise make the nav
   column taller than the logo and grow the whole header. */
.homepage1-body .vl-main-menu nav > ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.homepage1-body .vl-main-menu ul > li > a {
    font-size: 15px;
    padding: 0 12px;
    line-height: var(--hd-nav-line);
    white-space: nowrap;
}

/* Dropdown panel.
   The theme parked this at `top: 201%` of the list item, which left it
   detached in mid-air below the header. Anchor it to the bottom of the link
   (100%) plus the row's own bottom padding, so it opens flush against the
   header edge. */
.homepage1-body .vl-main-menu ul > li .sub-menu,
.homepage1-body .vl-main-menu ul > li:hover .sub-menu {
    top: 100%;
    margin-top: var(--hd-row-pad-bottom);
    width: 240px;
    padding: 8px 18px 16px;
}

/* Invisible bridge across the gap. It has to hang off the list item, not the
   panel: the panel is hidden until :hover, so a bridge inside it could never
   keep the hover alive while the pointer crosses the gap. This extends the
   item's hit area downward without affecting layout. */
.homepage1-body .vl-main-menu ul > li.has-dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--hd-row-pad-bottom);
}

.homepage1-body .vl-main-menu ul > li .sub-menu li a {
    font-size: 14px;
    padding-top: 10px;
}

/* Header call-to-action button */
.homepage1-body .vl-transparent-header .vl-hero-btn .btn-area1 a {
    font-size: 13px;
    line-height: 16px;
    padding: 11px 18px;
}

.homepage1-body .vl-transparent-header .vl-hero-btn .btn-area1 a svg {
    width: 18px;
    height: 18px;
    margin: -3px 2px 0 0;
}

/* --------------------------------------------------------------------------
   2. HEADER — sticky/scroll behaviour
   The header is split into a top utility bar and a main bar. Only the main bar
   is pinned, and only once the top bar has scrolled out of view, so the
   hand-off happens where the bar already sits — no jump, no re-entry animation.
   Driven by initStickyHeader() in assets/js/main.js.
   -------------------------------------------------------------------------- */

/* The two bars used to be one .row-bg1 block; keep them looking like one. */
.homepage1-body .vl-transparent-header .row-bg1--top {
    padding: 10px 16px 0;
    border-radius: 0;
}

.homepage1-body .vl-transparent-header .row-bg1--top::after {
    border-radius: 0;
}

.homepage1-body .vl-transparent-header .row-bg1--main {
    padding: 8px 16px var(--hd-row-pad-bottom);
    border-radius: 0 0 8px 8px;
}

.homepage1-body .vl-transparent-header .row-bg1--main::after {
    border-radius: 0 0 0 8px;
}

/* Pinned main bar. */
.homepage1-body .header-main.is-stuck {
    box-shadow: 0 7px 18px rgba(24, 16, 16, 0.05);
}

/* Pinned bar is more compact; the vars keep the logo, row padding and the
   dropdown's offset consistent with each other. */
.homepage1-body .header-main.is-stuck {
    --hd-row-pad-bottom: 6px;
    --hd-nav-line: 38px;
}

.homepage1-body .header-main.is-stuck .row-bg1--main {
    padding: 10px 16px var(--hd-row-pad-bottom);
    border-radius: 0;
}

.homepage1-body .header-main.is-stuck .row-bg1--main::after {
    border-radius: 0;
}

.homepage1-body .header-main.is-stuck .vl-logo img {
    height: 80px;
}

/* Below 1200px the theme hides the top bar and drops the white .row-bg1
   panel, so the pinned bar needs to bring its own background. */
@media (max-width: 1199px) {
    .homepage1-body .header-main.is-stuck {
        background: var(--ztc-bg-bg-1);
    }
}

.homepage1-body .header-top-area-wrapper.is-hidden {
    display: none;
}

/* The theme hides .header-top-area below 1200px, but the wrapper would still
   contribute its padding — hide the whole thing so the JS measures 0 and the
   main bar pins immediately on mobile. */
@media (max-width: 1199px) {
    .homepage1-body .header-top-area-wrapper {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   3. HERO — keep the first screen inside the fold
   The theme hard-coded `padding: 280px 0 120px`, which pushed the headline
   below the fold and ran the slide past the bottom of the viewport.
   -------------------------------------------------------------------------- */

.slider-arrow-main .hero2-slider-main .hero2-section-area {
    min-height: 99vh;
    min-height: 99svh;
    display: flex;
    align-items: center;
    padding: 150px 0 80px;
    box-sizing: border-box;
}

.slider-arrow-main .hero2-slider-main .hero2-section-area > .container {
    width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .slider-arrow-main .hero2-slider-main .hero2-section-area {
        padding: 130px 0 70px;
    }
}

@media (max-width: 767px) {
    .slider-arrow-main .hero2-slider-main .hero2-section-area {
        min-height: 88vh;
        min-height: 88svh;
        padding: 110px 0 60px;
    }
}

/* Short/landscape viewports: don't force a full screen we can't fill. */
@media (max-height: 620px) {
    .slider-arrow-main .hero2-slider-main .hero2-section-area {
        min-height: 0;
        padding: 130px 0 60px;
    }
}

/* This slider runs in slick's `fade` mode, which stacks the slides itself —
   don't touch .slick-track/.slick-slide layout here or the fade breaks.
   The min-height above is set on the slide content, which is enough. */

/* Tighten the headline leading slightly so long titles still fit the fold.
   (Theme used a fixed 74px line-height against a fluid font size.) */
.slider-arrow-main .hero2-slider-main .hero2-section-area .slider-heading h2 {
    line-height: 1.15;
}

/* Inner-page hero (breadcrumb banner): the theme's 300px/140px padding made
   the banner taller than its content needs — tighten it. Top padding still
   has to clear the transparent fixed header. */
.hero-inner-area {
    padding: 200px 0 80px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .hero-inner-area {
        padding: 140px 0 60px;
    }
}

@media (max-width: 767px) {
    .hero-inner-area {
        padding: 120px 0 50px;
    }
}

/* --------------------------------------------------------------------------
   4. LOGO — consistent sizing for the vector mark
   -------------------------------------------------------------------------- */

.vl-offcanvas .vl-offcanvas-logo {
    width: auto;
    height: 44px;
}

.vl-offcanvas .vl-offcanvas-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

.vl-footer1-section-area .footer-logo-area img {
    height: 64px;
    width: auto;
    object-fit: contain;
}

/* --------------------------------------------------------------------------
   5. ANCHOR TARGETS — offset for the fixed sticky header
   -------------------------------------------------------------------------- */

#who-we-are,
#partners {
    scroll-margin-top: 120px;
}

/* --------------------------------------------------------------------------
   6. MOBILE OFF-CANVAS MENU
   Mirrors the desktop bar. Parent items keep their label as a real link and
   get a separate arrow button for the sub-menu, so tapping "About Us" goes to
   the About Us page while tapping the arrow reveals its children.
   -------------------------------------------------------------------------- */

.vl-offcanvas-menu nav > ul > li {
    position: relative;
}

/* Leave room for the arrow so long labels don't run underneath it. */
.vl-offcanvas-menu nav > ul > li.has-dropdown > a {
    padding-right: 48px;
}

.vl-offcanvas-menu nav > ul > li > .vl-submenu-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    /* Generous tap target — the arrow is the only way to open the sub-menu. */
    -webkit-tap-highlight-color: transparent;
}

.vl-offcanvas-menu nav > ul > li > .vl-submenu-toggle i {
    display: inline-block;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.vl-offcanvas-menu nav > ul > li.active > .vl-submenu-toggle i {
    transform: rotate(180deg);
}

/* Sub-menus start closed; jQuery slideDown/slideUp drives them. */
.vl-offcanvas-menu nav .sub-menu {
    display: none;
    padding-left: 16px;
}

.vl-offcanvas-menu nav .sub-menu li a {
    font-size: 15px;
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   7. MOBILE RESPONSIVENESS
   Site-wide fixes for phones (<=767px) and tablets (768-991px). The theme's
   font clamp() minimums bottom out at ~10-12px on phones, several fixed-size
   components never got mobile overrides, and hover-revealed card content was
   unreachable on touch. Everything below is additive override only.
   -------------------------------------------------------------------------- */

/* 7a. Font floor. The theme's clamp() minimums render body copy at ~10-12px
   on any viewport under ~1090px. Headings scale acceptably; small text does
   not. Raise only the small steps back to legible sizes. */
@media (max-width: 991px) {
    :root {
        --ztc-font-size-font-s12: 12px;
        --ztc-font-size-font-s14: 13px;
        --ztc-font-size-font-s16: 15px;
        --ztc-font-size-font-s18: 16px;
        --ztc-font-size-font-s20: 17px;
        --ztc-font-size-font-s22: 18px;
        --ztc-font-size-font-s24: 19px;
        --ztc-font-size-font-s26: 20px;
        --ztc-font-size-font-s28: 21px;
        --ztc-font-size-font-s30: 22px;
    }
}

/* 7b. iOS Safari zooms the page when a focused input is under 16px. */
@media (max-width: 767px) {
    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* 7c. reCAPTCHA renders a fixed 304px iframe; sidebar/contact boxes leave
   ~270px on a 375px phone. Scale it down instead of letting it clip. */
@media (max-width: 575px) {
    .g-recaptcha {
        transform: scale(0.8);
        transform-origin: 0 0;
    }
}

/* 7d. Pagination: up to 9 fixed 50px items (~576px) inside an
   overflow:hidden centered box — both ends get clipped and become
   untappable. Let it wrap instead. */
@media (max-width: 767px) {
    .pagination-area {
        overflow: visible;
    }
    .pagination-area ul {
        flex-wrap: wrap;
        row-gap: 10px;
    }
    .pagination-area ul li {
        margin: 0 8px 0 0;
    }
    .pagination-area ul li a {
        height: 40px;
        width: 40px;
        line-height: 40px;
    }
}

/* 7e. CMS-authored rich text: nothing constrained tables or long unbroken
   strings, so one wide spec table produced page-level horizontal scroll. */
.rich-text-content,
.post-content-body,
.job-description-content,
.product-body,
.w-richtext {
    overflow-wrap: anywhere;
}
.rich-text-content table,
.post-content-body table,
.job-description-content table,
.product-body table,
.w-richtext table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
}
.rich-text-content img,
.post-content-body img,
.job-description-content img,
.product-body img,
.w-richtext img {
    height: auto;
}

/* 7f. Product detail slider: 500px letterboxed frame ate the whole first
   screen of a phone. */
@media (max-width: 767px) {
    .project-inner-details .service-arrows .service-slider-images .img1 img {
        height: 300px;
    }
}

/* 7g. Product listing cards: 330px fixed image + unbounded text made each
   card ~600px tall on a 360px screen. */
@media (max-width: 575px) {
    .service-inner-area .service2-boxarea .image-icons .img1 img {
        height: 220px;
    }
}

/* 7h. Product spec rows reserved a 200px label column, crushing values. */
@media (max-width: 575px) {
    .product-highlights p {
        flex-direction: column;
        gap: 2px;
    }
    .product-highlights p strong {
        min-width: 0;
    }
}

/* 7i. Carousel overlay captions (homepage + product categories slider) are
   white text sitting directly on arbitrary photos — give them a scrim. */
.project-boxarea .content-area {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65) 55%);
    border-radius: 8px;
}

/* 7j. Solution/industry cards park their content 65px below the card and
   reveal it on :hover only — permanently invisible on touch. Make the
   content static on small screens and touch devices. */
@media (max-width: 991px){
    .service7-section .sevice7-boxarea .content-area {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 16px 0 0;
    }
    .service7-section .sevice7-boxarea .content-area p,
    .service7-section .sevice7-boxarea .s7-conetnt-area-list {
        height: auto;
        max-height: none;
        opacity: 1;
        overflow: visible;
        color: var(--ztc-text-text-2);
    }
    .service7-section .sevice7-boxarea .content-area .title,
    .service7-section .sevice7-boxarea .content-area a {
        color: var(--ztc-text-text-2);
    }
    /* Bullet spans carry Bootstrap's .text-white (!important) for the dark
       hover overlay — needs !important to read on the light static layout. */
    .service7-section .sevice7-boxarea .s7-conetnt-area-list li,
    .service7-section .sevice7-boxarea .s7-conetnt-area-list li span {
        color: var(--ztc-text-text-2) !important;
    }
    .service7-section .sevice7-boxarea .s7-conetnt-area-list li,
    .s7-conetnt-area-list .points{
        color: var(--ztc-text-text-2) !important;
    }
    .service7-section .sevice7-boxarea .content-area .s7-conetnt-area-list {
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        color: var(--ztc-text-text-2) !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        font-weight: 400 !important;
    }
    .search-input-wrapper {
        width: 100% !important;
    }
}

/* 7k. .sp3 is the only spacing utility with no mobile override. */
@media (max-width: 991px) {
    .sp3 {
        padding: 50px 0 30px;
    }
}

/* 7l. Homepage counters: 45% flex basis left ~86px for number + label
   after the 76px icon indent. Stack them 1-up on phones. */
@media (max-width: 575px) {
    .choose4 .chooseheader .counters-row .about-boxarea {
        flex: 1 1 100%;
    }
}

/* 7m. About page history tab image was locked to 396px tall. */
@media (max-width: 767px) {
    .choose-about-area .history-btns-area .tab-content .tab-pane .img1 img {
        height: 220px;
    }
}

/* 7n. Anchor offset assumed the full desktop header; mobile header is ~60px. */
@media (max-width: 1199px) {
    #who-we-are,
    #partners {
        scroll-margin-top: 70px;
    }
}

/* 7o. Contact page: the form card butts against the info card below 1200px
   (no margin, sticky is pointless when stacked), and the call-us rows
   can't wrap. */
@media (max-width: 1199px) {
    .contact-inenr-area .contact-main-boxarea {
        margin-top: 30px;
        position: static;
    }
}
@media (max-width: 767px) {
    .contact-inenr-area .contact-main-boxarea {
        padding: 24px 20px;
    }
    .contact-inenr-area .contact-heading .calnow-boxes {
        flex-wrap: wrap;
        gap: 12px;
        padding: 20px;
    }
    .contact-inenr-area .contact-heading .calnow-boxes .icons {
        flex: 0 0 60px;
    }
    .contact-inenr-area .contact-heading .calnow-boxes .text h5 {
        margin: 0;
    }
}

/* 7p. Careers: the theme gave job cards private stagger margins
   (margin-right on desktop, margin-left on mobile) that made the grid
   asymmetric — and since the card is height:100%, its own margin-bottom
   fell outside the column and produced no gap between rows. Strip the
   card margins and space the grid itself uniformly. */
.service5 .service5-boxarea {
    margin: 0;
}
.service5 .row {
    row-gap: 30px;
}

/* The icon circle overhangs the card's left edge by 24px (left: -24px in the
   theme) — the old stagger margin was what made room for it. On phones the
   card now spans the full column, so tuck the icon fully inside the card and
   clear it with content padding; also pin it vertically so a tap's :hover
   state doesn't jump it to the top of the card. */
@media (max-width: 767px) {
    .service5 .service5-boxarea .icons,
    .service5 .service5-boxarea:hover .icons {
        left: 16px;
        top: 50%;
        margin-top: -24px;
    }
    .service5 .service5-boxarea .content-area {
        padding-left: 80px;
    }
}
@media (min-width: 768px) and (max-width: 1199px) {
    .choose5 .content-area {
        margin: 0;
    }
    .choose5 .content-area2 {
        margin: 0;
    }
}

/* 7q. Inner-page hero title: 64px font with 64px line-height had no override
   for 768-1199px; the breadcrumb (which can embed a full post title) wraps
   with zero leading. */
@media (min-width: 768px) and (max-width: 1199px) {
    .hero-inner-area .inner-header h2 {
        font-size: 42px;
        line-height: 1.15;
    }
}
.hero-inner-area .inner-header span,
.hero-inner-area .inner-header span a {
    line-height: 1.5;
}
@media (max-width: 767px) {
    .hero-inner-area .inner-header span,
    .hero-inner-area .inner-header span a {
        font-size: 16px;
    }
}

/* 7r. Job apply page: the theme pins the form column sticky with no
   breakpoint guard — inert today when stacked, but fragile. */
@media (max-width: 1199px) {
    .team-single-section .col-xl-6:last-child {
        position: static;
    }
}