/* ========================================
   Responsive Styles for RAZA Marine Tech
   ======================================== */

/* General Fixes */

/* Product Grid Responsive */
@media (max-width: 1200px) {
  .col-md-3 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

@media (max-width: 992px) {
  .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (max-width: 768px) {
  .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .product-card {
    min-height: auto; /* allow natural height on small screens */
  }
}

/* Product Card Mobile Fix */
@media (max-width: 576px) {
  .product-card img {
    height: 140px;
  }

  .product-card h5 {
    font-size: 1rem;
    min-height: auto;
  }

  .product-card p {
    font-size: 0.85rem;
  }

  .product-card .btn {
    font-size: 0.85rem;
    padding: 8px;
  }
}

/* Navbar Responsive */
@media (max-width: 992px) {
  .navbar-nav {
    text-align: center;
    gap: 10px;
  }

  .navbar-brand img {
    max-height: 45px;
  }
}

/* Modal Responsive */
@media (max-width: 576px) {
  .modal-dialog {
    margin: 20px;
  }

  .modal-body img {
    max-height: 180px;
  }

  .modal-body h5 {
    font-size: 1rem;
  }

  .modal-body p {
    font-size: 0.85rem;
  }
}

/* Footer Responsive */
@media (max-width: 768px) {
  footer {
    text-align: center;
  }
  footer .row > div {
    margin-bottom: 16px;
  }
}