:root {
    --amg-red: #ff0000;
    --amg-black: #000000;
}

.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                url('hero-bg.jpg') center/cover fixed;
}

.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}

.navbar {
    padding: 1rem 0;
    background: rgba(0,0,0,0.9) !important;
}

.btn-danger {
    background-color: var(--amg-red);
    border-color: var(--amg-red);
}

@media (max-width: 576px) {
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .card {
        margin-bottom: 1.5rem;
    }
}

main {
    flex: 1 0 auto;
}

footer {
    background-color: #000;
    color: #fff;
    padding: 1rem;
    height: 100px;
}

.bg-dark {
    --bs-bg-opacity: 1;
    background-color: #111 !important;
  }