<section class="demo-section">
<div class="container">
<div class="row g-3 justify-content-between">

<div class="col-md-6">
<div class="demo-bc-container">
<div class="card h-100 demo-card-01">
<div class="card-body">
<div class="demo-card-header demo-card-header-01"><img src="filozofia-01.svg" height="90px" alt="Logo Filozofia" /></div>
<div class="demo-card-content">
<h1>John Doe</h1>
<h2>john.doe@filozofia.club</h2>
</div>
</div>
</div>
</div>
</div>


<div class="col-md-6">
<div class="demo-bc-container">
<div class="card h-100 demo-card-02">
<div class="card-body">
<div class="demo-card-header demo-card-header-02"><img src="filozofia-02.svg" height="90px" alt="Logo Filozofia" /></div>
<div class="demo-card-content">
<h1>Jane Doe</h1>
<h2>jane.doe@filozofia.club</h2>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</section>

.demo-section {
  padding: 2rem 0;
  font-family: tw-cen-mt, sans-serif;;
  font-weight: 400;
  font-style: normal;
  color: rgba(0, 0, 0, 0.6);
  background: linear-gradient(to top, #dfe9f4 0%, #eaf1ff 100%);
  z-index: 2;
}

.demo-section .card {
  border: 2px solid #ffffff;
  padding: 0 !important;
}
  
.demo-section .card-body {
  padding: 0;
}
  
.demo-section .demo-card-content {
  padding: 2rem;
  text-align: center;
}
  
.demo-section .demo-card-content h1 {
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 1.4rem;
  text-transform: uppercase;
}
  
.demo-section .demo-card-content h2 {
  margin: 0 0 2px 0;
  padding: 0;
  font-size: 1.3rem;
}

.demo-section .demo-bc-container {
  position: relative;
  background: #fff;
  height: 100%;
  z-index: 2;
}
  
.demo-section .demo-bc-container::before, .demo-section .demo-bc-container::after {
  z-index: -2;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #aaa;
  box-shadow: 0 15px 10px #aaa;
  transform: rotate(-3deg);
}
  
.demo-section .demo-bc-container::after {
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
  
.demo-section .demo-card-header {
  position: relative;
  padding: 1rem;
  text-align: center;
}
  
.demo-section .demo-card-header-01 {
  background: #294a69;
}
  
.demo-section .demo-card-header-01:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #294a69;
}

.demo-section .demo-card-header-02 {
  background: #faa41c;
}
  
.demo-section .demo-card-header-02:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #faa41c;
}