@use "../utilities" as *;

/* START: Home 6 Footer CSS */
.h6-footer {
	border-top: 0;
	&-middle {
		padding: 60px 0;
	}
	&-logo {
		@media #{$md, $sm, $xs} {
			text-align: center;
		}
		a {
			img {
				max-width: 150px;
			}
		}
	}
	&-menu {
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-wrap: wrap;
			row-gap: 15px;
			align-items: center;
			justify-content: space-between;
			@media #{$md, $sm, $xs} {
				justify-content: center;
			}
			li {
				display: inline-block;
				padding-left: 30px;
				position: relative;
				line-height: 1;
				a {
					color: var(--tj-color-common-white);
					font-weight: var(--tj-fw-bold);
					&:hover {
						color: var(--tj-color-theme-icon-new);
					}
				}
			}
		}
	}
	&-widget {
		&-top {
			padding-top: 70px;
			padding-bottom: 45px;
			@media #{$md, $sm, $xs} {
				padding-bottom: 60px;
				text-align: center;
			}
		}
		&-title {
			font-size: 68px;
			color: var(--tj-color-common-white);
			@media #{$lg} {
				font-size: 58px;
			}
			@media #{$md} {
				font-size: 48px;
			}
			@media #{$sm, $xs} {
				font-size: 42px;
			}
			span {
				color: var(--tj-color-theme-primary);
			}
		}
		&-btn {
			margin-top: 30px;
		}
		.footer-contact-infos {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			@media #{$xs} {
              grid-template-columns: 1fr;
            }
			position: relative;
			&::before,
			&::after {
				position: absolute;
				content: "";
				inset-inline-end: 0;
				top: 0;
				width: calc(100% + 4000px);
				height: 1px;
				background-color: var(--tj-color-border-1);
				@media #{$md, $sm, $xs} {
					inset-inline-end: -100%;
				}
			}
			&::after {
				top: auto;
				bottom: 0;
			}
			.infos-right,
			.infos-left {
				padding-top: 76px;
				padding-bottom: 80px;
				@media #{$md, $sm} {
					padding-top: 50px;
					padding-bottom: 50px;
				}
				@media #{$xs} {
					padding-top: 15px;
					padding-bottom: 15px;
				}
			}
			.infos-right {
				padding-inline-start: 40px;
				border-inline-start: 1px solid var(--tj-color-border-1);
				@media #{$xs} {
                  border-inline-start: none;
                }
				margin-inline-start: -25px;
				@media #{$lg} {
					margin-inline-start: 0;
					padding-inline-start: 20px;
				}
				@media #{$md, $sm, $xs} {
					margin-inline-start: 0;
				}
				@media #{$sm} {
					padding-inline-start: 50px;
				}
				@media #{$xs} {
					padding-inline-start: 0;
				}
			}
			.infos-item {
				max-width: 230px;
				span {
					display: inline-block;
					font-size: 14px;
					color: var(--tj-color-common-black-2);
					font-weight: var(--tj-fw-regular);
					margin-bottom: 6px;
				}
				p {
					font-size: 16px;
					font-weight: var(--tj-fw-regular);
					color: var(--tj-color-common-white-2);
					margin-bottom: 6px;
				}
				a {
					font-size: 16px;
					font-weight: var(--tj-fw-regular);
					color: var(--tj-color-common-white);
					position: relative;
					z-index: 1;
					&::before {
						position: absolute;
						content: "";
						width: 100%;
						height: 1px;
						bottom: -2px;
						inset-inline-start: 0;
						transform-origin: right;
						transform: scaleX(0);
						background: var(--tj-color-common-white);
						transition: transform 0.3s ease-in-out;
					}
					&:hover {
						&::before {
							transform-origin: left;
							transform: scaleX(1);
						}
					}
				}
			}
		}
		.contact-form-one {
			max-width: 100%;
			@media #{$lg} {
				padding: 80px 20px;
			}
			@media #{$md} {
				padding: 50px 20px;
			}
		    @media #{$sm, $xs} {
				padding: 50px 20px;
			}
			.form-input {
				@media #{$lg} {
					margin-bottom: 42px;
				}
			}
			textarea {
				height: 140px;
				@media #{$lg, $md, $sm, $xs} {
					height: 130px;
				}
			}
		}
	}
	.backtop {
		inset-inline-end: 40px;
		bottom: 130px;
		@media #{$xxl, $xl, $lg} {
			inset-inline-end: 20px;
			bottom: 90px;
		}
		@media #{$md, $sm, $xs} {
			inset-inline-end: 20px;
			bottom: 50px;
		}
	}
}

.tj-submit-btn {
	width: 100%;
	height: 56px;
	border-radius: 30px;
	padding: 0 30px;
	color: var(--tj-color-common-white);
	background: linear-gradient(to right, #F75763, #C354AF, #9353F5);
	display: flex;
	align-items: center;
	justify-content: center;
	span.btn-icon {
		overflow: hidden;
		position: relative;
		display: inline-flex;
		color: var(--tj-color-common-white);
		i {
			color: var(--tj-color-common-white);
			&:first-child,
			&:last-child {
				transition: transform 0.4s ease-in-out 0s;
			}
		}
		i:last-child {
			position: absolute;
			transform: translateX(-150%);
		}
	}

	.btn-text {
		display: inline-flex;
		overflow: hidden;
		color: var(--tj-color-common-white);
		text-shadow: 0 23px 0 currentColor;
		font-weight: var(--tj-fw-bold);
		> span {
			display: flex;
			align-items: center;
			backface-visibility: hidden;
			transform: translateY(0);
			transition: 0.5s;
		}
	}
	&:hover {
		background: var(--tj-color-common-white);
		span.btn-icon {
			color: var(--tj-color-theme-dark);
			i {
				color: var(--tj-color-theme-dark);
			}
			i:first-child {
				transform: translateX(150%);
			}
			i:last-child {
				transform: translateX(0);
			}
		}
		.btn-text {
			color: var(--tj-color-theme-dark);
			> span {
				transform: translateY(-24px);
			}
		}
	}
}