/* style.css */

/* Gradient Background for the Entire Page */
body {
    background: white;
    color: #333;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Header Styling */
.navbar {
    background: inherit; /* Inherit gradient background from body */
}

/* Container Styling */
.container {
    padding: 20px;
}

/* Search Form */
.input-group input {
    border-radius: 0;
}

.input-group .btn-primary {
    border-radius: 0;
    background-color: #007bff;
    border: none;
}

.input-group .btn-primary:hover {
    background-color: #0056b3;
}

/* Card Image */
.card-img-top {
    height: 200px;
    object-fit: contain;
    margin-top: 15px;
}

/* Footer Styling */
.footer {
    background: inherit; /* Inherit gradient background from body */
    color: black !important;
    padding: 1rem;
    text-align: center;
    margin-top: 20px; /* Ensure spacing from the content */
}

.footer a {
    color: black !important;
    text-decoration: none;
}

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


.card-fixed-height {
    height: 265px; /* Set your desired fixed height here */
    display: flex;
    flex-direction: column;
}

.card-fixed-height .card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

@keyframes colorChange {
    0% {
        color: #3498db; /* Starting color (e.g., blue) */
    }
    50% {
        color: #e74c3c; /* Midpoint color (e.g., red) */
    }
    100% {
        color: #3498db; /* Ending color (e.g., blue) */
    }
}

.stylish-heading {
    font-family: 'Pacifico', cursive; /* Apply the stylish font */
    font-size: 3rem; /* Adjust font size */
    letter-spacing: 2px; /* Add letter spacing */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add a subtle text shadow */
    animation: colorChange 10s ease-in-out infinite; /* Apply the color animation */
}


.no-decoration {
        text-decoration: none;
        color: inherit;
    }

    .no-decoration:hover,
    .no-decoration:focus {
        text-decoration: none;
    }


.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: white !important;
    background-color: #4b4b4b !important;
}

.nav-link
{
color: #4b4b4b !important;    
}


 .modal-content {
            border-radius: 1rem;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            border-bottom: none;
        }

        .modal-body {
            padding: 2rem;
        }

        .modal-title {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .btn-light {
            background-color: #f8f9fa;
            color: #343a40;
        }

       .modal-backdrop-custom {
        backdrop-filter: blur(5px);
        background-color: rgba(0, 0, 0, 0.5); /* Optional: Add a semi-transparent background */
    }