/* ========================================
   RESPONSIVE CSS — PHONE & TABLET
   Desktop is base — only mobile/tablet overrides here
   style.css se remove kiye gaye duplicate rules yahan moved hain
   
   Breakpoints:
     Large Tablet: max-width: 1024px
     Tablet:       max-width: 991px
     Mobile:       max-width: 768px
     Small:        max-width: 600px
     XSmall:       max-width: 480px
     XSmall+:      max-width: 380px
   ======================================== */

/* ─────────────────────────────────────────
   GLOBAL BASE FIXES
───────────────────────────────────────── */
@media (max-width: 991px) {
    html, body {
        overflow-x: hidden;
        width: 100%;
    }

    * { box-sizing: border-box; }

    img {
        max-width: 100%;
        height: auto;
    }

    .container {
        padding: 0 20px !important;
        width: 100%;
    }
}

/* ─────────────────────────────────────────
   1. HEADER & NAVIGATION
   (Moved from style.css lines 610-687)
───────────────────────────────────────── */
@media screen and (max-width: 991px) {
    header {
        padding: 10px 0;
    }

    .nav-container {
        max-width: 100%;
        margin: 0 !important;
        margin-left: 0 !important;
        padding: 0 16px;
    }

    /* Logo */
    .logo {
        margin-left: 0 !important;
    }

    .logo-img {
        height: 80px !important;
        width: auto;
        max-width: 200px;
    }

    /* Hamburger */
    .hamburger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(0, 86, 204, 0.12);
        border-radius: 10px;
        z-index: 1100;
        position: relative;
        gap: 0;
    }

    /* Nav slide-in menu */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 285px;
        height: 100vh;
        background: #ffffff;
        border-left: 1px solid rgba(0, 86, 204, 0.08);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.08);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 90px 24px 30px 24px;
        gap: 6px;
        border-radius: 0;
        overflow-y: auto;
        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        z-index: 1050;
    }

    .nav-menu.active { right: 0; }

    .nav-item,
    .nav-cta { width: 100%; }

    .nav-link {
        width: 100%;
        justify-content: space-between;
        font-size: 15px;
        padding: 12px 8px;
        border-bottom: 1px solid #f0f4fb;
        border-radius: 0;
    }

    .nav-link:hover,
    .nav-item.active .nav-link {
        background: none;
        padding-left: 10px;
        color: #0056cc;
    }

    .dropdown {
        position: static;
        transform: none !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        background: #f6f8fc;
        border: none;
        border-left: 3px solid #0056cc;
        border-radius: 0;
        padding: 6px 0 6px 14px;
        margin-top: 4px;
        display: none;
        min-width: 100%;
    }

    .nav-item.open-menu .dropdown { display: block; }

    .nav-cta {
        margin-top: 14px;
        justify-content: center;
        text-align: center;
        border-bottom: none !important;
    }

    /* Hamburger X animation */
    .hamburger.active span:nth-child(1) { transform: rotate(-45deg) translate(-4px, 5px); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: rotate(45deg) translate(-4px, -5px); }
}

@media screen and (max-width: 480px) {
    .nav-menu {
        width: 100%;
        right: -100%;
    }

    .logo-img {
        height: 68px !important;
        max-width: 180px;
    }
}

