@media (max-width: 768px) {
    .airtime-details-container {
        .info-item {
            flex-direction: column;
            align-items: flex-start;
            gap: $spacing-unit;

            .info-label {
                margin-bottom: $spacing-unit;
            }
        }

        .progress-container {
            margin-top: $card-spacing;
            width: 100%;
        }

        .expiry-alert .d-flex {
            flex-direction: column;
            text-align: center;
        }

        .alert-icon {
            margin-bottom: $card-spacing;
        }

        .btn-sm {
            margin-top: $card-spacing;
        }
    }
}