/* ==========================================================================
   CRS Real Alliance - Utility Classes
   --------------------------------------------------------------------------
   TABLE OF CONTENTS:
   1. SPACING & PADDING SYSTEM (8PX GRID BASE LINE)
   2. BRAND VISUAL UTILITIES (GRADIENTS, BACKDROP OVERLAYS)
   3. LUCIDE SVG ICON SIZE CONTROL
   4. DISPLAY & FLEXBOX ALIGNMENTS
   ========================================================================== */

/* 1. SPACING & PADDING SYSTEM (8PX GRID BASE LINE) */
.section-padding {
  padding-top: 100px;
  padding-bottom: 100px;
}
@media (min-width: 992px) {
  .section-padding {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

.py-8 { padding-top: 64px !important; padding-bottom: 64px !important; }
.my-8 { margin-top: 64px !important; margin-bottom: 64px !important; }
.mb-8 { margin-bottom: 64px !important; }
.mt-8 { margin-top: 64px !important; }

/* 2. BRAND VISUAL UTILITIES */
.text-gradient {
  background: linear-gradient(135deg, var(--crs-primary) 30%, var(--crs-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-accent {
  color: var(--crs-accent) !important;
}

.bg-crs-primary {
  background-color: var(--crs-primary) !important;
}

.bg-crs-bg {
  background-color: var(--crs-bg) !important;
}

.container-custom {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.max-width-600 {
  max-width: 600px;
}

.max-width-800 {
  max-width: 800px;
}

/* 3. LUCIDE SVG ICON SIZE CONTROL */
.size-4 {
  width: 16px !important;
  height: 16px !important;
}

.size-5 {
  width: 20px !important;
  height: 20px !important;
}

.size-6 {
  width: 24px !important;
  height: 24px !important;
}

.size-7 {
  width: 28px !important;
  height: 28px !important;
}

.size-8 {
  width: 32px !important;
  height: 32px !important;
}

.size-12 {
  width: 48px !important;
  height: 48px !important;
}

/* 4. DISPLAY & FLEXBOX ALIGNMENTS */
.d-inline-flex-center {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.letter-spacing-1 {
  letter-spacing: 0.05em;
}

.letter-spacing-2 {
  letter-spacing: 0.1em;
}