/* =========================
   Mobile Responsive Overrides
   ========================= */

/* General */
img, video { max-width: 100%; height: auto; }
.container, .container-fluid { width: 100%; }
.container { padding-left: 15px !important; padding-right: 15px !important; }
.container-fluid.pl-50.pr-50 { padding-left: 15px !important; padding-right: 15px !important; }

section { overflow-x: hidden; }

/* Fix common bootstrap-like rows if your CSS doesn't already */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}
[class*="col-"] { padding-left: 10px; padding-right: 10px; }

/* =========================
   Header / Menu
   ========================= */
.logo img { max-height: 46px; width: auto; }

.mobile-toggler { display: block; }
.mobile-menu { display: none; }

.mobile-toggler a { cursor: pointer; }

/* Toggle mobile menu open */
.mobile-menu.open { display: block; }

.mobile-menu {
  background: #0b0b0b;
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 12px 15px;
}
.mobile-menu .mean-nav { list-style: none; padding: 0; margin: 0; }
.mobile-menu .mean-nav li { padding: 10px 0; color: #fff; font-weight: 600; }

/* =========================
   Slider banner
   ========================= */
.slider-area img { width: 100%; height: 100%; display:block; }

/* =========================
   About section
   ========================= */
.about-area .row { align-items: stretch; }
.about-area .col-lg-6 { width: 100%; }
.about-content { margin-top: 16px; }

.s-about-img video { width: 100% !important; height: auto !important; }

/* remove duplicate id issue safety: */
#style-XILVK { width: 100%; }

/* =========================
   Tournament cards (MUI)
   ========================= */
.MuiGrid2-container { width: 100% !important; }
.MuiGrid2-root { max-width: 100% !important; }
.css-p9b8d3 { display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; }
.css-mx8tbv { width: 100% !important; }

/* =========================
   Upcoming Matches layout
   ========================= */
#matchesContainer .row { gap: 10px; }
#matchesContainer .col-lg-5,
#matchesContainer .col-lg-2 {
  width: 100% !important;
}

.team, .team2 {
  display: flex;
  align-items: center;
  gap: 12px;
}

.team img, .team2 img {
  width: 70px !important;
  height: 70px !important;
  object-fit: contain;
}

.match-time { padding: 10px 0; }
.match-time h4 { font-size: 15px; line-height: 1.3; }
.match-time span { font-size: 13px; display:block; opacity:.85; }

.divider { width: 100%; height: 1px; background: rgba(255,255,255,.08); margin: 12px 0; }

/* =========================
   Counters section (4 boxes)
   ========================= */
.match-area.pt-10.pb-10.style-S4ylT .col-lg-3 {
  width: 50% !important;
}
@media (max-width: 420px){
  .match-area.pt-10.pb-10.style-S4ylT .col-lg-3 { width: 100% !important; }
}
.match-area.pt-10.pb-10.style-S4ylT .team img {
  width: 64px !important;
  height: 64px !important;
}

/* =========================
   Services boxes
   ========================= */
.services-area .col-lg-4,
.services-area .col-md-6 {
  width: 100% !important;
}

/* =========================
   Game grid
   ========================= */
.grid.col4 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}
.grid.col4 .grid-item { width: 100% !important; }

.gallery-image img { width: 100%; height: auto; border-radius: 10px; }

@media (max-width: 520px){
  .grid.col4 { grid-template-columns: 1fr !important; }
}

/* =========================
   Blog grid items
   ========================= */
.grid.col4 .grid-item3 {
  width: 100% !important;
  margin-left: 0 !important;
}
.grid-item3.ml-4 { margin-left: 0 !important; }

/* =========================
   FAQ columns
   ========================= */
#faq .col-lg-6, #faq .col-md-6 { width: 100% !important; }
#faq .faq-wrap { margin-bottom: 18px; }

/* =========================
   Footer columns
   ========================= */
.footer-top .col-xl-4,
.footer-top .col-xl-2,
.footer-top .col-xl-3,
.footer-top .col-lg-4,
.footer-top .col-lg-2,
.footer-top .col-lg-3,
.footer-top .col-sm-6 {
  width: 100% !important;
}

/* Copyright align center on mobile */
.copyright-wrap .col-lg-6 { width: 100% !important; text-align: center !important; }

/* WhatsApp button: keep but slightly smaller on mobile */
@media (max-width: 768px){
  .whatsapp-float { width: 55px; height: 55px; bottom: 18px; left: 18px; }
}

/* =========================
   Fix horizontal overflow (common issue)
   ========================= */
html, body { max-width: 100%; overflow-x: hidden; }