/* Utility Classes */

.container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 15px;
}

/* Flexbox */
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Grid */
.grid { display: grid; }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-gap { gap: 30px; }

/* Text */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-white { color: var(--color-white); }
.text-primary { color: var(--color-primary); }

/* Spacing */
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mb-3 { margin-bottom: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-4 { padding-top: 4rem; padding-bottom: 4rem; }
.py-5 { padding-top: 5rem; padding-bottom: 5rem; }
.py-10 { padding-top: 100px; padding-bottom: 100px; }

/* Backgrounds */
.bg-light { background-color: var(--color-bg-light); }
.bg-dark { background-color: var(--color-bg-dark); }
.bg-primary { background-color: var(--color-primary); }

/* Position */
.position-relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Responsive */
@media (max-width: 991px) {
  .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .py-10 { padding-top: 60px; padding-bottom: 60px; }
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
}