/* Add any custom fonts here */
@font-face {
  font-family: 'UTIndustry-Regular';
  src: url('/UTIndustry-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'UTIndustry-Medium';
  src: url('/UTIndustry-Medium.ttf') format('truetype');
}

@font-face {
  font-family: 'UTIndustry-Heavy';
  src: url('/UTIndustry-Heavy.ttf') format('truetype');
}

@font-face {
  font-family: 'UTIndustry-Bold';
  src: url('/UTIndustry-Bold.ttf') format('truetype');
}

/* Apply fonts */
 h1, h2, h3 {
  font-family: 'UTIndustry-Regular', sans-serif !important;
}

 h7 {
  font-family: 'UTIndustry-Bold', sans-serif !important;
}

h8 {
  font-family: 'UTIndustry-Medium', sans-serif !important;
}

h4, h5, h6 {
  font-family: 'UTIndustry-Regular', sans-serif !important;
}


.hero-title-overlay {
    background-color: rgba(0, 0, 0, 0.65); /* Creates the semi-transparent black background */
    padding: 15px 40px; /* Adds space around the text */
    border-radius: 12px; /* Gives it the rounded corners seen in your WordPress example */
    display: inline-block; /* Ensures the background box only wraps the text, not the whole screen width */
    color: #ffffff; /* Ensures the title text stays white */
}