* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

section.top-nav {
  padding: 0;

}
.row-top{
  margin-top: 105px;
  margin-bottom: 40px;
}
  .row {
    display: flex;
    flex-wrap: wrap;
    /* padding: 2em 1em; */
    text-align: center;
    
  }
  .column {
    width: 100%;
    /* padding: 0.5em 0; */
    
  }
  h1 {
    width: 100%;
    text-align: center;
    font-size: 3.5rem;
    color: #1f003b;
  }
  .card {
    box-shadow: 0 0 3em rgba(208, 9, 9, 0.1);
    padding: 2.5em 1em;
    border-radius: 0.6em;
    color: #1f003b;
    cursor: pointer;
    transition: 0.3s;
    background-color: #f6eee3;
    /* margin: 2px solid rgb(235, 42, 249); */
    
  }
  .card .img-container {
    width: 13em;
    height: 14em;
    background-color:#f6e3e3;
    /* padding: 0.5em; */
    border-radius: 50%;
    margin: 0 auto;
    
  }
  .card img {
    width:100%;
    height:14em;
    border-radius: 50%;
    z-index:-1 ;
  }
  .card h3 {
    font-weight: 500;
    margin-top:0.8em;
  }
  .card p {
    font-weight: 300;
    text-transform: uppercase;
    /* margin: 0.5em 0 2em 0; */
    letter-spacing: 0.1rem;
    font-weight: 450;
  }
  .icons {
    width: 50%;
    min-width: 180px;
    margin: auto;
    display: flex;
    justify-content: space-between;
  }
  .card a {
    text-decoration: none;
    color: inherit;
    font-size: 1.4em;
  }
  /* .card:hover {
    background: radial-gradient(#FFEB00,#FF7722);
    color: #000000;
    font-size: 17px;
    font-weight: 900;
  }

  .card:hover #info{
    font-weight: 400;
  }
  .card:hover .img-container {
     transform: scale(1.05);
  } */
  
  .card:hover{
    box-shadow:   8px 8px 20px 0px rgba(0, 0, 0, 0.5); ;
  }

  .card hr{
    width:30%;
    margin:0px auto;
    margin-bottom:0.8em;
    background-color:#d6c8e2;
  }
  @media screen and (min-width: 375px) {
    .card img {
      width: 100%;
      border-radius: 50%;
      z-index:-1 ;
    }
    .card .img-container {
      width: 12em;
      height: 14em;
      background-color: #f6e3e3;
      /* padding: 0.5em; */
      border-radius: 50%;
      margin: 0 auto 1.5em auto;
    }
    section {
      padding: 1em 4em;
    }
  }

  @media screen and (min-width: 300px) {
    .card{
      margin-bottom: 3em;
    }
    section {
      padding: 1em 4em;
    }
    .card .img-container {
      width: 10em;
      height: 12em;
      background-color: #f6e3e3;
      /* padding: 0.5em; */
      border-radius: 50%;
      margin: 0 auto 1.5em auto;
    }
  }
  
  @media screen and (min-width: 992px) {
    section {
      padding: 1em 3em;
    }
    .card {
      padding: 3em 1em;
      margin-bottom: 35px;
    }
    .column {
      flex: 0 0 33.33%;
      max-width: 33.33%;
      padding: 0 1em;
      margin: 0 auto 1.5em auto;
    }
  }