:root {

--color-primary: #f5b700;
--color-secondary: #ff6b35;

--bg-color: #121212;
--bg-secondary-color: #1f1f1f;

--font-family-sans: 'Montserrat', sans-serif;

}

body {

background-image: url("https://d2c6c3qulxklrf.cloudfront.net/img/wallpaper2.webp");
background-size: cover;
background-position: center;
background-attachment: fixed;

color: white;

}

body::before {

content: "";

position: fixed;

top: 0;
left: 0;

width: 100%;
height: 100%;

background: rgba(0,0,0,.75);

z-index: -1;

}

.hero {

text-align: center;

padding: 5rem 1rem;

}

h1,
h2 {

color: #f5b700;

}

.card {

background: rgba(35,35,35,.95);

border-radius: 12px;

padding: 1rem;

height: 100%;

transition: transform .3s;

}

.card:hover {

transform: translateY(-5px);

}

section {

padding: 3rem 0;

}

footer {

text-align: center;

padding: 2rem;

margin-top: 2rem;

background: rgba(0,0,0,.8);

}

details {

cursor: pointer;

}

.card-img{

width:100%;

height:250px;

object-fit:cover;

border-radius:10px;

margin-bottom:15px;

display:block;

}

.card{

overflow:hidden;

}