/* 
 * File: slider-alignment-fix.css 
 * This is a targeted fix for the slider text alignment issue
 * Add this to your site to override the existing styles
 */

/* Force center alignment for all slider content */
.slide-content {
    position: absolute;
    top: 50%;
    left: 50% !important; /* Force override any other left position */
    transform: translate(-50%, -50%) !important; /* Center both horizontally and vertically */
    text-align: center !important;
    width: 80% !important;
    max-width: 800px !important;
    z-index: 10 !important; /* Ensure it's above other elements */
}

.slide-title, 
.slide-description {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* Ensure the .slide::before gradient is centered or covers all sides */
.slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) !important; /* Even overlay */
    z-index: 5 !important;
}

/* Modify the button to be properly centered */
.slide-btn {
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Adjust for mobile specifically */
@media (max-width: 768px) {
    .slide-content {
        width: 90% !important;
        padding: 20px !important;
    }
}