// button
button:hover,
button:active,
button:focus {
    outline: 0;
}


.btn{
	font-size: 16px;
    padding: 15px 30px;
    line-height: 1.2;
    display: inline-flex;
    font-weight: 500;
	position: relative;
	text-transform: capitalize;
	font-family: $font-family-title;
	align-items: center;
	overflow:hidden;
	z-index:1;
	text-align:center;
	@include transitionFast;
	justify-content: center; 
	
	// btn lg
	&.btn-lg{
		font-size: 16px;
		padding: 18px 40px;
		line-height: 1.4;
		font-weight:500;
		
		@include respond ('tab-port'){
		    font-size: 14px;
			padding: 12px 25px;
		}
	}
	
	// btn sm
	&.btn-sm{
		font-size: 14px;
		padding: 10px 20px;
	}
	
	// btn xs
	&.btn-xs{
		font-size: 12px;
		padding: 11px 25px;
	}
	&.btn-primary{
		color:$white;
		&:hover{
			color:$white;
		}
	}
	&.text-lg{
		font-size: 18px;
		padding: 10px 20px;
	}
	&:after{
		content: "";
		position: absolute;
		background-color: inherit;
		height: 100%;
		width: 7px;
		left: -12px;
		z-index: 1;
		top: 50%;
		transform: translateY(-50%);
	}
	&:hover{
		&:after{
			transition: all 0.5s;
			border-right: 7px solid #fff;
			opacity: 0;
			width: 100%;
		}
	}
	&.btn-outline-light{
		&:hover {
			color: #000 !important;
			background-color: #FFFBF5;
			border-color: #FFFBF5;
		}	
	}

		
}
.btn-primary{
	&.btn-gradient{
		background: linear-gradient(90deg, #F39200 0%, #F37500 99.31%);
		border: 0;
		
		&:hover{
			background-position: right center;
		}
	}
	&.btn-shadow{
		box-shadow: 0px 10px 25px rgba(243, 145, 0, 0.15);
	}
}

.btn.outline-2{
	border-width: 2px;
}
.btn-success,
.btn-danger,
.btn-warning{
	color:#fff;
	&:hover{
		color:#fff;
	}
}
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning{
	&:hover{
		color: #fff;
	}
}

.btn-success,
.btn-info,
.btn-danger,
.btn-warning{
	&.effect{
		&:after{
			background:var(--secondary);
		}
	}
}

.btn-primary.btn-shadow,
.btn-outline-primary.btn-shadow{
	box-shadow: 0px 4px 10px var(--rgba-primary-2);
}
.btn-secondary.btn-shadow{
	box-shadow: 0px 4px 10px lighten($secondary, 75);
}

.btn-danger{
	&.btn-shadow{
		box-shadow: 0px 4px 10px lighten($danger, 28);	
	}
	&.light{
		background-color: rgba(235, 87, 87, 0.1);
		color:$danger;
		border-color: transparent;
		
		&:hover{
			background-color: $danger;
			color: $white;
			box-shadow: 0px 4px 10px lighten($danger, 28);
		}
	}
}

.btn-rounded{
	border-radius:50px!important;
}
.btn-link{
	text-transform:uppercase;
	font-family:var(--font-family-base);
	position:relative;
	z-index:1;
	display:inline-block;
	@include transitionFast;
	i{
		margin-left:10px;
	}
	&:hover{
		i{
			animation: upToRight 0.5s forwards;
		}
	}	
}

.shadow-primary{
	box-shadow: 0px 19px 29px rgba(220, 181, 145, 0.34);
}
.btn-info{
	color:#fff;
	&:hover{
		color:#fff;
	}
}
.btn-white{
	background-color:#fff;
	color:var(--primary);
	&:hover{
		color:var(--primary);
	}
}
.btn-secondary{
	background-color: var(--secondary);
    border-color: var(--secondary);
	
	&:after{
		background-color:var(--primary);
	}
}

.btn-transparant{
	background: transparent;
	color: var(--primary);
	border-color: var(--primary);	
	@include transitionMedium;
	&.disabled,
	&:disabled,
	&:not(:disabled):not(.disabled).active, 
	&:not(:disabled):not(.disabled):active, 
	&:active,
	&:focus,
	&:hover{
		color: var(--theme-text-color);
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
	}
}

.btn-primary{
	border-color:var(--primary);	
	background-color:var(--primary);
	
	&.disabled,
	&:disabled,
	&:not(:disabled):not(.disabled).active, 
	&:not(:disabled):not(.disabled):active, 
	&:active,
	&:focus,
	&:hover{
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
	}
	&:after{
		background-color:var(--secondary);
	}
	&.light{
		background-color: var(--rgba-primary-1);
		color: var(--primary);
		border-color: var(--rgba-primary-1);
		&:hover{
			background-color: var(--primary);
			color: $white;
			svg path{
				fill : $white;
			}
		}
	}
}
.btn-link{
	color:var(--primary);
	text-decoration: none;
	text-transform: capitalize;
    font-weight: 500;

	&:hover{
		color:var(--primary-hover);	
	}
}
.btn-outline-primary {
	color:var(--primary);	
	border-color:var(--primary);
	
	&.disabled,
	&:disabled,
	&:not(:disabled):not(.disabled).active, 
	&:not(:disabled):not(.disabled):active, 
	&:active,
	&:focus,
	&:hover{
		border-color:var(--primary-hover);	
		background-color:var(--primary-hover);	
		color:$white;
	}
	&.text-primary:hover{
		color: #fff !important;
	}
}
.btn-light{
	background-color: #8EA5C8;
	color: $white;
}
.show.dropdown{
	.dropdown-btn{
		&.btn-primary{
			svg{
				rect,
				path{
					fill: #fff;
				}
			}
		}
	}
}
.action-dropdown{
	.dropdown-menu .dropdown-item {
		font-size: 15px;
	}
}
.dropdown-btn{
	width: 36px;
    height: 36px;
    padding: 0;
	border: 0;
	
	&.btn-primary{
		svg{
			rect,
			path{
				fill: var(--primary);
			}
		}
		&:hover{
			svg{
				rect,
				path{
					fill: #fff;
				}
			}
		}
	}
}

.video-btn.style-1{
	display: flex;
    position: relative;
    align-items: center;	
	i{
		display: inline-block;
		height: 48px;
		width: 48px;
		min-width: 48px;
		border-radius: 48px;
		line-height: 48px;
		background: var(--primary);
		text-align: center;
		color: #fff;
		font-size: 16px;
		margin-right: 15px;
		border: 1px solid var(--primary);
	}
	.text{
		font-weight: 500;
		font-size: 16px;
		padding-right: 30px;
		margin: 0;
		color: #fff;
	}
	&:before {
		content: "";
		top: 0;
		left: 0;
		position: absolute;
		height: 48px;
		width: 48px;
		border-radius: 48px;
		background: #fff;
		z-index: -1;
		@include transitionFast;
		box-shadow: 1px 1.732px 55px 0px rgba(0, 0, 0, 0.1);
	}
	&:hover{
		.text{
			color:#000;
		}
		
		&:before{
			width: 100%;
		}
	}

	
	&.video-btn-dark{
		i{
			border: 1px solid rgba(255,255,255,0.3);
			background: var(--secondary);
		}
		.text{
			color: #fff;
		}
		&:before{
			background: var(--primary);
		}
		@include respond('tab-port-min'){
			margin-top:20px;
		}
	}
	@include respond('phone'){
			margin-top:20px;
	}
	
}

.btn.facebook{
	background-color: #3B5998;
	border: 1px solid #3B5998;
	color: #fff;
}

.dz-social-icon.style-1{
	z-index: 550;	
	li{
		margin-bottom: 1rem;
		a{
			position: relative;
			width: 60px;
			height: 60px;
			border-width: 1px;
			border-style: solid;
			border-color: var(--primary);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--heading-color);
				@include respond('phone'){
					width:40px;
					height:40px;
				}
			.icon-circle {
				z-index: 1;
			  }
			 &:after,
			 span:not(.dz-icon) {
				position: absolute;
				top: 50%;
				left: 50%;
				opacity: 0;
				transition: all 0.3s cubic-bezier(0.55, 0.02, 0.1, 0.9);
			}

			span:not(.dz-icon) {
				color: var(--heading-color);
				font-weight: bold;
				font-size: 13px;
				transform-origin: center bottom;
				cursor: pointer;
			  }
			  &:not(.move-circle) {
				border-color: var(--border-color);
			  }
			  
			  i {
				transform: scale(1);
				transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
				color: #000;
			  }
			  &:hover,
			  &.active{
				background: var(--primary);
				i {
					transform: scale(0);
					color: #fff;
				}
				span:not(.dz-icon) {
				opacity: 1;
				transform: matrix(1, 0, 0, 1, -10, -10);
				transition: all 0.6s cubic-bezier(0.75, -0.5, 0, 1.75);
				color: #fff;
				}
				&::after {
					opacity: 1;
					transform: translate(-50%, -50%) scale(1);
					transition: all 0.5s cubic-bezier(0.75, -0.5, 0, 1.75);
					transition-delay: 0.2s;
				  }

			}
		}
	}
}