/* ============================================================
   Informatics Optical - Responsive Stylesheet (responsive.css)
   Mobile-first additional responsive overrides
   ============================================================ */

/* ---------- Extra Small Devices (max-width: 575.98px) ---------- */
@media (max-width: 575.98px) {
  /* Hero Section */
  .hero-slide {
    height: 60vh;
    min-height: 380px;
  }
  .hero-content h1 {
    font-size: 1.8rem;
  }
  .hero-content .lead {
    font-size: 0.95rem;
  }
  .btn-lg {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }

  /* Top Header (hidden on mobile via d-none d-md-block, but override if needed) */
  /* Already hidden, no need */

  /* Features Section */
  .feature-card {
    padding: 1.5rem 1rem;
  }
  .feature-icon i {
    font-size: 2rem;
  }

  /* About Section */
  .about-badge {
    position: static !important;
    margin: 1rem auto 0;
    text-align: center;
  }

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

  /* Offer Section */
  .countdown-item {
    min-width: 65px !important;
    padding: 0.5rem !important;
  }
  .countdown-item .fs-2 {
    font-size: 1.3rem !important;
  }

  /* Gallery */
  .gallery-img {
    height: 180px;
  }

  /* Testimonials */
  .testimonial-card {
    padding: 1.5rem !important;
  }

  /* Contact */
  .glass-card.p-4 {
    padding: 1.5rem !important;
  }

  /* Footer */
  .footer .social-icons a {
    font-size: 1.2rem;
  }
}

/* ---------- Small Devices (min-width: 576px) and (max-width: 767.98px) ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-slide {
    height: 70vh;
    min-height: 450px;
  }
  .hero-content h1 {
    font-size: 2.2rem;
  }

  .product-img {
    height: 220px;
  }

  .gallery-img {
    height: 200px;
  }
}

/* ---------- Medium Devices (min-width: 768px) and (max-width: 991.98px) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-content h1 {
    font-size: 2.8rem;
  }

  .about-image-wrapper img {
    height: auto;
  }

  /* Product grid: 2 columns handled by Bootstrap col-md-6 */
  .product-img {
    height: 240px;
  }

  .gallery-img {
    height: 220px;
  }
}

/* ---------- Large Devices (min-width: 992px) and (max-width: 1199.98px) ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-content h1 {
    font-size: 3rem;
  }
}

/* ---------- Extra Large Devices (min-width: 1200px) ---------- */
@media (min-width: 1200px) {
  .hero-content h1 {
    font-size: 3.5rem;
  }
}

/* ---------- Dark Mode Responsive Tweaks ---------- */
@media (max-width: 767.98px) {
  [data-bs-theme="dark"] .navbar {
    background-color: #1a1d23;
  }
  [data-bs-theme="dark"] .glass-card {
    background: rgba(30, 33, 40, 0.85);
  }
}

/* ---------- General Mobile Navbar ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--white);
    padding: 1rem;
    border-radius: 0 0 1rem 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  }
  [data-bs-theme="dark"] .navbar-collapse {
    background: #1e2128;
  }
  .nav-link.active::after {
    display: none;
  }
}

/* ---------- Gallery Grid Adjustments (Masonry-like) ---------- */
@media (max-width: 575.98px) {
  .gallery-item.col-6 {
    width: 50%;
  }
}

/* ---------- Contact Map Height ---------- */
@media (max-width: 767.98px) {
  .ratio-16x9 {
    height: 200px;
  }
}

/* ---------- Back to Top Button on Mobile ---------- */
@media (max-width: 576px) {
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
  }
}