/* Mobile-specific fixes for better spacing */

/* Base hero section styles to prevent overlap with fixed header */
.banner-one {
    position: relative;
    z-index: 1; /* Lower z-index than header */
    padding-top: 150px; /* Default padding */
    margin-top: 0;
}

.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* Additional space for hero section on mobile */
@media (max-width: 991px) {
    .banner-one {
        padding-top: 160px; /* Increased padding for tablets */
    }
    
    .banner-one_content {
        padding-top: 20px; /* Add extra padding to the content area */
    }
    
    /* Additional spacing for banner text to ensure it's visible */
    .banner-one_content-inner {
        padding-top: 20px;
    }
}

/* More spacing for medium-sized mobile devices */
@media (max-width: 767px) {
    .banner-one {
        padding-top: 190px; /* Further increased padding for mobile */
    }
    
    .banner-one_content {
        padding-top: 30px;
    }
    
    .banner-one_content-inner {
        padding-top: 30px;
    }
    
    /* Adjust font sizes for smaller screens */
    .overlock-regular-italic {
        font-size: 44px !important;
        margin-bottom: 20px !important;
    }
}

/* Even more spacing for smaller devices */
@media (max-width: 575px) {
    .banner-one {
        padding-top: 210px; /* Significantly increased padding for small phones */
    }
    
    .banner-one_content {
        padding-top: 40px;
    }
    
    .banner-one_content-inner {
        padding-top: 40px;
    }
    
    /* Further adjust font sizes for very small screens */
    .overlock-regular-italic {
        font-size: 38px !important;
        margin-bottom: 15px !important;
    }
    
    .banner-one_title {
        font-size: 22px;
    }
    
    .banner-one_heading {
        font-size: 30px;
    }
    
    .banner-one_text {
        font-size: 14px;
    }
}

/* Special adjustments for very small screens */
@media (max-width: 480px) {
    .banner-one {
        padding-top: 220px;
    }
    
    .banner-one_content-inner {
        padding-top: 50px;
    }
}