body {

margin:0;

background:#080914;

color:white;

font-family:Georgia, serif;

}



.hero {

height:100vh;

position:relative;

display:flex;

align-items:center;

justify-content:center;

text-align:center;

overflow:hidden;

}



.hero-image {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:0;

}



.hero-overlay {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(0,0,0,0.55);

z-index:1;

}



.hero-text {

position:relative;

z-index:2;

max-width:800px;

padding:20px;

}



h1 {

font-size:70px;

letter-spacing:8px;

margin-bottom:20px;

}



h2 {

font-size:42px;

}



h3 {

font-size:30px;

color:#c9a34a;

}



p {

font-size:20px;

line-height:1.7;

}



/* GOLD BUTTON */

.button {

display:inline-block;

background:#c9a34a;

color:#080914 !important;

padding:15px 40px;

font-size:18px;

font-weight:bold;

text-decoration:none;

margin-top:20px;

border:none;

cursor:pointer;

transition:0.3s;

font-family:Georgia, serif;

}



.button:hover {

background:#e0bd62;

transform:translateY(-3px);

}



/* PAGE SECTIONS */

.section {

padding:80px 30px;

max-width:1000px;

margin:auto;

text-align:center;

}



/* DROP GRID */

.drops {

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

}



.drops div {

background:#111321;

padding:20px;

border-left:3px solid #c9a34a;

}



/* FOOTER */

footer {

text-align:center;

padding:40px;

}



/* MOBILE */

@media(max-width:700px) {


h1 {

font-size:42px;

}


h2 {

font-size:32px;

}


h3 {

font-size:24px;

}


p {

font-size:18px;

}


}