.flexbox {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    flex-wrap: wrap;
  }
  
  .flexcard {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 30%;
    align-items: baseline;
    height: 340px;
    border-radius: 20px;
    margin: 30px;
  }
  
  .flexcardNumber {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    margin: 10px 0px;
    border-radius: 0px 50px 50px 0px;
    font-family: 'Jost', sans-serif;
    color: white;
    text-shadow: 0px 3px 5px black;
    font-weight:bold;
    font-size: 20px;
    position: relative;
  }
  
  .flexcardTitle {
    font-family: 'Jost', sans-serif;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    width: 70% !important;
  }
  
  .flexcardText {
    font-family: 'Jost', sans-serif;
    text-align: center;
    font-weight: 300;
  }
  
  .flexcardNumber:before {
    content: '';
    width: 34px;
    height: 90px;
    position: absolute;
    left: -33px;
    top: 0px;
    border-radius: 50px 0px 0px 50px;
    z-index: -1;
  /* background: #95B7A2; *//* background: -webkit-linear-gradient(bottom, #95B7A2, #D15B75); */
    background: -moz-linear-gradient(bottom, #95B7A2, #D15B75);
  /* background: linear-gradient(to top, #95B7A2, #D15B75); */;
  }
  
  .flexcardNumber:after {
    content: '';
    width: 25px;
    height: 40px;
    position: absolute;
    left: -25px;
    bottom: -40px;
    border-radius: 50px 0px 0px 50px;
    z-index: -1;
  }
  
  .flex {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px auto;
  }
  
  img.flexcardimgItem {
    /* width: 50%; */
    width: auto;
    height: 50px;
    /* border: 2px solid;
    border-radius: 20px; */
  }
  
  /* GREEN CARD */
  
  .flexcardGreen {
    /* background: #f9fbfa; */
    background: transparent;
    box-shadow: 4px 4px 4px #D15B75;
  }
  
  .flexcardNumberGreen {
    background: #FCFCFC;
    background: -webkit-linear-gradient(right, #FCFCFC, #D15B75);
    background: -moz-linear-gradient(right, #FCFCFC, #D15B75);
    background: linear-gradient(to left, #FCFCFC, #D15B75);
    box-shadow: 0px 2px 2px #D15B75;
  }
  
  .flexcardNumberGreen:before {
    background: #D15B75;
  }
  
  .flexcardNumberGreen:after {
    background: #95b7a2;
  }
  
  /* BLUE CARD */
  
  .flexcardBlue {
    /* background: #f7ffff; */
    background: transparent;
   box-shadow: 4px 8px 1px #FABC59;
  }
  
  .flexcardNumberBlue {
    background: #FDFFFE;
    background: -webkit-linear-gradient(right, #FDFFFE, #FABC59);
    background: -moz-linear-gradient(right, #FDFFFE, #FABC59);
    background: linear-gradient(to left, #FDFFFE, #FABC59);
    box-shadow: 0px 2px 2px #FABC59;
  }
  
  .flexcardNumberBlue:before {
    background: #FABC59;
  }
  
  .flexcardNumberBlue:after {
    background: #71bdbf;
  }
  
  /* ORANGE CARD */
  
  .flexcardOrange {
    /* background: #fdf8f3; */
    background: transparent;
   box-shadow: 4px 6px 1px #745195;
  }
  
  .flexcardNumberOrange {
    background: #FDFFFE;
    background: -webkit-linear-gradient(right, #FDFFFE, #745195);
    background: -moz-linear-gradient(right, #FDFFFE, #745195);
    background: linear-gradient(to left, #FDFFFE, #745195);
    box-shadow: 0px 2px 2px #745195;
  }
  
  .flexcardNumberOrange:before {
    background: #745195;
  }
  
  .flexcardNumberOrange:after {
    background: #d06f02;
  }
  
  /* PİNK CARD */
  
  .flexcardPink {
    /* background: #fffafd; */
    background: transparent;
    position: relative;
      box-shadow: 2px 2px 1px #F34EAE ;
      border-radius: 20px 20px 0px 20px;
  }
  .flexcardPink:before {
      content: '';
      width: 0px;
      height: 50px;
      /* background: red; */
      position: absolute;
      bottom: 0;
      right: 0;
      border-left: 100px solid transparent;
      border-bottom: 90px solid #F34EAE;
  }
  .flexcardNumberPink {
    background: #FDFFFE;
    background: -webkit-linear-gradient(right, #FDFFFE, #F34EAE);
    background: -moz-linear-gradient(right, #FDFFFE, #F34EAE);
    background: linear-gradient(to left, #FDFFFE, #F34EAE);
    box-shadow: 0px 2px 2px #F34EAE;
  }
  
  .flexcardNumberPink:before {
    background: #F34EAE;
  }
  
  .flexcardNumberPink:after {
    background: #d24095;
  }
  
  /* RESPONSİVE */
  
  @media only screen and (max-width: 800px) {
  
    .flexcard {
      width: 35%;
      margin-top: 20px;
    }
  
    img.flexcardimgItem {
      /* width: 30%; */
      width: auto;
    }
  
  }
  
  @media only screen and (max-width: 500px) {
  
    .flexcard {
      width: 70%;
    }
  
  
  }
  footer {
      display: flex;
      width: 100%;
      justify-content: center;
      margin: 50px;
      font-family: 'Jost', sans-serif;
      font-size: 15px;
  }
  .s1{
  top: -8px;
    position: relative;
  }