//=====section heroSlider starts=====
.heroSlider{
	.swiper-slide{
		display: flex;
		flex-wrap: wrap;
	}
	.image{
		width: 50%;
		@include breakpoint (small)
		{
			width: 100%;
		}
		img{
			width: 100%;
			height: 550px;
			@include breakpoint (medium)
			{
				height: 500px;
			}
			@include breakpoint (medium)
			{
				height: 400px;
			}
			@include breakpoint (smaller)
			{
				height: 300px;
			}
		}
	}
	.text{
		width: 50%;
		padding: 0 5%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-position: center;
		background-size: cover;
		position: relative;
		z-index: 1;
		@include breakpoint (small)
		{
			width: 100%;
			padding: 6% 5%;
		}
		&::before{
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			background-color: #ffffffe3;
			z-index: -1;
		}
		h2{
			font-size: 40px;
			font-weight: 200;
			@include breakpoint(wider)
			{
				font-size: 35px;
			}
			@include breakpoint(wide)
			{
				font-size: 30px;
			}
			@include breakpoint(small)
			{
				font-size: 26px;
			}
			@include breakpoint(smaller)
			{
				font-size: 20px;
			}
			span{
				color: $primary;
				font-weight: 600;
			}
		}
		h3{
			font-size: 46px;
			color: $secondary;
			font-weight: 800;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			display: -webkit-box;
			-webkit-line-clamp: 2;	
			@include breakpoint(wider)
			{
				font-size: 40px;
			}
			@include breakpoint(wide)
			{
				font-size: 35px;
			}
			@include breakpoint(wide)
			{
				font-size: 24px;
				margin-bottom: 4px;
			}
		}
		h4{
			font-size: 24px;
			font-weight: 200;
			margin-bottom: 20px;
			@include breakpoint(small)
			{
				font-size: 22px;
			}
			@include breakpoint(smaller)
			{
				font-size: 18px;
				margin-bottom: 10px;
			}
		}
	}
	.swiper-button-next, .swiper-button-prev{
		color: #111;
		height: 60px;
		line-height: 60px;
		width: 60px;
		border-radius: 50%;
		background-color: #fff;
		@include breakpoint (small)
		{
			height: 50px;
			line-height: 50px;
			width: 50px;
		}
		@include breakpoint (smaller)
		{
			height: 40px;
			line-height: 40px;
			width: 40px;
			top: 70%;
		}
		&:after{
			font-size: 20px;
			@include breakpoint (smaller)
			{
				font-size: 18px;
			}
		}
	}
}
//=====section heroSlider ends=====

//=====section product categories starts=====
.category-card{
	.image{
		overflow: hidden;
		border-radius: 10px;
		img{
			width: 100%;
			height: 200px;
			@include breakpoint (small)
			{
				height: 180px;
			}
			@include breakpoint (smaller)
			{
				height: 140px;
			}
		}
	}
	.text{
		text-align: center;
		h3{
			font-size: 18px;
			font-weight: 600;
			color: #111;
			margin-top: 10px;
			@include transition(.3s);
			@include breakpoint (smaller)
			{
				font-size: 16px;
			}
			&:hover{
				color: $secondary;
			}
		}
	}
	&:hover{
		.image{
			img{
				transform: scale(1.1);
			}
		}
	}
}
//=====section product categories ends=====

//=====section info banner1 starts=====
.info-banner1{
	background-color: $primary;
}
.banner-text{
	text-align: center;
	color: #fff;
	.image{
		height: 100px;
		width: 100px;
		border-radius: 50%;
		background-color: #fff;
		padding: 16px;
		margin: 0 auto;
		@include breakpoint (smaller)
		{
			height: 90px;
			width: 90px;
		}
	}
	.text{
		h2{
			font-size: 32px;
			font-weight: 700;
			margin: 16px 0 10px;
			
			@include breakpoint (smaller)
			{
				font-size: 20px;
			}
		}
		p{
			margin-bottom: 10px;
			@include breakpoint (smaller)
			{
				margin-bottom: 0;
			}
		}
		a{
			margin: 10px 5px 0;
			&.light{
				background-color: #fff;
				color: $secondary;
				&:hover{
					background-color: $secondary;
					color: #fff;
				}
			}
			&:hover{
				background-color: #fff;
				color: $secondary;
			}
		}
	}
}
//=====section info banner1 ends=====

