/* Base Settings */
:root {
  /* Brand-agnostic colors */
  --gray-600: #020617;               /* rgba(2, 6, 23, 1) */
  --gray-400: #64748b;               /* rgba(100, 116, 139, 1) */
  --gray-300: #cbd5e1;               /* rgba(203, 213, 225, 1) */
  --gray-200: #e2e8f0;               /* rgba(226, 232, 240, 1) */
  --gray-100: #f1f5f9;               /* rgba(241, 245, 249, 1) */
  --gray-50: #ffffff;                /* rgba(255, 255, 255, 1) */
  --white: #ffffff;                  /* Brand-Agnostic-White */
  --black: #000000;                  /* Brand-Agnostic-Black */
  --color-validation: #CB3837;       /* Brand-Agnostic-Red-500 */
  --color-neutral: #878384;          /* Neutral color */
  
  /* University Colors */
  --color-primary: #FF590E;                  /* color-1 */
  --color-secondary: #00529B;                /* color-2 */
  --color-tertiary: #0021A5;                 /* color-3 */
  --color-accent: #041D3C;                   /* color-4 */
  --color-quinary: #AADCD9;                  /* color-5 */
  --color-senary: #C1B7AF;                   /* color-6 */
  --color-button-hover: #DA4B0B;              /* color-button-hover */
  --color-outline-hover: #ffefe7;          /* color-button-outline-hover */
  --color-button-text: var(--white);         /* color-button-text */
  --color-input-border: var(--gray-600);       /* color-input-border */
  --color-background: var(--white);           /* White */
  --color-background-alt: var(--gray-100);   /* Brand-Agnostic-Gray-100 */
  --color-text: var(--gray-600);             /* Brand-Agnostic-Gray-600 */
 
  /* Zero spacing */
  --space-0: 0;

  /* Spacing */
  --sp-2: 0.2rem;                    /* 2px */
  --sp-4: 0.4rem;                    /* 4px */
  --sp-8: 0.8rem;                    /* 8px */
  --sp-12: 1.2rem;                   /* 12px */
  --sp-13: 1.3rem;                   /* 13px */
  --sp-15: 1.5rem;                   /* 15px */
  --sp-16: 1.6rem;                   /* 16px */
  --sp-24: 2.4rem;                   /* 24px */
  --sp-32: 3.2rem;                   /* 32px */
  --sp-40: 4rem;                     /* 40px */
  --sp-48: 4.8rem;                   /* 48px */
  --sp-50: 5rem;                     /* 50px */
  --sp-56: 5.6rem;                   /* 56px */
  --sp-64: 6.4rem;                   /* 64px */
  --sp-72: 7.2rem;                   /* 72px */
  --sp-80: 8rem;                     /* 80px */
  --sp-88: 8.8rem;                   /* 88px */
  --sp-96: 9.6rem;                   /* 96px */
  --sp-104: 10.4rem;                 /* 104px */
  --sp-160: 16rem;                   /* 160px */

  /* Breakpoints */
  --bp-mobile: 39rem;                /* 390px */
  --bp-ipad-air: 834px;            /* 834px */
  --bp-ipad-pro: 1024px;           /* 1024px */
  --bp-desktop: 1440px;              /* 1440px */
  --bp-desktop-lg: 1920px;           /* 1920px */

  /* Responsive Paddings - X Axis */
  --pd-x-10: 1rem;                   /* 10px */
  --pd-x-12: 1.2rem;                 /* 12px */
  --pd-x-16: 1.6rem;                 /* 16px */
  --pd-x-24: 2.4rem;                 /* 24px */
  --pd-x-32: 3.2rem;                 /* 32px */
  --pd-x-40: 4rem;                   /* 40px */
  --pd-x-48: 4.8rem;                 /* 48px */
  --pd-x-50: 5rem;                   /* 50px */
  --pd-x-56: 5.6rem;                 /* 56px */
  --pd-x-64: 6.4rem;                 /* 64px */
  --pd-x-72: 7.2rem;                 /* 72px */
  --pd-x-80: 8rem;                   /* 80px */
  --pd-x-88: 8.8rem;                 /* 88px */
  --pd-x-104: 10.4rem;               /* 104px */
  --pd-x-160: 16rem;                 /* 160px */
  --pd-x-200: 20rem;                 /* 200px */
  --pd-x-304: 30.4rem;               /* 304px */
  --pd-x-400: 40rem;                 /* 400px */

  /* Responsive Paddings - Y Axis */
  --pd-y-8: 0.8rem;                  /* 8px */
  --pd-y-10: 1rem;                   /* 10px */ 
  --pd-y-12: 1.2rem;                 /* 12px */
  --pd-y-15: 1.5rem;                 /* 15px */
  --pd-y-16: 1.6rem;                 /* 16px */
  --pd-y-24: 2.4rem;                 /* 24px */
  --pd-y-32: 3.2rem;                 /* 32px */
  --pd-y-40: 4rem;                   /* 40px */
  --pd-y-48: 4.8rem;                 /* 48px */
  --pd-y-64: 6.4rem;                 /* 64px */
  --pd-y-80: 8rem;                   /* 80px */
  --pd-y-88: 8.8rem;                 /* 88px */

  /* Typography */
  --font-primary: "Aptos", sans-serif; /* body text, h2, h3, h4 */
  --font-secondary: "Anybody", sans-serif; /* h1 only */
  --font-tertiary: "Satisfy", sans-serif; /* h5 only */

  /* Font Sizes - Mobile & iPad Air */
  --font-size-xs: 1.2rem;            /* 12px */
  --font-size-sm: 1.5rem;            /* 15px */
  --font-size-base: 1.6rem;          /* 16px */
  --font-size-bd: 4.5rem;            /* 45px */
  --font-size-lg: 2.0rem;            /* 20px */
  --font-size-xl: 2.1rem;            /* 21px */
  --font-size-2xl: 2.5rem;           /* 25px */
  --font-size-3xl: 2.5rem;           /* 21px */

  /* Line Heights */
  --lh-normal: 1.5;                  /* 150% for font sizes 24px */
  --lh-large: 1.2;                   /* 120% for font sizes larger than 24px */
  --lh-bd: 1.06667;                  /* 106.667% for font sizes 33px */

  /* Font Weights */
  --fw-normal: 400;                  /* Normal */
  --fw-medium: 500;                  /* Medium */
  --fw-semi-bold: 600;               /* Semi Bold */
  --fw-bold: 700;                    /* Bold */
  --fw-ultra-bold: 800;              /* Ultra Bold */
  --fw-extra-bold: 900;              /* Extra Bold */

  /* Border Radius */
  --br-4: 0.4rem;                    /* 4px */
  --br-8: 0.8rem;                    /* 8px */
  --br-10: 1rem;                     /* 10px */
  --br-16: 1.6rem;                   /* 16px */
  --br-50: 5rem;                     /* 50px */
  --br-full: 999.9rem;               /* 9999px */

}

