/* Typography (Below) */

/* Fonts */

.nav-font {
    font-family: source-sans-pro, sans-serif;
    font-weight: 400;
}

.display-font {
    font-family: source-sans-pro, sans-serif;
    font-weight: 300;
}

.display-font-2 {
    font-family: source-sans-pro, sans-serif;
    font-weight: 400;
}

.header-font {
    font-family: source-sans-pro, sans-serif;
    font-weight: 300;
}

.header-font-stay-flush-left {
  font-family: source-sans-pro, sans-serif;
  font-weight: 300;
}

.header-font-2 {
    font-family: source-serif-pro, serif;
    font-weight: 300;
}

.paragraph-font {
    font-family: source-serif-pro, serif;
    font-weight: 300;
    font-style: normal;
}

.paragraph-font-italic {
    font-family: source-serif-pro, serif;
    font-weight: 300;
    font-style: italic;
}

/* Text Sizing (Below) */

/* Display Text Sizes */
.display-size-16 {
    font-size: 1rem;
}



.display-size-20 {
    font-size: 20px; /* Large screens (≥992px) */
  }
  
  @media (max-width: 992px) {
    .display-size-20 {
      font-size: 18px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .display-size-20 {
      font-size: 16px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .display-size-20 {
      font-size: 14px; /* Extra small screens */
    }
  }

.display-size-24 {
    font-size: 1.5rem;
}



.display-size-28 {
    font-size: 28px; /* Large screens (≥992px) */
  }
  
  @media (max-width: 992px) {
    .display-size-28 {
      font-size: 24px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .display-size-28 {
      font-size: 22px; /* Small screens */
    }
  }

  @media (max-width: 576px) {
    .display-size-28 {
      font-size: 20px; /* Extra small screens */
    }
  }



.display-size-32 {
    font-size: 32px; /* Large screens (≥992px) */
  }
  
  @media (max-width: 992px) {
    .display-size-32 {
      font-size: 28px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .display-size-32 {
      font-size: 24px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .display-size-32 {
      font-size: 20px; /* Extra small screens */
    }
  }


  
.display-size-36 {
    font-size: 2.25rem;
}

@media (max-width: 992px) {
    .display-size-36 {
      font-size: 24px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .display-size-36 {
      font-size: 14px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .display-size-36 {
      font-size: 9px; /* Extra small screens */
    }
  }


.display-size-40 {
    font-size: 2.5rem;
}

@media (max-width: 992px) {
  .display-size-40 {
    font-size: 36px; /* Medium screens */
  }
}

@media (max-width: 768px) {
  .display-size-40 {
    font-size: 32px; /* Small screens */
  }
}

@media (max-width: 576px) {
  .display-size-40 {
    font-size: 28px; /* Extra small screens */
  }
}

.display-size-48 {
    font-size: 3rem;
}

@media (max-width: 992px) {
  .display-size-48 {
    font-size: 40px; /* Medium screens */
  }
}

@media (max-width: 768px) {
  .display-size-48 {
    font-size: 36px; /* Small screens */
  }
}

@media (max-width: 576px) {
  .display-size-48 {
    font-size: 32px; /* Extra small screens */
  }
}

.display-size-56 {
    font-size: 3.5rem;
}

.display-size-64 {
    font-size: 4rem;
}

.display-size-72 {
    font-size: 4.5rem;
}

.display-size-80 {
    font-size: 5rem;
}

.display-size-88 {
    font-size: 5.5rem;
}


.display-size-96 {
    font-size: 96px; /* Matches large desktop, larger than fs-1 */
  }
  
  @media (max-width: 992px) {
    .display-size-96 {
      font-size: 72px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .display-size-96 {
      font-size: 36px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .display-size-96 {
      font-size: 24px; /* Extra small screens */
    }
  }

  @media (max-width: 414px) {
    .display-size-96 {
      font-size: 18px; /* Extra small screens */
    }
  }

.display-size-104 {
    font-size: 6.5rem;
}

.display-size-112 {
    font-size: 7rem;
}

.display-size-120 {
    font-size: 7.5rem;
}

.display-size-128 {
    font-size: 8rem;
}

/* Paragraph Text Sizes */
.paragraph-size-16 {
    font-size: 1rem;
}

.paragraph-size-20{
    font-size: 1.25rem;
}

@media (max-width: 992px) {
    .paragraph-size-20 {
      font-size: 18px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .paragraph-size-20 {
      font-size: 16px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .paragraph-size-20 {
      font-size: 14px; /* Extra small screens */
    }
  }


.paragraph-size-24 {
    font-size: 1.5rem;
}

.paragraph-size-28 {
    font-size: 1.75rem;
}

@media (max-width: 992px) {
    .paragraph-size-28 {
      font-size: 24px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .paragraph-size-28 {
      font-size: 22px; /* Small screens */
    }
  }

  @media (max-width: 576px) {
    .paragraph-size-28 {
      font-size: 20px; /* Extra small screens */
    }
  }



.paragraph-size-32 {
    font-size: 32px; /* Large screens (≥992px) */
  }
  
  @media (max-width: 992px) {
    .paragraph-size-32 {
      font-size: 28px; /* Medium screens */
    }
  }
  
  @media (max-width: 768px) {
    .paragraph-size-32 {
      font-size: 24px; /* Small screens */
    }
  }
  
  @media (max-width: 576px) {
    .paragraph-size-32 {
      font-size: 20px; /* Extra small screens */
    }
  }



.paragraph-size-36 {
    font-size: 2.25rem;
}

.paragraph-size-40 {
    font-size: 2.5rem;
}

/* Uppercase Text */
.uppercase-text {
    text-transform: uppercase;
}

/* Lowercase Text */
.lowercase-text {
    text-transform: lowercase;
}

/* Drop Caps */
.drop-caps {
    overflow: hidden; /* Clear the float */
  }
  
  .drop-caps:first-letter {
    float: left;
    font-size: 4rem;
    margin-right: 5px;
    line-height: 0.8; /* Adjust as needed */
  }

/* Custom Colors */

.custom-color-white {
    color: rgb(255, 255, 255);
}

.custom-color-green {
    color: #006847;
}

.custom-color-red {
    color: #CE1126;
}

.custom-color-beige {
    color: #FFF7EB
}

.custom-color-dark-brown {
    color: #2D2520
}

/* Custom Background Colors */

.background-color-black {
  background-color: #111111;
}

.background-color-light-black {
    background-color: #222222;
}

/* Extra Margin (To Add on top of Bootstrap Margin to go beyond max, below) */

/* Margin-Top */

.mt-6 {
    margin-top: 6rem;
}

.mt-7 {
    margin-top: 12rem;
}

/* Margin-Bottom */

.mb-6 {
    margin-top: 6rem;
}

.mb-7 {
    margin-top: 12rem;
}

/* Extra Padding (To Add on top of Bootstrap Padding to go beyond max) */

/* Padding-Top */

.pt-6 {
    margin-top: 6rem;
}

.pt-7 {
    margin-top: 12rem;
}

/* Padding-Bottom */

.pb-6 {
    margin-top: 6rem;
}

.pb-7 {
    margin-top: 12rem;
}