<div class="card mt-10 relative border-3 border-primary w-full py-10 px-5 flex flex-col justify-center items-center gap-7.5 before:content-[''] before:w-4 before:h-4 before:bg-primary before:absolute before:-top-2.5 before:transform before:-translate-x-1/2 before:left-[40%] before:z-20 after:content-[''] after:w-4 after:h-4 after:bg-primary after:absolute after:-top-2.5 after:transform after:translate-x-1/2 after:right-[40%] after:z-20">
            <div class="image border-3 w-25 h-25  border-primary overflow-clip">
                <img class=" h-full w-full object-cover " src="{{imageurl}}" alt="{{name}}">
            </div>
            <div class="info flex flex-col gap-5">
                <div class=" text-center text-body/70 ">{{description}}</div>
            <div class="">
                <h2 class=" text-center font-bold text-xl text-body ">{{name}}</h2>
                <div class=" text-center text-body/80 font-medium text-base ">{{subtitle}}</div>
            </div>
            </div>
            <div class="w-[20%] h-[5%] bg-body-bg absolute -top-1 left-1/2 transform -translate-x-1/2"></div>
</div>
