/* --- Basic Reset --- */
* {
    box-sizing: border-box; 
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%; 
}


/* --- Hero Section Styling --- */
.hero-section {
    height: 100vh; 
    background-image: url('your-image.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* This centers the .hero-content block on the page */
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;
}

/* --- NEW CLASS FOR THE LOGO --- */
.logo {
    width: 250px;
    height: 250px;
    /* Optional: adds space between the logo and the h1 */
    margin-bottom: 2rem; 
}


/* --- MODIFIED HERO CONTENT --- */
.hero-content {
    /* We make this a flex container... */
    display: flex;
    /* ...to stack items vertically... */
    flex-direction: column;
    /* ...and center them horizontally. */
    align-items: center;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin: 0 0 1rem 0;
    color: #102044;
}

.hero-content h2 {
    font-size: 1.25rem;
    margin: 0;
    color: #0ab8a1;
}


/* --- Media Query for Responsiveness --- */
@media (max-width: 600px) {
    
    /* Make logo smaller on mobile */
    .logo {
        width: 150px;
        height: 150px;
        margin-bottom: 1.5rem;
    }
    
    .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero-content h2 {
        font-size: 1rem;
    }
}