* {
    text-decoration: none; /* remove underline from anchor links */
}

/* TYPOGRAPHY */

header {
    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.50)), url('./Images/HomeHeroImage.jpg');
    /* Let the header size itself to its content while ensuring a reasonable
       minimum height. Using padding + flexbox keeps the image centered
       while avoiding large unused space below the content. */
    min-height: 50vh;
    padding: 3rem 0;
    padding-top: 150px;

    /* Position and center the background image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center; /* vertical centering for the content */
    justify-content: center; /* horizontal centering */
    position: relative;
}

/* Place hero content in the middle of the page */
.hero-contents {
    /* Use normal flow inside the header (no absolute positioning). With
       header as a flex container the content will be vertically centered
       and the header height will shrink to fit, removing large bottom gaps. */
    text-align: center;
    position: relative;
    color: white;
    max-width: 600px;
    padding: 0 1rem; /* horizontal padding for small screens */
}

/* Space things out nicely within hero image */
.hero-contents p, .hero-contents img {
    margin-top: 25px;
    margin-bottom: 25px;
}

.hero-contents h1 {
    font-size: 100px;
}



/* -----PROJECT BUTTONS----- */
.container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping of child elements */
    justify-content: center; /* Center elements horizontally */
    padding-top: 25px;
    text-align: center;
    width: 75vw; /* Used to set white space on either side of grid */
    max-width: 1000px;
    min-width: 750px;
    align-items: center;
    margin: 0 auto; /* Center horizontally */
}

/* If an <a> wraps a project tile, make the anchor act like it's not
   creating an extra wrapper so the inner .small-project / #aeroscape
   remains a direct flex child and receives clicks as expected. */
.container a {
    display: contents;

    flex-wrap: wrap;
}

#aeroscape {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/aeroscapeHero.png');
    background-position: center;
    background-size:cover;
    
    width: 50vw;
    height: 300px;

    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack heading and paragraph vertically */
    justify-content: center; /* Align content to the bottom */
    text-align: center; /* Ensure text is centered within the div */

    color: white; /* Text color */
    flex: 1 1 100%; /* Take full width */
}

.small-project {
    width: 30vw;
    height: 300px;

    display: flex; /* Use flexbox for alignment */
    flex-direction: column; /* Stack heading and paragraph vertically */
    justify-content: center; /* Align content to the bottom */
    text-align: center; /* Ensure text is centered within the div */

    color: white; /* Text color */
    flex: 1 1 calc(50% - 10px); /* Take half the width with some spacing */
    margin: 5px; /* Add spacing between the small projects */
}

#aeroscape p {
padding-left: 10%;
padding-right: 10%;
}

.small-project p {
    padding-left: 50px;
    padding-right: 50px;
}

/* ---PROJECT BUTTON BACKGROUNDS */


/* Ensure project tiles display their background images nicely */
#creo, #project2, #project3, #project4, #project5, #al {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    cursor: pointer;
}

#creo { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg1.png'); }
#project2 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg2.png'); }
#project3 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg3.png'); }
#project4 {background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg4.png'); }
#project5 { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg5.png'); }
#al { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.75)), url('./Images/projectTeamImages/teamImg6.png'); }

/* ---END PROJECT BUTTON BACKGROUNDS */