.card{
         width: 100%;
         border-radius: 1rem;
         background: white;
         box-shadow: 4px 4px 15px rgba(#000, 0.5);
         position : relative;
         text-transform:capitalize ;
         }
         .card .card__container{
         padding : 1rem;
         width: 100%;
         height: 100%;
         background: white;
         border-radius: 1rem;
         position: relative;
         background: linear-gradient(90deg, rgba(84,180,211,0.2274159663865546) 0%, rgba(255,255,255,1) 100%);
         }
         .card__header{
         text-transform: uppercase ;
         } 
         .card::before{
         position: absolute;
         top:2rem;
         right:-0.4rem;
         content: '';
         background: #283593;
         height: 40px;
         width: 42px;
         transform : rotate(45deg);
         }
         .card::after{
         position: absolute;
         content: attr(data-label);
         top: 12px;
         right: -14px;
         padding: 0.5rem;
         font-weight: bold;
         width: 12rem;
background: linear-gradient(0deg, rgba(0,51,51,1) 43%, rgba(84,180,211,1) 100%);
         color: #fff;
		 font-size: 20px;
         text-align: center;
         }
         @media screen and (max-width: 400px) {
         .card{
         width: 98%;
         border-radius: 1rem;
         background: white;
         box-shadow: 4px 4px 15px rgba(#000, 0.5);
         position : relative;
         text-transform:uppercase ;
         background: linear-gradient(79deg, rgba(255,255,255,1) 31%, rgba(236,212,138,1) 100%);
         }
         .card .card__container{
         padding : 2rem;
         width: 100%;
         height: 100%;
         background: white;
         border-radius: 1rem;
         position: relative;
         background: linear-gradient(90deg, rgba(84,180,211,0.2274159663865546) 0%, rgba(255,255,255,1) 100%);
         }
         .card__header{
         text-transform: uppercase ;
         }
         .card::before{
         position: absolute;
         top:2rem;
         right:-0.5rem;
         content: '';
         background: #283593;
         height: 30px;
         width: 30px;
         transform : rotate(45deg);
         }
         .card::after{
         position: absolute;
         content: attr(data-label);
         top: 11px;
         right: -14px;
         padding: 0.5rem;
         font-weight: bold;
         width: 12rem;
         background: linear-gradient(0deg, rgba(0,51,51,1) 43%, rgba(84,180,211,1) 100%);
         color: #fff;
         text-align: center;
         font-size: 15px;
         }
         }