/* ─────────────────────────────────────────
   2. HERO SLIDER SECTION
   (style.css line 1159-1173 moved here)
───────────────────────────────────────── */
@media (max-width: 991px) {
    .hero-slider {
        min-height: 70vh;
        margin-top: 85px;
    }

    .slide-content {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100%;
    }

    .slider-btn {
        width: 42px !important;
        height: 42px !important;
        font-size: 20px !important;
        /* Buttons ko top se bottom pe shift kiya */
        top: auto !important;
        bottom: 25px !important;
        transform: none !important;
    }

    .slider-btn.prev { left: 10px !important; }
    .slider-btn.next { right: 10px !important; }

    .slide-stats {
        flex-wrap: wrap;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .hero-slider {
        min-height: 60vh;
        margin-top: 80px;
    }

    .slide-overlay,
    .slide-overlay--hc {
        background: linear-gradient(180deg, rgba(3, 10, 30, 0.72) 0%, rgba(4, 12, 34, 0.62) 38%, rgba(5, 14, 40, 0.82) 100%) !important;
    }

    .slide-bg,
    .slide-bg--s2,
    .slide-bg--hc {
        filter: brightness(0.76) saturate(1.04) !important;
    }

    .slide-content {
        top: 52%;
        min-height: 330px;
        padding-top: 24px;
        padding-bottom: 96px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(5, 10, 28, 0.24) 0%, rgba(5, 10, 28, 0.42) 100%);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    .hero-slider h1,
    .hero-slider h2 {
        font-size: clamp(21px, 5.4vw, 31px) !important;
        line-height: 1.14;
        letter-spacing: -0.02em;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    }

    .hero-slider p {
        font-size: 13px !important;
        line-height: 1.6;
        max-width: 92%;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    }

    .slide-eyebrow {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .slide-content > p:not(.slide-eyebrow) {
        margin-bottom: 0;
    }

    .slide-stats {
        gap: 10px;
        margin-top: 16px;
    }

    .slide-eyebrow--hc {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        max-width: 100%;
    }

    .slide-eyebrow-tagline {
        font-size: 0.92em;
    }

    .stat {
        column-gap: 8px;
    }

    .stat-num {
        font-size: 1.08rem;
    }

    .stat-lbl {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.82);
    }
}

@media (max-width: 480px) {
    .hero-slider {
        min-height: 640px;
        margin-top: 75px;
    }

    .slide-content {
        padding-left: 18px !important;
        padding-right: 18px !important;
        padding-top: 22px;
        padding-bottom: 110px;
        min-height: 360px;
        top: 48%;
        width: calc(100% - 20px);
        left: 10px;
        right: 10px;
        transform: translateY(-50%);
    }

    .hero-slider h1,
    .hero-slider h2 {
        font-size: clamp(19px, 5.6vw, 24px) !important;
        margin-bottom: 10px;
        line-height: 1.22;
    }

    .slide-overlay,
    .slide-overlay--hc {
        background: linear-gradient(180deg, rgba(3, 10, 30, 0.65) 0%, rgba(4, 12, 34, 0.54) 38%, rgba(5, 14, 40, 0.76) 100%) !important;
    }

    .slide-bg,
    .slide-bg--s2,
    .slide-bg--hc {
        filter: brightness(0.82) saturate(1.05) !important;
    }

    .slide-eyebrow--hc {
        gap: 4px;
        font-size: 8px !important;
        letter-spacing: 0.5px;
        max-width: calc(100% - 8px);
    }

    .slide-eyebrow-tagline {
        display: none;
    }

    .hero-slider h2.st-slide-h2-xs {
        font-size: 1.02rem !important;
        line-height: 1.18;
        letter-spacing: -0.02em;
    }

    .hero-slider p {
        font-size: 12.5px !important;
        max-width: 100%;
    }

    .slide-eyebrow {
        padding: 5px 10px;
        font-size: 9px;
        margin-bottom: 8px;
    }

    .slide-stats {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
        gap: 6px;
    }

    .stat-num {
        font-size: 0.92rem;
    }

    .stat-lbl {
        font-size: 0.54rem;
    }

    .stat {
        min-width: 0;
        column-gap: 5px;
    }

    .slide-stats .stat:last-child {
        margin-right: 10px;
    }

    .stat-icon {
        font-size: 0.82rem;
        padding-right: 0;
    }

    .slide-cta-wrap {
        flex-direction: row !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }

    .slide-cta-primary,
    .slide-cta-secondary {
        width: auto;
        font-size: 0.72rem;
        padding: 9px 12px;
    }
}

/* ─────────────────────────────────────────
   3. ABOUT SECTION — Card Reveal (st-about-section)
   (style.css line 1200-1210 moved here)
   NOTE: @media (min-width: 992px) block KEPT in style.css — desktop rule
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-about-section {
        height: auto !important;
        padding: 60px 20px !important;
    }

    .st-about-sticky {
        position: relative !important;
        height: auto !important;
        top: auto !important;
        width: 100%;
    }

    .st-about-grid {
        grid-template-columns: 1fr !important;
        gap: 40px;
    }

    .st-about-container {
        padding: 0 20px;
    }

    .st-cards-viewport {
        min-height: 380px;
    }
}

@media (max-width: 768px) {
    .st-about-section {
        padding: 50px 16px !important;
    }

    .st-cards-viewport {
        min-height: 320px;
    }

    .st-main-card {
        width: 150px !important;
        height: 215px !important;
        padding: 18px !important;
    }

    .st-cards-grid {
        grid-template-columns: repeat(2, 140px) !important;
        grid-template-rows: repeat(2, 210px) !important;
        gap: 12px !important;
    }

    .st-ach-card-wrapper {
        width: 140px !important;
        height: 210px !important;
    }

    .st-heading {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .st-about-section {
        padding: 40px 14px !important;
    }

    .st-cards-viewport {
        min-height: 280px;
    }

    .st-main-card {
        width: 130px !important;
        height: 190px !important;
        padding: 14px !important;
    }

    .st-cards-grid {
        grid-template-columns: repeat(2, 125px) !important;
        grid-template-rows: repeat(2, 185px) !important;
        gap: 10px !important;
    }

    .st-ach-card-wrapper {
        width: 125px !important;
        height: 185px !important;
    }
}

/* ─────────────────────────────────────────
   4. ABOUT SECTION — 3D Eco Visual (st-about)
   FIX: margin-left: calc(50% - 600px) negative margin reset
   + scale() transform for proportional shrinking on mobile
───────────────────────────────────────── */
@media (max-width: 1024px) {
    .st-about {
        padding: 70px 20px 80px !important;
        overflow-x: hidden !important;
    }

    /* ROOT FIX: negative calc margin-left reset kiya */
    .st-about-inner {
        grid-template-columns: 1fr !important;
        gap: 50px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Left text content — pehle upar */
    .st-about-copy {
        order: 1 !important;
        text-align: left;
    }

    /* List items font thoda chota — 1 line mein fit ho */
    .st-about-list li {
        font-size: 13px !important;
        gap: 10px;
    }

    .st-about-list {
        gap: 10px;
    }

    /* Eco-scene visual — neeche */
    .st-about-visual {
        order: 2 !important;
        height: 364px !important;
        min-height: unset !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* Scale approach: original 560px size rakho, visually scale karo
       Sab bubbles properly centered rehte hain — kuch cut nahi hota */
    .st-eco-scene {
        width: 560px !important;
        height: 560px !important;
        transform: scale(0.65) !important;
        transform-origin: center center !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        margin-top: 20px !important;
    }

    .st-about-desc { max-width: 100%; }
    .st-eco-m1 { left: 0% !important; }
}

@media (max-width: 768px) {
    .st-about {
        padding: 60px 16px 70px !important;
    }

    .st-about-inner {
        gap: 30px !important;
    }

    .st-about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Height = 560 × 0.6 = 336px */
    .st-about-visual {
        height: 336px !important;
    }

    .st-eco-scene {
        transform: scale(0.6) !important;
    }

    /* Metric cards — show karo mobile pe bhi */
    .st-eco-m1, .st-eco-m2 { display: flex !important; }
}

@media (max-width: 520px) {
    .st-about-cta-row { flex-direction: column; align-items: flex-start; gap: 14px; }
    .st-about-social-proof::before { display: none; }
}

@media (max-width: 480px) {
    .st-about {
        padding: 50px 14px 60px !important;
    }

    .st-about-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Height = 560 × 0.55 = 308px */
    .st-about-visual {
        height: 308px !important;
    }

    .st-eco-scene {
        transform: scale(0.55) !important;
    }

    .st-eco-chart { width: 120px !important; height: 65px !important; }
}

@media (max-width: 380px) {
    /* Height = 560 × 0.47 = 263px */
    .st-about-visual {
        height: 263px !important;
    }

    .st-eco-scene {
        transform: scale(0.47) !important;
    }
}


/* ─────────────────────────────────────────
   5. INDUSTRIES SECTION
   (style.css lines 5559-5606 moved here)
───────────────────────────────────────── */
@media (max-width: 991px) {
    .industries-section {
        padding: 60px 20px;
    }

    .industries-container {
        padding: 0;
    }

    .industries-header {
        margin-bottom: 40px;
    }

    .industries-header h2 {
        font-size: 30px !important;
    }

    .industries-header p {
        font-size: 14px;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px;
    }
}

@media (max-width: 768px) {
    .industries-section {
        padding: 50px 16px;
    }

    .industry-badge {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .industries-header h2 {
        font-size: 24px !important;
        margin-bottom: 28px;
    }

    .industries-header h2::after {
        width: 140px;
    }

    .industries-header h2::before {
        width: 180px;
    }

    .industries-header p {
        font-size: 13px;
        line-height: 1.7;
    }

    .industries-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px;
    }

    .industry-image {
        height: 140px !important;
    }
}

@media (max-width: 480px) {
    .industries-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .industry-image {
        height: 160px !important;
    }

    .industry-card h3 {
        margin-top: 58px;
    }
}

/* ─────────────────────────────────────────
   6. SERVICES SECTION (3D Carousel)
   NOTE: data-state transforms KEPT in style.css
         (carousel 3D functionality rules)
         Yahan sirf layout/sizing overrides hain
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-services-section {
        padding: 60px 0;
        overflow: hidden;
    }

    .st-services-header {
        padding: 0 20px;
    }

    .st-services-title {
        font-size: 26px !important;
        letter-spacing: -0.5px;
    }

    .st-services-subtitle {
        font-size: 14px;
    }

    .st-svc-cta-wrap {
        padding: 0 20px;
    }
}

@media (max-width: 600px) {
    .st-services-title {
        font-size: 22px !important;
    }

    .st-svc-scene {
        touch-action: pan-y;
    }

    /* Card + track height badho — sab content + button visible ho */
    .st-svc-card,
    .st-svc-track {
        height: 520px !important;
    }

    .st-svc-card {
        transition-duration: 0.36s !important;
        transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
        backface-visibility: hidden;
        transform-style: preserve-3d;
    }

    .st-svc-scene {
        height: 570px !important;
    }

    /* Card inner padding compact */
    .st-svc-card-inner {
        padding: 22px 18px 18px !important;
        gap: 0 !important;
    }

    /* Card name font thoda chota */
    .st-svc-name {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    /* SEO — "Search Engine Optimization" lamha hai, 16px pe 1 line */
    .st-svc-card[data-index="0"] .st-svc-name {
        font-size: 16px !important;
        letter-spacing: -0.4px !important;
        line-height: 1.2 !important;
    }

    /* Google Ads — "Google Ads Management" short hai, 18px theek */
    .st-svc-card[data-index="2"] .st-svc-name {
        font-size: 18px !important;
        letter-spacing: -0.3px !important;
        line-height: 1.2 !important;
    }

    /* Points list compact */
    .st-cnt-points li,
    .st-web-points li,
    .st-ppc-points li,
    .st-smm-points li {
        padding: 7px 0 !important;
    }

    /* Desc margin compact */
    .st-smm-desc,
    .st-ppc-desc,
    .st-web-desc,
    .st-cnt-desc {
        margin-bottom: 6px !important;
        font-size: 11px !important;
    }

    /* Underline margin compact */
    .st-smm-underline,
    .st-ppc-underline,
    .st-web-underline,
    .st-cnt-underline {
        margin: 4px 0 8px !important;
    }

    /* Tag margin compact */
    .st-smm-tag,
    .st-ppc-tag,
    .st-web-tag,
    .st-cnt-tag {
        margin-top: 10px !important;
        margin-bottom: 4px !important;
    }
}


@media (max-width: 480px) {
    .st-services-title {
        font-size: 20px !important;
    }

    .st-services-subtitle {
        font-size: 13px;
    }

    .st-svc-cta-btn {
        font-size: 13px !important;
        padding: 14px 24px !important;
    }
}

/* ─────────────────────────────────────────
   7. PORTFOLIO SECTION
───────────────────────────────────────── */
@media (max-width: 991px) {
    .portfolio-showcase {
        padding: 60px 12px;
    }

    .portfolio-outer {
        border-radius: 30px;
        padding: 8px;
    }

    .portfolio-shell {
        border-radius: 24px;
        padding: 20px 16px 28px;
    }

    .portfolio-shell h2 {
        font-size: 32px !important;
        margin-bottom: 16px;
    }

    .portfolio-tabs {
        padding: 10px;
    }

    .tabs-track {
        gap: 8px !important;
    }

    .portfolio-tabs button {
        padding: 10px 18px !important;
        font-size: 12px;
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
}

@media (max-width: 768px) {
    .portfolio-shell h2 {
        font-size: 26px !important;
        letter-spacing: -1px;
    }

    .portfolio-tabs button {
        padding: 9px 14px !important;
        font-size: 11px;
    }
}

@media (max-width: 480px) {
    .portfolio-showcase {
        padding: 50px 8px;
    }

    .portfolio-shell h2 {
        font-size: 22px !important;
        letter-spacing: -0.5px;
    }

    .portfolio-outer {
        border-radius: 20px;
    }

    .portfolio-shell {
        border-radius: 16px;
        padding: 16px 12px 22px;
    }

    .portfolio-tabs button {
        padding: 8px 12px !important;
        font-size: 10px;
    }

    /* Phone pe 1 column — ek ek image full width */
    .portfolio-grid {
        grid-template-columns: 1fr !important;
        gap: 14px;
    }
}

/* ─────────────────────────────────────────
   8. WORK PROCESS SECTION
───────────────────────────────────────── */
@media (max-width: 991px) {
    .work-process {
        padding: 60px 20px;
    }

    .process-heading {
        margin-bottom: 40px;
    }

    .process-heading h2 {
        font-size: 28px !important;
        letter-spacing: -1px;
    }

    .process-heading p {
        font-size: 14px !important;
    }

    /* Hide SVG snake lines */
    .process-line {
        display: none !important;
    }

    /* Steps: absolute → CSS grid */
    .process-wrapper {
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        position: static !important;
    }

    .step {
        position: static !important;
        transform: none !important;
        width: auto !important;
        text-align: center;
        background: #fff;
        border: 1px solid rgba(0,0,0,0.06);
        border-radius: 16px;
        padding: 24px 16px !important;
        box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        display: block !important;
    }

    .step1, .step2, .step3,
    .step4, .step5, .step6 {
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }

    .step-number {
        width: 64px !important;
        height: 64px !important;
        font-size: 28px !important;
        border-width: 5px !important;
    }

    .step h3 {
        font-size: 16px !important;
        margin-top: 14px !important;
    }

    .step p {
        font-size: 13px !important;
        line-height: 1.6 !important;
    }

    /* Process features bar */
    .process-features {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    .feature-box {
        border-right: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 20px;
    }

    .feature-box:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .work-process {
        padding: 50px 16px;
    }

    .process-heading h2 {
        font-size: 24px !important;
    }

    .step-number {
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }

    .step {
        padding: 18px 12px !important;
    }
}

@media (max-width: 480px) {
    .process-wrapper {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .process-features {
        grid-template-columns: 1fr !important;
    }
}




/* ─────────────────────────────────────────
   9. FREE AUDIT FORM SECTION
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-formrow {
        padding: 60px 24px !important;
        margin-left: 0 !important;
    }

    .st-fr-inner {
        flex-direction: column !important;
        gap: 40px;
    }

    .st-fr-copy,
    .st-fr-card-wrap {
        width: 100%;
        max-width: 100%;
    }

    .st-fr-card-wrap {
        flex-direction: column;
    }

    .st-fr-dashboard {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: scale(0.85) !important;
        transform-origin: top center !important;
        width: 100%;
        margin-bottom: -80px;
    }

    /* Form card phone pe upar aaye — dashboard ke space ko overlap kare */
    .st-fr-card {
        position: relative;
        z-index: 2;
        margin-top: -60px !important;
    }

    .st-fr-headline {
        font-size: 28px;
    }

    .st-fr-stats {
        flex-wrap: wrap;
        gap: 12px;
    }

    .st-fr-founders-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .st-formrow {
        padding: 50px 20px !important;
    }

    /* Phone pe copy aur form ka gap kam */
    .st-fr-inner {
        gap: 20px !important;
    }

    .st-fr-headline {
        font-size: 24px;
    }

    .st-fr-sub {
        font-size: 13px;
    }

    .st-fr-card {
        padding: 24px 18px !important;
    }

    .st-fr-card-header h3 {
        font-size: 20px !important;
    }

    .st-fr-row {
        flex-direction: column !important;
        gap: 14px;
    }

    .st-fr-field {
        width: 100% !important;
    }

    .st-fr-founders-wrap {
        flex-direction: column;
    }

    .st-fr-founders-and {
        display: none;
    }
}

/* Phone pe 2 alag bade boxes */
@media (max-width: 600px) {
    .st-fr-founders-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        max-width: 100% !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Dono cards alag alag box banenge */
    .st-fr-founder-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 10px !important;
        padding: 18px 12px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 16px !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
    }

    /* Avatar bada */
    .st-fr-avatar {
        width: 68px !important;
        height: 68px !important;
    }

    .st-fr-avatar-initials {
        width: 68px !important;
        height: 68px !important;
        font-size: 22px !important;
    }

    /* Info text center + bada */
    .st-fr-founder-info {
        align-items: center !important;
        gap: 4px !important;
    }

    .st-fr-founder-info strong {
        font-size: 14px !important;
    }

    .st-fr-role {
        font-size: 11px !important;
    }

    .st-fr-role-tag {
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* & divider hide */
    .st-fr-founders-and {
        display: none !important;
    }

    /* Quote box — better mobile styling */
    .st-fr-founders-quote {
        max-width: 100% !important;
        padding: 20px 18px !important;
        background: rgba(59, 130, 246, 0.06) !important;
        border: 1px solid rgba(96, 165, 250, 0.2) !important;
        border-radius: 18px !important;
        margin-bottom: 20px !important;
        text-align: center;
    }

    .st-fr-quote-icon {
        font-size: 18px !important;
        opacity: 0.7 !important;
        margin-bottom: 10px !important;
    }

    .st-fr-founders-quote p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 14px !important;
    }

    /* Badges 2×2 grid */
    .st-fr-exp-badges--row {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        flex-direction: unset !important;
    }

    .st-fr-exp-badges--row span {
        font-size: 10px !important;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 6px 8px !important;
        justify-content: center;
        gap: 4px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .st-formrow {
        padding: 40px 14px !important;
    }

    .st-fr-headline {
        font-size: 32px;
    }

    .st-fr-stat-divider {
        display: none;
    }

    .st-fr-card-header h3 {
        font-size: 18px !important;
    }

    .st-fr-card-header p {
        font-size: 12px !important;
    }

    .st-fr-exp-badges--row {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .st-fr-cube {
        display: none;
    }
}

/* ─────────────────────────────────────────
   10. VIDEO TESTIMONIALS SECTION
   (style.css lines 4663-4682 moved here —
    corrected sizes: 210px width instead of 220px,
    22px heading instead of 38px)
───────────────────────────────────────── */
@media (max-width: 991px) {
    .video-testimonials {
        padding: 60px 20px;
    }

    .vt-heading h2 {
        font-size: 28px !important;
    }

    .vt-heading p {
        font-size: 14px;
    }

    .carousel_slide {
        height: 500px !important;
    }

    /* Stage height = carousel_slide height taaki ring center ho */
    .stage {
        height: 100% !important;
    }

    .ring_wrapper {
        width: 240px !important;
        height: 420px !important;
    }

    .port_img {
        width: 240px !important;
        height: 380px !important;
    }
}

@media (max-width: 768px) {
    .video-testimonials {
        padding: 50px 12px;
    }

    .vt-heading h2 {
        font-size: 22px !important;
    }

    .carousel_slide {
        height: 440px !important;
    }

    .stage {
        height: 100% !important;
    }

    .ring_wrapper {
        width: 210px !important;
        height: 360px !important;
    }

    .port_img {
        width: 210px !important;
        height: 340px !important;
    }

    .ring {
        touch-action: pan-y;
    }

    video {
        max-width: 100%;
        height: auto;
    }
}

@media (max-width: 480px) {
    .vt-heading h2 {
        font-size: 20px !important;
    }

    .carousel_slide {
        height: 380px !important;
    }

    .ring_wrapper {
        width: 185px !important;
        height: 310px !important;
    }

    .port_img {
        width: 185px !important;
        height: 290px !important;
    }
}

/* ── Swipe Hint — mobile only ── */
.vt-swipe-hint {
    display: none; /* desktop pe hidden */
}

@media (max-width: 991px) {
    .vt-swipe-hint {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
        margin-top: 14px;
        padding-bottom: 10px;
    }

    .vt-swipe-arrow {
        display: flex;
        align-items: center;
        gap: 2px;
        color: #6c86ff;
    }

    /* First chevron */
    .vt-swipe-arrow i:first-child {
        font-size: 16px;
        opacity: 0.5;
        animation: swipeChevron 1.4s ease-in-out infinite;
    }

    /* Second chevron — delayed */
    .vt-swipe-arrow i:last-child {
        font-size: 20px;
        opacity: 0.9;
        animation: swipeChevron 1.4s ease-in-out 0.2s infinite;
    }

    @keyframes swipeChevron {
        0%, 100% { transform: translateX(0); opacity: 0.4; }
        50%       { transform: translateX(5px); opacity: 1; }
    }

    .vt-swipe-text {
        font-size: 12px;
        color: #8fa8d8;
        letter-spacing: 0.5px;
        font-weight: 500;
    }
}


/* ─────────────────────────────────────────
   11. TEXT TESTIMONIALS (Marquee Reviews)
   (style.css lines 4425-4448 moved here —
    corrected values: 22px heading, 230px card
    instead of wrong 42px + 320px)
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-testimonials {
        padding: 60px 0;
        overflow: hidden;
    }

    .st-heading h2 {
        font-size: 28px !important;
    }

    .st-heading p {
        font-size: 14px;
    }

    .st-rating-box {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    .review-card {
        min-width: 260px !important;
        width: 260px !important;
    }
}

@media (max-width: 768px) {
    .st-testimonials {
        padding: 50px 0;
    }

    /* Phone pe marquee slow — 55s */
    .marquee-left {
        animation-duration: 55s !important;
    }

    .marquee-right {
        animation-duration: 55s !important;
    }

    .st-testimonials .st-heading h2 {
        font-size: 28px !important;
    }

    .st-testimonials .st-heading p {
        font-size: 11px !important;
        max-width: 100% !important;
        white-space: nowrap;
    }

    .review-card {
        min-width: 270px !important;
        width: 270px !important;
        padding: 18px 14px !important;
    }

    .review-top h4 {
        font-size: 15px !important;
    }

    .review-card p {
        font-size: 13px !important;
    }

    /* Rating box — 2-col grid */
    .st-rating-box {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        align-items: center !important;
        gap: 0 !important;
        width: calc(100% - 40px) !important;
        max-width: 400px !important;
        margin: 24px auto 0 !important;
        padding: 18px 20px !important;
        border-radius: 20px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        flex-direction: row !important;
        text-align: left !important;
    }

    /* Left side — LEFT aligned */
    .rating-number {
        font-size: 32px !important;
        line-height: 1 !important;
        grid-column: 1;
        grid-row: 1;
        text-align: left !important;
    }

    .rating-stars {
        font-size: 15px !important;
        grid-column: 1;
        grid-row: 2;
        letter-spacing: 2px;
        text-align: left !important;
        justify-content: flex-start !important;
        display: flex !important;
    }

    .rating-text {
        font-size: 11px !important;
        grid-column: 1;
        grid-row: 3;
        color: #9fb4db;
        text-align: left !important;
    }

    /* Right side: brands SIDE BY SIDE (row), bade */
    .rating-brands {
        flex-direction: row !important;
        gap: 12px !important;
        grid-column: 2;
        grid-row: 1 / 4;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        padding-left: 18px;
        border-left: 1px solid rgba(255, 255, 255, 0.12);
    }

    .rating-brands i {
        font-size: 16px !important;
    }

    /* Hide vertical dividers */
    .divider {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .review-card {
        min-width: 240px !important;
        width: 240px !important;
    }

    .st-heading h2 {
        font-size: 22px !important;
    }
}


/* ─────────────────────────────────────────
   12. MARQUEE TICKER
───────────────────────────────────────── */
@media (max-width: 768px) {
    .searchtech-marquee {
        padding: 10px 0;
    }

    .marquee-content span {
        font-size: 12px !important;
        padding: 0 18px !important;
    }
}

/* ─────────────────────────────────────────
   13. FAQ SECTION
───────────────────────────────────────── */
@media (max-width: 991px) {
    .faq-section {
        padding: 60px 20px;
    }

    .faq-header h2 {
        font-size: 26px;
    }

    .faq-header p {
        font-size: 14px;
    }

    .faq-question {
        font-size: 14px;
        padding: 16px 18px;
    }

    .faq-answer p {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .faq-section {
        padding: 50px 16px;
    }

    .faq-header h2 {
        font-size: 22px;
    }

    .faq-question {
        font-size: 13px;
        padding: 14px 16px;
    }
}

@media (max-width: 480px) {
    .faq-header h2 {
        font-size: 20px;
    }

    .faq-question {
        font-size: 12px;
        padding: 12px 14px;
    }
}

/* ─────────────────────────────────────────
   14. MAP / LOCATION SECTION
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-map-section {
        height: 380px !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .st-map-iframe {
        width: 100%;
        height: 380px !important;
        border: none;
    }
}

@media (max-width: 480px) {
    .st-map-section {
        height: 350px !important;
        background: transparent !important;
        padding: 0 !important;
    }

    .st-map-iframe {
        height: 350px !important;
    }
}

/* ─────────────────────────────────────────
   15. FOOTER
   (style.css lines 968-991 moved here —
    corrected font sizes: 16px/14px/13px
    instead of wrong 30px/22px/20px)
───────────────────────────────────────── */
@media (max-width: 991px) {
    .st-footer {
        padding-top: 50px;
    }

    .st-footer .container {
        padding: 0 20px;
    }

    .st-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 32px 20px !important;
        margin-left: 0 !important;
        padding: 0;
    }

    /* Reset style.css ki galat negative margins */
    .st-footer-grid .st-footer-col:nth-child(2),
    .st-footer-grid .st-footer-col:nth-child(3),
    .st-footer-grid .st-footer-col:nth-child(4) {
        margin-left: 0 !important;
    }

    .st-footer-col h4 {
        font-size: 16px !important;
        margin-bottom: 14px;
    }

    .st-footer-logo {
        width: 180px !important;
    }

    .st-footer-desc {
        font-size: 13px !important;
        max-width: 100% !important;
    }

    .st-links a {
        font-size: 14px !important;
    }

    .st-footer-bottom-wrap {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        text-align: center;
        margin-left: 0 !important;
        padding: 0;
    }

    .st-footer-bottom p,
    .st-bottom-links a {
        font-size: 9px !important;
        letter-spacing: -0.2px;
    }

    .st-contact-list {
        font-size: 14px !important;
    }
}

@media (max-width: 768px) {
    .st-footer-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px 16px !important;
    }

    .st-footer-bottom-wrap {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .st-bottom-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .st-footer {
        padding-top: 40px;
    }

    .st-footer-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .st-footer-logo {
        width: 160px !important;
    }

    .st-footer-desc {
        font-size: 12px !important;
    }

    .st-social {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    .st-contact-list {
        font-size: 12px !important;
        gap: 10px;
    }

    .st-links a {
        font-size: 13px !important;
    }

    .st-footer-bottom p,
    .st-bottom-links a {
        font-size: 9px !important;
        letter-spacing: -0.2px;
    }
}

/* ─────────────────────────────────────────
   16. LANDSCAPE + EXTRA SMALL FIXES
───────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-slider {
        min-height: auto;
        height: 100vh;
    }
}

@media (max-width: 380px) {
    .st-footer-logo { width: 140px !important; }
    .st-footer-desc { font-size: 11px !important; }
    .st-footer-col h4 { font-size: 13px !important; }
    .st-links a { font-size: 12px !important; }
    .st-contact-list { font-size: 11px !important; }
    .hero-slider h1, .hero-slider h2 { font-size: 18px !important; }
    .st-fr-headline { font-size: 28px !important; }
    .vt-heading h2 { font-size: 18px !important; }
    .faq-header h2 { font-size: 18px !important; }
}

/* ─────────────────────────────────────────
   17. GLOBAL CONTAINER NORMALIZER
───────────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: 0 16px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    section {
        overflow-x: hidden;
    }

    /* mob-br: sirf mobile pe line break, desktop pe hidden */
    br.mob-br { display: block; }
}

/* Desktop pe mob-br hide */
@media (min-width: 769px) {
    br.mob-br { display: none; }
}

/* ═══════════════════════════════════════════════════════
   18. PORTFOLIO LIGHTBOX — Mobile only
   Tap on image → fullscreen preview with X close button
═══════════════════════════════════════════════════════ */

/* Image clarity on mobile */
@media (max-width: 991px) {
    .portfolio-card {
        cursor: pointer;
    }

    .portfolio-card img {
        /* natural rendering — photos ke liye best */
        image-rendering: auto;
    }
}

/* Lightbox base — hidden by default on all screens */
.pf-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

.pf-lightbox.active {
    display: flex;
}

/* Dark overlay */
.pf-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    cursor: pointer;
}

/* Image content box */
.pf-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 100%;
    max-height: 100dvh;
}

.pf-lightbox-content img {
    max-width: 95vw;
    max-height: 88dvh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    /* No object-fit — natural size, no distortion */
    image-rendering: auto;
    /* Prevent GPU compositing blur */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* ✕ Close button */
.pf-lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    background: rgba(30, 30, 30, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.pf-lightbox-close:hover,
.pf-lightbox-close:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}



/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
@media (max-width: 991px) {
    body.st-contact-page #canvas-container {
        height: 112px;
    }

    body.st-contact-page main {
        padding-top: 92px;
        background: transparent;
    }

    .st-contact-breadcrumb {
        padding: 56px 0 66px;
    }

    .st-contact-breadcrumb-title {
        font-size: clamp(2.1rem, 6vw, 3.2rem);
    }

    .st-contact-hero {
        padding: 46px 0 60px;
    }

    .st-contact-hero-grid {
        max-width: 100%;
    }

    .st-contact-hero-shell {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 28px 24px;
        border-radius: 28px;
    }

    .st-contact-hero-copy {
        max-width: 100%;
        padding-top: 0;
    }

    .st-contact-hero-trust {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        max-width: 100%;
    }

    .st-contact-method-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .st-contact-methods .container {
        padding: 28px 24px 26px;
        border-radius: 24px;
    }

    .st-contact-methods-trust {
        padding: 18px 20px;
    }

    .st-trust-bar-inner {
        flex-wrap: wrap;
        gap: 18px;
    }

    .st-trust-google-group {
        flex-basis: 100%;
        padding-top: 14px;
        border-top: 1px solid rgba(2, 34, 82, 0.06);
    }
}

@media (max-width: 768px) {
    body.st-contact-page #canvas-container {
        height: 96px;
    }

    body.st-contact-page main {
        padding-top: 84px;
        background: transparent;
    }

    .st-contact-breadcrumb {
        padding: 50px 0 58px;
    }

    .st-contact-breadcrumb-trail {
        font-size: 12px;
        padding: 8px 14px;
    }

    .st-contact-breadcrumb-title {
        margin-top: 14px;
        font-size: clamp(1.95rem, 8vw, 2.7rem);
    }

    .st-contact-hero {
        padding: 40px 0 48px;
    }

    .st-contact-hero-shell {
        padding: 22px 18px;
        border-radius: 24px;
    }

    .st-contact-title {
        font-size: clamp(1.95rem, 8.6vw, 2.7rem);
        line-height: 1.04;
    }

    .st-contact-subtitle {
        font-size: 15px;
        line-height: 1.72;
    }

    .st-contact-hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .st-contact-primary,
    .st-contact-secondary {
        width: 100%;
        max-width: 100%;
        min-height: 74px;
    }

    .st-contact-panel-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .st-contact-panel-logo {
        width: 136px;
    }

    .st-contact-panel-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .st-contact-methods {
        padding: 12px 0 62px;
    }

    .st-contact-section-head h2 {
        font-size: 24px;
    }

    .st-contact-section-head p {
        font-size: 11px;
    }

    .st-contact-methods .container {
        padding: 22px 18px 20px;
        border-radius: 22px;
    }

    .st-contact-method-grid {
        grid-template-columns: 1fr;
    }

    .st-contact-method-card {
        padding: 22px 18px;
        align-items: center;
        text-align: center;
    }

    .st-contact-method-card h3 {
        font-size: 20px;
    }

    .st-contact-method-card p {
        min-height: 0;
    }

    .st-method-cta {
        width: 100%;
        justify-content: center;
    }

    .st-method-meta {
        margin-top: 12px;
        padding-top: 12px;
        justify-content: center;
    }

    .st-contact-benefit {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    body.st-contact-page #canvas-container {
        height: 88px;
    }

    body.st-contact-page main {
        padding-top: 76px;
        background: transparent;
    }

    .st-contact-breadcrumb {
        padding: 44px 0 50px;
    }

    .st-contact-breadcrumb-trail {
        gap: 8px;
        padding: 7px 12px;
        font-size: 10px;
    }

    .st-contact-breadcrumb-title {
        margin-top: 12px;
        font-size: clamp(1.7rem, 9vw, 2.2rem);
    }

    .st-contact-hero {
        padding: 34px 0 42px;
    }

    .st-contact-badge {
        font-size: 10px;
        padding: 7px 12px;
    }

    .st-contact-title {
        margin: 12px 0 10px;
        font-size: clamp(1.78rem, 9vw, 2.3rem);
    }

    .st-contact-subtitle {
        font-size: 13.5px;
    }

    .st-contact-point {
        align-items: flex-start;
        font-size: 13px;
    }

    .st-contact-hero-panel {
        padding: 18px;
        border-radius: 22px;
    }

    .st-contact-panel-card {
        padding: 16px;
    }

    .st-contact-panel-item strong {
        font-size: 13.5px;
    }

    .st-contact-panel-metrics div {
        padding: 12px 8px;
    }

    .st-contact-panel-metrics strong {
        font-size: 18px;
    }

    .st-contact-panel-metrics span {
        font-size: 11px;
    }

    .st-contact-trust-group {
        gap: 12px;
    }

    .st-contact-trust-group p {
        max-width: 100%;
        font-size: 11px;
    }

    .st-contact-section-head {
        margin-bottom: 24px;
    }

    .st-contact-section-head h2 {
        font-size: 21px;
        line-height: 1.3;
    }

    .st-contact-section-head p {
        font-size: 10px;
        line-height: 1.6;
    }

    .st-contact-mini-tag {
        padding: 9px 14px;
        font-size: 10px;
        letter-spacing: 0.1em;
    }

    .st-contact-method-icon-wrap {
        width: 58px;
        height: 58px;
        margin-bottom: 14px;
    }

    .st-contact-method-icon {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        font-size: 18px;
    }

    .st-contact-method-card h3 {
        font-size: 18px;
    }

    .st-contact-method-card p {
        font-size: 13px;
    }

    .st-method-cta {
        font-size: 13px;
        min-height: 42px;
        padding: 0 14px;
    }

    .st-method-meta {
        font-size: 11px;
    }

    .st-contact-methods-trust {
        margin-top: 14px;
        padding: 16px 18px;
    }

    .st-trust-bar-inner {
        flex-direction: column;
        gap: 14px;
        align-items: flex-start;
    }

    .st-trust-google-group {
        flex-basis: auto;
        padding-top: 12px;
        border-top: 1px solid rgba(2, 34, 82, 0.06);
        width: 100%;
    }

    .st-contact-methods-trust-group {
        gap: 14px;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
    }

    .st-trust-avatar {
        width: 30px;
        height: 30px;
        margin-right: -7px;
        font-size: 10px;
    }

    .st-contact-methods-trust-group strong {
        font-size: 14px;
    }

    .st-contact-methods-trust-group span {
        font-size: 11px;
    }

    .st-trust-google-info strong {
        font-size: 18px;
    }

    .st-trust-stars {
        font-size: 12px;
    }
}


/* ═══════════════════════════════════════════════════════
   18. PORTFOLIO LIGHTBOX — Mobile only
   Tap on image → fullscreen preview with X close button
═══════════════════════════════════════════════════════ */
/* Image clarity on mobile */
@media (max-width: 991px) {
    .portfolio-card {
        cursor: pointer;
    }
    .portfolio-card img {
        /* natural rendering — photos ke liye best */
        image-rendering: auto;
    }
}
/* Lightbox base — hidden by default on all screens */
.pf-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
}
.pf-lightbox.active {
    display: flex;
}
/* Dark overlay */
.pf-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.93);
    cursor: pointer;
}
/* Image content box */
.pf-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 100%;
    max-height: 100dvh;
}
.pf-lightbox-content img {
    max-width: 95vw;
    max-height: 88dvh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    /* No object-fit — natural size, no distortion */
    image-rendering: auto;
    /* Prevent GPU compositing blur */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}
