/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Mar 20 2026 | 22:09:06 */
/* ===================================== */
/*        FLUID SPACING SYSTEM           */
/*        Base Section: 120px            */
/* ===================================== */

/* ---------- SPACING SCALE TOKENS ---------- */

:root {
  --space-0: 0px;

  --space-xs: clamp(8px, 1vw, 12px);
  --space-sm: clamp(16px, 2vw, 24px);
  --space-md: clamp(24px, 3vw, 40px);
  --space-lg: clamp(40px, 5vw, 80px);
  --space-xl: clamp(60px, 8vw, 120px); /* Your main section spacing */
  --space-2xl: clamp(80px, 10vw, 160px);
}

/* ===================================== */
/*        SECTION SPACING                */
/* ===================================== */

.section-space { padding-block: var(--space-xl); }
.section-space-sm { padding-block: var(--space-lg); }
.section-space-lg { padding-block: var(--space-2xl); }

/* ===================================== */
/*        PADDING UTILITIES              */
/* ===================================== */

/* All sides */
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Vertical */
.py-0 { padding-block: 0 !important; }
.py-xs { padding-block: var(--space-xs); }
.py-sm { padding-block: var(--space-sm); }
.py-md { padding-block: var(--space-md); }
.py-lg { padding-block: var(--space-lg); }
.py-xl { padding-block: var(--space-xl); }

/* Horizontal */
.px-0 { padding-inline: 0 !important; }
.px-xs { padding-inline: var(--space-xs); }
.px-sm { padding-inline: var(--space-sm); }
.px-md { padding-inline: var(--space-md); }
.px-lg { padding-inline: var(--space-lg); }
.px-xl { padding-inline: var(--space-xl); }

/* Top */
.pt-0 { padding-top: 0 !important; }
.pt-sm { padding-top: var(--space-sm); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }

/* Bottom */
.pb-0 { padding-bottom: 0 !important; }
.pb-sm { padding-bottom: var(--space-sm); }
.pb-md { padding-bottom: var(--space-md); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

/* ===================================== */
/*        MARGIN UTILITIES               */
/* ===================================== */

.m-0 { margin: 0 !important; }
.my-0 { margin-block: 0 !important; }
.mx-0 { margin-inline: 0 !important; }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.mb-lg-important { margin-bottom: var(--space-lg) !important; }

/* ===================================== */
/*        GAP UTILITIES (Flex/Grid)      */
/* ===================================== */

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ===================================== */
/*        CONTAINER PADDING              */
/* ===================================== */

.container-padding {
  padding-inline: clamp(16px, 4vw, 40px);
}

/* ===================================== */
/*        HELPER UTILITIES               */
/* ===================================== */

.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }