/* Adjust base font size for responsiveness */
html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Logo styling */
.logo-image {
    width: 200px; /* Adjust size as needed */
    height: auto;
    margin-bottom: 20px;
    border-radius: 8px;
}

/* Improved body styling for a cleaner look */
body {
    font-family: Arial, sans-serif;
    background-color: #f8f9fa; /* Soft background color */
    color: #333;
    margin: 0; /* Removed margin-bottom */
    display: flex;
    flex-direction: column; /* Ensures the layout is a column */
    height: 100vh; /* Makes body take full height of the viewport */
}

/* Centered container with padding */
.text-center {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* Button focus styles for accessibility */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* Styling for primary buttons */
.btn-primary {
    background-color: #258cfb;
    border-color: #258cfb;
    color: #fff;
    transition: background-color 0.3s ease;
}

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

/* Button styling adjustments for uniform size and spacing */
a.btn {
    margin: 5px;
    padding: 10px 20px;
    font-weight: bold;
}

/* Title styling */
h1.display-4 {
    font-family: 'Oswald', sans-serif; /* Ensure link to this font in HTML */
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Text styling for paragraphs */
p {
    font-size: 1.1rem;
    color: #555;
}

/* Utility class for card-like sections */
.card-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20px 0;
}

/* Ensure the footer sticks to the bottom */
footer {
    margin-top: auto; /* Pushes footer to the bottom */
}