/* ✕ Close button */
.pf-lightbox-close {
    position: fixed;
    top: 18px;
    right: 18px;
    width: 46px;
    height: 46px;
    background: rgba(30, 30, 30, 0.85);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.pf-lightbox-close:hover,
.pf-lightbox-close:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}



/* ==========================================================
   PORTFOLIO PAGE RESPONSIVE
   ========================================================== */
@media (max-width: 991px) {
    .st-portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .st-portfolio-filters {
        gap: 8px;
    }
    
    .st-port-tab {
        padding: 8px 18px;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .st-portfolio-grid {
        grid-template-columns: 1fr;
    }
    
    .st-portfolio-section {
        padding: 40px 0 60px;
    }
    
    .st-port-tab {
        padding: 6px 14px;
        font-size: 13px;
    }
    
.st-sub-tab {
        font-size: 13px;
        padding: 4px 10px;
    }
}

@media (max-width: 768px) {
    .st-mobile-quick-actions {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        position: fixed;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom));
        z-index: 1400;
        pointer-events: auto;
    }

    .st-mobile-quote-btn {
        display: inline-flex;
        position: fixed;
        left: 0;
        top: 56%;
        width: 42px;
        min-height: 128px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 7px;
        border-radius: 0 16px 16px 0;
        background: linear-gradient(135deg, #0b63ff 0%, #18a0ff 100%);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.2px;
        line-height: 1.15;
        text-align: center;
        box-shadow: 10px 14px 28px rgba(11, 99, 255, 0.28);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-left: 0;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        white-space: normal;
        text-decoration: none;
        z-index: 1401;
        transform: translateY(-50%);
    }

    .st-mobile-quote-btn i {
        font-size: 14px;
    }

    .st-mobile-quote-btn span {
        display: block;
    }

    .st-mobile-action-stack {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
    }

    .st-mobile-action-btn {
        width: 52px;
        height: 52px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(8, 24, 58, 0.86);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 16px 28px rgba(2, 14, 38, 0.28);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        text-decoration: none;
        transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .st-mobile-action-btn:hover,
    .st-mobile-action-btn:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 18px 32px rgba(2, 14, 38, 0.34);
    }

    .st-mobile-action-btn--whatsapp {
        background: linear-gradient(135deg, #1fa855 0%, #25d366 100%);
    }

    .st-mobile-action-btn[data-scroll-top] {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    }

    .st-mobile-action-btn i {
        font-size: 18px;
    }

    body.st-mobile-quote-open {
        overflow: hidden;
    }

    .st-mobile-quote-modal {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 2200;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.22s ease, visibility 0.22s ease;
    }

    .st-mobile-quote-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .st-mobile-quote-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 8, 23, 0.58);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .st-mobile-quote-sheet {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 50%;
        max-height: calc(100vh - 28px);
        overflow-y: auto;
        padding: 18px 16px 16px;
        border-radius: 22px;
        background: linear-gradient(180deg, rgba(248, 251, 255, 0.98) 0%, rgba(231, 241, 255, 0.98) 100%);
        border: 1px solid rgba(14, 94, 180, 0.14);
        box-shadow: 0 24px 70px rgba(2, 8, 23, 0.32);
        transform: translateY(calc(-50% + 18px));
        transition: transform 0.24s ease;
    }

    .st-mobile-quote-modal.is-open .st-mobile-quote-sheet {
        transform: translateY(-50%);
    }

    .st-mobile-quote-close {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 12px;
        background: #ffffff;
        color: #0f2f66;
        box-shadow: 0 8px 22px rgba(15, 47, 102, 0.12);
    }

    .st-mobile-quote-head {
        padding-right: 42px;
        margin-bottom: 14px;
    }

    .st-mobile-quote-head span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 9px;
        border-radius: 999px;
        background: rgba(13, 99, 255, 0.1);
        color: #0d63ff;
        font-size: 11px;
        font-weight: 800;
    }

    .st-mobile-quote-head h3 {
        margin: 10px 0 4px;
        color: #102345;
        font-size: 20px;
        line-height: 1.18;
    }

    .st-mobile-quote-head p {
        margin: 0;
        color: #54657f;
        font-size: 12px;
        line-height: 1.45;
    }

    .st-mobile-quote-form {
        display: grid;
        gap: 10px;
    }

    .st-mobile-quote-form label {
        display: grid;
        gap: 6px;
        color: #1f3356;
        font-size: 12px;
        font-weight: 700;
    }

    .st-mobile-quote-form input,
    .st-mobile-quote-form select,
    .st-mobile-quote-form textarea {
        width: 100%;
        min-height: 44px;
        padding: 11px 12px;
        border: 1px solid rgba(15, 47, 102, 0.14);
        border-radius: 12px;
        background: #ffffff;
        color: #102345;
        font-size: 14px;
        outline: none;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    .st-mobile-quote-form textarea {
        min-height: 74px;
        resize: none;
        line-height: 1.4;
    }

    .st-mobile-quote-form input:focus,
    .st-mobile-quote-form select:focus,
    .st-mobile-quote-form textarea:focus {
        border-color: rgba(13, 99, 255, 0.58);
        box-shadow: 0 0 0 3px rgba(13, 99, 255, 0.12);
    }

    .st-mobile-quote-submit {
        min-height: 48px;
        margin-top: 4px;
        border: 0;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: linear-gradient(135deg, #1fa855 0%, #25d366 100%);
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
        box-shadow: 0 14px 26px rgba(37, 211, 102, 0.28);
    }
}