/* =================================
   HERO OUTER
================================= */

.hero{
position:relative;
}


/* =================================
   HERO FRAME
   (Holds the background image)
================================= */

.hero-frame{
position:relative;
min-height:100vh;   /* CRITICAL — ensures image is visible */
border-radius:32px;
overflow:hidden;
}


/* =================================
   BACKGROUND IMAGE
================================= */
.hero-house{
display:block;
margin:80px auto 0;   /* space from buttons */

width:1200px;
max-width:100%;

height:auto;
}


.hero-bg{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background: #1a1a1a;
background-image:url("../images/hero-bg-image.png");
background-size:cover;      /* fills entire hero */
background-position:center; /* prevents crop issues */
background-repeat:no-repeat;
}


/* =================================
   CONTENT
================================= */

.hero-content{
position:relative;
z-index:2;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:120px 20px;
}

.hero-wrapper{
max-width:980px;
margin:auto;
}


/* =================================
   BADGE
================================= */

.hero-badge{
display:inline-block;
padding:10px 22px;
border-radius:999px;
background:rgba(0,0,0,.4);
color:#ffffff;
font-size:14px;
margin-bottom:32px;
}


/* =================================
   TYPOGRAPHY
================================= */

.hero-text h1{
font-size:clamp(48px,6vw,82px);
line-height:1.05;
font-weight:700;
color:white;
}

.hero-text p{
font-size:20px;
margin:28px auto;
color:#f1f1f1;
max-width:720px;
}


/* =================================
   BUTTONS
================================= */

.hero-buttons{
display:flex;
gap:20px;
justify-content:center;
margin-top:40px;
flex-wrap:wrap;
}

.btn{
background:#b7b45e;
color:#0b0f19;
padding:18px 36px;
border-radius:12px;
text-decoration:none;
font-weight:600;
}

.btn-outline{
padding:18px 36px;
border-radius:12px;
border:1px solid #ffffff;
color:white;
text-decoration:none;
}


/* =================================
   MOBILE
================================= */

@media(max-width:768px){

.hero-frame{
min-height:90vh;
}

.hero-text h1{
font-size:40px;
}

}