.hero{

min-height:90vh;
height:auto;
padding:100px 20px;
background-image:url("/image/bone-bg.png");
background-position:center;
display:flex;
align-items:center;
justify-content:center;
position:relative;
 background-size: cover;   /* 🔥 key line */
  background-repeat: no-repeat;

}

/* 👇 adjust for small screens */
@media (max-width: 768px){
  .hero{
    background-size: contain;
    background-color: black;
  }
}

.hero-overlay{

position:absolute;
left:10%;
top:55%;

transform:translateY(-50%) translateY(20px);

opacity:0;

animation:fadeUp 1.2s ease forwards;
glow 4s ease-in-out infinite;

}
@keyframes fadeUp {
  to {
    opacity:1;
    transform:translateY(-50%) translateY(0);
  }
}

@keyframes glow {
  0%,100% { text-shadow:0 0 10px rgba(255,255,255,0.3); }
  50% { text-shadow:0 0 20px rgba(255,255,255,0.6); }
}



.hero-title{

font-size:65px;
font-weight:700;

color:white;

text-shadow:
0 4px 20px rgba(0,0,0,0.6),
0 1px 2px rgba(0,0,0,0.8);

margin-bottom:10px;
animation:fadeUp 1s ease forwards;
animation-delay:0.2s;
opacity:0;

}

.hero-subtitle{

font-size:28px;

color:rgba(255,255,255,0.9);

text-shadow:
0 2px 10px rgba(0,0,0,0.6);
animation:fadeUp 1s ease forwards;
animation-delay:0.5s;
opacity:0;

}


.hero::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:linear-gradient(
to right,
rgba(0,0,0,0.5),
rgba(0,0,0,0.2),
transparent
);

}

@keyframes fadeUp{

from{
opacity:0;
transform:translateY(30px);
}

to{
opacity:1;
transform:translateY(0);
}

}