/*===========================
10.FOOTER css 
===========================*/


.footer-area{
	background-color: $black-soft;
}


.footer-top{
	& .single-visitor{
		& span{
			font-size: 16px;
			font-weight: 700;
			color: $white;
			
			@media #{$xs}{
				font-size: 16px;
			}
			@media #{$sm}{
				font-size: 16px;
			}
		}
		& p{
			margin-top: 4px;
			
			@media #{$xs}{
				font-size: 13px;
			}
			@media #{$xs}{
				font-size: 16px;
			}
		}
	}
	
	& .footer-follow{
		& .title{
			font-size: 16px;
			font-weight: 700;
			color: $white;
			
			@media #{$xs}{
				font-size: 16px;
			}
		}
		& .social{
			& li{
				display: inline-block;
				margin-left: 20px;
				
				& a{
					font-size: 16px;
					color: $body-color;
					@include transition(0.3s);
					
					@media #{$xs}{
						font-size: 16px;
					}
					
					&:hover{
						color: $theme-color-2;
					}
				}
			}
		}
		
		&.follow-2{
			& .social{
				& li{
					& a{
						&:hover{
							color: $theme-color;
						}
					}
				}
			}
		}
		
		&.follow-3{
			& .social{
				& li{
					& a{
						&:hover{
							color: $theme-color-5;
						}
					}
				}
			}
		}
		
		&.follow-4{
			& .social{
				& li{
					& a{
						&:hover{
							color: $theme-color-7;
						}
					}
				}
			}
		}
	}
}


.footer-widget{
	border-top: 1px solid rgba($white, 0.1);
	
	& .footer-about{
		& a{}
		& p{
			margin-top: 4px;
		}
	}
	
	& .footer-title{
		font-weight: 400;
		font-size: 16px;
		color: $white;
		position: relative;
		padding-bottom: 10px;
		
		@media #{$lg}{
			font-size: 16px;
		}
		
		&::before{
			position: absolute;
			content: '';
			width: 50px;
			height: 5px;
			border-radius: 5px;
			background-color: $white;
			opacity: 0.1;
			left: 0;
			bottom: 0;
		}
	}
	
	& .footer-link{
		& .link-wrapper{
			& .link{
				width: 50%;
				
				@media #{$xs}{
					width: 100%;
				}
				@media #{$xs}{
					width: 50%;
				}
				
				& a{
					color: $body-color;
					font-size: 13px;
					margin-top: 4px;
					@include transition(0.3s);
					
					@media #{$lg}{
						font-size: 13px;
					}
					
					&:hover{
						padding-left: 5px;
						color: $theme-color-2;
					}
				}
			}
		}
		& ul{
			& li{
				& a{
					color: $body-color;
					font-size: 13px;
					margin-top: 4px;
					@include transition(0.3s);
					
					@media #{$lg}{
						font-size: 13px;
					}
					
					&:hover{
						padding-left: 5px;
						color: $theme-color-2;
					}
				}
			}
		}
	}
	
	& .footer-contact{
		& .single-contact{
			& .contact-icon{
				& i{
					font-size: 16px;
					color: rgba($white, 0.2);
				}
			}
			& .contact-content{
				padding-left: 20px;
				
				& p{
					font-size: 13px;
					line-height: 30px;
					
					@media #{$lg}{
						font-size: 13px;
						line-height: 27px;
					}
					@media #{$xs}{
						font-size: 13px;
						line-height: 27px;
					}
				}
			}
		}
	}
	
	&.widget-2{
		& .footer-link{
			& ul{
				& li{
					& a{
						&:hover{
							color: $theme-color;
						}
					}
				}
			}
		}
	}
	
	&.widget-3{
		& .footer-link{
			& ul{
				& li{
					& a{
						&:hover{
							color: $theme-color-5;
						}
					}
				}
			}
		}
	}
	
	&.widget-4{
		& .footer-link{
			& ul{
				& li{
					& a{
						&:hover{
							color: $theme-color-7;
						}
					}
				}
			}
		}
	}
}


.footer-copyright-text{
	background-color: $black;
}


