/* Reset default margin and padding */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/* Slider section styling */
.slider {
    position: relative;
    width: 95%; /* Subtract 40px for 20px padding on each side */
    height: 900px; /* Adjust height as needed */
    overflow: hidden;
    margin: 0 auto; /* Center the slider */
    background: linear-gradient(to bottom, rgb(30, 30, 30), rgba(0, 0, 0, 0.2)), 
                url('assets/images/hero/hero.jpg') no-repeat center center;
    background-size: cover;
    border-radius: 20px; /* Rounded corners */
    z-index: 0;
    border: linear-gradient(to bottom, rgb(30, 30, 30), rgba(0, 0, 0, 0.2)),
    1px solid rgba(255, 255, 255, 0.1);
}

/* Content within the slider */
.slider-content {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff; /* White text color */
    z-index: 1; /* Ensure it’s above the slider images */
}