*{
box-sizing:border-box;
margin:0;
padding:0;
}

body{

font-family: "Georgia", serif;
background:#0c0c0c;
color:#e6e6e6;
line-height:1.7;

}

/* HEADER */

.header{

display:flex;
justify-content:space-between;
align-items:center;
padding:25px 60px;
background:#000;
position:sticky;
top:0;
z-index:100;

}

.logo{

font-size:26px;
color:#d4af37;
letter-spacing:2px;
font-weight:bold;

}

nav a{

margin-left:35px;
text-decoration:none;
color:white;
font-size:15px;
letter-spacing:1px;
transition:0.3s;

}

nav a:hover{

color:#d4af37;

}

/* HERO */

/*.hero{

height:95vh;

background-image:linear-gradient(
rgba(0,0,0,0.75),
rgba(0,0,0,0.9)
),
url("../images/hero.jpg");

background-size:cover;
background-position:center;

display:flex;
align-items:center;
justify-content:center;
text-align:center;

padding:40px;

}*/

.hero {
    background-image: images/Garage_SAT.png;
    /* your photo */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    text-align: center;
    position: relative;
}


.hero h1{

font-size:60px;
margin-bottom:20px;
color:white;
letter-spacing:2px;

}

.hero p{

max-width:700px;
margin:auto;
font-size:20px;
color:#ddd;

}

/* BUTTON */

.btn{

display:inline-block;
margin-top:35px;
padding:16px 36px;

background:#d4af37;
color:black;

font-weight:bold;
text-decoration:none;

border-radius:4px;

transition:0.3s;

}

.btn:hover{

background:#f0c957;
transform:translateY(-2px);

}

/* SECTIONS */

.section{

padding:100px 60px;
max-width:1200px;
margin:auto;

}

.section h2{

font-size:36px;
margin-bottom:40px;
text-align:center;
color:#d4af37;

}

/* GRID */

.grid{

display:grid;

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

gap:35px;

}

/* CARDS */

.card{

background:#151515;

padding:40px;

border-radius:10px;

transition:0.4s;

border:1px solid #222;

}

.card:hover{

transform:translateY(-8px);

border:1px solid #d4af37;

}

.card h3{

margin-bottom:15px;

color:#d4af37;

font-size:20px;

}

.card p{

color:#bbb;

}

/* FEATURE SECTION */

.dark{

background:#111;

border-top:1px solid #222;

border-bottom:1px solid #222;

}

.feature{

background:#151515;

padding:35px;

border-radius:10px;

border:1px solid #222;

transition:0.3s;

}

.feature:hover{

border-color:#d4af37;

}

.feature h4{

color:#d4af37;

margin-bottom:10px;

}

/* CTA */

.cta{

padding:120px 40px;

text-align:center;

background:linear-gradient(
45deg,
#b8962e,
#d4af37
);

color:black;

}

.cta h2{

font-size:40px;

margin-bottom:20px;

}

/* GALLERY */

.grid img{

width:100%;

border-radius:10px;

transition:0.4s;

}

.grid img:hover{

transform:scale(1.05);

}

/* CONTACT FORM */

form{

max-width:600px;

margin:auto;

}

input, textarea{

width:100%;

padding:14px;

margin-top:10px;

margin-bottom:20px;

background:#111;

border:1px solid #333;

color:white;

border-radius:4px;

}

input:focus,
textarea:focus{

outline:none;

border-color:#d4af37;

}

/* FOOTER */

footer{

text-align:center;

padding:50px;

background:#000;

color:#777;

margin-top:60px;

}

/* MOBILE */

@media(max-width:900px){

.header{

padding:20px;

}

.section{

padding:80px 30px;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

}