.footer-copyright-text-wrapper{
	& .footer-copyright{
		& p{
			@media #{$xs}{
				font-size: 9px;
			}
			
			& a{
				color: $white;
				@include transition(0.3s);
				font-weight: 600;
				
				&:hover{
					color: $theme-color-2;
				}
			}
		}
	}
	& .footer-text{
		& .link{
			& li{
				display: inline-block;
				
				& + li{
					margin-left: 40px;
					
					@media #{$md}{
						margin-left: 25px;
					}
					@media #{$xs}{
						margin-left: 16px;
					}
				}
				
				& a{
					font-size: 9px;
					color: $body-color;
					@include transition(0.3s);
					
					@media #{$xs}{
						font-size: 9px;
					}
					
					&:hover{
						color: $theme-color-2;
					}
				}
			}
		}
	}
	
	
}

.footer-copyright-text-2{
	& .footer-copyright{
		& p{
			& a{
				&:hover{
					color: $theme-color;
				}
			}
		}
	}
	& .footer-text{
		& .link{
			& li{
				& a{
					&:hover{
						color: $theme-color;
					}
				}
			}
		}
	}
}

.footer-copyright-text-3{
	& .footer-copyright{
		& p{
			& a{
				&:hover{
					color: $theme-color-5;
				}
			}
		}
	}
	& .footer-text{
		& .link{
			& li{
				& a{
					&:hover{
						color: $theme-color-5;
					}
				}
			}
		}
	}
}

.footer-copyright-text-4{
	& .footer-copyright{
		& p{
			& a{
				&:hover{
					color: $theme-color-7;
				}
			}
		}
	}
	& .footer-text{
		& .link{
			& li{
				& a{
					&:hover{
						color: $theme-color-7;
					}
				}
			}
		}
	}
}



/*===== Footer White =====*/


.footer-white{
	background-color: $white;
	
	& .footer-top{
		& .single-visitor{
			& span{
				color: $heading-color;
			}
		}
		
		& .footer-follow{
			& .title{
				color: $heading-color;
			}
			& .social{
				& li{
					& a{
						&:hover{
							color: $theme-color-4;
						}
					}
				}
			}
		}
	}
	
	& .footer-widget{
		border-top: 1px solid rgba($heading-color, 0.1);
		
		& .footer-about{
			& a{}
			& p{}
		}
		
		& .footer-title{
			color: $heading-color;
			
			&::before{
				background-color: $heading-color;
			}
		}
		
		& .footer-link{
			
			& ul{
				& li{
					& a{
						&:hover{
							padding-left: 5px;
							color: $theme-color-4;
						}
					}
				}
			}
		}
		
		& .footer-contact{
			& .single-contact{
				& .contact-icon{
					& i{
						color: rgba($heading-color, 0.2);
					}
				}
				& .contact-content{
					& p{}
				}
			}
		}
	}
	
	& .footer-copyright-text{
		background-color: $gray;
	}
	& .footer-copyright-text-2{
		& .footer-copyright{
			& p{
				& a{
					color: $heading-color;
					
					&:hover{
						color: $theme-color-4;
					}
				}
			}
		}
		& .footer-text{
			& .link{
				& li{
					& a{
						&:hover{
							color: $theme-color-4;
						}
					}
				}
			}
		}
	}
}




/*===== Go Top =====*/


.go-top-area{
	position: relative;
	z-index: 9999;
	
	& .go-top{
		position: fixed;
		cursor: pointer;
		top: 0;
		right: 24px;
		color: $white;
		background-color: $theme-color-2;
		z-index: 9999;
		width: 40px;
		text-align: center;
		height: 42px;
		line-height: 42px;
		opacity: 0;
		visibility: hidden;
		@include transition(0.9s);
		border-right: 0;
		
		& i{
			position: absolute;
			top: 50%;
			left: -4px;
			right: 0;
			margin: 0 auto;
			font-size: 16px;
			@include transform(translateY(-50%));
			@include transition(0.5s);
			
			&:last-child{
				opacity: 0;
				visibility: hidden;
				top: 60%;
			}
		}
		
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
			background-color: $theme-color-2;
			opacity: 0;
			visibility: hidden;
			@include transition(0.5s);
		}
		
		&:focus,
		&:hover{
			color: $white;
			
			&::before{
				opacity: 1;
				visibility: visible;
			}
			
			& i{
				&:first-child{
					opacity: 0;
					top: 0;
					visibility: hidden;
				}
				&:last-child{
					opacity: 1;
					visibility: visible;
					top: 50%;
				}
			}
		}
		
		&.active{
			top: 98%;
			@include transform(translateY(-98%));
			opacity: 1;
			visibility: visible;
			border-radius: 0;
			right: 20px;
			@media #{$lg} {
				top: 93%;
			}
			@media #{$md} {
				top: 93%;
			}
		}
	}
}

