/* ===== Display ===== */
.block   { display: block; }
.inline  { display: inline; }
.inline-block { display: inline-block; }
.flex    { display: flex; }

/* ===== Flexbox ===== */
.flex-row     { flex-direction: row; }
.flex-col     { flex-direction: column; }
.items-start { align-items: start; }
.items-center { align-items: center; }
.items-end    { align-items: end; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: start; }
.justify-end { justify-content: end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2        { gap: 0.5rem; }
.gap-4        { gap: 1rem; }

/* ===== Width & Height ===== */
.w-full   { width: 100%; }
.h-full   { height: 100%; }
.w-screen { width: 100vw; }
.h-screen { height: 100vh; }

/* ===== Spacing (Margin + Padding) ===== */
.m-1   { margin: 0.25rem; }
.m-2   { margin: 0.5rem; }
.m-4   { margin: 1rem; }

.mx-1   { margin: 0 0.25rem; }
.mx-2   { margin: 0 0.5rem; }
.mx-4   { margin: 0 1rem; }

.my-1   { margin: 0.25rem 0; }
.my-2   { margin: 0.5rem 0; }
.my-4   { margin: 1rem 0; }

.mt-1   { margin: 0.25rem 0 0; }
.mt-2   { margin: 0.5rem 0 0; }
.mt-4   { margin: 1rem 0 0; }

.p-1   { padding: 0.25rem; }
.p-2   { padding: 0.5rem; }
.p-4   { padding: 1rem; }

.px-1   { padding: 0 0.25rem; }
.px-2   { padding: 0 0.5rem; }
.px-4   { padding: 0 1rem; }

.py-1   { padding: 0.25rem 0; }
.py-2   { padding: 0.5rem 0; }
.py-4   { padding: 1rem 0; }
.p-0
{
  padding:0;
}
.px-0
{
  padding-left:0;
  padding-right:0;
}

.py-0
{
  padding-top:0;
  padding-bottom:0;
}
.pt-0
{
  padding-top:0;
}
.pb-0
{
  padding-bottom:0;
}
.m-0
{
  margin:0;
}
.mx-0
{
  margin-left:0;
  margin-right:0;
}

.my-0
{
  margin-top:0;
  margin-bottom:0;
}
.mt-0
{
  margin-top:0;
}
.my-0
{
  margin-top:0;
}
.mb-0
{
  margin-bottom:0;
}

/* ===== Font Weight ===== */
.font-normal { font-weight: 400; }
.font-bold   { font-weight: 700; }

/* ===== Text Align ===== */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
/* ===== Text Transform ===== */
.uppercase  { text-transform: uppercase; }
.capitalize  { text-transform: capitalize; }
.lowercase  { text-transform: lowercase; }
/* ===== Colors (Text & Background) ===== */
.text-white   { color: white; }
.text-black   { color: black; }

.bg-white   { background-color: white; }
.bg-black   { background-color: black; }
.bg-blue { background-color: #0081C8;}
.bg-yellow { background-color: #FCB131; }
.bg-red { background-color: #EE334E; }
.bg-green { background-color: #00A651;}

/* ===== Border & Radius ===== */
.border        { border: 1px solid #E5E7EB; }
.rounded-0     {border-radius: 0; }
.rounded       { border-radius: 0.25rem; }
.rounded-md    { border-radius: 0.375rem; }
.rounded-full  { border-radius: 9999px; }

/* ===== Shadow ===== */
.shadow        { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.shadow-md     { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }

/* ===== Position ===== */
.relative { position: relative; }
.absolute { position: absolute; }

/* ===== Transitions ===== */
.transition   { transition: all 0.2s ease-in-out; }
.duration-300 { transition-duration: 300ms; }



/* Base grid container */
.grid {
  display: grid;
}

/* Grid column templates */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.col-span-1 {
  grid-column: span 1;
}

.col-span-2 {
  grid-column: span 2;
}

.col-span-3 {
  grid-column: span 3;
}

.col-span-4 {
  grid-column: span 4;
}


/* Responsive breakpoints */
@media (min-width: 640px) {
  .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sm\:col-span-2  { grid-column: span 2; }
}

@media (min-width: 768px) {
  .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:col-span-2  { grid-column: span 2; }
  .md\:col-span-3  { grid-column: span 3; }
  .md\:col-span-4  { grid-column: span 4; }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lg\:col-span-2  { grid-column: span 2; }
  .lg\:col-span-3  { grid-column: span 3; }
  .lg\:col-span-4  { grid-column: span 4; }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .xl\:col-span-2  { grid-column: span 2; }
  .xl\:col-span-3  { grid-column: span 3; }
  .xl\:col-span-4  { grid-column: span 4; }
}

.next-arrow, .prev-arrow {
  cursor: pointer;
  z-index: 999;
}
.sport:hover svg path {
  fill: red;
  transition: fill 0.3s ease;
}
.sport svg {
  cursor: pointer;
}