body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #111;
}

/* HERO IMAGE */
.hero {
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}

.hero img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.7);
}

/* TEXT OVER IMAGE */
.overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}

.overlay h1 {
color: #ffcc66;
font-size: 3rem;
margin: 0;
}

.overlay p {
color: #ffffff;
margin-top: 10px;
}

/* CONTENT SECTION */
.content {
display: flex;
justify-content: flex-start;
padding: 100px 50px;
}

/* BLACK BOX WITH BLUE TEXT */
.box {
background-color: #000;
color: #ffbb55;
padding: 60px;
min-height: 400px;
max-width: 800px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0,0,0,0.8);
}

.box h2 {
margin-top: 0;
color: #ffdd99;
}