.hero{

    position:relative;

    height:100vh;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:linear-gradient(

rgba(0,0,0,.60),

rgba(0,0,0,.55)

);

}

.hero-content{

position:relative;

z-index:2;

text-align:center;

color:white;

}

.hero h1{

font-size:72px;

font-weight:800;

letter-spacing:2px;

margin-bottom:20px;

}

.hero p{

font-size:24px;

margin-bottom:25px;

color:#D4AF37;

}

.hero h2{

font-size:32px;

font-weight:300;

margin-bottom:45px;

}

.buttons{

display:flex;

justify-content:center;

align-items:center;

gap:25px;

margin-top:50px;

flex-wrap:wrap;

}

.primary{

background:#D4AF37;

padding:18px 40px;

border-radius:50px;

color:white;

font-weight:700;

transition:.3s;

}

.primary:hover{

transform:translateY(-5px);

}

.secondary{

border:2px solid white;

padding:18px 40px;

border-radius:50px;

color:white;

transition:.3s;

}

.secondary:hover{

background:white;

color:black;

}

.scroll{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

font-size:34px;

color:white;

animation:float 2s infinite;

}

.hero-bg{

    position:absolute;

    inset:-5%;

    background:url("../assets/images/hero.jpg");

    background-size:cover;

    background-position:center;

    z-index:-2;

    transition:transform .2s linear;

    will-change:transform;

}