/* Main container for the background */
.hero-bg {
    background-image: url(../img/home.jpg);
    background-size: cover; /* Ensures the image covers the full area */
    background-position: center; /* Centers the image */
    background-attachment: fixed; /* Creates a parallax effect */
    background-repeat: no-repeat; /* Prevents image repeat */
    width: 100%;
    height: 100vh; /* Sets the height to 100% of the viewport */
    display: flex; /* Allows content centering */
    justify-content: center; /* Centers the content horizontally */
    align-items: center; /* Centers the content vertically */
    position: relative; /* Needed for the overlay effect */
}

/* Overlay for transparency on the background */
.hero-bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background-color: rgba(7, 33, 46, 0.6); /* Dark overlay with 60% opacity */
    z-index: 1; /* Ensures the overlay sits on top of the background */
}

/* The hero content area */
.hero-area {
    height: 100%;
    position: relative;
    z-index: 2; /* Ensures the content is above the overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Subtitle styling */
.hero-text p.subtitle {
    color: #F28123;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 7px;
    font-size: 15px;
}

/* Main title styling */
.hero-text h1 {
    font-size: 64px;
    font-weight: 700;
    line-height: 1.3;
    color: white; /* Ensures the text color is white */
    position: relative; /* This keeps the text above the overlay */
    z-index: 3; /* Places the text above the overlay and other content */
}
/* Ensure proper content height management */
.hero-area div {
    height: 100%;
}

.hero-area div.hero-text {
    height: 100%;
    width: 100%;
}

.hero-area div.hero-text-tablecell {
    height: auto;
    vertical-align: middle;
}

/* Ensures the text content is vertically centered */
.hero-area div.hero-text-tablecell div {
    height: auto;
    vertical-align: middle;
}