//=====section product display 1 starts=====
.product-row{
	@include row;
	.product-col{
		@include col(20%);
		@include breakpoint (medium)
		{
			@include col(25%);
		}
		@include breakpoint (small)
		{
			@include col(33.33%);
		}
		@include breakpoint (smaller)
		{
			@include col(50%);
			padding: 0;
		}
		&.mt{
			@include breakpoint (smaller)
			{
				margin-top: 0;
			}
		}
	}
}
.card1{
	text-align: center;
	padding: 10px;
	border-radius: 4px;
	border: 1px solid transparent;
	@include transition (.3s);
	.image{
		border-radius: 10px;
		overflow: hidden;
		img{
			width: 100%;
			height: 180px;
			@include breakpoint (smaller)
			{
				height: 110px;
			}
		}
	}
	.text{
		h3{
			font-size: 15px;
			font-weight: normal;
			color: #111;
			margin: 10px 0 8px;
			@include transition(.3s);
			&:hover{
				color: $secondary;
			}
		}
		h4{
			color: #222;
			font-size: 18px;
			font-weight: 600;
			margin: 0;
			@include breakpoint (smaller)
			{
				font-size: 16px;
			}
			del{
				font-weight: normal;
				color: #444;
			}
			ins{
				text-decoration: none;
			}
		}
	}
	&:hover{
		border-color: $secondary;
	}
}
//=====section product display 1 ends=====

