/* ============================================================
   RESPONSIVE FIXES – Cross‑browser + All Devices
   ============================================================ */

/* ── Fix for very small screens ── */
@media (max-width: 480px) {
    .hero-content-version2 h1 {
        font-size: calc(1.8rem + 1.5vw) !important;
    }
    .section-title-premium {
        font-size: 2rem !important;
    }
    .display-2, .display-3, .display-4 {
        font-size: calc(1.5rem + 2vw) !important;
    }
    .hero-video-grid .vid-card {
        height: 180px !important;
    }
    .industry-card-fit {
        width: 120px !important;
        min-width: 100px !important;
    }
    .industry-card-fit span {
        font-size: 10px !important;
    }
    .numbers-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    .number-item h2 {
        font-size: 1.6rem !important;
    }
    .why-grid-modern {
        grid-template-columns: 1fr !important;
    }
    .service-block-iconic {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        margin: 50px 0 !important;
    }
    .service-image-card {
        height: 300px !important;
        min-height: 250px !important;
    }
    .service-card-content h3 {
        font-size: 20px !important;
    }
    .contact-row {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .contact-form-wrapper {
        padding: 25px 16px !important;
    }
    .projects-grid {
        grid-template-columns: 1fr !important;
    }
    .trusted-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .clientele-grid {
        grid-template-columns: 1fr !important;
    }
    .awards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .tech-grid-3 {
        grid-template-columns: 1fr !important;
    }
    .faq-header-ultra {
        padding: 14px 16px !important;
    }
    .faq-q-ultra h4 {
        font-size: 0.85rem !important;
    }
    .faq-toggle-ultra {
        width: 32px !important;
        height: 32px !important;
    }
    .hero-stat-premium {
        padding: 6px 12px !important;
    }
    .stat-number-ultra {
        font-size: 1.6rem !important;
    }
    .btn-ultra, .btn-premium, .btn-cta-premium {
        padding: 10px 20px !important;
        font-size: 0.85rem !important;
    }
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .section-spacing-premium {
        padding: 30px 0 !important;
    }
    .about-hero {
        padding: 30px 0 20px !important;
        border-radius: 0 0 40px 40px !important;
        min-height: auto !important;
    }
    .cta-ultra, .premium-cta, .cta-rainbow-border {
        padding: 30px 16px !important;
        border-radius: 30px !important;
    }
    .numbers-section-premium {
        padding: 30px 16px !important;
        border-radius: 30px !important;
    }
    .process-timeline-wrapper {
        padding: 25px 14px !important;
        border-radius: 30px !important;
    }
    .process-timeline::before {
        left: 16px !important;
    }
    .process-timeline-item {
        padding-left: 40px !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
    .process-timeline-item .step-dot {
        left: 6px !important;
        width: 18px !important;
        height: 18px !important;
        top: 6px !important;
        border-width: 2px !important;
    }
    .process-timeline-item .step-content {
        max-width: 100% !important;
        padding: 16px !important;
    }
    .partners-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .tech-stack span {
        font-size: 0.6rem !important;
        padding: 4px 10px !important;
    }
    .chatbot-window {
        width: calc(100vw - 30px) !important;
        right: 15px !important;
        bottom: 85px !important;
        height: 480px !important;
    }
    .chatbot-toggle {
        width: 50px !important;
        height: 50px !important;
    }
    .chatbot-toggle i {
        font-size: 22px !important;
    }
}

/* ── Fix for tablets ── */
@media (max-width: 768px) {
    .hero-video-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .hero-video-grid .vid-card {
        height: 220px !important;
    }
    .hero-video-grid .vid-card:nth-child(3) {
        display: none !important;
    }
    .numbers-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .why-grid-modern {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .service-block-iconic {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .service-image-card {
        height: 380px !important;
    }
    .projects-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .trusted-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .clientele-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .awards-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .tech-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .capabilities-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .contact-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .industries-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .industry-card-fit {
        width: 140px !important;
    }
    .section-title-premium {
        font-size: 2.2rem !important;
    }
    .display-2, .display-3, .display-4 {
        font-size: calc(1.8rem + 2vw) !important;
    }
    .cta-ultra, .premium-cta, .cta-rainbow-border {
        padding: 40px 24px !important;
    }
    .numbers-section-premium {
        padding: 40px 20px !important;
    }
    .process-timeline-wrapper {
        padding: 30px 20px !important;
    }
    .process-timeline::before {
        left: 20px !important;
    }
    .process-timeline-item {
        padding-left: 45px !important;
        padding-right: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        justify-content: flex-start !important;
    }
    .process-timeline-item .step-dot {
        left: 8px !important;
        width: 22px !important;
        height: 22px !important;
        top: 6px !important;
        border-width: 3px !important;
    }
    .process-timeline-item .step-content {
        max-width: 100% !important;
        padding: 18px !important;
    }
    .faq-premium-wrapper {
        padding: 20px 12px !important;
    }
    .faq-header-ultra {
        padding: 16px 18px !important;
    }
    .faq-q-ultra h4 {
        font-size: 0.9rem !important;
    }
}

/* ── Fix for large screens (desktops) ── */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px !important;
    }
}

/* ── Fix for Firefox (backdrop-filter support) ── */
@supports not (backdrop-filter: blur(1px)) {
    .glass-card-ultra,
    .glass-card-dark-ultra,
    .hero-lead-form,
    .hero-stat-premium,
    .contact-info-card,
    .contact-form-wrapper,
    .hero-3d-card,
    #leadModalCard,
    .tg-trust-bar,
    .testimonial-items1 {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    .numbers-section,
    .numbers-section-premium,
    .cta-premium,
    .cta-rainbow-border,
    .about-hero,
    .web-hero,
    .app-hero,
    .dm-hero,
    .ecom-hero,
    .contact-hero,
    .service-hero,
    .project-hero {
        background: #0A0F1C !important;
    }
}

/* ── Fix for Safari flexbox gap issues ── */
@supports not (gap: 1px) {
    .header-main,
    .hero-content-version2 .d-flex,
    .filter-buttons,
    .projects-grid,
    .why-grid-modern,
    .service-block-iconic {
        display: -webkit-flex !important;
        display: flex !important;
    }
}

/* ── Fix for touch devices (better tap targets) ── */
@media (hover: none) {
    a, button, .btn, .trigger-btn, .filter-btn, .service-card-elite,
    .why-item-modern, .philosophy-card-ultra, .timeline-slide-ultra {
        cursor: default !important;
    }
    .main-menu nav > ul > li > a {
        padding: 12px 18px !important;
    }
    .filter-btn {
        padding: 10px 22px !important;
    }
    .btn-ultra, .btn-premium, .btn-cta-premium {
        padding: 14px 32px !important;
    }
}

/* ── Fix for dark mode / high contrast ── */
@media (prefers-color-scheme: dark) {
    body {
        background: #0A0F1C !important;
    }
    .white-bg,
    .service-card,
    .service-card-elite,
    .service-card-ultimate,
    .capability-card,
    .why-card-ultra,
    .philosophy-card-ultra,
    .testimonial-card-premium,
    .award-item,
    .trusted-card,
    .clientele-card,
    .project-card,
    .worke-items,
    .process-step,
    .glass-card-ultra,
    .contact-info-card,
    .contact-form-wrapper,
    .hours-card {
        background: #1A1F3A !important;
        color: #E8EDF5 !important;
    }
    .white-clr, .black-clr, .text-dark {
        color: #E8EDF5 !important;
    }
    .text-secondary, .pra, .text-muted {
        color: #94A3B8 !important;
    }
    .form-control, input, textarea, select {
        background: #0A0F1C !important;
        color: #E8EDF5 !important;
        border-color: #2D3748 !important;
    }
}