/* General Page Styling */
body {
    background-color: #f8f9fa; /* Light gray background */
    margin: 0; /* Remove default margin for consistent layout */
    font-family: Arial, sans-serif; /* Add a default font family */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure the body spans the full height of the viewport */
}

/* Main content */
.container {
    flex: 1; /* Allow the content to take up all available vertical space */
}

/* Card Styling */
.card {
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border: 2px solid #26506c; /* Dark blue border from palette */
}

.card-header {
    background-color: #26506c; /* Dark blue header */
    color: white; /* White text for visibility */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.btn-primary {
    background-color: #26506c; /* Dark blue for primary buttons */
    border: none;
}

.btn-primary:hover {
    background-color: #1d425a; /* Slightly darker blue on hover */
}

/* Logo Styling */
.logo {
    max-width: 350px; /* Prevent logos from exceeding this width */
    height: auto;
    margin-bottom: 10px;
}

@media (max-width: 576px) {
    .logo {
        max-width: 250px; /* Adjust logo width for small screens */
    }
}

/* Footer Styling */
.footer {
    text-align: center; /* Centers content horizontally */
    padding: 10px 0; /* Add padding for visual separation */
}

.footer-img {
    opacity: 0.4; /* Subtle watermark effect */
    max-width: 300px; /* Default size for desktops */
    width: 100%; /* Allow resizing if container is smaller */
    height: auto; /* Maintain aspect ratio */
    transition: opacity 0.3s ease-in-out; /* Smooth opacity transitions */
    display: block; /* Proper alignment as block element */
    margin: 0 auto; /* Center the image */
}

.footer-img:hover {
    opacity: 0.8; /* Slightly increase opacity on hover */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .footer-img {
        max-width: 200px; /* Smaller logo for tablets and mobile */
    }
}

@media (max-width: 576px) {
    .footer-img {
        max-width: 150px; /* Even smaller logo for narrow screens */
    }
}