/* Reset and base styles */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%; /* Set base font size to 10px (62.5% of 16px) */
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;    /* Prevent font size adjustments after orientation changes in iOS */
  -webkit-font-smoothing: antialiased; /* Smooth font rendering */
  -moz-osx-font-smoothing: grayscale;  /* Smooth font rendering for Firefox */
}

body {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);    /* 16px */
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--color-background);
}

/* Add default flex display for sections and divs */
section, div {
  display: flex;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

/* Remove default margins and paddings for common elements */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
figure, dl, dd {
  margin: 0;
}

b, strong {
  font-weight: var(--fw-bold);
}

/* Remove list styles and padding */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove default quotes from blockquote and q elements */
blockquote, q {
  quotes: none;
}
blockquote::before, blockquote::after,
q::before, q::after {
  content: '';
  content: none;
}

/* Ensure consistent border and spacing for tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Preserve focus outline for accessibility */
:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Reset link styles */
a {
  text-decoration: none;
  color: inherit;
}

a:hover {
  color: var(--color-button-hover);
}

/* Remove built-in form padding in Firefox */
button, input, optgroup, select, textarea {
  padding: 0;
}

/* Typography reset classes */
h1, .h1, .text-h1 {
  font-family: var(--font-secondary);
  font-size: var(--font-size-3xl);     /* 32px */
  line-height: var(--lh-large);
  font-weight: var(--fw-semi-bold);
  text-transform: uppercase;
}

h2, .h2, .text-h2 {
  font-family: var(--font-secondary);
  font-size: var(--font-size-2xl);     /* 24px */
  line-height: var(--lh-large);
  font-weight: var(--fw-ultra-bold);
  letter-spacing: 0.08rem;               /* 0.8px */
  
}

h3, .h3, .text-h3 {
  font-family: var(--font-primary);
  font-size: var(--font-size-xl);      /* 22px */
  line-height: var(--lh-large);
  font-weight: var(--fw-ultra-bold);
}

h4, .h4, .text-h4 {
  font-family: var(--font-primary);
  font-size: var(--font-size-lg);      /* 19px */
  line-height: var(--lh-large);
  font-weight: var(--fw-semi-bold);
  text-transform: uppercase;
}

h5, .h5, .text-h5 {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);    /* 15px */
  line-height: var(--lh-bd);
  font-weight: var(--fw-normal);
}

