Block style is not getting a priority over Font awesome icon

I have added a Font Awesome Icon to my WordPress website which should trigger on small screens such as mobile devices. But it looks like this

It is getting triggered even on larger screens. The problem is, this header was created as a custom block and registered in functions.php using the init hook. But the font awesome scripts are being registered using wp_enqueue_scripts() hook. I am guessing that since init hook is prioritised before wp_enqueue_scripts() hook, even when I have the styles to not show the icon on large screens, the icon styles since registered later gets a priority and shows up in on the screen. I was wondering if there was another way to register font awesome so that this would not happen.

This is my functions.php code

function create_block_temp_block_block_init() {
/**
 * Registers the block(s) metadata from the `blocks-manifest.php` and registers the block type(s)
 * based on the registered block metadata.
 * Added in WordPress 6.8 to simplify the block metadata registration process added in WordPress 6.7.
 *
 * @see https://make.wordpress.org/core/2025/03/13/more-efficient-block-type-registration-in-6-8/
 */
if ( function_exists( 'wp_register_block_types_from_metadata_collection' ) ) {
    wp_register_block_types_from_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
    return;
}

/**
 * Registers the block(s) metadata from the `blocks-manifest.php` file.
 * Added to WordPress 6.7 to improve the performance of block type registration.
 *
 * @see https://make.wordpress.org/core/2024/10/17/new-block-type-registration-apis-to-improve-performance-in-wordpress-6-7/
 */
if ( function_exists( 'wp_register_block_metadata_collection' ) ) {
    wp_register_block_metadata_collection( __DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php' );
}
/**
 * Registers the block type(s) in the `blocks-manifest.php` file.
 *
 * @see https://developer.wordpress.org/reference/functions/register_block_type/
 */
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
foreach ( array_keys( $manifest_data ) as $block_type ) {
    register_block_type( __DIR__ . "/build/{$block_type}" );
}
}
add_action( 'init', 'create_block_temp_block_block_init' );

function university_files() {
wp_enqueue_style('custom-google-fonts', '//fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700,700i|Roboto:100,300,400,400i,700,700i');
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
}

add_action('wp_enqueue_scripts', 'university_files');

In Inspector it’s showing that my icon styles with classname fa are getting priority over my own styles with classname site-header__menu-trigger

Here is my git repository for reference:
https://github.com/Revolter23/fictional-block-copy