<?php
/**
 *  The default template for displaying Single leader content in the loop
 *
 *
 * @package Felicityhealth
 * @since Felicityhealth 1.0
 */
?>

<!-- Item -->
<div class="col">
<a   href="<?= esc_url( get_permalink() )?>">
    <div class="card card-hover border-0 bg-transparent">
        <div class="position-relative">
            <img src="<?php if ( has_post_thumbnail() ) {the_post_thumbnail_url(); }?>" class="rounded-3" alt="<?php the_title(); ?>">
            <div
                class="card-img-overlay d-flex flex-column align-items-center justify-content-center rounded-3">
                <span class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-25 rounded-3"></span>
                <div class="position-relative d-flex zindex-2">
                    <a href="#" class="btn btn-icon btn-secondary btn-facebook btn-sm bg-white me-2">
                        <i class="bx bxl-facebook"></i>
                    </a>
                    <a href="#" class="btn btn-icon btn-secondary btn-linkedin btn-sm bg-white me-2">
                        <i class="bx bxl-linkedin"></i>
                    </a>
                    <a href="#" class="btn btn-icon btn-secondary btn-twitter btn-sm bg-white">
                        <i class="bx bxl-twitter"></i>
                    </a>
                </div>
            </div>
        </div>
        <div class="card-body text-center p-3">
            <h3 class="fs-lg fw-semibold pt-1 mb-2"><?php the_title(); ?></h3>
            <p class="fs-sm mb-0"><?php the_field('role'); ?></p>
        </div>
    </div>
</a>
</div>
 