/* --- Hero --- */
.hero-content {
    position: relative;
    z-index: 10;
}

.hero {
    position: relative;
    width: 100%;
    min-height: 80vh;
    Overflow: hidden;
}

.hero-image {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 650px;
    object-fit: cover;
    object-position: center;
    background-size: cover;
    background-position: center;
    animation: fadeAnimation 12s infinite ease-in-out;  
}

.image-1 {
    background-image: url('images/heroDurwoodSunset.avif');
    /* Start fully opaque */
    opacity: 1; 
}

.image-2 {
    background-image: url('images/heroSunsetDickson-darker.avif');
    /* Start transparent so Image 1 shows initially */
    opacity: 0; 
    /* Delay the second image animation by half the total cycle */
    animation-delay: 15s; 
}

@keyframes fadeAnimation {
    0%, 100% { opacity: 0; }
    16%, 50% { opacity: 0.5; } /* Time spent fully visible */
}

/* Ensure content stays on top */
.hero-content {
    position: relative;
    z-index: 10;
    width: 85%;
    margin-left: auto;
    margin-right: auto;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(2,10,18,0.85) 0%,
        rgba(2,10,18,0.65) 45%,
        rgba(2,10,18,0.35) 100%
    )
}   

.hero-content h1 {
    font-family: 'DM Serif Display', serif;
    font-size: clamp(1.6rem, 5vw, 3rem);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    font-style: italic;
    text-shadow: 4px 4px 5px rgba(0,0,0,0.84);
}

.hero-content h2 {
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 12px; 
    text-shadow: 4px 4px 5px rgba(0,0,0,0.84);
}

.hero-content h3 {
    font-size: clamp(1.1rem, 2.5vw, 1.7rem);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 12px; 
    text-shadow: 4px 4px 5px rgba(0,0,0,0.84);
}