/* ============================================================
   BHAGWATI GRANITE AND MARBLE LLP — responsive.css
   Mobile-first responsive breakpoints
   ============================================================ */

/* ── Mobile (< 576px) ── */
@media (max-width: 575.98px) {
  :root { 
    --section-py: 4.5rem; 
  }
  .hero-title { 
    font-size: 2.6rem; 
  }
  .hero-cta { 
    flex-direction: column; 
  }
  .hero-cta .btn-gold, 
  .hero-cta .btn-outline-gold { 
    width: 100%; 
    justify-content: center; 
  }
  .section-title { 
    font-size: 2rem; 
  }
  .coll-card { 
    height: 280px; 
  }
  .process-steps { 
    flex-direction: column; 
    align-items: center; 
  }
  .process-steps::before { 
    display: none; 
  }
  .timeline-line {
    left: 18px; 
  }
  .tl-content { 
    width: calc(100% - 44px); 
    margin-left: 44px !important; 
  }
  .tl-dot { 
    left: 18px; 
  }
  .contact-form-wrap { 
    padding: 1.5rem; 
  }
  .nl-form { 
    flex-direction: column; 
  }
  .nl-input { 
    border-right: 1px solid var(--glass-border); 
    border-radius: 2px; 
  }
  .nl-btn { 
    border-radius: 2px; 
  }
  #wa-float {
    bottom: 5rem; 
    right: 1rem; 
  }
  #back-to-top { 
    bottom: 1.5rem; 
    right: 1rem; 
  }
  .footer-bottom { 
    flex-direction: column; 
    text-align: center; 
  }
  .owner-frame::before { 
    display: none; 
  }
  .owner-badge { 
    position: static; 
    margin-top: 1rem; 
    display: inline-block; 
  }
  .masonry-grid { 
    columns: 1 !important; 
  }
  .hero-dots { 
    display: none; 
  }
}

/* ── Small (576px – 767px) ── */
@media (min-width: 576px) and (max-width: 767.98px) {
  :root { 
    --section-py: 5rem; 
  }
  .hero-title { 
    font-size: 3.2rem; 
  }
  .timeline-line { 
    left: 18px; 
  }
  .tl-content { 
    width: calc(100% - 44px); 
    margin-left: 44px !important; 
  }
  .tl-dot { 
    left: 18px; 
  }
  .process-steps { 
    flex-wrap: wrap; 
  }
  .process-step { 
    flex: 0 0 50%; 
  }
}

/* ── Medium (768px – 991px) ── */
@media (min-width: 768px) and (max-width: 991.98px) {
  :root { 
    --section-py: 5.5rem; 
  }
  .hero-title { 
    font-size: 4rem; 
  }
  .timeline-line { 
    left: 18px; 
  }
  .tl-content { 
    width: calc(100% - 44px); 
    margin-left: 44px !important; 
  }
  .tl-dot { 
    left: 18px; 
  }
  .coll-card { 
    height: 340px; 
  }
}

/* ── Large (992px – 1199px) ── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-title { 
    font-size: 5rem; 
  }
}

/* ── XL (1200px – 1399px) ── */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .hero-title { 
    font-size: 5.8rem; 
  }
}

/* ── XXL (≥ 1400px) ── */
@media (min-width: 1400px) {
  .hero-title { 
    font-size: 6.8rem; 
  }
  .container {
   max-width: 1320px; 
  }
}

/* ── Ultra-wide / 4K (≥ 2560px) ── */
@media (min-width: 2560px) {
  html { 
    font-size: 20px; 
  }
  .container { 
    max-width: 1900px; 
  }
  .hero-title { 
    font-size: 9rem; 
  }
  .navbar-brand img { 
    height: 68px; 
  }
  .coll-card { 
    height: 560px; 
  }
}

/* ── Navbar Mobile ── */
@media (max-width: 991.98px) {
  #navbar .navbar-collapse {
    background: rgba(8,8,8,.97);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--r-md);
    padding: 1.4rem; margin-top: .9rem;
  }
  .nav-link { 
    padding: .7rem 0 !important; 
    border-bottom: 1px solid var(--glass-border); 
  }
  .nav-link:last-child { 
    border-bottom: none; 
  }
  .nav-link::after { 
    display: none; 
  } 
}

/* ── Touch Devices — disable custom cursor ── */
@media (hover: none) {
  body { 
    cursor: auto; 
  }
  #cursor, #cursor-ring, #mouse-glow { 
    display: none !important; 
  }
  .cursor-trail { 
    display: none !important; 
  }
  a, button, [role="button"], 
  .cat-tab, .faq-q, .prod-card,
  .coll-card, .svc-card, .why-card, 
  .glass-card, .social-btn,
  .wa-pill, .slider-ctrl, .testi-dot, .hero-dot,
  .footer-links a, .nav-link, .navbar-brand { 
    cursor: pointer; 
  }
  .btn-gold, .btn-outline-gold, .nl-btn { 
    cursor: pointer; 
  }
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero-slide { 
    transition: opacity .3s ease !important; 
  }
  .marquee-track { 
    animation: none !important; 
  }
}

/* ── High Contrast ── */
@media (prefers-contrast: high) {
  :root { 
    --gold: #FFD700; 
    --grey-3: #BBBBBB; 
    --glass-border: rgba(255,215,0,.5); 
  }
}

/* ── Print ── */
@media print {
  #loader, #cursor, #cursor-ring, 
  #mouse-glow, #scroll-progress,
  #back-to-top, #wa-float, #navbar, .marquee-wrap { 
    display: none !important; 
  }
  body { 
    background: white; 
    color: black; }
}