.hero-inner {
	background-color: var(--wc-dark-gray-color);
	padding: 4.313rem 4.938rem 4.313rem 6.188rem;
	@media (max-width: 768px) {
		padding: 3.75rem 0.938rem;
		margin-bottom: 3.75rem;
	}
	.wc-hero-content {
		@media (max-width: 767px) {
			padding-bottom: 1.875rem;
		}
	}
	.wc-hero-title {
		font-weight: 700;
		font-size: 2.625rem;
		color: var(--pure-white-color);
		padding-bottom: 1.25rem;
		line-height: 3.75rem;
		@media (max-width: 767px) {
			font-size: 2rem;
			line-height: 2.813rem;
			padding-bottom: 0.938rem;
		}
		span {
			color: var(--wc-primary-color);
		}
	}
	.wc-hero-discripton {
		color: var(--pure-white-color);
		line-height: 2rem;
		padding-bottom: 1.625rem;
		padding-right: 1.25rem;
		@media (max-width: 767px) {
			padding-bottom: 1.25rem;
			padding-right: 0rem;
		}
		@media screen and (max-width: 1024px) {
			padding-bottom: 1.25rem;
			padding-right: 0rem;
		}
	}
	.hero-img {
		display: flex;
		justify-content: end;
		align-items: center;
	}
	.wc-hero-btn {
		display: flex;
		align-items: center;
	}
}

/* Hero style two */
.header-area-2 {
	display: none;
	@media (max-width: 1366px) {
		display: block;
	}
}
.hero-style-two {
	display: flex;
	flex-wrap: wrap;
	height: 890px;

	@media (max-width: 1366px) {
		height: auto;
	}

	.hero-two-nav {
		flex: 0 0 340px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-left: 80px;
		@media (max-width: 1366px) {
			padding-left: 30px;
			position: absolute;
			left: 0;
			top: 0;
			background: #fff;
			z-index: 999999;
			width: 350px;
			height: 100vh;
			border-right: 1px solid #e1e1e1;
			transform: translateX(-100%);
			transition: all 0.3s ease 0s;
		}

		&.show-nav {
			transform: translateX(0);
		}
	}

	.hero-two-content-wrapper {
		flex: 0 0 calc(100% - 340px);
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-right: 120px;
		@media (max-width: 1366px) {
			flex: 0 0 100%;
			padding-right: 0;
		}
	}

	.hero-top-info {
		position: absolute;
		right: 120px;
		top: 65px;
		display: flex;
		align-items: center;
		@media (max-width: 1366px) {
			display: none;
		}
	}
	.hero-social-icon {
		display: flex;
		align-items: center;
		gap: 20px;

		a {
			color: var(--wc-dark-gray-color);
			font-size: 20px;
		}
	}

	.wc-search-toggle {
		margin-left: 20px;
	}

	.hero-two-image,
	.hero-two-content {
		flex: 0 0 50%;
	}

	.hero-two-content {
		position: relative;
		padding-left: 24px;
	}
	.wc-hero-btn {
		display: flex;
		align-items: center;
	}
	.wc-hero-title {
		font-size: 42px;
		font-weight: 700;
		margin-bottom: 20px;
		span {
			color: var(--wc-primary-color);
		}
	}
	.shadow-title {
		font-size: 4rem;
		font-weight: 700;
		margin-left: 0;
		margin-bottom: 30px;
		line-height: 1;
		-webkit-text-fill-color: transparent;
		-webkit-text-stroke-width: 1px;
		-webkit-text-stroke-color: var(--wc-dark-gray-color);

		@media (min-width: 1025px) {
			margin-left: -200px;
			font-size: 114px;
		}
	}
	@media (max-width: 1024px) {
		.hero-two-image {
			display: none;
		}
		.hero-two-content {
			flex: 0 0 100%;
			padding: 80px 20px;
		}
	}
}

// Hero nav
.hero-two-nav {
	.hero-logo {
		padding-top: 60px;
		@media (max-width: 1366px) {
			padding: 30px 0;
		}
	}
	.hero-info-widget {
		padding-bottom: 100px;
		@media (max-width: 1366px) {
			padding: 30px 0;
		}
	}
	.hero-info-item {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		gap: 15px;
		i {
			font-size: 20px;
			color: var(--wc-dark-gray-color);
			color: var(--wc-primary-color);
			margin-right: 20px;
			font-weight: 600;
		}
		a {
			font-family: var(--wc-heading-font);
			color: var(--wc-dark-gray-color);
		}
	}
}
.hero-nav {
	ul {
		gap: 35px;
		display: grid;
		grid-template-columns: 1fr;
	}
	a {
		position: relative;
		font-family: var(--wc-heading-font);
		color: var(--wc-dark-gray-color);
		font-size: 1rem;
		text-transform: capitalize;
		font-weight: 500;
		display: inline-block;
		&:hover {
			color: var(--wc-primary-color);
		}

		span {
			margin-right: 10px;
		}

		&:after {
			content: "";
			position: absolute;
			top: 50%;
			left: auto;
			width: 0;
			height: 1px;
			background-color: var(--wc-primary-color);
			transition: 0.3s ease;
			opacity: 0;
		}
		&:hover:after {
			width: 70px;
			opacity: 1;
		}
	}
}

.wc-nav-toggle-button {
	border: 1px solid #f1f1f1;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	font-size: 18px;
	border-radius: 3px;
}