/* ============================================================
   QUIN INFO SOLUTIONS – responsive.css
   All media queries & breakpoint-specific overrides
   Breakpoints (Bootstrap 5 aligned):
     xs : < 576px
     sm : 576px – 767px
     md : 768px – 991px
     lg : 992px – 1199px
     xl : ≥ 1200px
   ============================================================ */

/* ─────────────────────────────────────────────
   XL+ (≥ 1200px) – fine-tune large screens
   ───────────────────────────────────────────── */
@media (min-width: 1200px) {
    .hero-title       { font-size: 56px; }
    .container        { max-width: 1180px; }
}

/* ─────────────────────────────────────────────
   LG (992px – 1199px)
   ───────────────────────────────────────────── */
@media (max-width: 1199px) and (min-width: 992px) {
    .hero-title       { font-size: 44px; }
    .service-card     { padding: 28px 20px 24px; }
    .contact-card     { padding: 40px 32px; }
    .contact-info-card{ padding: 36px 28px; }
}

/* ─────────────────────────────────────────────
   MD – Tablets (768px – 991px)
   ───────────────────────────────────────────── */
@media (max-width: 991px) {

    /* Navbar */
    .site-navbar {
        padding: 12px 0;
        background: rgba(3, 20, 65, .97);   /* solid on mobile */
        position: fixed;                     /* always sticky */
        box-shadow: 0 2px 14px rgba(0,0,0,.2);
    }

    .site-navbar.scrolled { position: fixed; }

    .site-navbar .navbar-brand img { height: 44px; }

    /* Mobile drawer */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background: rgba(3, 20, 65, .98);
        border-radius: 10px;
        padding: 14px 18px;
        margin-top: 10px;
    }

    .site-navbar .nav-link {
        font-size: 15px;
        padding: 10px 8px !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .site-navbar .nav-link:last-of-type { border-bottom: none; }

    .btn-get-in-touch {
        display: block;
        text-align: center;
        margin-top: 12px;
        width: 100%;
    }

    /* Hero */
    .hero-section {
        min-height: auto;
        padding: 120px 0 80px;
        text-align: center;
    }
    .hero-title   { font-size: 36px; }
    .hero-desc    { max-width: 100%; margin: 0 auto; }
    .hero-section .col-lg-6:last-child { margin-top: 30px; }
    .hero-section .d-flex { justify-content: center; }

    /* About */
    .about-section       { padding: 60px 0; }
    .about-img-wrap img  { height: 300px; }
    .about-section .col-lg-6:last-child { margin-top: 36px; }

    /* Stats */
    .stats-section        { padding: 50px 0; }
    .stat-number          { font-size: 34px; }
    .stat-icon            { font-size: 28px; }
    .stat-divider         { border-left: none; border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; margin-top: 20px; }

    /* Services */
    .services-section     { padding: 60px 0; }

    /* Technologies */
    .tech-section         { padding: 60px 0; }

    /* Contact */
    .contact-section      { padding: 60px 0; }
    .contact-card         { padding: 30px 20px; margin-top: 24px; }
    .contact-info-card    { padding: 30px 22px; margin-bottom: 0; }

    /* Inner pages */
    .inner-section        { padding: 60px 0; }
    .inner-section-alt    { padding: 60px 0; }
    .page-banner          { padding: 110px 0 55px; }
    .page-banner-title    { font-size: 32px; }

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

    /* Footer */
    .site-footer          { padding: 50px 0 0; }
    .site-footer .row     { row-gap: 36px !important; }
    .footer-bottom        { margin-top: 36px; }
}

/* ─────────────────────────────────────────────
   SM – Large phones (576px – 767px)
   ───────────────────────────────────────────── */
@media (max-width: 767px) {

    .hero-title    { font-size: 30px; }
    .hero-desc     { font-size: 14.5px; }

    .btn-hero-primary,
    .btn-hero-outline {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }

    /* Services — 1 column */
    .services-section .col-lg-3 { flex: 0 0 100%; max-width: 100%; }

    /* Stats — 2 per row */
    .stats-section .col-6 { padding: 16px 10px; }
    .stat-number          { font-size: 30px; }

    /* Portfolio */
    .portfolio-card img   { height: 190px; }

    /* About image */
    .about-img-wrap img   { height: 240px; }

    /* Contact form */
    .contact-card         { padding: 24px 16px; }

    /* Tech grid — 2 columns */
    .tech-section .col-lg-7 > .row { --bs-gutter-x: .75rem; }

    .section-title  { font-size: 24px; }
    .page-banner-title { font-size: 26px; }
    .page-banner    { padding: 100px 0 48px; }

    /* Custom Responsive Classes */
    .about-intro-text { font-size: 14.5px; }
    .cta-desc { font-size: 14.5px; }
    .portfolio-placeholder-img { height: 190px; }
    .portfolio-fallback-img { height: 190px; }
    .service-stat-num { font-size: 28px; }
}

/* ─────────────────────────────────────────────
   XS – Small phones (< 576px)
   ───────────────────────────────────────────── */
@media (max-width: 575px) {

    .hero-title    { font-size: 26px; line-height: 1.2; }
    .hero-desc     { font-size: 14px; }

    /* Buttons stack */
    .hero-section .d-flex { flex-direction: column; align-items: stretch; gap: 12px !important; }
    .btn-hero-primary,
    .btn-hero-outline  { width: 100%; text-align: center; justify-content: center; }

    /* Service cards */
    .service-icon  { width: 62px; height: 62px; font-size: 24px; }
    .service-card  { padding: 24px 16px 20px; }

    /* Stats */
    .stat-number   { font-size: 28px; }
    .stat-icon     { font-size: 24px; }
    .stat-label    { font-size: 12.5px; }

    /* Portfolio */
    .portfolio-card img { height: 170px; }

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

    /* Value cards */
    .value-card    { padding: 24px 18px; }

    /* Scroll-to-top */
    #scrollTop     { bottom: 16px; right: 16px; width: 38px; height: 38px; font-size: 15px; }

    /* Footer */
    .site-footer h6::after { display: none; }

    .page-banner   { padding: 90px 0 40px; }
    .page-banner-title { font-size: 22px; }

    .section-title { font-size: 22px; }
    .inner-section     { padding: 50px 0; }
    .inner-section-alt { padding: 50px 0; }

    .contact-section   { padding: 50px 0; }
    .services-section  { padding: 50px 0; }
    .about-section     { padding: 50px 0; }
    .tech-section      { padding: 50px 0; }

    /* Custom Responsive Classes */
    .portfolio-placeholder-img { height: 170px; }
    .portfolio-fallback-img { height: 170px; }
}

/* ─────────────────────────────────────────────
   Utility – reduce motion (accessibility)
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}