.containerr i {
    opacity: 0;
    font-size: 28px;
    color: #1F1E1E;
    will-change: transform;
    -webkit-transform: scale(.1);
            transform: scale(.1);
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  
  .btn_wrapp {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    overflow: hidden;
    cursor: pointer;
    width: 240px;
    height: 40px;
    background-color: #EEEEED;
    border-radius: 80px;
    padding: 0 18px;
    will-change: transform;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  }
  
  .btn_wrapp:hover {
    /* transition-delay: .4s; */
    -webkit-transform: scale(1.1);
            transform: scale(1.1)
  }
  
  small {
    position: absolute;
    z-index: 99;
    width: 240px;
    height: 72px;
    border-radius: 80px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    text-align: center;
    line-height: 70px;
    letter-spacing: 1px;
    color: #EEEEED;
    background-color: #1F1E1E;
    padding: 0 18px;
    -webkit-transition: all 1.2s ease;
    transition: all 1.2s ease;
  }
  
  .containerr {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
        justify-content: space-around;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 240px;
    height: 64px;
    border-radius: 80px;
  }
  
  .containerr i:nth-of-type(1) {
            -webkit-transition-delay: 1.1s;
                    transition-delay: 1.1s;
  }
  
  .containerr i:nth-of-type(2) {
            -webkit-transition-delay: .9s;
                    transition-delay: .9s;
  }
  
  .containerr i:nth-of-type(3) {
            -webkit-transition-delay: .7s;
                    transition-delay: .7s;
  }
  
  .containerr i:nth-of-type(4) {
            -webkit-transition-delay: .4s;
                    transition-delay: .4s;
  }
  
  .btn_wrapp:hover small {
    -webkit-transition-delay: .25s;
            transition-delay: .25s;
    -webkit-transform: translateX(-280px);
            transform: translateX(-280px)
  }
  
  .btn_wrapp:hover i {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  
  
  .dr {
  position: absolute;
  bottom: 16px; 
  right: 16px;
  width:100px;
  }
  
  /* this css use for social media btn */
  .social-continerr {
  display: flex;
    justify-content: center;
  }