/* Header Background Image */
.header-background {
background-image: url('bg.jpg'); /* Add your background image here */
background-size: cover;
background-position: center;
height: 400px; /* Adjust height as necessary */
position: relative;
}

.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7); /* Darker overlay for more contrast */
}

.header-section h1 {
font-size: 3.5rem; /* Larger font size for impact */
font-weight: bold; /* Make the title bold */
margin-top: 100px; /* Adjust spacing as necessary */
color: white; /* Ensures the text is visible against the overlay */
}

.header-section p.lead {
font-size: 1.5rem; /* Slightly larger lead text */
color: white; /* Ensures the text is visible against the overlay */
}

/* Adjust button styles */
.cta-button {
margin-top: 20px; /* Space above the button */
padding: 10px 20px; /* Add padding for better click area */
}

/* Custom Colors */
:root {
    --primary-color: #003366; /* Navy Blue */
    --accent-color: #007acc; /* Light Blue */
    --highlight-color: #ffd966; /* Soft Yellow */
    --background-color: #f7f7f7; /* Light Gray */
}

/* Header Section */
.header-section {
    background-color: var(--primary-color);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.header-section h1 {
    font-size: 2.5rem;
}

/* Section Padding */
.section-padding {
    padding: 40px 0;
}

/* How to Get Started Spacing Adjustments */
.how-to-get-started .mb-2 {
    margin-bottom: 10px; /* Reduce spacing to half */
}

/* CTA Button */
.cta-button {
    background-color: var(--highlight-color);
    color: var(--primary-color);
    font-weight: bold;
}

/* Background Colors */
body {
    background-color: var(--background-color);
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: white;
    padding: 20px;
    text-align: center;
    line-height: 1.2; /* Tighter line spacing */
}

/* How It Works Section Background */
#how-it-works {
    background-color: white;
}