/* =========================================================
   MOBILE FIXES (Added to bottom of original CSS)
   ========================================================= */
@media (max-width: 991px) {
    /* 1. Fix Video Aspect Ratio (Prevents distortion) */
    .video-wrapper {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
    }

    /* 2. Scale down fonts only on mobile */
    header.masthead .masthead-subheading {
        font-size: 1.5rem !important;
        line-height: 1.2;
        margin-bottom: 1rem;
    }

    header.masthead .masthead-heading {
        font-size: 1.8rem !important;
        padding: 1rem !important;
    }

    /* 3. Ensure buttons are always visible on mobile */
    .whatsapp-widget-container {
        display: flex !important;
        z-index: 99999 !important;
        right: 15px !important;
        bottom: 15px !important;
    }

    .btn-scroll-top {
        display: flex !important;
        z-index: 99999 !important;
        right: 15px !important;
        bottom: 75px !important; /* Stacks above WhatsApp */
    }
}
/* Update your existing mobile block with these lines */
@media (max-width: 991px) {
    
    /* ADD THIS: Prevents long words from forcing a new line */
    header.masthead .masthead-heading, 
    header.masthead .masthead-subheading {
        word-wrap: break-word;
        hyphens: auto;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* ADD THIS: Slightly smaller font specifically for smaller phones */
    @media (max-width: 480px) {
        header.masthead .masthead-subheading {
            font-size: 1.8rem !important; /* Shrunk a bit more */
        }
        header.masthead .masthead-heading {
            font-size: 1rem !important;   /* Shrunk a bit more */
        }
    }
    
    /* ... keep your existing button/video code below here ... */
}

/* Keeps the name and number on the same line and prevents breaking */
.contact-detail {
    white-space: nowrap !important;
    display: block !important;
    font-size: 1.2rem !important; /* Adjust this size if it's still too big */
}

/* Optional: Ensures the container doesn't force a wrap */
.contact-info-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
@media (max-width: 991px) {
    /* Position WhatsApp at the bottom */
    .whatsapp-widget-container {
        bottom: 85px !important; 
        right: 20px !important;
        z-index: 99999 !important;
    }

    /* Move the Scroll-To-Top button higher so it sits above WhatsApp */
    #btnScrollTop {
        bottom: 85px !important; /* Increased from 70px to create space */
        right: 80px !important;
        z-index: 99999 !important;
    }
}