body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-image: url("background.png");
    color: white;
}

/* TITLE */


header {
    text-align: center;
    padding: 30px 20px;
    
    color: #23001E;
}

header h1 {
    font-size: 3rem;
    margin: 0;
    letter-spacing: 2px;
}

/* CONTAINER (CENTERED LAYOUT) */
.container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 👈 5 per row */
    gap: 20px;
    padding: 30px 20px 50px;
    justify-items: center;
}

/* CARD (MEDIUM RECTANGLE) */
.card {
    width: 260px;
    height: 170px;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}


/* IMAGE */
.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

/* OVERLAY */
.card-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 15px;
    text-align: center;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
}

.card-overlay h2 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

/* GLOW BASE */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 1;
}

/* HOVER EFFECT */
.card:hover {
    transform: translateY(-8px) scale(1.03);
}

.card:hover img {
    transform: scale(1.1);
}

.card:hover::before {
    opacity: 1;
}

/* COLOR GLOWS */
.gold:hover {
    box-shadow: 0 0 25px #FFBA49, 0 0 60px rgba(255,186,73,0.4);
}
.gold::before {
    background: radial-gradient(circle, rgba(255,186,73,0.25), transparent 70%);
}

.teal:hover {
    box-shadow: 0 0 25px #20A39E, 0 0 60px rgba(32,163,158,0.4);
}
.teal::before {
    background: radial-gradient(circle, rgba(32,163,158,0.25), transparent 70%);
}

.coral:hover {
    box-shadow: 0 0 25px #EF5B5B, 0 0 60px rgba(239,91,91,0.4);
}
.coral::before {
    background: radial-gradient(circle, rgba(239,91,91,0.25), transparent 70%);
}

.dark:hover {
    box-shadow: 0 0 25px #A4A9AD, 0 0 60px rgba(164,169,173,0.4);
}
.dark::before {
    background: radial-gradient(circle, rgba(164,169,173,0.2), transparent 70%);
}

.gray:hover {
    box-shadow: 0 0 25px #A4A9AD, 0 0 60px rgba(164,169,173,0.4);
}
.gray::before {
    background: radial-gradient(circle, rgba(164,169,173,0.25), transparent 70%);
}