@media screen and (max-width: 1080px) {
    nav {
      display: none;
    }
    .fa-bars {
      display: block !important;
    }
  }
  
  @media screen and (max-width: 900px) {
    .nav {
      flex-direction: column;
    }
  }

  @media screen and (max-width: 1390px) {
    .card {
      width: 330px;
    }
    .roles {
      justify-content: space-around;
    }
  }
  @media screen and (max-width: 850px) {
    .roles{
      flex-direction: column;
    }
  }
  @media screen and (max-width: 1100px) {
    .texxt{
      flex-direction: column;
    }
  }

  @media screen and (max-width: 760px) {
    .container1{
      width: 90px;
      height: 90px;
    }
    .fa-play{
      font-size: 40px;
    }
  }