/* General Reset */
/* Main Content Styling */
/* Add spacing for fixed navbar and footer, set background and min height */
main {
    padding-top: 70px; /* Space for fixed navbar */
    padding-bottom: 20px; /* Space for footer */
    background-color: rgb(241, 241, 230); /* Light background for contrast */
    min-height: calc(100vh - 70px); /* Ensure the main content fills the viewport minus the navbar height */
}

/* Card Styling */
/* Style for blog cards with rounded corners and shadow */
.card {
    border-radius: 12px; /* Rounded corners for cards */
    border: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow to cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}
.card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    color: purple; /* Dark text for contrast */
    font-weight: bold; /* Bold weight for emphasis */
}

/* Heading Styles */
h1 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem; /* Adjusted size for better visibility */
    color: purple; /* Dark text for contrast */
    margin-top: 65px;
    margin-bottom: 20px; /* Space below the heading */
}

/* Button Styling */
/* Style for primary buttons and hover effect */
.btn-primary {
    background-color: purple;
    border: none;
    transition: background-color 0.3s ease;
}
.btn-primary:hover {
    background-color: darkorchid; /* Dark orchid on hover */
}

/* Blog Section Styling */


/* Responsive Design */

/* Small Devices (e.g., phones, less than 576px) */
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.2rem; /* Reduce font size for smaller screens */
    }

    h1 {
        font-size: 1.5rem; /* Adjust heading size */
    }

    .card-title {
        font-size: 1rem; /* Reduce card title size */
    }
}

/* Medium Devices (e.g., tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 768px) {
    .navbar-brand {
        font-size: 1.4rem; /* Adjust font size for medium devices */
    }

    h1 {
        font-size: 1.8rem; /* Adjust heading size */
    }

    .card-title {
        font-size: 1.2rem; /* Adjust card title size */
    }
}
/* Large Devices (e.g., desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-brand {
        font-size: 1.6rem; /* Adjust font size for large devices */
    }

    h1 {
        font-size: 2rem; /* Adjust heading size */
    }

    .card-title {
        font-size: 1.5rem; /* Adjust card title size */
    }
}
/* Extra Large Devices (e.g., large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .navbar-brand {
        font-size: 1.8rem; /* Adjust font size for extra large devices */
    }

    h1 {
        font-size: 2.5rem; /* Adjust heading size */
    }

    .card-title {
        font-size: 1.8rem; /* Adjust card title size */
    }
}