team.scss

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

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

body{
    width: 100%;
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background: #b8dae3;
    display: flex;
    justify-content: center;
    flex-direction: column;
}
a{
    text-decoration: none;
}


.h1-text{
    font-size: 1.3rem;
    margin: 40px 0;
    color: #2c2c2c;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

.h1-text i{
    background-color: #509bfc;
    color: #fff;
    width: 40px;
    height: 40px;
    box-shadow: 2px 5px 30px rgba(80, 123, 252, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    margin: 0 20px;
}

 .container{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
} 


.box{
    position: relative;
    min-width: 250px;
    background-color: #fff;
    box-shadow: 2px 3px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 20px;
    position: relative;
    border-radius: 10px;
}


.top-bar{
    width: 50%;
    height: 4px;
    background: #507bfc;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 0px 0px 10px 10px;
}

.top{
    display: flex;
    justify-content: space-between;
    align-items:center ;
    width: 100%;
}

.fa-check-circle{
    color: #17b667;
}

/* creating heart */
 .heart{
    color: rgba(155,155,155);
}
.heart::before{
    content: '\f004';
    font-family: fontawesome;
    line-height: 30px;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s;
}
.box .heart-btn:checked ~ .heart::before{
    color:#e41934
}
.heart-btn{
    position: absolute;
    top: 25px;
    right: 20px;
    padding: 1rem;
    display: none;
}


.content img{
    width: 90px;
    height: 90px;
    border-radius:100px;
    overflow: hidden;
    object-fit: cover;
    object-position: top;
}
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content strong{
    font-weight: 500;
    color: #141414;
    margin-top: 10px;
}
.content p{
    font-size: 0.9rem;
    color: #7a7a7a;
    margin: 4px 0px 10px 0px;
    cursor: pointer;
}
.content p:hover{
    text-decoration: underline;
}

.btn{
    margin-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.btn a i{
    margin-right: 9px;
}
.btn a{
    border-radius: 20px;
    color: #8b8b8b;
    padding: 8px 20px;
    font-size: 0.9rem;
}
.btn a:hover{
    color: #fff;
    box-shadow: 2px 5px 15px rgba(80,123,252,0.05);
    background-color: #507bfc;
    transition: all ease 0.5s;
}


/*** VARS ***/

$main-col: #c8c;
$sec-col: lighten(#303f9f, 20%);
$back-col: #c5cae9;



/*** GENERAL STYLES ***/

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body{
  font-family: 'Dosis', sans-serif;
  background: $back-col;
  text-align: center;
}
.clear{clear:both;}


/*** CARD STLES ***/

.cards-container{
  width: 793px;
  max-width: 100%;
  margin: 2rem auto;
}
.card{
 
  margin: 0rem;
}

.card-one{
  position: relative;
  width: 300px;
  background: #fff;
  box-shadow: 0 10px 7px -5px rgba(#000,.4);
  
  header{
    position: relative;
    width: 100%;
    height: 60px;
    background-color: $main-col;
    &::before, &::after{
      content: '';
      position: absolute;
      top: 0;bottom: 0;left: 0;right: 0;
      background: inherit;
    }
    &::before{
      -webkit-transform: skewY(-8deg);
      -moz-transform: skewY(-8deg);
      -ms-transform: skewY(-8deg);
      -o-transform: skewY(-8deg);
      transform: skewY(-8deg);
      -webkit-transform-origin: 100% 100%;
      -moz-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
      -o-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }
    &::after{
      -webkit-transform: skewY(8deg);
      -moz-transform: skewY(8deg);
      -ms-transform: skewY(8deg);
      -o-transform: skewY(8deg);
      transform: skewY(8deg);
      -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
      -o-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }
    .avatar{
      position: absolute;
      left: 50%;
      top: 30px;
      margin-left: -50px;
      z-index: 5;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      background: #ccc;
      border:3px solid #fff;
      img{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100px;
        height: auto;
      }
    }
  }

  h3{
    position: relative;
    margin: 80px 0 30px;
    text-align: center;
    &::after{
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      margin-left: -15px;
      width: 30px;
      height: 1px;
      background: #000;
    }
  }
  .desc{
    padding: 0 1rem 2rem;
    text-align: center;
    line-height: 1.5;
    color: #777;
  }
  .contacts{
    width: 200px;
    max-width: 100%;
    margin: 0 auto 3rem;
    a{
      display: block;
      width: 33.333333%;
      float: left;
      text-align: center;
      color: $main-col;
      &:hover{
        color: #333;
        .fa{
          &::before{
            color: #fff;
          }
          &::after{
            width: 100%;
            height: 100%;
          }
        }
      }
      .fa{
        position: relative;
        width: 40px;
        height: 40px;
        line-height: 39px;
        overflow: hidden;
        text-align: center;
        font-size: 1.3em;
        &:before{
          position: relative;
          z-index: 1;
        }
        &::after{
          content: '';
          position: absolute;
          top: 50%; left: 50%;
          width: 0; height: 0;
          -webkit-transform: translate(-50%,-50%);
          -moz-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
          -o-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
          background: $main-col;
          -webkit-transition: width .3s, height .3s;
          -moz-transition: width .3s, height .3s;
          -ms-transition: width .3s, height .3s;
          -o-transition: width .3s, height .3s;
          transition: width .3s, height .3s;
        }
      }
      &:last-of-type .fa{line-height: 36px;}
    }
  }
  
  footer{
    position: relative;
    padding: 1rem;
    background-color: $sec-col;
    text-align: center;
    a{
      padding: 0 1rem;
      color: #e2e2e2;
      -webkit-transition: color .4s;
      -moz-transition: color .4s;
      -ms-transition: color .4s;
      -o-transition: color .4s;
      transition: color .4s;
      &:hover{
        color: $main-col;
      }
    }
    &::before{
      content: '';
      position: absolute;
      top: -27px;
      left: 50%;
      margin-left: -15px;
      border: 15px solid transparent;
      border-bottom-color: $sec-col;
    }
  }
}

.card-two{
  position: relative;
  width: 300px;
  background: #fff;
  box-shadow: 0 10px 7px -5px rgba(#000,.4);
  
  header{
    position: relative;
    width: 100%;
    height: 60px;
    background-color: $main-col;
    &::after{
      content: '';
      position: absolute;
      top: 0;bottom: 0;left: 0;right: 0;
      background: inherit;
    
      -webkit-transform: skewY(8deg);
      -moz-transform: skewY(8deg);
      -ms-transform: skewY(8deg);
      -o-transform: skewY(8deg);
      transform: skewY(8deg);
      -webkit-transform-origin: 0 100%;
      -moz-transform-origin: 0 100%;
      -ms-transform-origin: 0 100%;
      -o-transform-origin: 0 100%;
      transform-origin: 0 100%;
    }
    .avatar{
      position: absolute;
      left: 50%;
      top: 30px;
      margin-left: -50px;
      z-index: 5;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      background: #ccc;
      border:3px solid #fff;
      img{
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 100px;
        height: auto;
      }
    }
  }

  h3{
    position: relative;
    margin: 80px 0 30px;
    text-align: center;
    &::after{
      content: '';
      position: absolute;
      bottom: -15px;
      left: 50%;
      margin-left: -15px;
      width: 30px;
      height: 1px;
      background: #000;
    }
  }
  .desc{
    padding: 0 1rem 2rem;
    text-align: center;
    line-height: 1.5;
    color: #777;
  }
  .contacts{
    width: 200px;
    max-width: 100%;
    margin: 0 auto 3.5rem;
    a{
      display: block;
      width: 33.333333%;
      float: left;
      text-align: center;
      color: $main-col;
      &:hover{
        color: #333;
        .fa{
          &::before{
            color: #fff;
          }
          &::after{
            top: 0;
          }
        }
      }
      .fa{
        position: relative;
        width: 40px;
        height: 40px;
        line-height: 39px;
        overflow: hidden;
        text-align: center;
        border: 2px solid $main-col;
        border-radius: 50%;
        &:before{
          position: relative;
          z-index: 1;
        }
        &::after{
          content: '';
          position: absolute;
          top: -50px; left: 0;
          width: 100%; height: 100%;
          -webkit-transition: top .3s;
          -moz-transition: top .3s;
          -ms-transition: top .3s;
          -o-transition: top .3s;
          transition: top .3s;
          background: $main-col;
        }
      }
      &:last-of-type .fa{line-height: 36px;}
    }
  }
  
  footer{
    position: relative;
    height: 45px;
    background-color: $sec-col;
    text-align: center;
    p{
      position: absolute;
      bottom: 0; left: 0;
      width: 100%;
      z-index: 1;
      a{
        padding: 0 1rem;
        color: #e2e2e2;
        -webkit-transition: color .4s;
        -moz-transition: color .4s;
        -ms-transition: color .4s;
        -o-transition: color .4s;
        transition: color .4s;
        &:hover{
          color: $main-col;
        }
      }
    }
    &::before{
      z-index: 0;
      content: '';
      position: absolute;
      top: 0px;bottom: 0;left: 0;right: 0;
      background: inherit;
    
      -webkit-transform: skewY(8deg);
      -moz-transform: skewY(8deg);
      -ms-transform: skewY(8deg);
      -o-transform: skewY(8deg);
      transform: skewY(8deg);
      -webkit-transform-origin: 100%;
      -moz-transform-origin: 100%;
      -ms-transform-origin: 100%;
      -o-transform-origin: 100%;
      transform-origin: 100%;
    }
  }
}


/*** RESPONSIVE ***/

@media only screen and (max-width: 810px) {
  .card {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}
.sir{
  display: flex;
  justify-content:center ;
}