//=====section product display 2 starts=====
.display2{
	background-color: #d6dac4;
	.display-card{
		position: relative;
		height: 100%;
		@include breakpoint (smaller)
		{
			margin-bottom: 10px;
			height: auto;
		}
		img{
			width: 100%;
			height: 100%;
			@include breakpoint (small)
			{
				height: auto;
			}
		}
		.text{
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 10% 16px 16px;
			background-image: linear-gradient(to top, #000 30%, #ffffff00 100%);
			color: #fff;
			h3{
				font-size: 24px;
				font-weight: 700;
				@include breakpoint (smaller)
				{
					font-size: 20px;
				}
			}
			h4{
				font-size: 18px;
				font-weight: 200;
				margin-bottom: 16px;
			}
		}
	}
}
.product-row2{
	@include row;
	.product-col2{
		@include col(25%);
		@include breakpoint (medium)
		{
			@include col(33.33%);
		}
		@include breakpoint (smaller)
		{
			@include col(50%);
			padding: 0;
		}
		&.mt{
			@include breakpoint (smaller)
			{
				margin-top: 0;
			}
		}
		.card1{
			.image{
				img{
					height: 140px;
					@include breakpoint (wide)
					{
						
					}
				}
			}
		}
	}
}
//=====section product display 2 ends=====

//=====section info banner2 starts=====
.info-banner2{
	background-color: $secondary;
}
//=====section info banner2 ends=====

//=====section testimonials starts=====
.test-card{
	padding: 20px;
	border-radius: 10px;
	border: 1px solid #ddd;
	@include breakpoint (smaller)
	{
		padding: 16px;
	}
	.rating{
		margin-bottom: 16px;
		i{
			color: #efb70a;
			font-size: 15px;
		}
	}
	.author{
		img{
			height: 50px;
			width: 50px;
			max-width: 50px;
			border-radius: 50%;
		}
		.name{
			margin-left: 16px;
			h3{
				font-weight: 600;
				margin-bottom: 4px;
				font-size: 18px;
			}
			span{
				color: #111;
				font-size: 15px;
			}
			a{
				color: $secondary;
				&:hover{
					color: $primary;
				}
			}
			span, a{
				@include breakpoint (smaller)
				{
					font-size: 15px;
				}
			}
		}
	}
	.desc{
		p{
			color: #111;
			margin: 16px 0 0;
			text-align: justify;
			@include breakpoint (smaller)
			{
				text-align: left;
			}
		}
	}
}
.testimonialSlider{
	.swiper-slide{
		height: auto;
	}
	
}
.swiper-pagination{
	position: relative;
	bottom: unset;
	margin-top: 1rem;
	.swiper-pagination-bullet{
		height: 12px;
		width: 12px;
		border-radius: 10px;
		@include transition (.3s);
	}
	.swiper-pagination-bullet-active{
		width: 30px;
		background-color: $secondary;
	}
}
//=====section testimonials ends=====

.cate-title{
	font-size: 24px;
	font-weight: 700;
	span{
		display: block;
		font-weight: 300;
		margin-top: 8px;
		font-size: 16px;
	}
}
.p-title{
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 1rem;
}
.p-intro{
	padding-left: 40px;
	@include breakpoint (medium)
	{
		padding-left: 0;
		margin-top: 5%;
	}
	.p-price{
		font-weight: 600;
		font-size: 20px;
		color: $secondary;
		margin-bottom: 1rem;
	}
	h4{
		font-size: 18px;
		font-weight: 600;
	}
	ul{
		padding: 0;
		li{
			position: relative;
			list-style-type: none;
			padding-left: 20px;
			margin-bottom: 6px;
			&::before{
				content: '\f14a';
				@include fontawesome;
				color: #8bc34a;
				position: absolute;
				top: 0;
				left: 0;
			}
		}
	}
	.cart-button{
		margin-top: 1rem;
	}
	form{
		input{
			width: 50px;
		}
		button{
			display: inline-block;
			padding: 10px 20px;
			background-color: $secondary;
			color: #fff;
			border-radius: 4px;
			&:hover{
				background-color: $primary;
				color: #fff;
			}
		}
	}
	.category{
		font-size: 16px;
		font-weight: 600;
		margin-top: 1rem;
		span{
			font-weight: normal;
		}
	}
}
//=====section blog starts=====
.blog-card{
	.image{
		overflow: hidden;
		border-radius: 10px;
		img{
			height: 300px;
			width: 100%;
			@include transition (.5s);
			@include breakpoint (smaller)
			{
				height: auto;
			}
		}
	}
	h5{
		color: #222;
		margin: 10px 0 8px;
		font-size: 18px;
		font-weight: 600;
		line-height: normal;
		@include transition (.3s);
		&:hover{
			color: $secondary;
		}
	}
	&:hover{
		.image{
			img{
				transform: scale(1.2);
			}
		}
	}
}
.date{
	i, span{
		font-size: 15px;
	}
	i{
		color: $secondary;
	}
	span{
		color: #222;
	}
}
.related-blog{
	padding-left: 40px;
	@include breakpoint (medium)
	{
		padding-left: 0;
	}
	h4{
		margin-bottom: 1rem;
		font-weight: 600;
	}
	.date{
		margin: 0!important;
	}
}
.single-page{
	.single-title{
		margin-top: 1rem;
		font-weight: 600;
		@include breakpoint (small)
		{
			font-size: 20px;
		}
		@include breakpoint (smaller)
		{
			font-size: 18px;
		}
	}
	.date{
		margin-bottom: 1rem;
	}
}
//=====section blog ends=====

//=====section faq starts=====
.faq-page{
	.accordion-button{
		font-size: 18px;
		position: relative;
		padding: 16px 20px 16px 45px;
		@include breakpoint (smaller)
		{
			font-size: 16px;
		}
		&::before{
			content: '\f059';
			@include fontawesome;
			@include vcenter;
			left: 1rem;
			color: $primary;
			font-size: 20px;
		}
	}
	.accordion-button:not(.collapsed){
		background-color: transparent;
		color: $secondary;
		box-shadow: none;
	}
}
//=====section faq ends=====