/* =========================================================
   Utility CSS — My Theme
   ========================================================= */

/* Display */
.hidden   { display: none !important; }

/* Text alignment */
.text-left   { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }

/* Font weight */
.fw-normal { font-weight: 400 !important; }
.fw-bold   { font-weight: 700 !important; }

/* Colors */
.text-navy  { color: var(--navy) !important; }
.text-white { color: var(--white) !important; }
.text-muted { color: var(--muted) !important; }

/* Background */
.bg-navy  { background: var(--navy) !important; }
.bg-white { background: var(--white) !important; }
.bg-pale  { background: var(--navy-pale) !important; }

/* Spacing - margin top */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Spacing - margin bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

/* Flex */
.d-flex        { display: flex !important; }
.d-grid        { display: grid !important; }
.flex-wrap     { flex-wrap: wrap !important; }
.align-center  { align-items: center !important; }
.align-start   { align-items: flex-start !important; }
.justify-center{ justify-content: center !important; }
.justify-between{ justify-content: space-between !important; }
.gap-1         { gap: .5rem !important; }
.gap-2         { gap: 1rem !important; }
.gap-3         { gap: 1.5rem !important; }

/* Width */
.w-full  { width: 100% !important; }
.w-auto  { width: auto !important; }

/* Border radius */
.rounded     { border-radius: var(--radius) !important; }
.rounded-full{ border-radius: 9999px !important; }

/* Shadow */
.shadow { box-shadow: var(--shadow) !important; }