html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    /* Set 'Outfit' as the default font for the whole page */
    font-family: 'Outfit', sans-serif; 
}

.hero-container {
    height: 100vh; /* 100% of the viewport height */

    /* ----- Background Image ----- */
    /* This now points to your local file */
    background-image: url('background.jpg'); 
    
    /* Make the background cover the entire container */
    background-size: cover; 
    
    /* Center the background image */
    background-position: center; 
    
    /* Prevent the background from repeating */
    background-repeat: no-repeat;

    /* ----- Centering the Text ----- */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    
    /* This prevents text from spilling off-screen */
    overflow: hidden;
}

.overlay-text {
    /* ----- 1. Apply the Font ----- */
    font-family: 'Outfit', sans-serif;
    font-weight: 700; /* 700 is the number for "Bold" */
    color: white;      
    
    /* Add a shadow to make the text readable */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); 

    /* ----- 2. Responsive Font Size ----- */
    /*
      This is now set to 20% of the viewport width (vw)
      as requested.
    */
    font-size: 20vw;
    
    /* This stops the word from breaking into two lines */
    white-space: nowrap;
}