/*----------------------------------------
	21. footer css
----------------------------------------*/
@use "../abstract" as *;


.footer-top {
	border-top: 1px solid #414141;
}

// footer style 
.footer {
	&__bg {
		background: var(--clr-theme-1);
	}

	&__logo {
		width: 102px;

		img {
			width: 100%;
		}
	}

	&__widget {
		&-title {
			font-size: 20px;
			color: var(--clr-common-white);
			line-height: 1;
		}

		p {
			color: #D9D9D9;
		}
	}

	&__links {
		ul {
			margin: 0;
			padding: 0;

			li {
				list-style: none;

				&:not(:last-child) {
					margin-bottom: 15px;
				}

				a {
					color: #D9D9D9;

					&:hover {
						color: var(--clr-theme-2);
						padding-left: 7px;
					}
				}
			}
		}
	}
}

// footer-2 style 
.footer-2-area {
	&__shape {
		&-1 {
			position: absolute;
			z-index: -1;
			left: 0;
			bottom: 0;
		}
	}
}

.footer-2 {
	&__logo {
		width: 102px;

		img {
			width: 100%;
		}
	}

	&__widget {
		&-1 {
			@media #{$md} {
				margin-bottom: 100px;
			}

			@media #{$sm,$xs} {
				margin-bottom: 50px;
			}

			p {
				max-width: 554px;

				@media #{$xs,$sm,$md} {
					max-width: 100%;
				}
			}

			.drop-line {
				.title {
					font-size: 20px;
					color: #A5A5A5;
					font-weight: 400;
					line-height: 1;
					margin-bottom: 10px;
				}

				p {
					font-size: 24px;
					color: var(--clr-theme-primary);
					font-weight: 400;
					line-height: 1;
					margin-bottom: 20px;
					font-family: var(--tpl-ff-heading);
					margin-bottom: 0;

					a {
						&:hover {
							color: var(--clr-theme-2);
						}
					}

					span {
						font-weight: 600;
					}

					.v-icon {
						margin-left: 20px;
						transform: rotate(450deg) scale(0);
						opacity: 0;
						@include transition(.5s);
					}

					a:hover {
						.v-icon {
							transform: rotate(0deg) scale(1);
							opacity: 1;
						}
					}
				}
			}
		}
	}

	&__links {
		ul {
			display: flex;
			flex-wrap: wrap;
			gap: 15px 45px;

			@media #{$xs,$sm,$md} {
				gap: 15px 40px;
			}

			li {
				color: #4F4F4F;
				list-style: none;

				a:hover {
					color: var(--clr-theme-2);
					text-decoration: underline;
				}
			}
		}
	}

}

.joining-form {
	.input-wrapper {
		display: flex;
		gap: 10px;
		justify-content: space-between;
		align-items: flex-end;
		border-bottom: 1px solid #414141;
		padding-bottom: 15px;
	}

	.single-input-field {
		width: 100%;

		input {
			background: transparent;
			border: 0;
			color: var(--clr-common-white);
			outline: 0;
			width: 100%;
		}
	}

	.circle-icon-btn {
		width: 44px;
		height: 44px;
		border: 1px solid var(--clr-theme-2);
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		background: var(--clr-theme-2);
		color: var(--clr-common-black);
		font-size: 18px;
		transform: rotate(-45deg);

		&:hover {
			i {
				animation: iconltr 0.5s forwards;
			}
		}
	}

	label {
		color: #A5A5A5;

		.check {
			margin-right: 10px;
		}
	}
}

// checkbox style start 
label {
	cursor: pointer;
}

.check {
	cursor: pointer;
	position: relative;
	margin: auto;
	width: 18px;
	height: 18px;
	-webkit-tap-highlight-color: transparent;
	transform: translate3d(0, 0, 0);

	&:before {
		content: "";
		position: absolute;
		top: -15px;
		left: -15px;
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: rgba(#223254, .03);
		opacity: 0;
		transition: opacity .2s ease;
		display: none;
	}

	svg {
		position: relative;
		z-index: 1;
		fill: none;
		stroke-linecap: round;
		stroke-linejoin: round;
		stroke: #414141;
		stroke-width: 1.5;
		transform: translate3d(0, 0, 0);
		transition: all .2s ease;

		path {
			stroke-dasharray: 60;
			stroke-dashoffset: 0;
		}

		polyline {
			stroke-dasharray: 22;
			stroke-dashoffset: 66;
		}
	}

	&:hover {
		&:before {
			opacity: 1;
		}

		svg {
			stroke: #14CF93;
		}
	}
}

[type="checkbox"]:checked+.check {
	svg {
		stroke: #14CF93;

		path {
			stroke-dashoffset: 60;
			transition: all .3s linear;
		}

		polyline {
			stroke-dashoffset: 42;
			transition: all .2s linear;
			transition-delay: .15s;
		}
	}
}

// checkbox style end 


.product__review-thumb {
	display: flex;
	gap: 30px;
}

.made-by-text {
	color: #A5A5A5;
	letter-spacing: 8px;
}


// address area style 

.address-wrapper {
	border-top: 1px solid #414141;
}

.address-box {
	position: relative;
	opacity: .4;
	@include transition(.5s);

	@media #{$md,$sm,$xs} {
		opacity: 1;
	}

	&:hover {
		opacity: 1;

		&:before {
			opacity: 1;
			left: 0;
			width: 100%;
		}
	}

	&:before {
		position: absolute;
		content: "";
		width: 0%;
		height: 1px;
		background: var(--clr-common-white);
		right: 0;
		left: auto;
		top: -61px;
		opacity: 0;
		@include transition(.5s);

		@media #{$md,$sm,$xs} {
			display: none;
		}
	}

	.country-name {
		font-size: 20px;
		line-height: 1;
		color: var(--clr-common-white);
	}
}

