/* Font Face Definitions */
@font-face {
    font-family: 'Trap';
    src: url('../fonts/Trap-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Trap';
    src: url('../fonts/Trap-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Trap';
    src: url('../fonts/Trap-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

/* Typography System */

/* About Us Heading */
.about-us-heading {
  font-size: 30px;
}
:root {
  /* Heading 1 */
  --h1-font-family: 'Trap', sans-serif;
  --h1-font-weight: 600;
  --h1-font-size: clamp(1.8rem, calc(8.696vw - 2.78px), 4rem);
  --h1-line-height: 1.1;
  --h1-letter-spacing: 0%;
  --h1-text-align: center;
  --h1-color: var(--color-white);
  --h1-accent-color: var(--color-accent);


  /* Heading 2 - Default (White) */
  --h2-font-family: 'Trap', sans-serif;
  --h2-font-weight: 600;
  --h2-font-size: 36px;
  --h2-line-height: 1.2;
  --h2-letter-spacing: 0%;
  --h2-text-align: center;
  --h2-color: var(--color-white);

  /* Heading 2 - Accent (Yellow) */
  --h2-accent-color: var(--color-accent);
}

/* Base Heading Styles */
h1, .h1 {
  font-family: var(--h1-font-family);
  font-weight: var(--h1-font-weight);
  font-size: var(--h1-font-size);
  line-height: var(--h1-line-height);
  letter-spacing: var(--h1-letter-spacing);
  text-align: var(--h1-text-align);
  color: var(--h1-color);
  margin: 0 0 1rem 0;
  padding: 0;
}

h2, .h2 {
  font-family: var(--h2-font-family);
  font-weight: var(--h2-font-weight);
  font-size: var(--h2-font-size);
  line-height: var(--h2-line-height);
  letter-spacing: var(--h2-letter-spacing);
  text-align: var(--h2-text-align);
  color: var(--h2-color);
  margin: 0 0 1.5rem 0;
  padding: 0;
}

/* Accent Heading 2 */
/* Text Alignment Utilities */
.text-left {
  text-align: left !important;
}

h1.accent, .h1.accent {
  color: var(--h1-accent-color);
}
h2.accent, .h2.accent {
  color: var(--h2-accent-color);
}

/* Responsive Adjustments */
@media (min-width: 1200px) {
  h2.about-us {
    font-size: 64px;
  }
}

@media (max-width: 990px) {
  :root {
    --h2-font-size: 2.4rem;
  }

  }

@media (max-width: 768px) {
  :root {
    --h2-font-size: 1.6rem;
  }
  
  h2.about-us {
    font-size: 2.4rem;
  }
}

@media (max-width: 400px) {
  :root {
    --h2-font-size: 1.6rem;
  }
  
  h2, .h2 {
    margin-bottom: 12px;
  }
  
  h2.about-us {
    font-size: 1.8rem;
  }
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }