.hero {
    height: 100vh; /* Full viewport height */
    min-height: 500px; /* Minimum height */
    position: relative;
    overflow: hidden;
    background-color: #111; /* Fallback background */
    display: flex; /* Align content */
    align-items: center; /* Default vertical alignment */
    justify-content: flex-start; /* Default horizontal alignment (Align content box to the left) */
}

.hero-slider {
    position: absolute; /* Take full space behind content */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Behind content */
}

.hero-slide-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1.2s ease-in-out; /* Slower fade */
}

.hero-slide-container.active {
    opacity: 1;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.hero-slide.high-res {
    /* High-res image logic remains */
}

.hero-slide.low-res {
    /* Low-res image logic remains */
    filter: blur(5px); /* Keep blur for placeholder */
}

.hero-slide-container.loaded .hero-slide.high-res {
    opacity: 1;
}

.hero-slide-container.loaded .hero-slide.low-res {
    opacity: 0;
}

.hero-content {
    position: relative; /* Keep relative */
    z-index: 3; /* Above slider */
    width: 90%; /* Max width on small screens */
    max-width: 650px; /* Increased max width */
    padding: clamp(30px, 5vw, 50px); /* Responsive padding */
    /* Refined background with softer edges */
    background: radial-gradient(ellipse at center left, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 60%, rgba(0,0,0,0.4) 100%);
    border-radius: 0 10px 10px 0; /* Rounded corners on right side */
    backdrop-filter: blur(4px); /* Slightly less blur */
    color: #ffffff;
    margin-left: 5%; /* Position from left edge - FOR DESKTOP */
    /* Add animation */
    opacity: 0; /* Start hidden for animation */
    transform: translateX(-20px); /* Start offset for animation */
    animation: fadeInHeroContent 1s ease-out 0.5s forwards; /* Desktop animation */
}

@keyframes fadeInHeroContent {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.hero-content h1 {
    font-size: clamp(28px, 5vw, 42px); /* Responsive title size */
    line-height: 1.2;
    color: var(--accent-gold);
    margin-bottom: 20px;
    font-weight: 700; /* Bolder title */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Subtle text shadow */
}

.hero-content p {
    font-size: clamp(16px, 2.5vw, 18px); /* Responsive text size */
    line-height: 1.7; /* Increased line height */
    margin-bottom: 30px;
    color: var(--text-light); /* Ensure light text */
}

.hero-cta {
    font-size: clamp(16px, 2.5vw, 18px); /* Responsive button text */
    padding: 14px 32px; /* Slightly larger padding */
}

/* ------------- Mobile Overrides for Hero Section ------------- */
@media (max-width: 768px) {
    .hero {
        /* Change flex alignment for mobile */
        justify-content: center; /* Center content box horizontally */
        align-items: flex-end; /* Align content box to bottom */
        padding-bottom: 10vh; /* Space from bottom */
    }

    .hero-content {
        /* Override base styles specifically for mobile */
        width: 90%;
        max-width: 500px;
        margin-left: 0; /* IMPORTANT: Remove desktop margin */
        border-radius: 10px; /* Round all corners */
        text-align: center; /* Center text inside the box */
        background: radial-gradient(ellipse at center bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.8) 60%, rgba(0,0,0,0.5) 100%); /* Adjust background gradient */
        backdrop-filter: blur(3px);

        /* IMPORTANT: Reset animation properties */
        opacity: 1; /* Ensure it's visible */
        transform: none; /* Remove any transform */
        animation: none; /* Disable the animation */
    }

     /* Adjust heading/paragraph size if needed */
     .hero-content h1 {
         font-size: 28px; /* Example adjustment */
     }
     .hero-content p {
         font-size: 16px; /* Example adjustment */
     }
     .hero-cta {
         /* Adjust button size if needed */
     }
}

@media (max-width: 480px) {
     /* Keep smaller screen adjustments for text/padding */
     .hero-content {
        padding: 25px;
     }
     .hero-content h1 {
         font-size: 24px;
     }
     .hero-content p {
         font-size: 15px;
         margin-bottom: 25px;
     }
     .hero-cta {
         padding: 12px 25px;
         font-size: 16px;
     }
}