/* styles.css */

/* custom fonts */
@font-face {
    font-family: 'Avenir LT Pro Black', Arial, sans-serif;
    src: url('AvenirLTProBlack.ttf') format('truetype');
}

/* Reset default margins and set page background */
body {
    margin: 0;
    background-color: white; /* Shows through transparent mask areas */
}

/* Header container styling */
.header-container {
    width: 100%; /* Full viewport width */
    height: 50vh; /* Adjust to match the red section’s height */
    background-image: url('mob-about-header-img-2_dark.webp');
    background-size: cover; /* Fills the container */
    background-position: center; /* Centers the image */
    mask-image: url('mob-neal-mask.png');
    -webkit-mask-image: url('mob-neal-mask.png'); /* For browser compatibility */
    mask-size: 100% 100%; /* Matches container size */
    -webkit-mask-size: 100% 100%;
}

/* text above mask effect */
.about-text {
    position: absolute;
    top: 28%; /* Adjust to position above "NEAL" */
    left: 28%;
    transform: translateX(-50%);
    color: white;
    font-family: 'Avenir LT Pro Black', Arial, sans-serif;
    font-size: 3em;
    font-weight: bold;
    /*text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Improves visibility - hidden temporarily */
}