/**
 * Roid International - Responsive Stylesheet
 * Ensures seamless display across all device viewports: Mobile, Tablet, Laptop, Desktop
 */

/* ==========================================================================
   Large Desktops & Laptops (max-width: 1280px)
   ========================================================================== */
@media (max-width: 1280px) {
  .main-nav {
    gap: 1rem;
  }
  .nav-link {
    font-size: 0.82rem;
  }
  .brand-logo {
    height: 38px;
  }
}

/* ==========================================================================
   Medium Laptops & Tablets (max-width: 1140px)
   ========================================================================== */
@media (max-width: 1140px) {
  .main-nav {
    display: none; /* Handled smoothly by mobile offcanvas drawer */
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .trust-strip-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }

  .footer-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   Tablets & Medium Screens (max-width: 992px)
   ========================================================================== */
@media (max-width: 992px) {
  .top-bar-left {
    display: none; /* Save vertical space on tablet */
  }

  .top-bar .container {
    justify-content: center;
  }

  .hero-section {
    min-height: auto;
    padding: 5rem 0 3.5rem;
  }

  .split-feature-section {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .split-feature-img {
    height: 360px;
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
}

/* ==========================================================================
   Mobile Landscape & Small Tablets (max-width: 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .section-py {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .section-py-sm {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .top-bar-right {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }

  .trust-strip-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .why-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .quote-card {
    padding: 1.5rem;
  }

  .hero-cta-group {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-cta-group .btn {
    width: 100%;
  }

  .hero-trust-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .footer-bottom-links {
    justify-content: center;
  }

  .floating-whatsapp span {
    display: none; /* Show icon only on small screens to save viewport space */
  }

  .floating-whatsapp {
    padding: 0.85rem;
    border-radius: 50%;
    bottom: 1.25rem;
    right: 1.25rem;
  }

  .floating-whatsapp i {
    font-size: 1.8rem;
  }
}

/* ==========================================================================
   Small Mobile Devices (max-width: 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .trust-strip-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .brand-title {
    font-size: 1.2rem;
  }

  .brand-logo {
    height: 38px;
  }

  .product-gallery-main {
    height: 320px;
  }

  .gallery-thumb {
    width: 60px;
    height: 60px;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }
}