/* General body reset */
body {
    margin: 0;
    font-family: sans-serif;
}

/* The hero section container */
.hero-section {
    /* This is the URL for your image */
    background-image: url('https://res.cloudinary.com/dtwmyyf3b/image/upload/v1763028695/Hero_Image_-_AdobeStock_833703606_k3mwlj.jpg');
    
    /* Make the image cover the entire section */
    background-size: cover;
    
    /* Center the image */
    background-position: center;
    
    /* Set a height for the hero section */
    height: 80vh; /* 80% of the viewport height */
    
    /* Flexbox to center the content vertically and horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Style for the text on top of the image */
    color: white;
    text-align: center;
}

/* Optional: Add a dark overlay for better text readability */
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* This creates a semi-transparent black layer. Adjust the 0.5 for more/less darkness */
    background: rgba(0, 0, 0, 0.4); 
    /* This ensures the overlay is behind the hero content but on top of the image */
    z-index: 1;
}

/* Container for the text and button */
.hero-content {
    position: relative; /* Needed to appear above the overlay */
    z-index: 2;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Call-to-action button styling */
.cta-button {
    background-color: #007BFF;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}