@use '../abstracts' as *;
/*----------------------------------------*/
/*  00. FOOTER CSS START
/*----------------------------------------*/

.footer{
	&__area{}
	&__top{}
	&__widget{
		margin-bottom: 40px;
		&-title{
			& h4{
				font-size: 16px;
				color: $black-soft-2;
				text-transform: capitalize;
				margin-bottom: 33px;
				padding-top: 15px;
			}
			&-2{
				& h4{
					color: $white;
				}
			}
			&-4{
				& h4{
					color: $black-soft-8;
				}
			}
		}
		&-content{

		}
	}
	&__hotline{
		& .icon{
			& i{
				font-size:55px;
				color: $t-yellow;
			}
		}
		& .text{
			& h4{
				font-size: 14px;
				color: $black-soft-2;
				margin-bottom: 0;
			}
			& span{
				font-size: 18px;
				font-weight: 500;
				color: $t-yellow;
			}
		}
		&-4{
			& .icon{
				& i{
					color: $white;
				}
			}
			& .text{
				& span{
					color: $white;
				}
			}
		}
	}
	&__info{
		& ul{
			& li{
				margin-bottom: 5px;
				& span{
					font-size: 14px;
					color: $black-soft-2;
				}
			}
		}
		&-4{
			& ul{
				& li{
					& span{
						color: $black-soft-8;
					}
				}
			}
		}
	}
	&__link{
		& ul{
			& li{
				margin-bottom: 6px;
				& a{
					color: $black-soft-2;
					font-size: 14px;
					&:hover{
						color: $t-yellow;
						padding-left: 15px;
					}
				}
			}
		}
		&-2{
			& ul{
				& li{
					& a{
						color: $black-soft-6;
					}
				}
			}
		}
		&-4{
			& ul{
				& li{
					& a{
						color: $black-soft-8;
						&:hover{
							color: $t-red-dark;
						}
					}
				}
			}
		}
	}
	&__bottom{
		border-top: 1px solid #4d5462;
	}
	&__links{
		& p{
			margin-bottom: 0;
			& a{
				color: #9da3af;
				font-size: 14px;
				padding: 0 5px;
				&:hover{
					color: $t-yellow;
				}
			}
		}
	}
	&__download{
		margin-top: 25px;
		& h4{
			font-size: 14px;
			color: $white;
			text-transform: capitalize;
			margin-bottom: 15px;
		}
	}
	&__copyright{
		&-text{
			@media #{$md}{
				margin-bottom: 15px;
			}
			@media #{$sm}{
				margin-bottom: 15px;
			}
			@media #{$xs}{
				margin-bottom: 15px;
			}
			& p{
				color: $black-soft-3;
				margin-bottom: 0;
				& a{
					color: $t-yellow;
				}
			}
			&-2{
				& p{
					color: $black-soft-8;
					& a{
						color: $t-red-dark;
					}
				}
			}
		}
		&-inner{
			border-top: 1px solid #393939;
		}
		&-2{
			border-top: 1px solid $black-soft-9;
		}
	}
	&__payment{
		@media #{$md}{
			float: left;
		}
		@media #{$sm}{
			float: left;
		}
		@media #{$xs}{
			float: left;
		}
		& a{
			opacity: .4;
			&:hover{
				opacity: .6;
			}
		}
	}
	&__social{
		& ul{
			& li{
				display: inline-block;
				margin-right: 8px;
				margin-bottom: 10px;
				&.fb{
					& a{
						background: #3b5998;
					}
				}
				&.tw{
					& a{
						background: #00acee;
					}
				}
				&.gp{
					& a{
						background: #DD4B39;
					}
				}
				&.yt{
					& a{
						background: #FF0000;
					}
				}
				&.pt{
					& a{
						background: #E60023;
					}
				}
				&.em{
					& a{
						background: #BB001B;
					}
				}
				& a{
					display: inline-block;
					width: 45px;
					height: 45px;
					@include border-radius(50%);
					color: $white;
					text-align: center;
					line-height: 45px;
					&:hover{
						background: $t-yellow;
					}
				}
			}
		}
	}
	&__subscribe{
		& p{
			color: $black-soft-8;
			& span{
				font-weight: 500;
				color: $white;
			}
		}
		&-form{
			& input{
				width: 100%;
				padding: 10px 15px;
				background: transparent;
				border: none;
				border-bottom: 1px solid #394350;
				color: $black-soft-8;
				&::placeholder{
					color: #394350;
					font-size: 14px;
				}
			}
			& button{
				height: 50px;
				margin: 0;
				padding: 0 50px;
				border-radius: 30px;
				background: $t-red-dark;
				color: $white;
				text-transform: capitalize;
				font-size: 14px;
				font-weight: 500;
				margin-top: 10px;
			}
		}
	}
}


.yellow-footer{
	& .footer__link-4 ul li a:hover{
		color: $t-yellow;
	}
	& .footer__subscribe-form button{
		background: $t-yellow;
	}
	& .footer__copyright-text-2 p a{
		color: $t-yellow;
	}
}
