.box-counter .icon-box-text .count-box {
	font-size: 30px;
	font-weight: bolder;
}

/* Miliweb btn-c */

.btn-holder {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 1000px;
}
.btn {
	position: relative;
	display: inline-block;
	width: auto; height: auto;
	background-color: transparent;
	border: none;
	cursor: pointer;	
  margin-bottom:1em;
  margin-right: 1em;
}
.btn span.main-btn {         
	position: relative;
	display: inline-block;
	font-weight: bold;
	top: 0; left: 0;
	width: 100%;
	transition: 0.3s;
	padding: 10px 30px;
}
.btn span.before, .btn span.after {
  content: '';
  position: absolute;
}
/*--- btn-1 ---*/
.btn-1 .before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}
.btn-1 span.main-btn {
  color: rgb(255,255,255);
  border: 1px solid rgb(28, 31, 30);
  transition: 0.2s 0.1s;
}
.btn-1 .main-btn:hover {
  color: var(--hover-color);
  transition: 0.2s 0.1s;
}

/* 1.hover-filled-slide-down */
.btn.hover-filled-slide-down .before {
  bottom: 0; left: 0; right: 0; 
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-down:hover .before {
  height: 0%;
}

/* 2.hover-filled-slide-up */
.btn.hover-filled-slide-up .before {
  top: 0; left: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-up:hover .before {
  height: 0%;
}

/* 3.hover-filled-slide-left */
.btn.hover-filled-slide-left .before {
  top: 0; bottom: 0; left: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-left:hover .before {
  width: 0%;
}

/* 4. hover-filled-slide-right */
.btn.hover-filled-slide-right .before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
}
.btn.hover-filled-slide-right:hover .before {
  width: 0%;
}

/* 5. hover-filled-opacity */
.btn.hover-filled-opacity .before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 1;
}
.btn.hover-filled-opacity:hover .before {
  opacity: 0;
}

/*--- btn-2 ---*/
.btn-2 .before {
  background-color: rgb(28, 31, 30);
  transition: 0.3s ease-out;
}
.btn-2 .main-btn {
  color: rgb(28, 31, 30);
  border: 1px solid rgb(28, 31, 30);
  transition: 0.2s;
}  
.btn-2 .main-btn:hover {
  color: rgb(255,255,255) !important;
  transition: 0.2s 0.1s;
}

/* 6. hover-slide-down */
.btn.hover-slide-down .before {
  top: 0; left: 0; right: 0; 
  height: 0%; width: 100%;
}
.btn.hover-slide-down:hover .before {
  height: 100%;
}

/* 7. hover-slide-up */
.btn.hover-slide-up .before {
  bottom: 0; left: 0; right: 0; 
  height: 0%; width: 100%;
}
.btn.hover-slide-up:hover .before {
  height: 100%;
}

/* 8. hover-slide-left */
.btn.hover-slide-left .before {
  top: 0; bottom: 0; right: 0; 
  height: 100%; width: 0%;
}
.btn.hover-slide-left:hover .before {
  width: 100%;
}

/* 9. hover-slide-right */
.btn.hover-slide-right .before {
  top: 0; bottom: 0; left: 0; 
  height: 100%; width: 0%;
}
.btn.hover-slide-right:hover .before {
  width: 100%;
}

/* 10. hover-opacity */
.btn.hover-opacity .before {
  top:0; bottom: 0; right: 0;
  height: 100%; width: 100%;
  opacity: 0;
}
.btn.hover-opacity:hover .before {
  opacity: 1;
}

/*--- btn-3 ---*/
.btn-3 {
  padding: 5px;
}
.btn-3 .main-btn {
  color: rgb(255, 255, 255);
  background-color: rgb(54, 56, 55);
}
.btn-3 .before,
.btn-3 .after {
  background: transparent;
  z-index: 2;
}

/* 11. hover-border-1 */
.btn.hover-border-1 .before,
.btn.hover-border-1 .after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-1 .before {
  top: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1 .after {
  bottom: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-1:hover .before,
.btn.hover-border-1:hover .after {
  width: 99%;
  height: 98%;
}

/* 12. hover-border-2 */
.btn.hover-border-2 .before,
.btn.hover-border-2 .after {
  width: 10%; height: 25%;
  transition: 0.35s;
}
.btn.hover-border-2 .before {
  bottom: 0; left: 0;
  border-left: 1px solid rgb(28, 31, 30);
  border-bottom: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2 .after {
  top: 0; right: 0;
  border-right: 1px solid rgb(28, 31, 30);
  border-top: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-2:hover .before,
.btn.hover-border-2:hover .after {
  width: 99%;
  height: 99%;
}

/* 13. hover-border-3 */
.btn.hover-border-3 .before,
.btn.hover-border-3 .after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s 0.15s linear, height 0.15s linear, opacity 0s 0.35s;
}
.btn.hover-border-3 .before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3 .after {
  bottom: 0; left: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-3:hover .before,
.btn.hover-border-3:hover .after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s linear, height 0.15s 0.2s linear, opacity 0s;   
}

/* 14. hover-border-4 */
.btn.hover-border-4 .before,
.btn.hover-border-4 .after {
  width: 0%; height: 0%;
  opacity: 0;
  transition: width 0.2s linear, height 0.15s 0.2s ease-out, opacity 0s 0.35s;
}
.btn.hover-border-4 .before {
  bottom: 0; left: -1px;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4 .after {
  top: 0; right: 0;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
}
.btn.hover-border-4:hover .before,
.btn.hover-border-4:hover .after {
  width: 100%; height: 99%;
  opacity: 1;
  transition: width 0.2s 0.15s ease-out, height 0.15s ease-in, opacity 0s;   
}

/* 15. hover-border-5 */
.btn.hover-border-5 .before,
.btn.hover-border-5 .after {
  width: 0%; height: 0%;
  opacity: 0;
}
.btn.hover-border-5 .before {
  top: 0; right: 0;
  border-top: 1px solid rgb(28, 31, 30);
  border-left: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.5s ease-out, height 0.15s 0.35s linear, opacity 0s 0.7s;
}
.btn.hover-border-5 .after {
  bottom: 0; left: 0px;
  border-bottom: 1px solid rgb(28, 31, 30);
  border-right: 1px solid rgb(28, 31, 30);
  transition: width 0.2s 0.15s linear, height 0.15s ease-in, opacity 0s 0.35s;
}
.btn.hover-border-5:hover .before,
.btn.hover-border-5:hover .after {
  width: 100%; height: 96%;
  opacity: 1;
}
.btn.hover-border-5:hover .before {
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s;   /* 1,2 */
}
.btn.hover-border-5:hover .after {
  transition: width 0.2s 0.35s linear, height 0.15s 0.5s ease-out, opacity 0s 0.3s; 
} 

/*--- btn-4 ---*/
.btn-4 span {
  color: rgb(28, 31, 30);
  background-color: rgb(245,245,245);
}
.btn-4 span:hover {
  color: rgb(54, 56, 55);
}
.btn-4 .before,
.btn-4 .after {
  width: 15%; height: 2px;
  background-color: rgb(54, 56, 55);
  z-index: 2;
}

/* 16. hover-border-6 */
.btn.hover-border-6 .before,
.btn.hover-border-6 .after {
  top: 0;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-6 .before {
  right: 50%;
}
.btn.hover-border-6 .after {
  left: 50%;
}
.btn.hover-border-6:hover .before,
.btn.hover-border-6:hover .after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-6 span .before,
.btn.hover-border-6 span .after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-6 span .before {
  top: 0; left: 0;
  border-left: 2px solid rgb(54, 56, 55);
  border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span .after {
  top: 0; right: 0;
  border-right: 2px solid rgb(54, 56, 55);
  border-bottom: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-6 span:hover .before,
.btn.hover-border-6 span:hover .after {
  width: 50%; height: 96%;
  opacity: 1;
  transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
}

/* 17. hover-border-7 */
.btn.hover-border-7 .before,
.btn.hover-border-7 .after {
  bottom: 0;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-7 .before {
  right: 50%;
}
.btn.hover-border-7 .after {
  left: 50%;
}
.btn.hover-border-7:hover .before,
.btn.hover-border-7:hover .after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-7 span .before,
.btn.hover-border-7 span .after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;
}
.btn.hover-border-7 span .before {
  bottom: 0; left: 0;
  border-left: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span .after {
  bottom: 0; right: 0;
  border-right: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
}
.btn.hover-border-7 span:hover .before,
.btn.hover-border-7 span:hover .after {
  width: 50%; height: 96%;
  opacity: 1;
  transition: height 0.2s 0.2s ease-in, width 0.2s 0.4s linear, opacity 0s 0.2s;   
}

/* 18. hover-border-8 */
.btn.hover-border-8 .before,
.btn.hover-border-8 .after {
  bottom: 0;
  width: 15%;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-8 .before {
  right: 50%;
}
.btn.hover-border-8 .after {
  left: 50%;
}
.btn.hover-border-8:hover .before {
  width: 50%;
  transition: width 0.2s ease-in;   
}
.btn.hover-border-8:hover .after {
  width: 50%;
  transition: width 0.1s ease-in;   
}

.btn.hover-border-8 span .before,
.btn.hover-border-8 span .after {
  width: 0%; height: 0%;
  bottom: 0;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-8 span .before {
  left: 0%;
  border-left: 2px solid rgb(54, 56, 55);
  transition: height 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-8 span:hover .before {
  height: 96%;
  opacity: 1;
  transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-8 span .after {
  right: 0%;
  border-right: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
}
.btn.hover-border-8 span:hover .after {
  width: 99%; height: 96%;
  opacity: 1;
  transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
}

/* 19. hover-border-9 */
.btn.hover-border-9 .before,
.btn.hover-border-9 .after {
  bottom: 0;
  width: 15%;
  transition: width 0.2s 0.35s ease-out;
}
.btn.hover-border-9 .before {
  right: 50%;
}
.btn.hover-border-9 .after {
  left: 50%;
}
.btn.hover-border-9:hover .before {
  width: 50%;
  transition: width 0.1s ease-in;   
}
.btn.hover-border-9:hover .after {
  width: 50%;
  transition: width 0.2s ease-in;   
}

.btn.hover-border-9 span .before,
.btn.hover-border-9 span .after {
  width: 0%; height: 0%;
  bottom: 0;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-9 span .after {
  right: 0%;
  border-right: 2px solid rgb(54, 56, 55);
  transition: height 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-9 span:hover .after {
  height: 96%;
  opacity: 1;
  transition: height 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-9 span .before {
  left: 0%;
  border-left: 2px solid rgb(54, 56, 55);
  border-top: 2px solid rgb(54, 56, 55);
  transition: width 0.2s ease-in, height 0.15s 0.2s linear, opacity 0s 0.35s;   
}
.btn.hover-border-9 span:hover .before {
  width: 98.5%; height: 96%;
  opacity: 1;
  transition: height 0.15s 0.1s linear, width 0.2s 0.25s linear, opacity 0s 0.1s;   
}

/* 20. hover-border-10 */
.btn.hover-border-10 .before,
.btn.hover-border-10 .after {
  left: 0%;
  height: 30%;
  width: 2px;
  transition: height 0.2s 0.35s ease-out;
}
.btn.hover-border-10 .before {
  top: 50%;
}
.btn.hover-border-10 .after {
  bottom: 50%;
}
.btn.hover-border-10:hover .before {
  height: 50%;
  transition: height 0.2s ease-in;   
}
.btn.hover-border-10:hover .after {
  height: 50%;
  transition: height 0.1s ease-in;   
}

.btn.hover-border-10 span .before,
.btn.hover-border-10 span .after {
  width: 0%; height: 0%;
  background: transparent;
  opacity: 0;
  z-index: 2;
}
.btn.hover-border-10 span .after {
  bottom: 0; left: 0%;
  border-bottom: 2px solid rgb(54, 56, 55);
  transition: width 0.25s ease-in, opacity 0s 0.35s;   
}
.btn.hover-border-10 span:hover .after {
  width: 100%;
  opacity: 1;
  transition: width 0.25s 0.2s ease-out, opacity 0s 0.2s;   
}
.btn.hover-border-10 span .before {
  top: 0%; left: 0%;
  border-top: 2px solid rgb(54, 56, 55);
  border-right: 2px solid rgb(54, 56, 55);
  transition: height 0.15s ease-in, width 0.2s 0.15s linear, opacity 0s 0.35s;   
}
.btn.hover-border-10 span:hover .before {
  width: 98.5%; height: 96%;
  opacity: 1;
  transition: width 0.2s 0.1s linear, height 0.15s 0.3s ease-out, opacity 0s 0.1s;   
}

/*--- btn-5 ---*/
.btn-5 span {
  color: rgb(28, 31, 30);
  border: 2px solid rgb(249, 211, 27);
  transition: 0.2s;
}
.btn-5 span:hover {
  background-color: rgb(245,245,245);
}
