<?php 
/**
 * Template part for displaying About Section
 *
 *@package prime-home-renovation
 */
    $prime_home_renovation_featured_about_section_h2          = prime_home_renovation_get_option( 'featured_about_section_h2' );
    $prime_home_renovation_featured_about_section_h1          = prime_home_renovation_get_option( 'featured_about_section_h1' );
    $prime_home_renovation_featured_about_section_li_items1   = prime_home_renovation_get_option( 'featured_about_section_li_items1' );
    $prime_home_renovation_featured_about_section_li_items2   = prime_home_renovation_get_option( 'featured_about_section_li_items2' );
    $prime_home_renovation_featured_about_section_li_items3   = prime_home_renovation_get_option( 'featured_about_section_li_items3' );
    $prime_home_renovation_featured_about_section_li_items4   = prime_home_renovation_get_option( 'featured_about_section_li_items4' );
    $prime_home_renovation_featured_about_section_li_items5   = prime_home_renovation_get_option( 'featured_about_section_li_items5' );
    $prime_home_renovation_featured_about_section_li_items6   = prime_home_renovation_get_option( 'featured_about_section_li_items6' );
    $prime_home_renovation_featured_about_section_p   = prime_home_renovation_get_option( 'featured_about_section_p' );
    $prime_home_renovation_featured_about_section_name   = prime_home_renovation_get_option( 'featured_about_section_name' );
    $prime_home_renovation_featured_about_section_author   = prime_home_renovation_get_option( 'featured_about_section_author' );
    

?>
<?php if (!get_theme_mod('enable_featured_about_section', true)) {
     return;
} ?>
<?php
$about_opacity = get_theme_mod('prime_home_renovation_featured_about_opacity', 0.9);
?>
<style>
    #featured-about{
opacity: 1 ;
    }
</style>
<section id="featured-about" style="opacity: <?php echo esc_attr($about_opacity); ?>;">

    <div class="container px-5 py-3 ">
        <div class="row d-flex about-section-main">
            <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 justify-items-center col-div">
                <?php 
                    $prime_home_renovation_about_image1 = get_theme_mod('prime_home_renovation_about_image1');
                    if(!empty($prime_home_renovation_about_image1)){
                      echo '<div class="borders" style="background-image: url('.esc_url($prime_home_renovation_about_image1).');"><img alt="'.esc_html(get_the_title()).'" src="'.esc_url($prime_home_renovation_about_image1).'"  style="transform: scale(0.9);" /></div>';
                    }else{
                      echo '<div class="borders"><img src="'.get_template_directory_uri().'/assets/images/about.png" alt="About Image" style="transform: scale(0.9);" /></div>';
                    }
                ?>
            </div>
           
<div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-xs-12 col-12 col-div <?php echo esc_attr(get_theme_mod('prime_home_renovation_featured_about_onload_effects', 'wow zoomIn')); ?>">

                <div class="col-sm-12 col-12">
                    <!-- heading 1st -->
                    <h2><?php echo ($prime_home_renovation_featured_about_section_h2); ?></h2>
                </div>
                <div class="col-sm-12 col-12">
                    <!-- heading 2nd -->
                    <h1><?php echo ($prime_home_renovation_featured_about_section_h1); ?></h1>
                </div>
                <div class="col-sm-12 col-12">
                    <!-- list items -->
                    <div class="row pt-3">
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                            <ul>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items1); ?></a></li>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items2); ?></a></li>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items3); ?></a></li>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items4); ?></a></li>
                            </ul>
                        </div>
                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
                            <ul>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items5); ?></a></li>
                                <li><i class="fa-solid fa-circle"></i><a><?php echo ($prime_home_renovation_featured_about_section_li_items6); ?></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-12">
                    <!-- pargraph -->
                    <p class="para-1"><?php echo($prime_home_renovation_featured_about_section_p); ?></p>
                </div>
                <div class="col-sm-12 col-12">
                    <!-- img & author name -->
                    <div class="position-relative">
                        <?php
                    $prime_home_renovation_about_image = get_theme_mod('prime_home_renovation_about1_image');
                    if (!empty($prime_home_renovation_about_image)) {
                    echo '<img alt="' . esc_html(get_the_title()) . '" src="' . esc_url($prime_home_renovation_about_image) . '" style="height:92px;" />';
                    } else {
                    echo '<img src="' . get_template_directory_uri() . '/assets/images/author.png" alt="Author Image" style="height:92px;" />';
                    }
                    ?>
                        <div class="position-absolute" style="">
                            <h3><?php echo ($prime_home_renovation_featured_about_section_name); ?></h3>
                            <h4><?php echo ($prime_home_renovation_featured_about_section_author); ?></h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>

<!-- ///////////////////////////// -->