<?php
/**
 * Template part for displaying About Section
 *
 *@package prime-industry  
 */
$featured_about_section_maintitle = prime_industry_get_option('featured_about_section_maintitle');
$featured_about_section_title = prime_industry_get_option('featured_about_section_title');
$featured_about_section_text = prime_industry_get_option('featured_about_section_text');
$featured_about_section_imagetitle1 = prime_industry_get_option('featured_about_section_imagetitle1');
$featured_about_section_imagetitle2 = prime_industry_get_option('featured_about_section_imagetitle2');
$featured_about_section_bxtitle1 = prime_industry_get_option('featured_about_section_bxtitle1');
$featured_about_section_bxtext1 = prime_industry_get_option('featured_about_section_bxtext1');
$featured_about_section_bxtitle2 = prime_industry_get_option('featured_about_section_bxtitle2');
$featured_about_section_bxtext2 = prime_industry_get_option('featured_about_section_bxtext2');
$featured_iconabout1 = prime_industry_get_option('featured_iconabout1');
$featured_iconabout2 = prime_industry_get_option('featured_iconabout2');
$featured_iconabout3 = prime_industry_get_option('featured_iconabout3');
$featured_about_section_features1 = prime_industry_get_option('featured_about_section_features1');
$featured_about_section_features2 = prime_industry_get_option('featured_about_section_features2');
$featured_about_section_features3 = prime_industry_get_option('featured_about_section_features3');
$featured_about_section_buttontext = prime_industry_get_option('featured_about_section_buttontext');


?>
<?php if (!get_theme_mod('feature_about_enable_section', true)) {
    return;
} ?>

<div id="featured-about">
    <div class="about-overlay"></div>
    <div class="container">
        <div class="row">
                <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 h-100 <?php echo esc_attr(get_theme_mod('prime_industry_featured_about_onload_effects', 'wow zoomIn')); ?>"
                    data-wow-duration="2s">
                    <div class="row">


                        <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 h-100 p-0 about-img-box <?php echo esc_attr(get_theme_mod('prime_industry_featured_about_onload_effects', 'wow zoomIn')); ?>"
                            data-wow-duration="2s">
                            <div class="about-imgs">
                                <div class="about-image1">
                                    <?php
                                    $prime_industry_about_image1 = get_theme_mod('prime_industry_about_image1');
                                    echo '<img alt="About us" class="about-image1-img" src="' . esc_url($prime_industry_about_image1 ?: get_template_directory_uri() . '/assets/images/aboutimg1.png') . '" />';
                                    ?>
                                    <div class="about-image2">
                                        <?php
                                        $prime_industry_about_image2 = get_theme_mod('prime_industry_about_image2');
                                        echo '<img class="hover-color-image" alt="About us" src="' . esc_url($prime_industry_about_image2 ?: get_template_directory_uri() . '/assets/images/aboutimg2.png') . '" />';
                                        ?>
                                    </div>

                                    <div class="bttn">
                                        <?php
                                        $bann2vbt_text = get_theme_mod('bann2vbt_text', 'Tap To Play');
                                        $iframe = get_theme_mod('prime_industry_bann2_vb_embade', 'https://www.youtube.com/embed/x36EQP2og-k?si=aEM9eOSS4tgxrooe');
                                        ?>
                                        <?php if ($bann2vbt_text) { ?>
                                            <div class="video-pop">
                                                <a class="popup-youtube" id="video-pop">
                                                    <i class="fa fa-play"></i>
                                                </a>
                                                <div id="popup" class="popup">
                                                    <div class="popup-content">
                                                        <span id="closePopup">&times;</span>
                                                        <?php echo $iframe; ?>
                                                    </div>
                                                </div>
                                            </div>
                                        <?php } ?>
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="aboutrightside col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 <?php echo esc_attr(get_theme_mod('prime_industry_featured_about_onload_effects', 'wow zoomIn')); ?>"
                            data-wow-duration="2s">
                            <?php if (!empty($featured_about_section_title)): ?>
                                <div class="title-sections"
                                    style="text-align: <?php echo strtolower(get_theme_mod('featured_about_box_align', 'Left')); ?>">
                                    <h5
                                        style="text-transform: <?php echo strtolower(get_theme_mod('featured_about_maintitle_case', 'Capitalize')); ?>;">
                                        <?php echo esc_html($featured_about_section_maintitle); ?>
                                    </h5>

                                    <h1
                                        style="text-transform: <?php echo strtolower(get_theme_mod('featured_about_title_case', 'none')); ?>;">
                                        <?php echo esc_html($featured_about_section_title); ?>
                                    </h1>

                                    <?php if (!empty($featured_about_section_text)): ?>
                                        <h2 class="subtitle"><?php echo esc_html($featured_about_section_text); ?>
                                        </h2>
                                    <?php endif; ?>
                                </div>
                            <?php endif; ?>

                            <div class="row mt-4">
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="d-flex align-items-center">
                                        <div class="circle">
                                            <?php
                                            $img1 = get_theme_mod('prime_industry_about_featureimage1') ?: get_template_directory_uri() . '/assets/images/about-img2.png';
                                            echo '<img class="me-2 featureimg" alt="About us" src="' . esc_url($img1) . '" />';
                                            ?>
                                        </div>
                                        <h6 class="abtfeature1"><?php echo esc_html($featured_about_section_bxtitle1); ?>
                                        </h6>
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-6 col-12">
                                    <div class="d-flex align-items-center">
                                        <div class="circle">
                                            <?php
                                            $img2 = get_theme_mod('prime_industry_about_featureimage2') ?: get_template_directory_uri() . '/assets/images/about-img3.png';
                                            echo '<img class="me-2 featureimg" alt="About us" src="' . esc_url($img2) . '" />';
                                            ?>
                                        </div>
                                        <h6 class="abtfeature1"><?php echo esc_html($featured_about_section_bxtitle2); ?>
                                        </h6>
                                    </div>
                                </div>
                            </div>

                            <div class="about-service mt-4">
                                <p><i class="<?php echo esc_attr($featured_iconabout1); ?>"></i>
                                    <?php echo esc_html($featured_about_section_features1); ?>
                                </p>
                                <p><i class="<?php echo esc_attr($featured_iconabout2); ?>"></i>
                                    <?php echo esc_html($featured_about_section_features2); ?>
                                </p>
                                <p><i class="<?php echo esc_attr($featured_iconabout3); ?>"></i>
                                    <?php echo esc_html($featured_about_section_features3); ?>
                                </p>
                            </div>


                            <div class="button">
                                <div class="button-content mt-5">
                                    <a class="about-btn" href="<?php the_permalink(); ?>">
                                        <?php echo esc_html($featured_about_section_buttontext); ?>
                                    </a>
                                </div>
                            </div>

                        </div>


                    </div>
            </div>
        </div>
    </div>

</div>

<style>
    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
        }
    }

</style>

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