/* ============================================================
   SITE-WIDE ENHANCEMENTS — auto-applied to every page
   (preloader logo, header/footer logo size fix, nav search
   removal, and mobile single-line text fixes)
   Is single file sabhi pages me link hai, isliye ek jagah edit
   karne se poore site pe effect hoga.
============================================================ */

/* ============================================================
   NAV — mobile par bhi sticky (scroll ke baad fixed rahe, jaise
   desktop pe already hota hai). Theme ka apna rule
   (plugins-navy.css) sirf min-width:992px par fixed karta tha,
   isliye mobile par scroll karte hi nav upar scroll ho jaata
   tha. Yahan same fixed behaviour <=991px ke liye bhi add kiya.
============================================================ */
@media screen and (max-width: 991px){
    header.scrollHeader .navbar-default{
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 999 !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }
}

/* ============================================================
   HERO / PAGE-BANNER — nav ab hamesha opaque/white hai (dono,
   home ka ".full-screen" hero aur inner pages ka
   ".page-title-section" banner, ye dono ".top-position1" class
   share karte hain). Theme ka top-position1 negative margin
   (-96px desktop / -73px mobile) banner ko nav ke NEECHE
   overlap karta tha taaki transparent nav ke peeche se image
   dikhe — lekin ab nav opaque hai, to ye overlap hi banner ka
   top hissa nav ke peeche crop/hide kar raha tha. Margin hata
   kar banner ko uski natural position (nav ke turant niche) par
   le aaya — na koi white gap banta hai, na image ka top hidden
   hota hai. Ye ek hi jagah fix karne se saare pages (home +
   sabhi inner banners) theek ho jaate hain.
============================================================ */
.top-position1{
    margin-top: 0 !important;
}

/* ---------- PRELOADER with logo.png (bade size ke sath) ---------- */
#preloader{
    display:flex;
    align-items:center;
    justify-content:center;
}
#preloader .preloader-logo{
    width:auto;
    height:100px;
    max-width:80vw;
    animation:preloaderPulse 1.1s ease-in-out infinite;
}
@keyframes preloaderPulse{
    0%,100%{ transform:scale(1);   opacity:1;  }
    50%    { transform:scale(1.08); opacity:.72; }
}
@media (max-width:767px){
    #preloader .preloader-logo{ height:60px; }
}

/* ---------- LOGO: nav (header) aur footer, dono EXACT same size,
     pehle se bada size. plugins.css ka max-height:63px/47px cap
     yahan hata diya gaya hai (isi wajah se nav logo chhota
     dikh raha tha jabki footer bada). ---------- */
header#top #logo,
header .navbar-brand img#logo,
#logo,
.navbar-brand img,
.footer-logo img{
    height:170px !important;
    max-height:none !important;
    width:auto !important;
    max-width:none !important;
    min-height:0 !important;
    object-fit:contain;
}
.navbar-default.sticky #logo,
.navbar-default.is-sticky #logo,
.scrolled #logo,
.sticky-header #logo,
.fixed-header #logo,
.navbar-default.sticky .navbar-brand img,
.navbar-default.is-sticky .navbar-brand img,
.header-style1.sticky #logo,
.header-style1 .sticky #logo{
    height:170px !important;
    max-height:none !important;
}
@media (min-width:768px) and (max-width:991px){
    #logo, .navbar-brand img, .footer-logo img,
    .navbar-default.sticky #logo, .navbar-default.is-sticky #logo,
    .scrolled #logo, .sticky-header #logo, .fixed-header #logo{
        height:110px !important;
        max-height:none !important;
    }
}
@media (max-width:767px){
    #logo, .navbar-brand img, .footer-logo img,
    .navbar-default.sticky #logo, .navbar-default.is-sticky #logo,
    .scrolled #logo, .sticky-header #logo, .fixed-header #logo{
        height:70px !important;
        max-height:none !important;
    }
}
.navbar-header-custom{ display:flex; align-items:center; max-width:60%; overflow:hidden; }
.navbar-header-custom .navbar-brand{ max-width:100%; }
.navbar-toggler{ margin-left:auto; flex-shrink:0; }

/* ---------- NAV: search icon/option hata diya gaya ---------- */
.attr-nav li.search,
.attr-nav .search,
header .nav-search,
header .header-search,
header .search-outer{
    display:none !important;
}

/* ---------- MOBILE: jo text/labels ek hi line me fit hote hain,
     unhe chhote screen par bhi ek hi line me rakho (wrap na ho).
     Lambe paragraphs jaanbujh kar chhoda gaya hai kyunki unhe
     nowrap karne se text screen se bahar chala jayega. ---------- */
