<?php
/*
** Template Name: About Us
*/ 
get_header(); ?>
<!-- Banner Section -->
    <section class="section position-relative"
      style="background-image: url('<?php echo bloginfo('template_directory'); ?>/image/multiethnic-women-with-tattoo-and-coffee-to-go-hol-2024-11-08-08-18-58-utc.jpg'); height: 40vh;">
      <div class="bg-overlay-secondary"></div>
      <div class="b-container h-100 position-relative pt-4 text-white" style="z-index: 2;">
        <div
          class="col-10 d-flex flex-column w-100 h-100 justify-content-center align-items-center text-center text-white gap-3 font-1">
          <h1 class="display-2 mb-0" style="font-weight: 900;"><?php the_title(); ?></h1>
          <!--<nav aria-label="breadcrumb" style="font-weight: 900;">-->
          <!--  <ol class="breadcrumb justify-content-center align-items-center">-->
          <!--    <li class="breadcrumb-item font-1">-->
          <!--      <a class="text-decoration-none text-primary-color" href="<?php echo home_url(); ?>">Home</a>-->
          <!--    </li>-->
          <!--    <li class="breadcrumb-item text-white active" aria-current="page"><?php the_title(); ?></li>-->
          <!--  </ol>-->
          <!--</nav>-->
        </div>
      </div>
    </section>
    <!-- #banner end -->
<!-- About Section -->
    <section class=" section pb-5 my-5">
      <div class="b-container">
        <div class="row row-cols-1 row-cols-xl-2 g-5 align-items-center justify-content-center text-center text-xl-start">
          <!-- Left Content Side -->
          <div class="col-lg-6 position-relative d-flex justify-content-center">
            <div class=" about-img-div">
              <!-- Primary Image -->
              <div class="ratio-wrapper-429">
                  <?php $featured_image = get_the_post_thumbnail_url(get_the_ID(), 'full'); ?>
                    <img src="<?php echo esc_url($featured_image); ?>" alt="<?php echo esc_attr(get_the_title()); ?>" class="about-big-img">
              </div>
              <!-- Experience Label -->
              <!-- <div
                class="position-absolute bottom-0 end-0 bg-secondary-color text-white px-4 py-2 rounded-4 m-3 fw-bold small z-1 text-center">
                <span class="font-1 fs-2 fw-bold">10+ Years</span><br>
                <span class="fs-5">Of Experience</span>
              </div> -->
              <!-- Circle Image -->
              <div class="position-absolute" style="top:0px; right: 0; z-index: 3;">
                <div class="img-circle rounded-circle overflow-hidden border border-4 border-white shadow">
                    <?php $abt_pge_other_small_image = get_field('abt_pge_other_small_image'); ?>
                            <img src="<?php echo esc_url($abt_pge_other_small_image['url']); ?>" alt="<?php echo esc_attr($abt_pge_other_small_image['alt']); ?>"  class="w-100 h-100">
                </div>
              </div>
            </div>
          </div>
          <!-- Right Content Side -->
          <div class="col about-left-div">
              <?php the_content(); ?>
          </div>
        </div>
      </div>
    </section>
    <!-- #about end -->
<?php get_footer(); ?>