@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

:root {
   --card-color: #DD2F6E;
   --card-primary: #007bff;
   --card-red: #dc3545;
   --card-green: #28a745;
   --card-yellow: #ffaf00;
   --card-blue: #17a2b8;
   --card-orange: #ffaf00;
   --card-purple: #bb02ff;
   --card-dark: #1D2231;
   --card-gray: #868e96;
}

.cards {
   position: relative;
   padding: 20px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
}
.cards .card {
   position: relative;
   width: 300px;
   height: 370px;
   background: #fff;
   margin: 20px;
   border-radius: 5px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0,0,0,0.2);
   transition: all 0.3s;
}
.cards .card .imgTitle {
   width: 100%;
   height: 200px;
   border-radius: 5px 5px 0 0;
}
.cards .card .imgTitle img {
   width: 100%;
   max-width: 100%;
   border-radius: 5px 5px 0 0;
   transition: all 0.3s; 
}
.cards .card .circle {
   position: relative; 
   width: 100%;
   height: 100%;
   background: #000;
   clip-path: circle(180px at center 0);
   text-align: center;
}
.cards .card .circle h2 {
   color: #fff;
   font-size: 4.5em;
   padding: 30px 0;
}
.cards .card .content {
   position: absolute;
   bottom: 10px;
   padding: 20px;
}
.cards .card .content p {
   color: #666;
}
.cards .card .content ul {
   list-style:none;
}
.cards .card .content ul li {
}
.cards .card .content ul li a {
   text-decoration: none;
}
.cards .card .content btn {
   position: relative;
   display: inline-block;
   padding: 10px 20px;
   background: #000;
   color: #fff;
   border-radius: 40px;
   text-decoration: none;
   margin-top: 20px;
}
.cards .card .card-primary {
   background: var(--card-primary);
}
.cards .card .card-red {
   background: var(--card-red);
}
.cards .card .card-green {
   background: var(--card-green);
}
.cards .card .card-yellow {
   background: var(--card-yellow);
}
.cards .card .card-blue {
   background: var(--card-blue);
}
.cards .card .card-gray {
   background: var(--card-gray);
}

@media (max-width: 991px) {
}

@media (max-width: 600px) {
   .cards {
      margin: 50px 2px 2px 2px;
   }
   .cards .card {
      width: 100%;
      height: 380px;
      margin: 10px;
   }
}