/* Define color variables */
:root {
    --color-red: #ff4d4d;
    --color-green: #28a745;
    --color-white: #ffffff;
    --color-black: #343a40;
    --color-primary: #007bff;
    --color-secondary: #6c757d;
    --color-info: #17a2b8;
    --color-background: #f8f9fa;
    --color-text: #495057;
    --color-muted: #6c757d;
}

/* General body styles */
body {
    background-color: var(--color-background); /* Light background for contrast */
    font-family: 'Arial', sans-serif; /* Font style */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Button styles */
.btn {
    font-size: 1.1rem; /* Slightly larger font size */
    padding: 10px 20px; /* Increased padding for better touch targets */
    border-radius: 0.5rem; /* Rounded corners */
    transition: background-color 0.3s, transform 0.2s; /* Smooth transition for hover effects */
}

.btn:hover {
    transform: translateY(-2px); /* Lift effect on hover */
}

.btn-primary {
    background-color: var(--color-primary); /* Primary button color */
    border: none; /* Remove border */
}

.btn-primary:hover {
    background-color: var(--color-primary); /* Darker shade on hover */
}

.btn-secondary {
    background-color: var(--color-secondary); /* Secondary button color */
    border: none; /* Remove border */
}

.btn-secondary:hover {
    background-color: var(--color-secondary); /* Darker shade on hover */
}

.btn-info {
    background-color: var(--color-info); /* Info button color */
    border: none; /* Remove border */
}

.btn-info:hover {
    background-color: var(--color-info); /* Darker shade on hover */
}

/* Card styles */
.event-card {
    border: none; /* Remove default border */
    border-radius: 0.5rem; /* Rounded corners */
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
}

.event-card:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow on hover */
}

/* Heading styles */
h1 {
    font-size: 2.5rem; /* Larger font size for main heading */
    color: var(--color-black); /* Darker color for contrast */
}

h2 {
    font-size: 1.75rem; /* Font size for section headings */
    margin-top: 30px; /* Space above section headings */
}

/* Image styles for events */
.event-card img {
    width: 100%; /* Make the image take the full width of the card */
    height: 200px; /* Set a fixed height for the images */
    object-fit: cover; /* Ensure the image covers the area without distortion */
    border-radius: 0.5rem; /* Match the card's border radius */
    margin-top: 10px; /* Space above the image */
}

/* Text styles */
.card-title {
    font-size: 1.25rem; /* Increase font size for titles */
    color: var(--color-primary); /* Bootstrap primary color */
}

.card-text {
    font-size: 1rem; /* Standard font size for text */
    color: var(--color-text); /* Darker text color */
}

/* Muted text styles */
.text-muted {
    font-size: 0.875rem; /* Smaller font size for muted text */
    color: var(--color-muted); /* Bootstrap secondary color */
}

/* Responsive styles */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* Adjust font size for smaller screens */
    }

    h2 {
        font-size: 1.5rem; /* Adjust font size for smaller screens */
    }

    .btn {
        font-size: 1rem; /* Adjust button font size for smaller screens */
        padding: 8px 16px; /* Adjust padding for smaller screens */
    }

    .event-card img {
        height: 150px; /* Adjust image height for smaller screens */
    }
}