<section class="py-5 bg-light">
  <div class="">
      <!-- Section Title -->
    <div class="mb-5 text-center">
      <h2 class="fw-bold"><?php echo esc_html(get_theme_mod('about_section_title'),'howcan'); ?></h2>
      <p class="text-muted"><?php echo esc_html(get_theme_mod('about_section_desc'),'howcan'); ?></p>
    </div>
    
    
    <div class="row align-items-center">
      
      
     
      <!-- Image / Illustration -->
      <div class="col-md-5 text-center mb-4 mb-md-0">
        <img src="<?php echo esc_url(get_theme_mod('about_img'),'howcan'); ?>" 
             alt="Introduction Image" 
             class="img-fluid rounded shadow">
      </div>
      
      <!-- Text Content -->
      <div class="col-md-7">
        <h1 class="display-4 fw-bold mb-3"><?php echo esc_html(get_theme_mod('about_heading_right'),'howcan'); ?></h1>
        <p class="lead text-muted">
          <?php echo esc_html(get_theme_mod('about_para_right'),'howcan'); ?>
        </p>
        <a href="<?php echo esc_url(get_theme_mod('about_btn_link'),'howcan'); ?>" class="btn btn-dark btn-lg mt-3">
          <?php echo esc_html(get_theme_mod('about_btn_txt'),'howcan'); ?>
        </a>
      </div>
    </div>
  </div>
</section>
