/* styles.css */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 56px; /* Height of the fixed navbar */
}

main {
    flex: 1;
}

.hero-section {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.banner-image img {
    max-height: 400px; /* Adjust as needed */
    object-fit: cover;
    width: 100%;
}

.features .card {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: 1px solid var(--bs-border-color-translucent); /* Subtle border for cards */
}

.features .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.05); /* Softer shadow for dark theme */
}

html[data-bs-theme="dark"] .features .card-title {
    color: var(--bs-primary); /* Use Bootstrap primary color for titles */
}

.features .list-unstyled li {
    padding-left: 1.5em;
    position: relative;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

.features .list-unstyled li::before {
    content: "✓"; /* Checkmark */
    position: absolute;
    left: 0;
    color: var(--bs-success); /* Bootstrap success color */
    font-weight: bold;
}

/* Ensure navbar brand text is clearly visible */
.navbar-brand {
    font-weight: bold;
}

/* Footer styling */
footer {
    background-color: var(--bs-tertiary-bg);
}

footer .nav-link {
    color: var(--bs-secondary-color);
}

footer .nav-link:hover {
    color: var(--bs-primary);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .display-4 {
        font-size: 2.2rem; /* Smaller H1 on mobile */
    }
    .hero-section {
        padding-top: 2rem;
    }
    .features .col-sm-6 { /* Ensure cards stack nicely on small screens */
        margin-bottom: 1.5rem;
    }
    .features .col-lg-3:last-child .card,
    .features .col-sm-6:last-child .card {
        margin-bottom: 0 !important; /* Remove bottom margin from last card in a row on mobile */
    }
}

@media (max-width: 575.98px) {
    .features .col-sm-6 {
        flex-basis: 100%; /* Full width for cards on extra small screens */
        max-width: 100%;
    }
}