.review-card {
    background-color: #eaeeff;
    height: 200px;
    border-radius: 120px;
    padding: 20px;
    position: relative;
    overflow: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
  }

  .review-card .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    margin-right: 20px;
  }

  .review-card .content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .review-card .card-desc {
    margin: 0;
    position: absolute;
    bottom: 20px;
  }

  .review-card .rating {
    position: absolute;
    top: 25px;
    right: 100px;
  }

  .review-card:hover .rating img {
    filter: brightness(0) invert(1); 
  }

  .review-card .rating img {
    width: 40px;
    height: auto;
    transition: filter 0.35s;
  }

  .review-card:hover {
    background-color: #9747FF;
    color: #FFFFFF;
  }

  .review-card:hover .card-desc {
    color: #FFFFFF;
  }  

  .review-card:hover .card-desc::after {
    display: block;
    color: #fff;
  }

  
  .card-desc::before {
    content: "IN ENGLISH";
    visibility: hidden;
  }
  
  
  .review-card:hover .card-desc::before {
    visibility: visible;
  }
  

  /* 1 */

  .card-header1 {
    color: #9747FF;
    margin-top: 0;
    position: absolute;
    font-size: 48px;
    top: 30px;
    left: 250px;
  }

  .review-card:hover .card-header1 {
    color: #fff;
    visibility: hidden;
  }

  .card-header1::before {
    content: "Нгуен, 17 лет";
    visibility: hidden;
    position: absolute;
    text-align: left;
  }

  .review-card:hover .card-header1::before {
    visibility: visible;
  }


  .review-card .card-desc1 {
    margin: 0;
    position: absolute;
    bottom: 30px;
    text-align: left;
    left: 250px;
    width: 770px;
    font-size: 24px;
  }

  .review-card:hover .card-desc1 {
    color: #FFFFFF;
    visibility: hidden;
  }  

  .review-card:hover .card-desc1::after {
    display: block;
    color: #fff;
  }

  .card-desc1::before {
    content: "Раньше я не учил никакие языки, но мне пришлось сдавать экзамен в колледж. Я обнаружил, что изучать несколько языков сразу будет проще. Я выбрал корейский и японский и ни о чем не жалею.";
    visibility: hidden;
    position: absolute;
    text-align: left;
  }

  .review-card:hover .card-desc1::before {
    visibility: visible;
  }

  /* 2 */

  .card-header2 {
    color: #9747FF;
    margin-top: 0;
    position: absolute;
    font-size: 48px;
    text-align: left;
    top: 30px;
    left: 250px;
    width: 250px;
  }

  .review-card:hover .card-header2 {
    color: #fff;
    visibility: hidden;
  }

  .card-header2::before {
    content: "Энн, 30 лет";
    visibility: hidden;
    position: absolute;
    text-align: left;
    width: 250px;
  }

  .review-card:hover .card-header2::before {
    visibility: visible;
  }

  .review-card .card-desc2 {
    margin: 0;
    position: absolute;
    bottom: 30px;
    text-align: left;
    left: 250px;
    width: 770px;
    font-size: 24px;
  }

  .review-card:hover .card-desc2 {
    color: #FFFFFF;
    visibility: hidden;
  }  

  .review-card:hover .card-desc2::after {
    display: block;
    color: #fff;
  }

  .card-desc2::before {
    content: "В школе моим вторым языком был испанский, а английского я совсем не знала. Английский нужен мне в работе, но я не также хотела терять и навыки испанского. Это приложение очень помогло мне, спасибо!";
    visibility: hidden;
    position: absolute;
    text-align: left;
  }

  .review-card:hover .card-desc2::before {
    visibility: visible;
  }

  /* 3 */

  .card-header3 {
    color: #9747FF;
    margin-top: 0;
    position: absolute;
    font-size: 48px;
    text-align: left;
    top: 30px;
    left: 250px;
  }

  .review-card:hover .card-header3 {
    color: #fff;
    visibility: hidden;
  }

  .card-header3::before {
    content: "Мэри, 57 лет";
    visibility: hidden;
    position: absolute;
    text-align: left;
  }

  .review-card:hover .card-header3::before {
    visibility: visible;
  }

  .review-card .card-desc3 {
    margin: 0;
    position: absolute;
    bottom: 30px;
    text-align: left;
    left: 250px;
    width: 770px;
    font-size: 24px;
  }

  .review-card:hover .card-desc3 {
    color: #FFFFFF;
    visibility: hidden;
  }  

  .review-card:hover .card-desc3::after {
    display: block;
    color: #fff;
  }

  .card-desc3::before {
    content: "Мои внуки - двуязычные метисы, они почти не знают греческого. Я хочу лучше понимать их, и это приложение очень помогло мне в этом, несмотря на то, что я уже стара.";
    visibility: hidden;
    position: absolute;
    text-align: left;
  }

  .review-card:hover .card-desc3::before {
    visibility: visible;
  }

  /* Media bread */

  @media (max-width: 1200px) {
    .review-card .card-header1 {
      font-size: 40px;
      left: 250px;
    }
    .review-card .card-desc1 {
      width: 600px;
      font-size: 20px;
      left: 250px;
    }
    .review-card .rating img {
      width: 40px;
    }
    .review-card .card-header2 {
      font-size: 28px;
      left: 250px;
    }
    .review-card .card-desc2 {
      width: 600px;
      font-size: 16px;
      left: 250px;
    }
    .review-card .card-header3 {
      font-size: 28px;
      left: 250px;
    }
    .review-card .card-desc3 {
      width: 600px;
      font-size: 16px;
      left: 250px;
    }
  }
  
  @media (max-width: 992px) {
    .review-card .card-header1 {
      font-size: 32px;
      left: 250px;
    }
    .review-card .card-desc1 {
      width: 500px;
      font-size: 18px;
      left: 250px;
    }
    .review-card .rating img {
      width: 30px;
    }
    .review-card .card-header2 {
      font-size: 28px;
      left: 250px;
    }
    .review-card .card-desc2 {
      width: 500px;
      font-size: 16px;
      left: 250px;
    }
    .review-card .card-header3 {
      font-size: 28px;
      left: 250px;
    }
    .review-card .card-desc3 {
      width: 500px;
      font-size: 16px;
      left: 250px;
    }
  }
  
  @media (max-width: 768px) {
    .review-card {
      border-radius: 50px;
    }
    .review-card .avatar {
      width: 120px;
      height: 120px;
    }
    .review-card .card-header1 {
      font-size: 20px;
      left: 180px;
      top:auto;
    }
    .review-card .card-desc1 {
      width: 300px;
      font-size: 14px;
      left: 200px;
    }
    .review-card .rating img {
      width: 20px;
    }
    .review-card .rating {
      right: 50px;
    }
    .review-card .card-header2 {
      font-size: 20px;
      left: 180px;
      top:auto;
    }
    .review-card .card-desc2 {
      width: 300px;
      font-size: 14px;
      left: 200px;
    }
    .review-card .card-header3 {
      font-size: 20px;
      left: 180px;
      top:auto;
    }
    .review-card .card-desc3 {
      width: 300px;
      font-size: 14px;
      left: 200px;
    }
  }
  
  @media (max-width: 576px) {
    .review-card {
      border-radius: 50px;
    }
    .review-card .avatar {
      width: 120px;
      height: 120px;
    }
    .review-card .card-header1 {
      font-size: 20px;
      left: 180px;
      top:auto;
    }
    .review-card .card-desc1 {
      width: 300px;
      font-size: 14px;
      left: 180px;
    }
    .review-card .rating img {
      width: 20px;
    }
    .review-card .rating {
      right: 50px;
    }
    .review-card .card-header2 {
      font-size: 20px;
      left: 180px;
      top:auto;
    }
    .review-card .card-desc2 {
      width: 300px;
      font-size: 14px;
      left: 180px;
    }
    .review-card .card-header3 {
      font-size: 20px;
      left: 180px;
      top: auto;
    }
    .review-card .card-desc3 {
      width: 300px;
      font-size: 14px;
      left: 180px;
    }
  }