/* Demo 9 Homepage 9 */
@import '../mixins/clearfix';
@import '../mixins/breakpoints';
@import '../mixins/lazy';
@import '../mixins/buttons';

@import '../config/fonts';
@import '../config/variables';

$primary-color: #1cc0a0;
$secondary-color: #23aa90;


.header.header-6 {
	.header-top {
		background-color: #fafafa;
		.container::after,
		.container-fluid::after {
			height: 0;
		}
	}
	.header-middle {
		.container::after,
		.container-fluid::after {
			content: '';
			position: absolute;
			left: 1rem;
			right: 1rem;
			bottom: 0;
			height: .1rem;
			background-color: #ebebeb;
		}
	}
	.header-bottom {
		background-color: #fff;
		.menu > li:hover,
		.menu > li:focus,
		.menu > li.active {
			> a {
				color: $primary-color;
			}
		}
		.menu > li > a {
			color: #333;
			letter-spacing: .01em;
			&::before {
				height: .2rem;
				bottom: 0;
			}
		}
		.menu > li + li {
			margin-left: .8rem;
		}

		.header-right {
			padding-right: 1rem;
			p {
				color: #222;
				letter-spacing: .01em;
			}
			i {
				color: #222;
			}
		}
	}
	.wishlist-link,
	.cart-dropdown {
		&:hover,
		&:focus {
			.wishlist-txt,
			.cart-txt {
				color: $primary-color;
			}
		}
	}
}
.title-lg {
	font-weight: 400;
}

hr {
	border-top-color: #e9e9e9;
}

.intro-section {
	display: flex;
	flex-flow: row wrap;
	overflow: hidden;
	margin-top: 0;

	.intro-section-slider,
	.icon-boxes-container {
		width: 100%;
	}
}

.intro-section-slider {
	.owl-carousel .owl-stage-outer {
		overflow: visible;
	}
}

.intro-section,
.intro-slider-container,
.intro-slide {
	background-color: #ededef;
}


.intro-slider {
	&.owl-simple .owl-dots {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20px;
	}
}

.intro-slider-container,
.intro-slider .slide-image {
	&:before {
		@include aspect-ratio(1170, 500);
	}
	
	&:before {
		@include mq('xs', 'max') {
			@include aspect-ratio(480, 400);
		}
	}
}

