.cover-img {
    background-image: url('path-to-image.jpg');
    background-size: contain; /* Giữ tỷ lệ của ảnh và không làm ảnh bị cắt */
    background-position: center; /* Đảm bảo ảnh luôn căn giữa */
    background-repeat: no-repeat; /* Không lặp lại ảnh */
    width: 100%; /* Chiếm toàn bộ chiều rộng của phần tử chứa */
    height: 100%; /* Chiếm toàn bộ chiều cao của phần tử chứa */
}

/* General styling for the banner */
.cover-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Ensure the image fills the container without cutting off */
.container-xxl {
    position: relative;
    width: 100%;
    height: 100%;
}

.card {
    position: relative;
    z-index: 2;
}

/* Adjusting for mobile screens */
@media (max-width: 767px) {
    .cover-img {
        height: 250px; /* Adjust this based on how much space you want for the image on mobile */
    }

    .container-xxl {
        min-height: auto; /* Allow container to adapt to the content */
        padding-top: 15px; /* Optional, tweak as needed */
        padding-bottom: 15px; /* Optional, tweak as needed */
    }

    .card-body {
        padding: 10px; /* Adjust padding for better spacing on small screens */
    }

    h3 {
        font-size: 24px; /* Adjust title font size for smaller screens */
    }

    p.hero-desc {
        font-size: 14px; /* Adjust description font size */
        line-height: 1.5;
    }
}

/* For tablets, we can add a specific adjustment as well */
@media (min-width: 768px) and (max-width: 1024px) {
    .cover-img {
        height: 350px; /* Adjust the banner height for tablets */
    }

    .card-body {
        padding: 15px;
    }

    h3 {
        font-size: 28px; /* Slightly smaller font size for tablets */
    }

    p.hero-desc {
        font-size: 16px; /* Description font size */
    }
}

@media (max-width: 425px) {
    .banner-main {
        height: unset !important;
    }
    .container-xxl {
        padding-top: unset !important;
        padding-bottom: unset !important;
        min-height: unset !important;
    }
}