.billon-dreams-text {
  font-family: var(--font-tertiary);
  font-size: var(--font-size-bd);    /* 42px */
  line-height: var(--lh-bd);
  font-weight: var(--fw-normal);
}

p, .body-text, .text-body {
  font-size: var(--font-size-base);    /* 15px */
  line-height: var(--lh-normal);
}

.body-bold, .text-body-bold {
  font-size: var(--font-size-base);    /* 15px */
  line-height: var(--lh-normal);
  font-weight: var(--fw-ultra-bold);
}

small, .small-text, .text-small {
  font-size: var(--font-size-xs);      /* 12px */
  line-height: var(--lh-normal);
}

.small-bold, .text-small-bold {
  font-size: var(--font-size-xs);      /* 12px */
  line-height: var(--lh-normal);
  font-weight: var(--fw-ultra-bold);
}

.disclaimer, .text-disclaimer {
  font-size: var(--font-size-xs);      /* 12px */
  line-height: var(--lh-normal);
}

/* Form Reset and Styles */
form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

input,
textarea,
select {
  display: flex;
  height: 52px;
  padding: 0 12px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: var(--br-8);
  border: 1px solid var(--color-input-border);
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background-color: var(--white);
  transition: border-color 0.3s ease;
}

/* Rounded version of input fields */
.form-rounded input,
.form-rounded textarea,
.form-rounded select {
  border-radius: var(--br-50);
}

textarea {
  height: auto;
  min-height: 52px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23000000' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text);
  opacity: 0.5;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
}

input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--color-background-alt);
  cursor: not-allowed;
}

.input-error {
  border-color: var(--color-validation);
}

.error-message {
  color: var(--color-validation);
  font-size: var(--font-size-sm);
  margin-top: var(--sp-4);
}

/* Checkbox and Radio Button Styles */
input[type="checkbox"],
input[type="radio"] {
  height: auto;
  width: auto;
  margin-right: var(--sp-8);
}

.checkbox-group,
.radio-group {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
}

/* Submit Button Styles */
button[type="submit"] {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--pd-y-16) var(--pd-x-24);
  font-size: var(--font-size-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  color: var(--color-button-text);
  background-color: var(--color-primary);
  border: none;
  border-radius: var(--br-8);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button[type="submit"]:hover {
  background-color: var(--color-button-hover);
  color: var(--color-button-text);
}

/* Rounded version of submit button */
.form-rounded button[type="submit"] {
  border-radius: var(--br-50);
}

/* Label Styles */
label {
  font-size: var(--font-size-base);
  font-weight: var(--fw-medium);
  margin-bottom: var(--sp-4);
}

/* Fieldset Styles */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-size: var(--font-size-lg);
  font-weight: var(--fw-bold);
  margin-bottom: var(--sp-16);
}