.go-top-wrap {
	position: relative;
	
	& .go-top-btn {
		display: inline-block;
		width: 40px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: $white;
		top: 3px;
		z-index: 1;
		background: $theme-color-2;
		
		& i{
			font-size: 20px;
			font-weight: 700;
			padding-left: 4px;
			color: $white;
		}
		
		&::after{
			z-index: -1;
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 40px;
			height: 40px;
			@include animation(ripple 1.6s ease-out infinite);
			opacity: 0;
			background: $theme-color-2;
		}
		
		&:hover{
			background-color: $black;
			color: $white;
		}
	}
}

.go-top-2{
	& .go-top{
		background-color: $theme-color;
		
		&::before{
			background-color: $theme-color;
		}
	}
	.go-top-wrap {
		& .go-top-btn {
			background: $theme-color;
			
			&::after{
				background: $theme-color;
			}
		}
	}
}

.go-top-3{
	& .go-top{
		background-color: $theme-color-3;
		
		&::before{
			background-color: $theme-color-3;
		}
	}
	.go-top-wrap {
		& .go-top-btn {
			background: $theme-color-3;
			
			&::after{
				background: $theme-color-3;
			}
		}
	}
}

.go-top-4{
	& .go-top{
		background-color: $theme-color-5;
		
		&::before{
			background-color: $theme-color-5;
		}
	}
	.go-top-wrap {
		& .go-top-btn {
			background: $theme-color-5;
			
			&::after{
				background: $theme-color-5;
			}
		}
	}
}

.go-top-5{
	& .go-top{
		background-color: $theme-color-7;
		
		&::before{
			background-color: $theme-color-7;
		}
	}
	.go-top-wrap {
		& .go-top-btn {
			background: $theme-color-7;
			
			&::after{
				background: $theme-color-7;
			}
		}
	}
}




@keyframes ripple {
	0%, 35% {
		@include transform(scale(0));
		opacity: 1;
	}
	50% {
		@include transform(scale(1.5));
		opacity: 0.8;
	}
	100% {
		opacity: 0;
		@include transform(scale(2));
	}
}

@-webkit-keyframes ripple {
	0%, 35% {
		@include transform(scale(0));
		opacity: 1;
	}
	50% {
		@include transform(scale(1.5));
		opacity: 0.8;
	}
	100% {
		opacity: 0;
		@include transform(scale(2));
	}
}


.install-button {
	-webkit-font-smoothing: antialiased;
	-webkit-appearance: none;
	-moz-appearance: none;
	vertical-align: middle;
	text-decoration: none;
	border: none;
	outline: none;
	cursor: pointer;
	color: white;
	background-color: white;
	background-image: -webkit-linear-gradient(to bottom, #23C277, #399D6C);
	background-image: -moz-linear-gradient(to bottom, #23C277, #399D6C);
	background-image: linear-gradient(to bottom, #23C277, #399D6C);
	box-shadow: inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 -1px 1px 0 rgba(67, 90, 111, 0.06);
	height: 32px;
	padding-left: 16px;
	padding-right: 16px;
	letter-spacing: 0;
	line-height: 32px;
	font-size: 13px;
	margin-left: 0px;
	flex-wrap: nowrap;
	-webkit-box-lines: nowrap;
	align-items: center;
	-webkit-box-align: center;
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	position: relative;
	margin-bottom: 0px;
	margin-right: 16px;
	padding-bottom: 0px;
	padding-top: 0px;
	border-bottom-left-radius: 3px;
	border-top-left-radius: 3px;
	border-bottom-right-radius: 3px;
	border-top-right-radius: 3px;
	font-weight: 500;
	margin-top: 0px;
	font-family: "SF UI Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	box-sizing: border-box;
}