/* Carousel image styling */
.carousel-item img {
    height: 55vh;
    object-fit: cover;
    width: 100%;
    border-radius: 5px;
}

/* Call-to-Action styling */
.cta-section {
    position: relative; /* Make parent container position relative */
    background-image: url('../img/img-17.jpg'); /* Ensure the path to your image is correct */
    background-size: cover; /* Cover ensures the image fills the section */
    background-position: center; /* Center the background image */
    color: #fff; /* Text color */
    height: 65vh; /* Set a minimum height */
    display: flex; /* Use flexbox for centering content */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    text-align: center; /* Center text */
    padding: 20px; /* Add padding for smaller devices */
}


.text-center {
    position: relative; /* Make text container position relative to place it above the overlay */
    z-index: 2; /* Ensure text is above the overlay */
}


.btn-primary {
    color: #fff;
    font-size: 1rem;
    border-radius: 0.3rem;
    transition: background-color 0.3s;
}

@media (max-width: 768px) {
    .cta-section {
        height: 50vh; /* Adjust height for smaller screens */
        padding: 40px 20px; /* Increase padding for better spacing */
    }
}

@media (max-width: 576px) {
    .cta-section {
        height: 40vh; /* Further adjust height for very small screens */
        padding: 30px 10px; /* Adjust padding for very small screens */
    }

    h1.display-5 {
        font-size: 1.5rem; /* Adjust font size for small screens */
    }

    p {
        font-size: 1rem; /* Adjust font size for small screens */
    }
}

.overlay {
    position: absolute; /* Position overlay absolutely within the parent */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(4, 15, 40, .7);
    z-index: 1; /* Ensure the overlay is on top of the background */
}