how to make the header bg transparent?

There is a fair amount of CSS injected directly into the index page for this theme. I am trying to change some of this CSS in my child theme’s function.php file, by copying and editing the relevant sections of “styles.php”. However, I am a php novice, so i am repeatedly crashing my client’s site. Can someone help me write this child function properly?

My aim is to change the references to #333 and $header_bg to ‘transparent’ so that i can use just one background image for the entire site.
my site’s location: https://atmovefree.com/wp/
Relevant section of styles.php in parent theme:

//Dynamic styles
function amplify_my_custom_styles($custom) {

//Full width header
	$header_bg = get_theme_mod( 'header_color', '#333' );
	if ( isset($header_bg) && ( $header_bg != '#333' ) ) {
		$custom .= ".site-header .container { background-color:" . esc_html($header_bg) . "}"."\n";
		$custom .= "@media only screen and (max-width: 991px) { #masthead { background-color:" . esc_html($header_bg) . "}}"."\n";
	}
	if ( get_theme_mod( 'full_header', 1 ) ) {
		$custom .= ".site-header { background-color:" . esc_html($header_bg) . "}"."\n";
	}	

	//Output all the styles
	wp_add_inline_style( 'amplify-style', $custom );
}
add_action( 'wp_enqueue_scripts', 'amplify_my_custom_styles' );

my child theme attempt:

<?php

//Dynamic styles
function amplify_custom_styles($custom) {

	//Full width header
	$header_bg = get_theme_mod( 'header_color', 'transparent' );
	if ( isset($header_bg) && ( $header_bg != 'transparent' ) ) {
		$custom .= ".site-header .container { background-color:" . "transparent" . "}"."\n";
		$custom .= "@media only screen and (max-width: 991px) { #masthead { background-color:" . "transparent" . "}}"."\n";
	}
	if ( get_theme_mod( 'full_header', 1 ) ) {
		$custom .= ".site-header { background-color:" . esc_html($header_bg) . "}"."\n";
	}	

	//Output all the styles
	wp_add_inline_style( 'amplify-style', $custom );
}
add_action( 'wp_enqueue_scripts', 'amplify_custom_styles' );