.card {
       border-radius: 40px; 
       overflow: hidden;
       border: 0;
       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06),
                   0 2px 4px rgba(0, 0, 0, 0.07);
       transition: all 0.15s ease;
}
.card:hover {
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.1),
                0 10px 8px rgba(0, 0, 0, 0.015);
}
.card-body .card-title {
                  font-family: 'Lato', sans-serif;
                  font-weight: 700;
                  letter-spacing: 0.3px;
                  font-size: 15px;
                  color: #121212;
}
.card-text {
             font-family: 'Lato', sans-serif;
             font-weight: 400;
             font-size: 15px;
             letter-spacing: 0.3px;
             color: #4E4E4E;
  
}
@media only screen and (min-width: 1200px) {
  .img-container img {
              padding: 65px;  
              margin-top: -40px;
              margin-bottom: -40px;
              transition: 0.4s ease;
              cursor: pointer;
  }
  .card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    height: 10vw;
  }
  .details-btn {
  transition: all .5s ease;
  color: #3aa1ff;
  text-align: center;
  line-height: 1;
  font-size: 18px;
  background-color: white;
  padding: 5px 25px 5px 25px !important;
  outline: none;
  border-radius: 15px;
  font-weight: 450;
  border: none;
  box-shadow: 0 2px 20px rgba(65, 165, 252, 0.06),
                   0 2px 4px rgba(65, 165, 252, 0.07);
}
}
@media only screen and (max-width: 600px) {
  .img-container img {
              padding: 5px;  
              margin-top: -40px;
              margin-bottom: -40px;
              transition: 0.4s ease;
              cursor: pointer;
              width: 60%;
              height: 60%;
  }
  .card-body {
    flex: 1 1 auto;
    padding: 1.25rem;
    height: 30vw;
  }
  .details-btn {
  display:none;
}
}

.card .img-container {
           width: 88%;
          background: #F0EEF8;
           border-radius: 30px;
           height: 140px;
         display: flex;
        align-items: center;
         justify-content: center;
}

.img-container:hover > img {
                       transform: scale(1.2);
}
.card-img-top{
  height: 12vw;
  width: 16vw;
}

.btn {
      background: #EEECF7;
      border: 0;
      color: #5535F0;
      width: 98%;
      font-weight: bold;
      border-radius: 20px;
      height: 40px;
      transition: all 0.2s ease;
}

.btn:hover {
            background: #441CFF;
}

.btn:focus {
            background: #441CFF;
            outline: 0;  
}
 .card-content{
  height:6vw;
 }

.details-btn:hover {
  color: #EE2BC5;
  background-color: #fff;
  border: none;
  box-shadow: 0 2px 20px rgba(247, 94, 215, 0.09), 0 2px 4px rgba(252, 65, 223, 0.09);
}
.ribbon-wrapper {
  height: 70px;
  overflow: hidden;
  position: absolute;
  right: -2px;
  top: -2px;
  width: 70px;
  z-index: 10;
}
.ribbon-wrapper .ribbon {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  font-size: 0.8rem;
  line-height: 100%;
  padding: 0.375rem 0;
  position: relative;
  right: -2px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
  text-transform: uppercase;
  top: 10px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 90px;
}

.ribbon-wrapper .ribbon::before, .ribbon-wrapper .ribbon::after {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid #9e9e9e;
  bottom: -3px;
  content: '';
  position: absolute;
}

.ribbon-wrapper .ribbon::before {
  left: 0;
}

.ribbon-wrapper .ribbon::after {
  right: 0;
}