.style1 {
  display: flex;
  justify-content: end;
  align-items: center;
}
.style1 .thf-social-icon-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.style1 .thf-social-icon-box a {
  background: #fff;
  position: relative;
  border-radius: 50%;
  -webkit-box-shadow: 0 0 30px -1px #ddd;
          box-shadow: 0 0 30px -1px #ddd;
  color: #000;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-align: center;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  width: 30px;
  font-size: 15px;
  z-index: 2;
}

.style1 .thf-social-icon-box a:hover {
  color: #fff;
}

.style1 .thf-social-icon-box a:hover:before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.style1 .thf-social-icon-box a:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  border-radius: 50%;
  left: 0;
  top: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: crimson;
  -webkit-transform: scale(0);
          transform: scale(0);
  z-index: -1;
}

.style2 {
  display: flex;
  justify-content: end;
  align-items: center;
}
.style2 .thf-social-icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.style2 .thf-social-icon-box a {
  background: #dc3545;
  color: #fff;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 30px;
  font-size: 15px;
}

.style2 .thf-social-icon-box a:hover {
  border-radius: 0 15px 0 15px;
  -webkit-box-shadow: 0 0 5px #c82626;
          box-shadow: 0 0 5px #c82626;
}

.style3 {
  display: flex;
  justify-content: end;
  align-items: center;
}
.style3 .thf-social-icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.style3 .thf-social-icon-box a {
  background: #7470f7;
  color: #fff;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  -webkit-transition: all .3s;
  transition: all .3s;
  width: 30px;
  border-radius: 8px;
  font-size: 15px;
}

.style3 .thf-social-icon-box a:hover {
  color: #fff;
  background-color: #ff761b;
  -webkit-box-shadow: 0 0 0 5px #d8c7c8;
          box-shadow: 0 0 0 5px #d8c7c8;
}

.style4 {
  display: flex;
  justify-content: end;
  align-items: center;
}
.style4 .thf-social-icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.style4 .thf-social-icon-box a {
  position: relative;
  color: #000;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  border: 2px solid #000;
  text-align: center;
  width: 30px;
  border-radius: 50%;
  font-size: 15px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  overflow: hidden;
}

.style4 .thf-social-icon-box a:hover {
  color: #fff;
}

.style4 .thf-social-icon-box a:hover:before {
  bottom: 0;
}

.style4 .thf-social-icon-box a::before {
  position: absolute;
  content: '';
  left: 0;
  bottom: -100%;
  height: 100%;
  width: 100%;
  z-index: -1;
  -webkit-transition: .4s;
  transition: .4s;
}

.style4 .thf-social-icon-box a:hover i {
  -webkit-transform: rotateY(360deg);
          transform: rotateY(360deg);
}

.style4 .thf-social-icon-box a i {
  -webkit-transition: .4s;
  transition: .4s;
}

.style4 .thf-social-icon-box a:nth-child(1):before {
  background: #55acee;
}

.style4 .thf-social-icon-box a:nth-child(2):before {
  background: #3b5998;
}

.style4 .thf-social-icon-box a:nth-child(3):before {
  background: #DA1884;
}

.style4 .thf-social-icon-box a:nth-child(4):before {
  background: #BD081C;
}

.style4 .thf-social-icon-box a:nth-child(5):before {
  background: #007bb5;
}

.style5 {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-basis: 25%;
}
.style5 .thf-social-icon-box{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.style5 .thf-social-icon-box a {
  position: relative;
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fbba42;
  font-size: 15px;
  border-radius: 30% 70% 70% 30% / 30% 45% 55% 70%;
  color: #000;
  -webkit-transition: .5s;
  transition: .5s;
}

.style5 .thf-social-icon-box a:hover {
  border-radius: 57% 43% 31% 69% / 54% 61% 39% 46%;
  background: #198754c2;
  color: #fff;
}

@-webkit-keyframes animatec {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

@keyframes animatec {
  0%, 100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}

/*# sourceMappingURL=style.css.map */


/* ferdaus */
.thf-social-icon-box a{
  width: 30px !important;
}
/* ferdaus */