<div class="card-body">
        <h6>بدنه کارت</h6>
        <p>...</p>
      </div>
    

    
       <div class="card-body">
        <h6>بدنه کارت</h6>
        <p>...</p>
      </div>

    

    
      
       <div class="card-body">
        <h6>بدنه کارت</h6>
        <p>...</p>
      </div>
        
    

    
      
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
     </div>
        
    

    

        <div class="col-md-6 col-xl-3">
        <div class="card hover-effect card-outline-secondary">
       <div class="card-header">
         <h5>Outline secondary card</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
       </div>
       </div>
       </div>

    

    

        <div class="col-md-6 col-xl-3">
        <div class="card hover-effect card-outline-secondary">
       <div class="card-header">
         <h5>Outline secondary card</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
       </div>
       </div>
       </div>

    

    

       <div class="col-md-6 col-xl-3">
        <div class="card hover-effect card-light-primary">
       <div class="card-header">
         <h5>Light primary card</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
       </div>
       </div>
       </div>

    

    

        <div class="col-md-6 col-xl-3">
         <div class="card hover-effect card-light-secondary">
        <div class="card-header">
          <h5>Light primary card</h5>
        </div>
        <div class="card-body">
        <h6>بدنه کارت</h6>
        <p>...</p>
        </div>
        </div>
        </div>
    

    
     
     <div class="col-md-6 col-xl-3">
     <div class="card hover-effect card-primary">
     <div class="card-header">
       <h5>کارت Secondary</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
     </div>
     </div>
     </div>
        
    

    

     <div class="col-md-6 col-xl-3">
     <div class="card hover-effect card-secondary">
     <div class="card-header">
       <h5>کارت Secondary</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
     </div>
     </div>
     </div>

    

    

     <div class="col-md-6 col-xl-3">
     <div class="card hover-effect card-success">
     <div class="card-header">
       <h5>کارت Secondary</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
     </div>
     </div>
     </div>

    

    

     <div class="col-md-6 col-xl-3">
     <div class="card hover-effect card-danger">
     <div class="card-header">
       <h5>کارت Secondary</h5>
       </div>
       <div class="card-body">
       <h6>بدنه کارت</h6>
       <p>...</p>
     </div>
     </div>
     </div>