
                .team{
                    width:14rem;
                    height:18rem;
                    overflow:hidden;
                    border: 2px solid #2D0653;
                    border-radius: 5%;
                    position: relative;
                    cursor: pointer;
                    
                }
                .team::before{
                    content: '';
                    background-image: url(images/head/director.jpg);
                    background-position:center;
                    position: absolute;
                    top: 50;
                    left: 30;
                    bottom: 20;
                    right: 90;
                    z-index: 1;
                    cursor: pointer;
                    filter: blur(1px);
                }
               .team img{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 14rem;
                    height: 18rem;
                    border-radius: 16px;
                    z-index: 3;
                    object-fit: cover;
                    border: none;
                }
               .team:hover img{
                    width: 7rem;
                    height: 7rem;
                    border: 2px solid #2D0653;
                    left: 54px;
                    top: 40px;
                    cursor: pointer;
                }
           .team .info{
                    background-color: white;
                    position: absolute;
                    bottom: 0px;
                    left: 0;
                    right: 0;
                    z-index: 2;
                    color:black;
                    padding: 7%;
                    border-top: 8px solid #2D0653;
                    border-radius: 50% 50% 0px 0px;
                    text-align: center;
                    padding-top: 100px;
                    
                }
                   .team .name{
                    font-size:15px;
                    text-transform: capitalize;
                    margin-top: -30%;
                    font-weight: bold;
                }
                .team .title{
                    color: grey;
                    text-transform: capitalize;
                }
                .team:hover .info{
                    transform: scale(1);
                }
                .team .social{
                    
                    font-size:14px;
                }
                .team .social i{
                    display: inline-block;
                    width: 19%;
                    padding:5%;
                    background-color: #ededed;
                    border-radius: 16px;
                    margin: 5px;
                    cursor: pointer;
                }
                .team .social i:hover{
                    color:#2D0653;
                    background-color: white;
                    border: 1px solid #2D0653;
                }

                body {
                    font-family: 'lato', sans-serif;
                  }
                  
                  /*.container {
                    max-width: 1000px;
                    margin-left: auto;
                    margin-right: auto;
                    padding-left: 10px;
                    padding-right: 10px;
                  }*/
                  
                  h2 {
                    font-size: 26px;
                    margin: 20px 0;
                    text-align: center;
                  }
                  h2 small {
                    font-size: 0.5em;
                  }
                  
                  .responsive-table li {
                    border-radius: 3px;
                    padding: 25px 30px;
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 25px;
                  }
                  .responsive-table .table-header {
                    background-color:  #2D0653;
                    font-size: 14px;
                    text-transform: capitalize;
                    letter-spacing: 0.03em;
                    color: white;
                  }
                  .responsive-table .table-row {
                    background-color: #ffffff;
                    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.1);
                  }
                  .responsive-table .col-1 {
                    flex-basis: 10%;
                  }
                  .responsive-table .col-2 {
                    flex-basis: 40%;
                  }
                  .responsive-table .col-3 {
                    flex-basis: 25%;
                  }
                  .responsive-table .col-4 {
                    flex-basis: 25%;
                  }
                  @media all and (max-width: 767px) {
                    .responsive-table .table-header {
                      display: none;
                    }
                    .responsive-table li {
                      display: block;
                    }
                    .responsive-table .col {
                      flex-basis: 100%;
                    }
                    .responsive-table .col {
                      display: flex;
                      padding: 10px 0;
                    }
                    .responsive-table .col:before {
                       color: #2D0653;
                      padding-right: 10px;
                      content: attr(data-label);
                      flex-basis: 50%;
                      text-align: right;
                    }
                  }
                
                