.intro-slide {
	position: relative;

	&:after {
		content: '';
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background-color: rgba(38, 38, 38, .4);
		transition: all 0.55s ease-out .3s;
		opacity: 1;
		visibility: visible;
		z-index: 5;

		.active & {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.intro-content {
	z-index: 3;
	.btn {
		margin-top: .8rem;
		padding-top: 1.4rem;
		padding-bottom: 1.4rem;
	}
}

.intro-subtitle {
	font-size: 1.6rem;
	margin-bottom: .4rem;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.intro-title {
	font-weight: 600;
	font-size: 3rem;
	line-height: 1.16;
	letter-spacing: -.01em;
	margin-bottom: .2rem;
}

.intro-text {
	color: #333333;
	font-weight: 200;
	font-size: 6rem;
	line-height: 1.16;
	letter-spacing: -.01em;
}

.banner-text {
	a {
		color: inherit;

		&:hover,
		&:focus {
			text-decoration: none;
		}
	}
}

.banner-group {
	.banner-content {
		padding-top: 0;
	}
	.banner-subtitle {
		font-size: 1.4rem;
		font-weight: 300;
		letter-spacing: .1em;
		margin-bottom: 1.2rem;
		text-transform: uppercase;
	}
	.banner-title {
		font-weight: 600;
		font-size: 2.2rem;
		line-height: 1.15;
		letter-spacing: -.01em;
		margin-bottom: .1rem;
	}

	.banner-lg {
		position: relative;
		.btn.banner-link {
			margin-top: 2.5rem;
		}
	}
	.banner-text {
		color: $dark-text;
		font-weight: 300;
		font-size: 2.2rem;
		line-height: 1.25;
		letter-spacing: .01em;
		text-transform: uppercase;
	}

	.banner-link {
		margin-top: 1.4rem;
		font-size: 1.3rem;
		letter-spacing: .1em;
		padding: .8rem 2.7rem;
	}

	.btn {
		min-width: 150px;
		border-width: 2px;
	}

	.banner-content {
		left: 20px;

		&.banner-content-bottom {
			bottom: 30px;
		}

		&.banner-content-right {
			left: auto;
			right: 20px;
		}
	}
}

.nav.nav-pills .nav-link:not(:hover):not(:focus):not(.active) {
	color: #ccc;
}

/* Product 7 */
.product.product-7 {
	margin-bottom: 2rem;
	background-color: transparent;
	.product-body {
		background-color: transparent;
		padding-top: 2rem;
		padding-bottom: .8rem;
		text-align: center;
	}

	.product-title {
		margin-bottom: .3rem;
		font-size: 1.4rem;
		letter-spacing: 0;
	}

	.product-price {
		margin-bottom: .8rem;
		font-size: 1.4rem;
		letter-spacing: 0;
		color: #333;
		display: flex;
		justify-content: center;
	}

	.product-action {
		padding-top: 0;
		padding-bottom: 0;
	}

	.ratings-container {
		display: flex;
		justify-content: center;
	}

	.product-label {
		text-transform: uppercase;
		font-size: 1.2rem;
	}

	.product-nav-thumbs a,
	.product-nav-thumbs span {
		height: 5.4rem;
	}

	.btn-product {
		padding-top: 1.3rem;
		padding-bottom: 1.3rem;
		color: #fff;
		background-color: $primary-color;
		border-bottom: none;

		span {
			display: inline-block;
			position: relative;
			color: #fff;
			font-size: 1.4rem;
			transition: all .35s ease;
		}

		&:before {
			display: none;
		}

		&:hover,
		&:focus {
			color: #fff;
			background-color: #222;

			span {
				color: #fff;
				box-shadow: none;
			}
		}
	}

	.product-nav-dots {
		margin-bottom: 1.5rem;
	}

	.btn-product-icon {
		color: #fff;
		background-color: $primary-color;
		&:hover,
		&:focus {
			background-color: #222;
			span {
				background-color: #222;
			}
		}
	}

	&:hover,
	&:focus {
		box-shadow: none;
	}
}

.btn-cart {
	span {
		&:before {
			display: block;
			content: '\e812';
			font-family: "molla";
			position: absolute;
			opacity: 0;
			transform: translateX(-25px);
			position: absolute;
			left: 0;
			top: 50%;
			font-weight: normal;
			font-size: 1.8rem;
			line-height: 1;
			margin-top: -1rem;
			transition: all .35s ease;
		}
	}

	&:hover,
	&:focus {
		span {
			padding-left: 2.6rem;

			&:before {
				opacity: 1;
				transform: translateX(0);
			}
		}
	}
}

.cta {
	.btn:not(.btn-block) {
		min-width: 70px;
	}

	.form-control {
		font-size: 1.3rem;
		letter-spacing: .01em;
		font-weight: 300;
	}
	.form-control::placeholder {
		color: #999;
	}
}

.icon-boxes-container {
	background-color: #222;
}

.icon-box-side {
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
	.icon-box-title {
		font-size: 1.4rem;
		font-weight: 600;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: #fff;
	}
	p {
		font-size: 1.3rem;
	}
}
.icon-box-icon {
	color: #666;
	font-size: 3rem;
}

.cta-title {
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: -.01em;
}

.cta-heading {
	margin-bottom: 2rem;

	.cta-title {
		margin-bottom: .4rem;
	}
}

.cta-desc {
	color: #777;
	font-weight: 300;
	font-size: 1.4rem;

	span {
		color: #333;
	}
}

.heading {
	.title {
		font-size: 2.2rem;
		font-weight: 600;
		letter-spacing: -.01em;
	}
}

.nav.nav-pills .nav-item.show .nav-link,
.nav.nav-pills .nav-item .nav-link.active {
    color: #333;
    border-bottom-color: #333;
    &::before {
    	background-color: #333;
    }
}

.nav.nav-border-anim .nav-link {
	font-size: 1.4rem;
	font-weight: 600;
	letter-spacing: .01em;
	&::before {
		background-color: #333;
	}
}

.featured {
	.owl-simple .owl-nav {
		.owl-prev {
			left: 30px;
		}
		.owl-next {
			right: 30px;
		}
	}
	.owl-simple .owl-nav [class*='owl-'] {
		top: 41%;
		font-size: 2.4rem;
		color: #333;
		width: 60px;
		height: 60px;
		background-color: rgb(255, 255, 255);
		box-shadow: 0 5px 20px rgba(34, 34, 34, .3);

		&:hover,
		&:focus {
			color: $primary-color;
			background-color: rgb(255, 255, 255);
		}
	}
}


.product-banner {

	.banner-content {
		top: 2rem;
		bottom: 3.5rem;
		right: 4rem;
		transform: translateY(0);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.banner-title {
		i {
			font-size: 1.8rem;
			letter-spacing: .1em;
			margin-bottom: 1rem;
		}
		h3 {
			font-size: 1.8rem;
			letter-spacing: .1em;
			font-weight: 300;
			text-transform: uppercase;
		}
		border-bottom: .1rem solid #fff;
	}
	.product-cat {
		margin-bottom: .5rem;
		h4 {
			font-size: 1.4rem;
			font-weight: 400;
			letter-spacing: .1em;
			text-transform: uppercase;
			margin-bottom: 0;
		}
	}
	.product-price {
		margin-bottom: 0;
		h4 {
			font-size: 4rem;
			font-weight: 600;
			letter-spacing: .01em;
			margin-bottom: 0;
		}
	}
	.product-txt {
		letter-spacing: .01em;
		font-weight: 400;
	}
	.btn.banner-link {
		font-size: 1.3rem;
		letter-spacing: .1em;
		border: .2rem solid #fff;
		min-width: 100%;
		margin-top: 2.5rem;
		&:hover,
		&:focus {
			border-color: $primary-color;
		}
	}
}

.footer {
	background-color: #222;
	.footer-logo {
		margin-top: 0;
	}
	.footer-middle {
		border-top: none;
		padding-top: 6rem;
	}
	.widget-about-title {
		color: #fff;
	}
	.widget-about-info a {
		color: $primary-color;
	}
	.widget-title {
		letter-spacing: .01em;
		color: #fff;
	}
}

.footer-bottom .container:before,
.footer-bottom .container-fluid:before {
	background-color: #444;
}
@include mq('sm') {
	
}

@include mq('md') {
	.intro-content {
		.btn {
			margin-top: 1rem;
		}
	}

	.intro-subtitle {
		font-size: 2rem;
	}

	.intro-title {
		font-size: 4rem;
	}

	.intro-price {
		font-size: 4rem;
	}
	
}

@include mq('lg') {
	.intro-section {
		.icon-boxes-container {
			order: -1;
		}
	}

	.intro-subtitle {
		font-size: 2.2rem;
	}

	.intro-title {
		font-size: 5rem;
	}

	.intro-price {
		font-size: 5rem;
	}
	
}

@include mq('xl') {
	.intro-content {
		left: 17rem;
		.btn {
			min-width: 200px;
			margin-top: 1.4rem;
		}
	}

	.intro-subtitle {
		font-size: 1.6rem;
	}

	.intro-title {
		font-size: 6rem;
	}

	.intro-price {
		font-size: 6rem;
	}

	.banner-group {
		.banner-title,
		.banner-text {
			font-size: 2.2rem;
		}

		.banner-content {
			left: 40px;

			&.banner-content-top {
				top: 140px;
			}

			&.banner-content-bottom {
				bottom: 70px;
			}

			&.banner-content-right {
				left: auto;
				right: 50px;
			}
		}
	}
}

@include mq('lg', 'max') {
	.heading {
		text-align: center;
	}
}

@include mq('sm', 'max') {
	.cta {
		.cta-title {
			font-size: 2.2rem;
		}

		.input-group {
			flex-direction: row;
			align-items: center;
			flex-wrap: nowrap;

			.form-control {
				width: 1%;
				margin-bottom: 0;
			}

			.btn {
				margin-top: 0;
			}
		}
	}
}