/* =====================================================
   KARAN ENGINEERING INDUSTRIES
   Responsive Stylesheet — responsive.css
   Breakpoints: xl(1200), lg(992), md(768), sm(576), xs
   ===================================================== */

/* =====================================================
   LARGE DESKTOP (1400px+)
   ===================================================== */
@media (min-width: 1400px) {
    .hero-title { font-size: 80px; }
}

/* =====================================================
   DESKTOP → LAPTOP (max 1199px)
   ===================================================== */
@media (max-width: 1199px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-item.gallery-item-large {
        grid-column: span 2;
    }

    .about-img-composition,
    .about-video-container {
        height: 460px;
    }
    .about-video-composition .about-years-badge {
        right: -5px;
    }
}

/* =====================================================
   LAPTOP → TABLET (max 991px)
   ===================================================== */
@media (max-width: 991px) {

    /* Variables */
    :root {
        --section-padding: 70px 0;
    }

    /* Topbar */
    .topbar {
        display: none;
    }

    /* Sticky header */
    .main-nav {
        position: sticky;
        top: 0;
    }

    /* Navbar collapse */
    #navbarContent {
        background: var(--dark-3);
        padding: 16px;
        border-top: 1px solid var(--border-dark);
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        margin-top: 10px;
    }

    .nav-links .nav-link {
        padding: 12px 8px !important;
        border-bottom: 1px solid var(--border-dark);
    }

    .nav-links .nav-link:last-child {
        border-bottom: none;
    }

    .nav-links .nav-link::after {
        display: none;
    }

    .nav-dropdown {
        background: rgba(255,255,255,0.04);
        border: none;
        box-shadow: none;
        padding-left: 16px;
    }

    .nav-digital-india {
        display: none !important;
    }

    .btn-nav-cta {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        padding: 80px 0 60px;
    }

    .hero-img-col {
        display: none !important;
    }

    .hero-title { font-size: 48px; }

    .hero-container {
        padding-top: 20px;
        padding-bottom: 40px;
    }

    .hero-cta-group {
        flex-direction: column;
        max-width: 320px;
    }

    .btn-hero-primary, .btn-hero-outline {
        justify-content: center;
    }

    /* Stats Bar */
    .stat-item {
        padding: 20px 16px;
        border-right: none;
        border-bottom: 1px solid var(--border-dark);
    }

    /* About */
    .about-img-composition,
    .about-video-container {
        height: 380px;
        margin-bottom: 40px;
    }
    .about-video-composition .about-years-badge {
        right: 15px;
        top: 15px;
    }
    .about-video-composition .about-cert-badge {
        left: 15px;
        bottom: 20px;
    }

    .img-main {
        width: 80%;
        height: 300px;
    }

    .img-secondary {
        width: 50%;
        height: 200px;
    }

    /* Products */
    .product-card:hover {
        transform: translateY(-8px);
    }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item.gallery-item-large {
        grid-column: span 2;
    }

    /* CTA */
    .btn-cta-primary, .btn-cta-secondary {
        width: 100%;
        justify-content: center;
        margin: 5px 0 !important;
    }

    /* Contact */
    .contact-form-wrap {
        padding: 28px 20px;
    }

    /* Page Banner */
    .page-banner {
        padding: 60px 0 50px;
    }
    
    .page-banner-title {
        font-size: 36px;
    }

    /* QC Steps */
    .qc-step-card {
        margin-bottom: 12px;
    }

    /* Machinery items */
    .machinery-category-card {
        margin-bottom: 16px;
    }

    /* Footer */
    .footer-main {
        padding: 50px 0 30px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   TABLET → MOBILE (max 767px)
   ===================================================== */
@media (max-width: 767px) {

    :root {
        --section-padding: 60px 0;
    }

    /* Hero */
    .hero-title { font-size: 38px; }
    .hero-subtitle { font-size: 16px; }
    .hero-desc { font-size: 15px; }

    .hero-badge {
        font-size: 11px;
        padding: 7px 14px;
    }

    .hero-standards {
        gap: 6px;
    }

    .hero-scroll-indicator {
        display: none;
    }

    /* Stats */
    .stat-item {
        padding: 18px 12px;
        gap: 12px;
    }

    .stat-number { font-size: 28px; }
    .stat-icon { font-size: 28px; }

    /* About */
    .about-img-composition,
    .about-video-container {
        height: 320px;
        margin-bottom: 24px;
    }

    .img-main {
        width: 85%;
        height: 240px;
    }

    .img-secondary {
        width: 55%;
        height: 170px;
    }

    .about-years-badge {
        padding: 12px 14px;
    }

    .yb-number { font-size: 24px; }

    .about-features {
        grid-template-columns: 1fr;
    }

    .about-cta {
        flex-direction: column;
    }

    .about-cta .btn-primary-karan,
    .about-cta .btn-outline-karan {
        justify-content: center;
    }

    /* Section titles */
    .section-title { font-size: 28px; }

    /* Products */
    .product-card-img { height: 200px; }

    /* Why cards */
    .why-card { padding: 24px 20px; }

    /* Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .gallery-item.gallery-item-large {
        grid-column: span 2;
    }

    /* Gallery Page Grid & Filter */
    .gallery-page-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .gallery-filter-wrap {
        gap: 6px;
        margin-bottom: 24px;
    }

    .gallery-filter-btn {
        font-size: 12px;
        padding: 7px 14px;
    }

    /* Lightbox Modal on Tablet & Mobile */
    .lightbox-modal .modal-body {
        min-height: 300px;
    }

    .lightbox-nav-btn {
        width: 42px;
        height: 42px;
        font-size: 17px;
        background: rgba(10, 14, 23, 0.9);
    }

    .lightbox-prev-btn {
        left: 8px;
    }

    .lightbox-next-btn {
        right: 8px;
    }

    .lightbox-modal .modal-header {
        padding: 12px 16px !important;
    }

    .lightbox-modal .modal-title {
        font-size: 14px;
    }

    .lightbox-counter-badge {
        font-size: 11px;
        padding: 3px 8px;
        margin-right: 8px !important;
    }

    /* Clients */
    .client-major-tag {
        font-size: 13px;
        padding: 10px 16px;
    }

    /* CTA Section */
    .cta-section { padding: 50px 0; }
    .cta-title { font-size: 24px; }

    /* Contact Form */
    .contact-form-wrap { padding: 24px 16px; }
    .form-heading { font-size: 18px; }

    /* Footer */
    .footer-logo { height: 50px; }

    /* Floating Elements */
    .back-to-top {
        width: 42px;
        height: 42px;
        right: 20px;
        bottom: 80px;
    }

    .floating-call {
        width: 50px;
        height: 50px;
        right: 20px;
        bottom: 20px;
    }
}

/* =====================================================
   MOBILE (max 575px)
   ===================================================== */
@media (max-width: 575px) {

    :root {
        --section-padding: 50px 0;
    }

    /* Gallery Page Single Column on Small Phone */
    .gallery-page-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .gallery-card-img-wrap {
        height: 210px;
    }

    .gallery-card-title {
        font-size: 14px;
    }

    /* Lightbox Modal on Small Mobile */
    .lightbox-modal .modal-body {
        min-height: 240px;
    }

    .lightbox-modal .modal-body img {
        max-height: 65vh;
    }

    .lightbox-nav-btn {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }

    .lightbox-prev-btn {
        left: 6px;
    }

    .lightbox-next-btn {
        right: 6px;
    }

    .lightbox-modal .modal-footer {
        padding: 10px 14px !important;
        font-size: 11px;
    }

    /* Video Page on Tablet & Mobile */
    .video-card-thumb-wrap {
        height: 190px;
    }

    .video-card-body {
        padding: 16px;
    }

    .video-card-title {
        font-size: 15px;
    }

    .video-filter-wrap {
        gap: 6px;
        margin-bottom: 24px;
    }

    .video-filter-btn {
        font-size: 12px;
        padding: 7px 14px;
    }

    .video-modal .modal-header {
        padding: 12px 16px !important;
    }

    .video-modal .modal-title {
        font-size: 14px;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .video-modal-nav-btn {
        display: none !important; /* Hide overlay buttons on mobile to avoid iframe touch blocking */
    }

    .video-modal .modal-footer {
        padding: 10px 14px !important;
    }

    /* 3D Client Showcase on Tablet & Mobile */
    .client-hero-featured {
        padding: 24px 16px;
        margin-bottom: 30px;
    }

    .client-controls-bar {
        padding: 16px 14px;
        margin-bottom: 24px;
    }

    .client-search-input {
        padding: 12px 16px 12px 42px;
        font-size: 13.5px;
    }

    .client-filter-pills {
        gap: 6px;
        margin-top: 12px;
    }

    .client-filter-chip {
        font-size: 11.5px;
        padding: 5px 12px;
    }

    .client-3d-card {
        padding: 16px 14px;
    }

    .client-company-title {
        font-size: 14px;
    }




    /* Hero Mobile Perfect Center */
    .hero-section {
        min-height: 100svh;
        min-height: 100vh;
        padding: 30px 0 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hero-container {
        padding-top: 10px;
        padding-bottom: 10px;
        width: 100%;
    }

    .min-vh-80 {
        min-height: auto;
    }

    .hero-badge {
        font-size: 11.5px;
        padding: 6px 14px;
        margin-bottom: 14px;
        max-width: 95%;
        border-radius: 20px;
        line-height: 1.4;
        text-align: center;
        justify-content: center;
    }

    .hero-title {
        font-size: clamp(30px, 8.5vw, 40px);
        margin-bottom: 10px;
        line-height: 1.1;
    }

    .hero-subtitle {
        font-size: 14px;
        line-height: 1.45;
        margin-bottom: 20px;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        max-width: 340px;
        margin: 0 auto;
        width: 100%;
    }

    .hero-cta-group .btn-hero-primary {
        grid-column: span 2;
        width: 100%;
        justify-content: center;
        padding: 13px 20px;
        font-size: 14.5px;
        font-weight: 700;
        border-radius: 8px;
    }

    .hero-cta-group .btn-hero-outline {
        width: 100%;
        justify-content: center;
        padding: 11px 8px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 8px;
        white-space: nowrap;
    }

    .hero-scroll-indicator {
        display: none;
    }


    /* Stats */
    .stat-item {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 16px 8px;
    }

    .stat-number-wrap {
        justify-content: center;
    }


    /* About */
    .about-img-composition,
    .about-video-container { height: 280px; }
    .img-main { height: 200px; }
    .img-secondary { height: 145px; }

    /* Typography */
    .section-title { font-size: 25px; }

    /* Why cards */
    .why-card { padding: 20px 16px; }
    .why-card-icon { width: 60px; height: 60px; font-size: 24px; }

    /* Contact Page on Mobile */
    .contact-info-panel {
        padding: 24px 18px;
    }

    .contact-form-container {
        padding: 24px 18px;
    }

    .contact-form-title {
        font-size: 19px;
    }

    .captcha-container {
        padding: 10px 12px;
        gap: 8px;
    }

    .captcha-equation-badge {
        font-size: 16px;
        padding: 6px 12px;
    }

    /* Contact */
    .contact-info-card { padding: 14px; }
    .contact-form-wrap { padding: 20px 14px; }

    /* CTA */
    .cta-title { font-size: 22px; }
    .cta-desc { font-size: 14px; }

    /* Footer */
    .footer-main { padding: 40px 0 24px; }
    .footer-widget-title { font-size: 14px; }
}



/* =====================================================
   PRINT STYLES
   ===================================================== */
@media print {
    .topbar, .main-nav, .hero-section,
    .back-to-top, .floating-call,
    .hero-particles, .hero-scroll-indicator,
    .cta-section, .clients-ticker-wrap {
        display: none !important;
    }

    body { font-size: 12pt; }
    a { color: inherit; text-decoration: underline; }
    .section-padding { padding: 20pt 0; }
}