:root {
    --primary-bg-gradient: linear-gradient(90deg, var(--offwhite0), var(--offwhite1), var(--offwhite1), var(--offwhite0));
    --primary-bg-color: #ff0000; /* debug */
    --offwhite0: hsl(39, 45%, 90%);
    --offwhite1: hsl(39, 40%, 98%);
    --accent-color: hsl(195, 64%, 23%); /* Vedra logo Dark Blue */
    --highlight-color: hsl(187, 100%, 50%); /* Vedra logo Light blue*/
    --text-color: #ffffff;
    --button-bg-color: hsl(195, 100%, 10%);
    --button-text-color: #ffffff;
    --contact-bg: #ffffff91;
    --inv-text-color: hsl(195, 20%, 25%);
    --hidden-text-color: hsla(195, 20%, 20%, 0.466);
    --subtext-color: hsl(195, 100%, 45%);
}

body {
    margin: 0;
    font-family: 'Georgia', serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background-image: var(--primary-bg-gradient);
    color: var(--text-color);
    text-align: center;
    line-height: 1.6;
}

header {
    background: var(--accent-color);
    color: var(--text-color);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

h1 {
    font-size: 3em;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 0.5em;
}

p {
    font-size: 1.2em;
    font-weight: 300;
    margin-top: 0;
}
.hero {
    background: url('../public/assets/images/landing1.png') no-repeat center center/cover;
    position: relative;
    color: var(--text-color);
    padding-top: 5em;
    padding-bottom: 2.5em; /* Ensure this is applied */
    width: 100%;
    text-align: center;
    overflow: hidden; /* Prevent overflow of the pseudo-element */
}

.hero::before {
    content: ""; /* Required for pseudo-elements */
    background: url('../public/assets/images/landing1.png') no-repeat center center/cover;
    position: absolute; /* Position it absolutely within the hero */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(3px); /* Adjust the blur value as needed */
    z-index: 0; /* Set a lower z-index for the blurred background */
}

.hero h2, .hero p {
    position: relative;
    z-index: 1; /* Ensure text is above the blurred background */
    margin: 0; /* Reset margins to prevent collapsing */
}

.hero h2 {
    font-size: 2.5em;
    margin-bottom: 1em; /* This margin will not collapse with padding */
}

.hero p {
    font-size: 1.4em;
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 1em;
}



.contact {
    background: var(--contact-bg);
    padding: 2em;
    width: 90%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 2em;
    text-align: left;
}

.contact h2 {
    font-size: 2em;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 0.5em;
}

.contact p {
    font-size: 1em;
    margin-bottom: 0.5em;
    color: var(--inv-text-color);
}

.contact a {
    color: var(--subtext-color);
    text-decoration: none;
    font-weight: 500;
}

.contact a:hover {
    text-decoration: underline;
    color: var(--highlight-color);
}

footer {
    margin-top: 3em;
    font-size: 0.9em;
    color: var(--hidden-text-color);
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 2em;
    }
    
    .hero p {
        font-size: 1.2em;
    }

    .contact {
        padding: 1.5em;
    }

    .contact h2 {
        font-size: 1.8em;
    }
}