/* General Body Styles */
body {
    background-color: #f4f4f4; /* Light gray background for contrast */
    font-family: 'Arial', sans-serif; /* Clean and modern font */
}

/* Navigation Bar Styles */
.navbar {
    margin-bottom: 20px; /* Space below navbar */
}

/* Header Styles */
header {
    background: #343a40; /* Dark background for header */
    padding: 40px 0; /* Padding for header */
}

/* Header Text Styles */
header h1 {
    font-size: 2.5rem; /* Larger font size for the main title */
}

header p.lead {
    font-size: 1.25rem; /* Slightly larger font for the lead paragraph */
}

/* Card Styles */
.card {
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth scaling and shadow effect */
    border: none; /* Remove border for a cleaner look */
}

.card:hover {
    transform: scale(1.05); /* Scale up on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* Add shadow on hover */
}

/* Button Styles */
.btn {
    transition: background-color 0.3s; /* Smooth transition for background color */
}

.btn-primary {
    background-color: #007bff; /* Bootstrap primary color */
    border: none; /* Remove border */
}

.btn-primary:hover {
    background-color: #0056b3; /* Darker shade on hover */
}

.btn-danger {
    background-color: #dc3545; /* Bootstrap danger color */
    border: none; /* Remove border */
}

.btn-danger:hover {
    background-color: #c82333; /* Darker shade on hover */
}

.btn-success {
    background-color: #28a745; /* Bootstrap success color */
    border: none; /* Remove border */
}

.btn-success:hover {
    background-color: #218838; /* Darker shade on hover */
}

/* Footer Styles */
footer {
    background: #343a40; /* Dark background for footer */
    padding: 20px 0; /* Padding for footer */
}

footer p {
    margin: 0; /* Remove default margin */
}

/* Responsive Media Queries */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center; /* Center nav items on smaller screens */
    }
    
    .card {
        margin-bottom: 20px; /* Add space between cards on small screens */
    }
}