/* styles.css */

/* custom fonts */
@font-face {
    font-family: 'Avenir LT Pro Black';
    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: 100vh; /* Adjust to match the red section’s height */
    background-image: url('about-us-image_DK-2.webp');
    background-size: cover; /* Fills the container */
    background-position: center; /* Centers the image */
    mask-image: url('neal-mask-2.png');
    -webkit-mask-image: url('neal-mask-2.png'); /* For browser compatibility */
    mask-size: 100% 100%; /* Matches container size */
    -webkit-mask-size: 100% 100%;
    margin-top: -100px; /* Adjusts the position of the mask */
}

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

/* Media queries for responsive design */
@media (max-width: 1200px) {
    .about-text {
        top: 32%;
        left: 25%;
        font-size: 5em; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 1024px) {
    .about-text {
        top: 35%;
        left: 24%;
        font-size: 5.5em; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 992px) {
    .about-text {
        top: 35%;
        left: 22%;
        font-size: 4.5em; /* Adjust font size for smaller screens */
    }
}

@media (max-width: 768px) {
    .about-text {
        top: 35%;
        left: 20%;
        font-size: 4em; /* Adjust font size for smaller screens */
    }
}

@media (max-height: 750px) {
    .about-text {
        top: 25%;
        left: 28%;
        font-size: 4em; /* Adjust font size for smaller screens */
}
}