/* General Body & HTML */
html {
    font-size: 1rem; /* Base font size */
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Modern font stack */
    line-height: 1.6;
    color: #333;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Slightly bolder headings */
}

/* Navbar Enhancements */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
}

.navbar-dark .nav-link {
    color: rgba(255, 255, 255, 0.75);
}

    .navbar-dark .nav-link:hover,
    .navbar-dark .nav-link.active { /* Ensure active link is distinguishable */
        color: #fff;
    }

.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Hero Section Styling */
.hero-section {
    background: linear-gradient(135deg, #0056b3 0%, #007bff 100%); /* Example gradient - choose your brand colors */
    /* Or use a background image:
    background: url('/images/your-hero-image.jpg') no-repeat center center;
    background-size: cover; */
    min-height: 60vh; /* Make hero section take up a good portion of the viewport */
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hero-section h1 {
        font-size: 2.5rem; /* Responsive font size */
    }

@media (min-width: 768px) {
    .hero-section h1 {
        font-size: 3.5rem;
    }
}

.hero-section .lead {
    color: rgba(255, 255, 255, 0.9);
}

.animated-hero-title,
.animated-hero-subtitle,
.animated-hero-buttons {
    opacity: 0;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-play-state: paused; /* Controlled by JS */
}

.animated-hero-title {
    animation-name: fadeInUp;
}

.animated-hero-subtitle {
    animation-name: fadeInUp;
    animation-delay: 0.3s;
}

.animated-hero-buttons {
    animation-name: fadeInUp;
    animation-delay: 0.6s;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* Feature Cards Styling */
#featured-cards .card-title {
    color: #333; /* Or your primary heading color */
}

.feature-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border: none; /* Cleaner look, rely on shadow */
    opacity: 0; /* For fade-in animation */
    transform: translateY(20px); /* For fade-in animation */
}

    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }

    .feature-card.fade-in-up {
        animation: fadeInUpCard 0.6s forwards ease-out;
    }

@keyframes fadeInUpCard {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.feature-icon-bg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f8f9fa; /* Light background for the icon circle */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.feature-card:hover .feature-icon-bg {
    background-color: #e9ecef; /* Slightly darker on hover */
}

.feature-card .btn {
    transition: background-color 0.2s ease, color 0.2s ease;
}


/* Announcement Section */
.bg-light { /* Using Bootstrap's class but you can define your own */
    background-color: #f8f9fa !important;
}

/* Footer Styling */
.footer {
    padding: 1.5rem 0;
    font-size: 0.9rem;
}

    .footer a {
        color: #007bff;
        text-decoration: none;
    }

        .footer a:hover {
            text-decoration: underline;
        }

/* Utility for card image/icon top (if you use images in cards) */
.card-img-top-icon {
    font-size: 3rem; /* Adjust as needed */
    text-align: center;
    padding-top: 1.5rem;
    color: #007bff; /* Example color */
}