@import url(https://fonts.googleapis.com/css?family=Lato);

.line {
  margin: 20px 0;
  width: 90%;
}

.section-title {
  font-size: x-large;
  text-align: center;
  font-weight: bold;
}

.simulators-section {
  display: flex;
  flex-direction: column;
  align-items: center;

  width: 95%;
  margin-bottom: 40px;
}

.container__of__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
  width: 90%;
}

.card {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  max-width: 280px;
  position: relative;
  transition: 0.4s;
  border-radius: 20px;
   /*margin: 10px;*/
  text-decoration: none;
  color: #11101d;
  background-color: #e4e9f7;
  padding-top: 20px;
  transition: box-shadow 0.5s;
  overflow: hidden;
  /* background: linear-gradient(145deg, #cdd2de, #f4f9ff); */
}

.card:hover,
.card:focus {
  box-shadow: 0px 15px 30px -5px rgb(34 60 80 / 20%);
  /* box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; */

  /* box-shadow: 20px 20px 60px #c2c6d2, -20px -20px 60px #ffffff; */
}

.card:hover > .card-img,
.card:focus > .card-img {
  transform: scale(1.2);
}

.card-img {
  width: 50%;
  transition: transform 0.4s;
}



.card:hover > .card {
  color: #4A61A1;
}

.card-title {
  text-align: center;
  font-size: x-large;
  margin: 5px 12px 20px 12px;
  color: #111111;
  transition: font-size 0.4s;
}


@media (min-width: 700px) {
  .task {
    padding-top: 40px;
  }
}