<?php 

	$roofing_solutions_custom_css = '';

	// Site Title Color
	$roofing_solutions_site_title_color = get_theme_mod('roofing_solutions_site_title_color');
	$roofing_solutions_custom_css .= '.logo h1 a, .logo p.site-title a {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_site_title_color) . ';';
	$roofing_solutions_custom_css .= '}';

	// Site Tagline Color
	$roofing_solutions_site_tagline_color = get_theme_mod('roofing_solutions_site_tagline_color');
	$roofing_solutions_custom_css .= '.logo p.site-description {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_site_tagline_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_logo_size = get_theme_mod('roofing_solutions_logo_size'); // This value should be a percentage (e.g., 50 for 50%)
	if ($roofing_solutions_logo_size) {
		$logo_width_px = (350 * $roofing_solutions_logo_size) / 100; // Calculate the pixel width based on the percentage
		$roofing_solutions_custom_css .= '.site-logo img {';
		$roofing_solutions_custom_css .= 'width: '.esc_attr($logo_width_px).'px !important;';
		$roofing_solutions_custom_css .= '}';
	}

	// Topbar Color
	$roofing_solutions_menubg_color = get_theme_mod('roofing_solutions_menubg_color');
	$roofing_solutions_custom_css .= ' .home header.banner {';
		$roofing_solutions_custom_css .= 'background-color: ' . esc_attr($roofing_solutions_menubg_color) . ';';
	$roofing_solutions_custom_css .= '}';
	
	$roofing_solutions_logobg_color = get_theme_mod('roofing_solutions_logobg_color');
	$roofing_solutions_custom_css .= ' #header .logobx-out {';
		$roofing_solutions_custom_css .= 'background-color: ' . esc_attr($roofing_solutions_logobg_color) . ';';
	$roofing_solutions_custom_css .= '}';

	/*----------------Width Layout -------------------*/
    $roofing_solutions_theme_lay = get_theme_mod( 'roofing_solutions_width_options','Full Width');
    if($roofing_solutions_theme_lay == 'Full Width'){
		$roofing_solutions_custom_css .='body{';
			$roofing_solutions_custom_css .='max-width: 100%;';
		$roofing_solutions_custom_css .='}';
	}else if($roofing_solutions_theme_lay == 'Contained Width'){
		$roofing_solutions_custom_css .='body{';
			$roofing_solutions_custom_css .='width: 100%;padding-right: 15px;padding-left: 15px;margin-right: auto;margin-left: auto;';
		$roofing_solutions_custom_css .='}';
	}else if($roofing_solutions_theme_lay == 'Boxed Width'){
		$roofing_solutions_custom_css .='body{';
			$roofing_solutions_custom_css .='max-width: 1140px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto;';
		$roofing_solutions_custom_css .='}';
	}

	//Submenu Dropdown Effect
	$roofing_solutions_dropdown_anim = get_theme_mod('roofing_solutions_dropdown_anim');
	$roofing_solutions_custom_css .='.primary-navigation ul ul{';
		$roofing_solutions_custom_css .='animation: '.esc_attr($roofing_solutions_dropdown_anim).' 1s ease;';
	$roofing_solutions_custom_css .='}';

	// Slider
	$roofing_solutions_slider_hide_show = get_theme_mod('roofing_solutions_slider_hide_show',false);
	if($roofing_solutions_slider_hide_show == true){
		$roofing_solutions_custom_css .= '.page-template-home-custom .inner-head {';
			$roofing_solutions_custom_css .= 'display: none;';
		$roofing_solutions_custom_css .= '}';
	}

	$roofing_solutions_slider_title_font_size = get_theme_mod('roofing_solutions_slider_title_font_size');
	$roofing_solutions_custom_css .= ' #slider .inner_carousel h1 {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_slider_title_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_text_font_size = get_theme_mod('roofing_solutions_slider_text_font_size');
	$roofing_solutions_custom_css .= ' #slider .inner_carousel p {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_slider_text_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_btn_font_size = get_theme_mod('roofing_solutions_slider_btn_font_size');
	$roofing_solutions_custom_css .= ' #slider .read-btn a {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_slider_btn_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_title_color = get_theme_mod('roofing_solutions_slider_title_color');
	$roofing_solutions_custom_css .= ' #slider .inner_carousel h1 {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_slider_title_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_text_color = get_theme_mod('roofing_solutions_slider_text_color');
	$roofing_solutions_custom_css .= ' #slider .inner_carousel p {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_slider_text_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_btn_color = get_theme_mod('roofing_solutions_slider_btn_color');
	$roofing_solutions_slider_btnbg_color = get_theme_mod('roofing_solutions_slider_btnbg_color');
	$roofing_solutions_custom_css .= ' #slider .read-btn a {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_slider_btn_color) . '; background-color: ' . esc_attr($roofing_solutions_slider_btnbg_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_slider_np_color = get_theme_mod('roofing_solutions_slider_np_color');
	$roofing_solutions_slider_npbg_color = get_theme_mod('roofing_solutions_slider_npbg_color');
	$roofing_solutions_custom_css .= ' #slider .carousel-control-next-icon i, #slider .carousel-control-prev-icon i {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_slider_np_color) . '; background-color: ' . esc_attr($roofing_solutions_slider_npbg_color) . ';';
	$roofing_solutions_custom_css .= '}';

	//features css
	$roofing_solutions_feature_icon_font_size = get_theme_mod('roofing_solutions_feature_icon_font_size');
	$roofing_solutions_custom_css .= ' #feature .icnbx i {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_feature_icon_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_feature_title_font_size = get_theme_mod('roofing_solutions_feature_title_font_size');
	$roofing_solutions_custom_css .= ' #feature .content h1 {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_feature_title_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_feature_text_font_size = get_theme_mod('roofing_solutions_feature_text_font_size');
	$roofing_solutions_custom_css .= ' #feature .content p {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_feature_text_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	//service 
	$roofing_solutions_services_heading_font_size = get_theme_mod('roofing_solutions_services_heading_font_size');
	$roofing_solutions_custom_css .= ' #service-section .service-head h4 {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_services_heading_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_services_font_size = get_theme_mod('roofing_solutions_services_font_size');
	$roofing_solutions_custom_css .= ' #service-section .service-content .title {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_services_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_services_text_font_size = get_theme_mod('roofing_solutions_services_text_font_size');
	$roofing_solutions_custom_css .= ' #service-section .service-content p {';
		$roofing_solutions_custom_css .= 'font-size: ' . esc_attr($roofing_solutions_services_text_font_size) . 'px;';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_service_heading_color = get_theme_mod('roofing_solutions_service_heading_color');
	$roofing_solutions_custom_css .= ' #service-section .service-head h4 {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_service_heading_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_service_headingbdr_color = get_theme_mod('roofing_solutions_service_headingbdr_color');
	$roofing_solutions_custom_css .= ' #service-section .service-head h4 svg {';
		$roofing_solutions_custom_css .= 'fill: ' . esc_attr($roofing_solutions_service_headingbdr_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_service_title_color = get_theme_mod('roofing_solutions_service_title_color');
	$roofing_solutions_custom_css .= ' #service-section .service-content .title {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_service_title_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_service_text_color = get_theme_mod('roofing_solutions_service_text_color');
	$roofing_solutions_custom_css .= ' #service-section .service-content p {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_service_text_color) . ';';
	$roofing_solutions_custom_css .= '}';

	$roofing_solutions_service_btn_color = get_theme_mod('roofing_solutions_service_btn_color');
	$roofing_solutions_service_btnbg_color = get_theme_mod('roofing_solutions_service_btnbg_color');
	$roofing_solutions_custom_css .= ' #service-section .button a {';
		$roofing_solutions_custom_css .= 'color: ' . esc_attr($roofing_solutions_service_btn_color) . '; background-color: ' . esc_attr($roofing_solutions_service_btnbg_color) . ';';
	$roofing_solutions_custom_css .= '}';