*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Poppins', sans-serif;
   text-transform: capitalize;
   transition: all 0.3 linear;
 }

 .container-card{
   width: 100%;
   height: auto;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   margin-top: 10px;
   /* background-color: #74ebd5;
   background-image: linear-gradient(90deg, #74ebd5 0%, #9face6 100%); */
 }


 .box{
   width: 380px;
   height: 480px;
   background-color: #fff;
   border-radius: 5px;
   padding: 10px;
   padding-top: 50px;
   margin: 20px;
   text-align: center;
   letter-spacing: 1px;
   box-shadow: 0 3px 5px rgba(0,0,0,0.3);
   overflow: hidden;
   position: relative;
   z-index: 0;
 }

 .box h3{
   font-size: 30px;
   padding: 20px 0;
   color: #444;
 }

 .box p{
   font-size: 15px;
   color: #777;
 }

 .box button{
   width: 140px;
   height: 40px;
   background-color: #333;
   color: #fff;
   border: none;
   outline: none;
   font-size: 17px;
   cursor: pointer;
   border-radius: 50px;
   margin-top: 5px;
 }

 .box button:hover{
   letter-spacing: 1px;
 }

 .box::before{
   width: 100%;
   height: 100%;
   content:'';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -1;
 }

 .box::after{
   width: 100%;
   height: 100%;
   background-color: #0093e9;
   background-image: linear-gradient(45deg, #ffbf00  20%, #0093e9  60%);
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   z-index: -2;
   clip-path: circle(20% at 90% 10%);
   transition: .5s;
 }


 .box .count{
   position: absolute;
   top: 15px;
   right: 30px;
   font-size: 50px;
   font-weight:bolder ;
   color: #fff;
 }



 .box:hover::after{
   clip-path: circle(100%);
 }

 .box:hover h3{
   color: #ffffff;
 }

 .box:hover p{
   color: #000000;
 }


 .box:hover button{
   color: #333;
   background-color: #ffffff;
 }

 .box:hover::before{
   background-color: rgba(0,0,0,0.1);
 }


 .data{
   margin-top: 8%;
 }

 h1{
   color: #0093e9;
 }

 p{
   padding: 10px;
   font-size: 25px;
 }