/* Mobile Text Spacing Fix - Prevent text from touching screen edges */

/* Mobile devices - add proper padding to hero text */
@media screen and (max-width: 767px) {
    /* Hero section text padding */
    #hero .hero-cont,
    .section.first .hero-cont {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    #hero .heading,
    #hero .paragraph-4,
    .section.first .heading,
    .section.first .paragraph-4 {
        padding-right: 0.25rem !important;
        margin-right: 0 !important;
        width: calc(100% - 0.25rem) !important;
    }

    /* Ensure container has proper spacing */
    #hero .container,
    .section.first .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        max-width: 100% !important;
    }

    /* Service tabs content */
    .tab-text,
    .tab-list {
        padding-right: 0.5rem !important;
        margin-right: 0.25rem !important;
    }

    .tabs-content {
        padding: 1.5rem 0.75rem !important;
    }

    /* All section paragraphs on mobile */
    .section p {
        padding-right: 0.25rem !important;
    }
}

/* Small mobile devices (phones in portrait) */
@media screen and (max-width: 479px) {
    #hero .hero-cont,
    .section.first .hero-cont {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    #hero .heading,
    #hero .paragraph-4,
    .section.first .heading,
    .section.first .paragraph-4 {
        padding-right: 0.25rem !important;
        box-sizing: border-box !important;
    }

    /* Ensure text doesn't get cut off */
    .container {
        overflow-x: hidden !important;
    }

    /* Add breathing room for all text elements */
    p, .paragraph-4, .tab-text, li {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: none !important;
        -webkit-hyphens: none !important;
        -ms-hyphens: none !important;
    }
}

/* Tablet specific adjustments */
@media screen and (min-width: 768px) and (max-width: 991px) {
    #hero .container,
    .section .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}