.hero-area .hero-content {
    z-index: 5;
}

/* General Hero Area Styling */
.hero-area {
    width: 100vw;
    height: 70vh;
    /* Half screen height */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Image Background */
.image-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("/staticfiles/website/img/bg-img/slide5.jpg") no-repeat center center;


    background-size: cover;
    z-index: 1;
    /* Below content */
}

/* Dark overlay to dim the background image */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Black with 50% opacity */
    z-index: 2;
    /* Above the image but below the content */
}

/* Content wrapper */
.hero-content {
    height: 100%;
    z-index: 3;
    /* Above the background and the overlay */
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* Flexbox adjustments */
.hero-area {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/* Line styling */
.line {
    width: 60px;
    height: 4px;
    background-color: #ff0076;
    margin-bottom: 20px;
    animation: fadeIn 2s ease-in-out;
}

/* Button styling */
.btn {
    animation: fadeInUp 1s ease-in-out;
}

h2,
p {
    animation: fadeInUp 1s ease-in-out;
}