/* Utility classes */
/* Background Color Utilities */
.bg-primary { background-color: var(--color-primary); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-tertiary { background-color: var(--color-tertiary); }
.bg-accent { background-color: var(--color-accent); }
.bg-background { background-color: var(--color-background); }
.bg-background-alt { background-color: var(--color-background-alt); }
.bg-gradient-primary {
  background: linear-gradient(263deg, var(--color-primary) 3.21%, var(--color-tertiary) 102.89%);
}
.bg-text { background-color: var(--color-text); }
.bg-validation { background-color: var(--color-validation); }
.bg-neutral { background-color: var(--color-neutral); }
.bg-quinary { background-color: var(--color-quinary); }
.bg-senary { background-color: var(--color-senary); }

/* Brand-agnostic background color utilities */
.bg-gray-600 { background-color: var(--gray-600); }
.bg-gray-400 { background-color: var(--gray-400); }
.bg-gray-300 { background-color: var(--gray-300); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-50 { background-color: var(--gray-50); }
.bg-white { background-color: var(--white); }
.bg-black { background-color: var(--black); }

/* Text Color Utilities */
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-tertiary { color: var(--color-tertiary); }
.text-accent { color: var(--color-accent); }
.text-quinary { color: var(--color-quinary); }
.text-senary { color: var(--color-senary); }

/* Gap utilities */
.gap-2 { gap: var(--sp-2); }
.gap-4 { gap: var(--sp-4); }
.gap-8 { gap: var(--sp-8); }
.gap-12 { gap: var(--sp-12); }
.gap-13 { gap: var(--sp-13); }
.gap-16 { gap: var(--sp-16); }
.gap-24 { gap: var(--sp-24); }
.gap-32 { gap: var(--sp-32); }
.gap-40 { gap: var(--sp-40); }
.gap-48 { gap: var(--sp-48); }
.gap-56 { gap: var(--sp-56); }
.gap-64 { gap: var(--sp-64); }
.gap-72 { gap: var(--sp-72); }
.gap-80 { gap: var(--sp-80); }
.gap-88 { gap: var(--sp-88); }
.gap-96 { gap: var(--sp-96); }
.gap-104 { gap: var(--sp-104); }

/* Border radius utility classes */
.rounded-4 { border-radius: var(--br-4); }
.rounded-8 { border-radius: var(--br-8); }
.rounded-10 { border-radius: var(--br-10); }
.rounded-16 { border-radius: var(--br-16); }
.rounded-50 { border-radius: var(--br-50); }
.rounded-full { border-radius: var(--br-full); }

/* Button Utility Classes */
.btn {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: var(--font-size-base);
  line-height: var(--lh-normal);
  font-weight: var(--fw-bold);
}

.btn-standard,
.btn-submit {
  background-color: var(--color-primary);
  color: var(--color-button-text);
  border-radius: var(--br-8);
  padding: var(--pd-y-16) var(--pd-x-24);
}

.btn-standard:hover,
.btn-submit:hover,
.btn-pill:hover {
  background-color: var(--color-button-hover);
  color: var(--color-button-text);
}

.btn-small {
  background-color: var(--color-primary);
  color: var(--color-button-text);
  border-radius: var(--br-8);
  padding: var(--pd-y-8) var(--pd-x-16);
}

.btn-small:hover {
  background-color: var(--color-button-hover);
}

.btn-outline {
  background-color: var(--white);
  color: var(--gray-600);
  border-radius: var(--br-8);
  padding: var(--pd-y-16) var(--pd-x-24);
  border: 2px solid var(--color-primary);
  font-weight: var(--fw-bold);
}

.btn-outline:hover {
  background-color: var(--color-outline-hover);
}

.btn-outline-small {
  padding: var(--pd-y-8) var(--pd-x-16);
}

.btn-pill {
  border-radius: var(--br-50);
}

.btn-white {
  background-color: var(--white);
  color: var(--black);
  border-radius: var(--br-8);
  padding: var(--pd-y-16) var(--pd-x-24);
}

.btn-white:hover {
  background-color: var(--gray-100);
}

/* Color utility classes */
.color-primary { color: var(--color-primary); }
.color-secondary { color: var(--color-secondary); }
.color-tertiary { color: var(--color-tertiary); }
.color-accent { color: var(--color-accent); }
.color-outline-hover { color: var(--color-outline-hover); }
.color-input-border { color: var(--color-input-border); }
.color-background { color: var(--color-background); }
.color-background-alt { color: var(--color-background-alt); }
.color-text { color: var(--color-text); }
.color-validation { color: var(--color-validation); }
.color-neutral { color: var(--color-neutral); }
.color-quinary { color: var(--color-quinary); }
.color-senary { color: var(--color-senary); }

/* Cursor utility classes */
.cursor-pointer { cursor: pointer; }

/* Font family utility classes */
.font-primary { font-family: var(--font-primary); }
.font-secondary { font-family: var(--font-secondary); }

/* Font weight utility classes */
.font-normal { font-weight: var(--fw-normal); }
.font-medium { font-weight: var(--fw-medium); }
.font-bold { font-weight: var(--fw-bold); }
.font-extra-bold { font-weight: var(--fw-extra-bold); }

/* Line height utility classes */
.lh-normal { line-height: var(--lh-normal); }
.lh-large { line-height: var(--lh-large); }

/* Spacing utility classes */
.m-2 { margin: var(--sp-2); }
.m-4 { margin: var(--sp-4); }
.m-8 { margin: var(--sp-8); }
.m-16 { margin: var(--sp-16); }
.m-24 { margin: var(--sp-24); }
.m-40 { margin: var(--sp-40); }
.m-48 { margin: var(--sp-48); }
.m-56 { margin: var(--sp-56); }
.m-64 { margin: var(--sp-64); }
.m-72 { margin: var(--sp-72); }
.m-80 { margin: var(--sp-80); }
.m-88 { margin: var(--sp-88); }
.m-96 { margin: var(--sp-96); }
.m-104 { margin: var(--sp-104); }

.p-2 { padding: var(--sp-2); }
.p-4 { padding: var(--sp-4); }
.p-8 { padding: var(--sp-8); }
.p-16 { padding: var(--sp-16); }
.p-24 { padding: var(--sp-24); }
.p-40 { padding: var(--sp-40); }
.p-48 { padding: var(--sp-48); }
.p-56 { padding: var(--sp-56); }
.p-64 { padding: var(--sp-64); }
.p-72 { padding: var(--sp-72); }
.p-80 { padding: var(--sp-80); }
.p-88 { padding: var(--sp-88); }
.p-96 { padding: var(--sp-96); }
.p-104 { padding: var(--sp-104); }

/* Add utility classes for responsive paddings */
.px-10 { padding-left: var(--pd-x-10); padding-right: var(--pd-x-10); }
.px-12 { padding-left: var(--pd-x-12); padding-right: var(--pd-x-12); }
.px-16 { padding-left: var(--pd-x-16); padding-right: var(--pd-x-16); }
.px-24 { padding-left: var(--pd-x-24); padding-right: var(--pd-x-24); }
.px-32 { padding-left: var(--pd-x-32); padding-right: var(--pd-x-32); }
.px-40 { padding-left: var(--pd-x-40); padding-right: var(--pd-x-40); }
.px-48 { padding-left: var(--pd-x-48); padding-right: var(--pd-x-48); }
.px-50 { padding-left: var(--pd-x-50); padding-right: var(--pd-x-50); }
.px-56 { padding-left: var(--pd-x-56); padding-right: var(--pd-x-56); }
.px-64 { padding-left: var(--pd-x-64); padding-right: var(--pd-x-64); }
.px-72 { padding-left: var(--pd-x-72); padding-right: var(--pd-x-72); }
.px-80 { padding-left: var(--pd-x-80); padding-right: var(--pd-x-80); }
.px-88 { padding-left: var(--pd-x-88); padding-right: var(--pd-x-88); }
.px-104 { padding-left: var(--pd-x-104); padding-right: var(--pd-x-104); }
.px-160 { padding-left: var(--pd-x-160); padding-right: var(--pd-x-160); }
.px-200 { padding-left: var(--pd-x-200); padding-right: var(--pd-x-200); }
.px-304 { padding-left: var(--pd-x-304); padding-right: var(--pd-x-304); }
.px-400 { padding-left: var(--pd-x-400); padding-right: var(--pd-x-400); }

.py-8 { padding-top: var(--pd-y-8); padding-bottom: var(--pd-y-8); }
.py-10 { padding-top: var(--pd-y-10); padding-bottom: var(--pd-y-10); }
.py-12 { padding-top: var(--pd-y-12); padding-bottom: var(--pd-y-12); }
.py-15 { padding-top: var(--pd-y-15); padding-bottom: var(--pd-y-15); }
.py-16 { padding-top: var(--pd-y-16); padding-bottom: var(--pd-y-16); }
.py-24 { padding-top: var(--pd-y-24); padding-bottom: var(--pd-y-24); }
.py-32 { padding-top: var(--pd-y-32); padding-bottom: var(--pd-y-32); }
.py-40 { padding-top: var(--pd-y-40); padding-bottom: var(--pd-y-40); }
.py-48 { padding-top: var(--pd-y-48); padding-bottom: var(--pd-y-48); }
.py-64 { padding-top: var(--pd-y-64); padding-bottom: var(--pd-y-64); }
.py-80 { padding-top: var(--pd-y-80); padding-bottom: var(--pd-y-80); }
.py-88 { padding-top: var(--pd-y-88); padding-bottom: var(--pd-y-88); }

/* Flexbox utility classes */
/* Display */
.flex { display: flex; }

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }

/* New utility classes */
.flex-grow-1 { flex: 1 0 0; }
.flex-shrink-0 { flex-shrink: 0; }

/* Gap */
.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-4, 4px); }
.gap-2 { gap: var(--space-8, 8px); }
.gap-3 { gap: var(--space-16, 16px); }
.gap-4 { gap: var(--space-24, 24px); }
.gap-5 { gap: var(--space-32, 32px); }
.gap-6 { gap: var(--space-48, 48px); }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Navigation Menu Utility Class */
.nav-menu a {
  transition: color 0.3s ease;
}

