/* Base styles */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    color: #333;
}

header {
    background-color: #f3e8de;
    padding: 20px;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2em; /* Set a fixed large font size */
    color: #333;
}

/* Card grid layout */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* Automatically adjust columns on large screens */
    gap: 15px;
    padding: 20px;
}

/* Card Design */
.card {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}

/* Glow effect on hover */
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(255, 165, 0, 0.7); /* Glow effect */
}

.card img {
    width: 90px;
    height: 90px;
    object-fit: contain; /* Ensure the image fits within the given dimensions without distortion */
    margin-bottom: 10px;
}

.card p {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
}

/* Footer styling */
footer {
    background-color: #f3e8de;
    text-align: center;
    padding: 10px;
    font-size: 0.9em;
    margin-top: auto;
}

/* Media Query for smaller screens */
@media (max-width: 768px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* Always display 2 columns on small screens */
    }

    .card img {
        width: 80px; /* Adjust image size for smaller screens */
        height: 80px;
    }

    .card p {
        font-size: 16px; /* Adjust text size for smaller screens */
    }

    /* The header h1 font size is now fixed, so no change here */
}

/* Media Query for very small screens */
@media (max-width: 480px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr); /* Keep 2 columns on compact screens */
    }

    .card {
        padding: 15px; /* Reduce padding inside the cards */
    }

    .card img {
        width: 50px; /* Further reduce the image size */
        height: 50px;
    }

    .card p {
        font-size: 14px; /* Make text even smaller for compact screens */
    }

    footer {
        font-size: 0.8em; /* Reduce footer text size */
    }

    /* The header h1 font size is now fixed, so no change here */
}

/* Horizontal banner styling */
.horizontal-banner {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3e8de; /* Same color as the header */
    padding: 10px;
    border-radius: 5px;
    margin-top: 10px;
}

.banner-text {
    color: #333; /* Dark color for contrast */
    font-size: 1.2em;
    margin-right: 15px;
    font-weight: bold;
}

/* Icon styling */
.horizontal-banner a {
    color: #333; /* Dark color for icons */
    font-size: 32px; /* Adjusted icon size */
    text-decoration: none;
    margin: 0 15px;
    animation: bounce 2s infinite; /* Continuous animation */
}

/* Animation keyframes */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

/* Hover effect */
.horizontal-banner a:hover {
    color: #555; /* Slightly lighter dark color on hover */
}