/* Logo Styling */
.logo {
    display: block;
    max-width: 250px; /* Increased size for better visibility */
    height: auto; /* Maintain aspect ratio */
    margin: 0 auto; /* Center the logo */
    padding: 0; /* Remove extra spacing */
    object-fit: contain; /* Ensure it fits without cropping */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth hover and focus effects */
}

.logo:hover {
    transform: scale(1.1); /* Slight enlargement on hover */
    opacity: 0.9; /* Add a subtle fade effect */
}

/* Highlight for Homepage */
.homepage-logo {
    max-width: 280px; /* Increased size for homepage prominence */
    margin-top: 1rem; /* Add spacing above */
    animation: fadeIn 1s ease-in-out; /* Subtle entry animation */
}

/* Logo Styling */
.logo-img {
    max-width: 150px; /* Adjust this value to control logo size */
    height: auto; /* Maintain aspect ratio */
    display: block;
    margin: 0 auto; /* Center the logo */
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05); /* Slight enlargement on hover */
    opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .logo-img {
        max-width: 120px; /* Reduce size for smaller screens */
    }
}



@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Logo Adjustments */
@media (max-width: 768px) {
    .logo {
        max-width: 200px; /* Slightly larger size for mobile */
        margin-bottom: 1rem; /* Add spacing below for stacked layouts */
    }

    .homepage-logo {
        max-width: 220px; /* Ensure proper sizing on mobile */
        margin-top: 1rem; /* Adjust spacing */
    }
}