The proper way would be for you to:

1. Create an Astra child theme and Activate it as your theme. You can use their tool https://wpastra.com/child-theme-generator/

You do this to be able to continue updating Astra and not loose your custom work

2. In the functions.php file of your child theme, you use use a WordPress action hook to enqueue your CSS and your JS file, like this:

add_action( 'wp_enqueue_scripts', 'amir_astra_scripts' );

function amir_astra_scripts(){
  
  wp_register_style( 
    'amir-styles', // Idendtifier to later enqueue it
    get_stylesheet_directory_uri() . 'path/to/file/your-css.css', //full URL to the file
    true, 
    filemtime( get_stylesheet_directory() . 'path/to/file/your-css.css' ), // A dynamic version to bust caching
    'all'
    );  
  
  
  wp_enqueue_style('amir-styles');


  wp_register_script(
    'amir-script', 
    get_stylesheet_directory_uri() . 'path/to/file/your-js.js', 
    ['jquery'], // Make script a dependency of jquery
    filemtime( get_stylesheet_directory() . 'path/to/file/your-js.js'), 
    true // Load in footer instead of header
);

  wp_enqueue_script('amir-script');
  
}

3. If you don't need to load your CSS and JS on every single page of the site, use WordPress conditional tags to load them conditionally, only on the needed pages. For example, if you needed to load your CSS and JS on all blog posts, you can encapsulate the enqueuing in is_single() like this after registering them

if( is_single() ){
  wp_enqueue_style('amir-styles');
  wp_enqueue_script('amir-script');
}

If you needed them only on the page with slug "contact" you would do

if( is_page('contact') ){
  wp_enqueue_style('amir-styles');
  wp_enqueue_script('amir-script');
}