/* Shared responsive improvements for all MORTEX Sports pages */
html { scroll-behavior: smooth; overflow-x: hidden; }
body { overflow-x: hidden; }
img, video, iframe { max-width: 100%; height: auto; }
.container, .container-fluid { min-width: 0; }

.navbar { z-index: 1030; }
.navbar-brand { white-space: nowrap; }
.navbar-toggler { border: 1px solid rgba(16,24,32,.2); padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255,77,0,.18); }
.navbar .dropdown-menu { border: 0; border-radius: 14px; box-shadow: 0 12px 32px rgba(0,0,0,.12); padding: .6rem; }
.navbar .dropdown-item { border-radius: 9px; padding: .55rem .8rem; }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: rgba(255,77,0,.1); color: var(--primary, #ff4d00); }
.nav-icons { display: flex; align-items: center; gap: 14px; }
.nav-icons a { margin-left: 0 !important; }

section { overflow: hidden; }
.row > * { min-width: 0; }
.display-1, .display-2, .display-3, .display-4, h1 { overflow-wrap: anywhere; }

@media (min-width: 992px) {
  .navbar .dropdown:hover > .dropdown-menu { display: block; margin-top: 0; }
  .navbar-nav { align-items: center; }
  .navbar .nav-link { white-space: nowrap; font-size: 14px; }
}

@media (max-width: 1199.98px) and (min-width: 992px) {
  .navbar .container { max-width: 100%; padding-left: 18px; padding-right: 18px; }
  .navbar-brand { font-size: 22px !important; }
  .navbar .nav-link { font-size: 12px; margin-left: 2px !important; margin-right: 2px !important; padding-left: 5px !important; padding-right: 5px !important; }
  .nav-icons { gap: 9px; }
  .nav-icons a { font-size: 17px !important; }
}

@media (max-width: 991.98px) {
  .top-bar .container { justify-content: center !important; text-align: center; }
  .navbar { position: sticky; top: 0; }
  .navbar-collapse { max-height: calc(100vh - 90px); overflow-y: auto; padding: .75rem 0 1rem; }
  .navbar-nav { width: 100%; }
  .navbar .nav-link { margin: 0 !important; padding: .7rem .35rem !important; }
  .navbar .dropdown-menu { position: static !important; transform: none !important; box-shadow: none; background: #f7f7f7; margin: 0 0 .4rem; }
  .nav-icons { margin-top: .7rem !important; padding-top: .8rem; border-top: 1px solid #eee; }
  .hero, .page-hero, .about-hero { min-height: auto !important; padding: 80px 0 !important; }
  .hero h1, .page-hero h1, .about-hero h1 { font-size: clamp(2rem, 8vw, 2.8rem) !important; }
  .promo-card, .mission-box, .cta-box { padding: 34px 24px !important; }
}

@media (max-width: 767.98px) {
  .top-bar { font-size: 12px !important; }
  .top-bar .container { gap: 4px !important; }
  .top-bar span { width: 100%; }
  section, .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .section-title { margin-bottom: 28px !important; }
  .section-title h2 { font-size: clamp(1.55rem, 7vw, 2.1rem); }
  .product-card img, .product-img img, .team-card img, .category-banner img { height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
  .about-img img { height: auto !important; max-height: 420px; }
  .table-responsive { border-radius: 12px; }
}

@media (max-width: 575.98px) {
  .navbar .container { padding-left: 14px; padding-right: 14px; }
  .navbar-brand { font-size: 20px !important; }
  .hero, .page-hero, .about-hero { padding: 62px 0 !important; text-align: center; }
  .hero p, .page-hero p, .about-hero p { font-size: 15px; }
  .btn, .btn-orange, .details-btn { max-width: 100%; white-space: normal; }
  .category-content { left: 20px !important; right: 20px !important; bottom: 20px !important; }
  footer { padding-top: 42px !important; }
}