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

<!-- //////////////////////////////// about section end///////////////////////////////-->
<section class="about-section" id="primaryid">
    <div class="container">
        <div class="row d-flex align-item-center">
            <div class="col-lg-5 col-md-12 col-12 position-relative">

                <div class="row">
                    <div class="col-lg-3 col-sm-3">
                        <h5 class="title">
                            <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_title', 'About Us')) ?></h5>
                    </div>
                    <div class="col-lg-9 col-sm-9">
                        <div class="abt-heroimg">
                            <?php $eco_solar_energy_image = get_theme_mod('eco_solar_energy_about_image'); ?>
                            <?php if ($eco_solar_energy_image == '') { ?>
                                <img src="<?php echo esc_url(get_template_directory_uri() . "/assets/images/abt-img.jpg"); ?>"
                                    class="w-100">
                            <?php } else { ?>
                                <img src="<?php echo esc_url(get_theme_mod('eco_solar_energy_about_image')); ?>"
                                    class="w-100">
                            <?php } ?>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-7 col-md-12 col-12 px-4">
             <div class="aboutrightsection">
                <h6 class="subtitle mt-4">
                    <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_subtitle', 'Building the Future')) ?>
                </h6>
                <p class="mt-4 fs-5">
                    <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_paragraph', "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Ipsum has been the industry's standard dummy text ever since the 1500s, when type specimen book")) ?>
                </p>


                <div class="row mt-5">
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="about-icon-img">
                            <div class="circle">
                                <i
                                    class="fa-solid <?php echo esc_html(get_theme_mod('solar_icon1', 'fa-solar-panel')) ?> abt-icon"></i>
                            </div>
                            <h6 class="abtfeature1">
                                <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_cardtitle1', 'Powered By The Sun')) ?>
                            </h6>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="about-icon-img">
                            <div class="circle">
                                <i
                                    class="fa-solid <?php echo esc_html(get_theme_mod('solar_icon2', 'fa-solar-panel')) ?> abt-icon"></i>
                            </div>
                            <h6 class="abtfeature1">
                                <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_cardtitle2', 'Future-Ready Solar Tech')) ?>
                            </h6>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-12">
                        <div class="about-icon-img">
                            <div class="circle">
                                <i
                                    class="fa-solid <?php echo esc_html(get_theme_mod('solar_icon3', 'fa-solar-panel')) ?> abt-icon"></i>
                            </div>
                            <h6 class="abtfeature1">
                                <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_cardtitle3', 'Powered By The Sun')) ?>
                            </h6>
                        </div>
                    </div>
                </div>

                <div class="about-service mt-3">
                    <p> <i class="fas fa-solid fa-circle"></i>  <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_card_subtitle1', 'Lorem Ipsum Is Simply Dummy Text Of The Printing')) ?>
                    </p>
                    <p><i class="fas fa-solid fa-circle"></i> <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_card_subtitle2', 'And Typesetting Industry')) ?>
                    </p>
                    <p><i class="fas fa-solid fa-circle"></i> <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_card_subtitle3', "Lorem Ipsum Has Been The Industry's")) ?>
                    </p>
                </div>

                <div class="d-flex mt-5">

                    <div class="button">
                        <div class="button-content ">
                      <a class="about-btn" href="<?php echo esc_url( get_theme_mod('eco_solar_energy_aboutsection_buttonurl', '#') ); ?>">
    <?php echo esc_html( get_theme_mod('eco_solar_energy_aboutsection_buttontext', 'About Us') ); ?>
    <span>
        <i class="fa-regular <?php echo esc_html( get_theme_mod('solar_icon', 'fa-solid fa-solar-panel') ); ?>"></i>
    </span>
</a>

                        </div>
                    </div>

                    <div class="call-content d-flex">
                        <div class="call-circle">
                            <i
                                class="fa-regular <?php echo esc_html(get_theme_mod('msg_icon', 'fa-solid fa-phone-volume')) ?>"></i>
                        </div>
                        <div class="content">
                            <h2 class="call-text">
                                <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_cardnumtxt', 'Emergency')) ?>
                            </h2>
                            <h3 class="call-number">
                                <?php echo esc_html(get_theme_mod('eco_solar_energy_aboutsection_cardnumber', '(00)111-2222-333')) ?>
                            </h3>
                        </div>
                    </div>

                </div>
             </div>
            </div>
        </div>
    </div>
</section>
<!-- //////////////////////////////// about section end///////////////////////////////-->