.address-list {
	ul {
		margin: 0;
		padding: 0;

		li {
			color: #D9D9D9;
			list-style: none;

			a {
				&:hover {
					color: var(--clr-theme-2);
				}
			}

			&:not(:last-child) {
				margin-bottom: 10px;
			}

		}
	}
}

.social-links-wrapper-2 {
	position: absolute;
	width: 43%;
	top: 0;
	right: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;

	@media #{$md,$sm,$xs} {
		position: relative;
		width: 100%;
		margin-bottom: -150px;
	}

	.area-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;

		img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}

.social-links {
	ul {
		display: flex;
		gap: 40px;
		margin-bottom: 0;
		padding: 0;

		li {
			list-style: none;
			line-height: 1;

			a {
				color: #A5A5A5;
				font-size: 16px;
				position: relative;

				&:hover {
					color: var(--clr-theme-2);


					.icon-text {
						transform: translateY(-100%) translateX(-50%);
						opacity: 0;
						visibility: hidden;
					}
				}

				.icon-text {
					position: absolute;
					width: 100%;
					height: 100%;
					display: inline-flex;
					justify-content: center;
					align-items: center;
					line-height: 1;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					background: var(--clr-theme-1);
				}
			}
		}
	}


}

.social-links-2 {
	background: var(--clr-theme-1);
	padding: 40px;
	padding-bottom: 0;
	width: 300px;

	h4 {
		font-size: 24px;
		font-weight: 700;
		color: var(--clr-common-white);
		display: flex;
		align-items: center;
		gap: 20px;
		margin-bottom: 22px;
		flex-wrap: wrap;
		justify-content: center;
	}

	ul {
		li {
			border-top: 1px solid #414141;
			color: #D9D9D9;
			list-style: none;

			a {
				padding: 33px 0;
				padding-left: 20px;
				display: flex;
				align-items: center;
				gap: 13px;
				overflow: hidden;
				// margin-right: -40px;

				&:hover {
					background: var(--clr-common-white);
					color: var(--clr-theme-1);
					margin-right: -40px;

					i {
						margin-left: 0;
					}
				}

				i {
					font-size: 24px;
					margin-left: -53px;
					@include transition(.5s);
				}
			}
		}
	}
}


.link {
	&-instagram {
		i {
			color: #3f729b;
		}
	}

	&-facebook {
		i {
			color: #3b5998;
		}
	}

	&-twitter {
		i {
			color: #55acee;
		}
	}

	&-linkedin {
		i {
			color: #0077b5;
		}
	}
}

// copyright style start
.copyright {
	&__bg {
		background: var(--clr-theme-1);
	}

	&__text {
		p {
			color: #A4A4A4;
			letter-spacing: 4.5px;
			margin-bottom: 0;
			font-size: 16px;

			a:hover {
				color: var(--clr-theme-2);
			}
		}

		&-2 {
			p {
				color: #A5A5A5;
				margin-bottom: 0;
				line-height: 1;

				a:hover {
					color: var(--clr-theme-2);
				}
			}
		}

	}
}

// copyright style end

// Footer style-5
.footer-area {
	.noise-wrapper {
		position: absolute;
		opacity: 0.7;
	}
}

.footer-widget-wrapper {
	padding: 60px 60px;
	background: #111;

	@media #{$xs,$sm,$md,$xl} {
		padding: 60px 30px;
	}
}

.footer-buler {
	.buler-1 {
		position: absolute;
		top: -250px;
		left: -120px;
		z-index: -2;
		opacity: 0.7;
	}

	.buler-2 {
		position: absolute;
		width: 304px;
		height: 304px;
		background: #14CF93;
		opacity: 0.4;
		filter: blur(175px);
		bottom: 27px;
		left: revert;
		right: -50px;
		z-index: -1;
	}
}

.footer-info-wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);

	@media #{$xl,$lg,$md,$xs} {
		margin-bottom: 30px;
	}

	@media #{$xs,$sm} {
		grid-template-columns: repeat(1, 1fr);
		place-items: center;
		text-align: center;
	}
}

.footer-social-title {
	color: var(--clr-common-white);
	margin-bottom: 20px;
	display: inline-block;
}

.footer-info {
	span {
		color: var(--clr-common-white);
	}

	p {
		color: #A5A5A5;
		font-size: 20px;
		font-family: var(--tpl-ff-heading);
		margin-bottom: 0;
		line-height: 30px;

		@media #{$xxs,$xl} {
			font-size: 18px;
		}

		a {
			&:hover {
				color: var(--clr-theme-2);
			}
		}
	}
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	justify-content: center;

	a {
		color: #A5A5A5;
		font-size: 20px;

		&:hover {
			color: var(--clr-theme-2);
		}
	}
}

.footer-info {
	span {
		margin-bottom: 20px;
		display: inline-block;
	}
}

.footer-social-widget {
	padding-left: 70px;
	display: flex;
	justify-content: left;

	@media #{$xxl} {
		padding-left: 70PX;
	}

	@media #{$xs,$sm,$md,$lg,$xl} {
		padding-left: 0;
		text-align: center;
	}
}

.footer-logo-5 {
	padding-right: 120px;

	@media #{$xs,$sm,$md,$lg,$xl} {
		padding-right: 0;
	}
}