.banner-content {
    background-image: url('images/slider.png'); /* Moved from inline style for better manageability */
    background-size: cover;
    background-position: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

.single-slider {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 800px; /* Adjust as per your design */
    background: linear-gradient(rgba(60, 224, 247, 0.8), rgba(23, 254, 79, 0.5));
    width: 100%; /* Ensures it covers the entire parent */
}

/* Other styles remain unchanged */



.text-center h1.title, .text-center p.sub-title {
  text-align: center;
    color: #29b606; /* White text color */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; /* Black text shadow for outline effect */
}

/* Alternatively, if you want a smoother shadow/outline, you can adjust the blur */
.text-center h1.title, .text-center p.sub-title {
    color: #fff; /* White text color */
    text-align: center;
    text-shadow: 2px 2px 4px #000; /* Black shadow with a slight blur */
}


.title {
    font-size: 5.5rem;
    color: #fff;
}

.sub-title {
    font-size: 3.25rem;
    color: #fff;
}

@media (max-width: 768px) {
    h1.title {
        font-size: calc(50px + (24 * (100vw - 320px) / 448)); /* Responsive font sizing */
    }
}