.nav-menu a:hover {
  color: var(--gray-400);
}

.nav-menu [aria-current="page"] {
  font-weight: var(--fw-bold);
}

/* Margin Utility Classes */
.m-0 { margin: var(--space-0); }
.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
.mt-0 { margin-top: var(--space-0); }
.mr-0 { margin-right: var(--space-0); }
.mb-0 { margin-bottom: var(--space-0); }
.ml-0 { margin-left: var(--space-0); }

/* Padding Utility Classes */
.p-0 { padding: var(--space-0); }
.px-0 { padding-left: var(--space-0); padding-right: var(--space-0); }
.py-0 { padding-top: var(--space-0); padding-bottom: var(--space-0); }
.pt-0 { padding-top: var(--space-0); }
.pr-0 { padding-right: var(--space-0); }
.pb-0 { padding-bottom: var(--space-0); }
.pl-0 { padding-left: var(--space-0); }

/* Typography utility classes */
.text-underline { text-decoration: underline; }

/* Text alignment utilities */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* Text transform utilities */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-normal-case { text-transform: none; }

/* Text color utility classes */
.text-white { color: var(--white); }

/* Responsive padding classes */
.padding-standard,
.padding-inner,
.padding-popup,
.padding-standard-inner {
  padding: var(--pd-y-48) var(--pd-x-24);
}