@media (max-width:767px){
    .navbar-nav > li > a,
    .butn-style1, .butn-style2, .butn-style3, .button-text,
    .filtering span,
    .pagination a,
    .tags a, .wp-tag-cloud a, .sidebar .blog-tags a,
    .card-style02 .card-category, .card-style02 .card-category > div,
    .card-style05 .blog-tag,
    .team-info li span,
    .process-style01 span,
    .history-style01 .history-year,
    .page-title-section ul li,
    footer .phone a, footer .email a,
    .feature-number span,
    .counter-style01 h2, .counter-style01 .display-26,
    .top-bar-info li{
        white-space:nowrap;
    }
    /* buttons/labels jinme text lamba ho sakta hai unke liye
       font thoda chhota kar diya taaki nowrap hone par bhi fit ho */
    .butn-style1{ font-size:11px !important; padding:12px 18px !important; }
    .butn-style2{ font-size:12px !important; padding:8px 18px !important; }
    .butn-style3{ font-size:12px !important; padding:11px 22px !important; }
    .filtering span{ font-size:12px !important; padding:6px 10px !important; }
    .page-title-section h1{ white-space:normal; }
}

/* ============================================================
   SECTION HEADING SIZES
   .display-4 (56px) aur .display-5 (48px) har section ke
   "bade heading" ke liye theme-wide class hai — inhe seedha
   edit nahi kiya (warna sabhi H2/H1 pe asar padta), balki
   yahan override kiya gaya hai. About page ke sabse pehle
   intro heading ("A trusted partner...") ko alag se, extra
   class (.about-intro-heading) ke through, 42px diya gaya
   hai — baaki sab jagah 30px.
============================================================ */
.display-4,
.display-5{
    font-size:30px !important;
}
@media (max-width:767px){
    .display-4,
    .display-5{
        font-size:24px !important;
    }
}
h2.display-4.about-intro-heading{
    font-size:42px !important;
}
@media (max-width:767px){
    h2.display-4.about-intro-heading{
        font-size:30px !important;
    }
}

/* ============================================================
   SCROLL ANIMATIONS: .reveal-up / .word-reveal
   Ye classes HTML me pehle se maujood the (sabhi 11 pages me)
   lekin inhe chalane wala JS/CSS missing tha, isliye kabhi bhi
   dikhte nahi the. js/scroll-animations.js ke saath milkar,
   ye ab HAR BAAR section scroll me aane par animate hote hain
   — sirf pehli baar ya sirf page-load par nahi.
============================================================ */
@media (prefers-reduced-motion: no-preference){
    .reveal-up{
        opacity:0;
        transform:translateY(45px);
        transition:opacity .7s ease, transform .7s ease;
        will-change:opacity, transform;
    }
    .reveal-up.is-inview{
        opacity:1;
        transform:translateY(0);
    }

    .word-reveal .wr-word{
        display:inline-block;
        opacity:0;
        transform:translateY(60%);
        transition:opacity .5s ease, transform .5s ease;
    }
    .word-reveal.is-inview .wr-word{
        opacity:1;
        transform:translateY(0);
    }
}
@media (prefers-reduced-motion: reduce){
    .reveal-up, .word-reveal .wr-word{
        opacity:1 !important;
        transform:none !important;
    }
}

/* ============================================================
   LETTER-SPACING FIX: .ls-minus-2px is a -2px tracking used on
   big desktop headings (looks fine at 60-80px font-size). On
   mobile these headings shrink a LOT (24-30px), so the same
   flat -2px eats a much bigger share of the space-character
   width, making words look cramped/letters running together,
   especially combined with .word-reveal's inline-block word
   spans. Loosen it back up on small screens.
============================================================ */
@media (max-width: 767px){
    .ls-minus-2px{
        letter-spacing: normal !important;
    }
}
@media (min-width: 768px) and (max-width: 991px){
    .ls-minus-2px{
        letter-spacing: -1px !important;
    }
}

/* ============================================================
   IMAGE ZOOM: wrap any <img> in a .img-zoom-wrap and give the
   img the classes "img-zoom reveal-up" — it fades/zooms in the
   first time it scrolls into view (using the same is-inview
   engine as .reveal-up, so it works on every device already),
   then zooms in a touch further on hover. Used site-wide for
   feature/content images (e.g. about-04.jpg on the homepage).
============================================================ */
.img-zoom-wrap{
    border-radius: 14px;
    overflow: hidden;
    display: block;
}
.img-zoom-wrap img.img-zoom{
    width: 100%;
    display: block;
    object-fit: cover;
}
@media (prefers-reduced-motion: no-preference){
    .img-zoom-wrap img.img-zoom.reveal-up{
        opacity: 0;
        transform: scale(1.15) !important;
        transition: transform 1s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
    }
    .img-zoom-wrap img.img-zoom.reveal-up.is-inview{
        opacity: 1;
        transform: scale(1) !important;
    }
    .img-zoom-wrap:hover img.img-zoom.reveal-up.is-inview{
        transform: scale(1.08) !important;
        transition: transform .6s ease, opacity 1s ease;
    }
}
@media (prefers-reduced-motion: reduce){
    .img-zoom-wrap img.img-zoom{
        opacity: 1 !important;
        transform: none !important;
    }
}