/* Make the navbar transparent */
body {
    font-family: 'DM Sans', sans-serif;
    scroll-behavior: smooth;
}

.navbar {
    background-color: transparent;
    transition: background-color 0.3s;
}

/* White background for navbar after scrolling */
.navbar.scrolled {
    background-color: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Navbar text color */
.nav-link {
    color: rgb(0, 0, 0) !important;
    transition: color 0.3s;
    margin-right: 15px; /* Adds space between nav links */
}

.nav-link:last-child {
    margin-right: 0; /* Removes margin from the last nav link */
}


/* Change navbar text color to custom blue on hover */
.nav-link:hover {
    color: rgb(20, 170, 216) !important;
}

.nav-link.active {
    color: rgb(20, 170, 216) !important;
    font-weight: bold;
}



.btn-primary {
    background-color: rgb(20, 170, 216) !important;
    /* Apply custom blue color */
    border-color: rgb(20, 170, 216) !important;
    /* Ensure the border matches the button */
}

.btn-primary:hover {
    background-color: rgb(15, 140, 176) !important;
    /* Darken color on hover */
    border-color: rgb(15, 140, 176) !important;
    /* Match border on hover */
}

/* Additional button styling (optional, adjust as needed) */

.card-img-top {
    height: 250px; /* Adjust the height as needed */
    object-fit: cover; /* Ensures the image covers the specified height */
}
/* Add this CSS to your style section */
.container-fluid.bg-light img {
    height: 300px; /* Adjust the height as needed */
    object-fit: cover; /* Ensures the image fits the specified height without stretching */
}