.padding-x-standard,
.padding-x-inner,
.padding-x-standard-inner {
  padding-left: var(--pd-x-24);
  padding-right: var(--pd-x-24);
}

/* Responsive styles */

/* Mobile-first approach */
/* Styles are progressively enhanced for larger screens using min-width media queries */

/* iPad Air and up */
@media (min-width: 834px) {
  /* Adjust padding for iPad Air screens */
  .padding-x-standard,
  .padding-x-inner,
  .padding-x-standard-inner {
    padding-left: var(--pd-x-64);
    padding-right: var(--pd-x-64);
  }

  .padding-standard,
  .padding-inner,
  .padding-standard-inner {
    padding: var(--pd-y-64) var(--pd-x-64);
  }

  .padding-popup {
    padding: var(--pd-y-48) var(--pd-x-48);
  }
}

/* iPad Pro and up */
@media (min-width: 1000px) {
   /* Update font sizes */
   :root {
    --font-size-xs: 1.2rem;            /* 12px */
    --font-size-sm: 1.4rem;            /* 14px */
    --font-size-base: 1.8rem;          /* 18px */
    --font-size-bd: 5.4rem;            /* 54px */
    --font-size-lg: 2.3rem;            /* 23px */
    --font-size-xl: 2.6rem;            /* 26px */
    --font-size-2xl: 3.1rem;           /* 31px */
    --font-size-3xl: 3.3rem;           /* 26px */

    --lh-large: 1.22581;               /* 122.581% */
    --lh-h1: 1.18182;                  /* 118.182% */
    --lh-h4: 1.21739;                  /* 121.739% */
    --lh-bd: .88889;                   /* 88.889% */
  }

  h1, .h1, .text-h1 {
    font-size: var(--font-size-3xl);   /* 40px */
    line-height: var(--lh-h1);         /* 118.182% */
  }

  h2, .h2, .text-h2 {
    font-size: var(--font-size-2xl);   /* 28px */
    line-height: var(--lh-large);      /* 122.581% */
  }

  h3, .h3, .text-h3 {
    font-size: var(--font-size-xl);    /* 23px */
    line-height: var(--lh-large);      /* 122.581% */
  }

  h4, .h4, .text-h4 {
    font-size: var(--font-size-lg);    /* 20px */
    line-height: var(--lh-h4);         /* 121.739% */
  }

  h5, .h5, .billon-dreams-text, .text-h5 {
    font-size: var(--font-size-bd);    /* 33px */
    line-height: var(--lh-bd);         /* 88.889% */
  }

  p, .body-text, .body-bold, .text-body {
    font-size: var(--font-size-base);  /* 16px */
    line-height: var(--lh-normal);     /* 150% */
  }

  small, .small-text, .small-bold, .text-small {
    font-size: var(--font-size-sm);    /* 14px */
    line-height: var(--lh-normal);     /* 150% */
  }
}

/* Desktop and up */
@media (min-width: 1400px) {
  /* Adjust padding for laptop screens */
  .padding-x-standard,
  .padding-x-standard-inner {
    padding-left: var(--pd-x-104);
    padding-right: var(--pd-x-104);
  }

  .padding-standard,
  .padding-standard-inner {
    padding: var(--pd-y-80) var(--pd-x-104);
  }

  .padding-x-inner {
    padding-left: var(--pd-x-304);
    padding-right: var(--pd-x-304);
  }

  .padding-inner {
    padding: var(--pd-y-80) var(--pd-x-304);
  }

  .padding-popup {
    padding: var(--pd-y-56) var(--pd-x-56);
  }
}
/* Large Desktop and up */

@media (min-width: 1899px) {
  .padding-x-standard {
    padding-left: var(--pd-x-200);
    padding-right: var(--pd-x-200);
  }

  .padding-standard {
    padding: var(--pd-y-88) var(--pd-x-200);
  }

  .padding-x-inner,
  .padding-x-standard-inner {
    padding-left: var(--pd-x-400);
    padding-right: var(--pd-x-400);
  }

  .padding-inner,
  .padding-standard-inner {
    padding: var(--pd-y-88) var(--pd-x-400);
  }
}