/* Mobile Buttons Fix - Force buttons to stay in one row */

/* Base mobile styles */
@media (max-width: 768px) {
    .modern-hero .hero-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 20px !important;
    }
    
    .modern-hero .btn-hero {
        flex: 1 1 auto !important;
        width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
        min-width: 0 !important;
        padding: 12px 8px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modern-hero .btn-hero i {
        font-size: 0.8rem !important;
        margin-left: 5px !important;
        flex-shrink: 0 !important;
    }
}

/* Small mobile screens */
@media (max-width: 480px) {
    .modern-hero .hero-buttons {
        gap: 8px !important;
        padding: 0 15px !important;
    }
    
    .modern-hero .btn-hero {
        width: calc(50% - 4px) !important;
        max-width: calc(50% - 4px) !important;
        padding: 10px 6px !important;
        font-size: 0.75rem !important;
    }
    
    .modern-hero .btn-hero i {
        font-size: 0.7rem !important;
        margin-left: 3px !important;
    }
}

/* Very small screens */
@media (max-width: 360px) {
    .modern-hero .hero-buttons {
        gap: 5px !important;
        padding: 0 10px !important;
    }
    
    .modern-hero .btn-hero {
        width: calc(50% - 2.5px) !important;
        max-width: calc(50% - 2.5px) !important;
        padding: 8px 4px !important;
        font-size: 0.7rem !important;
    }
    
    .modern-hero .btn-hero i {
        font-size: 0.65rem !important;
        margin-left: 2px !important;
    }
}

/* Extra small screens */
@media (max-width: 320px) {
    .modern-hero .hero-buttons {
        gap: 3px !important;
        padding: 0 5px !important;
    }
    
    .modern-hero .btn-hero {
        width: calc(50% - 1.5px) !important;
        max-width: calc(50% - 1.5px) !important;
        padding: 6px 2px !important;
        font-size: 0.65rem !important;
    }
    
    .modern-hero .btn-hero i {
        font-size: 0.6rem !important;
        margin-left: 1px !important;
    }
}

/* Override any conflicting styles */
.modern-hero .hero-buttons * {
    box-sizing: border-box !important;
}

/* Ensure buttons don't break to new line */
.modern-hero .hero-buttons {
    flex-wrap: nowrap !important;
}

.modern-hero .btn-hero {
    flex-shrink: 1 !important;
    flex-grow: 1 !important;
    flex-basis: 50% !important;
}