// Pages

// 1. Shop Page ------------
//	  1.1) Shop Base
//	  1.2) Shop Element
//		   1.2.1) Category Banner
//		   1.2.2) Widget Block

// 2. Product Page ------------
// 3. About Page ------------
//	  3.1) About Base
//	  3.2) About Element
//		   3.2.1) About Page Header
//		   3.2.2) About Cart
//		   3.2.3) About Team Info
//	 	   3.2.4) About Testimonials

// 4. Contact Page ------------
// 5. Responsive --------

// 1. Shop Page ------------
// 1.1) Shop Base
.products-group {
	.product-default {
		margin-bottom: 2.1rem;
	}
}

.breadcrumb-nav {
    border-bottom: none;
}

// 1.2) Shop Element
// 1.2.1) Category Banner
.shop-banner.banner.banner-5 {
    font-size: 1.6rem;
    height: 30rem;
	min-height: 1px;
	background-size: cover;

    h3 {
        font-size: 2.375em;
        line-height: 1.2;
    }

    h4 {
		margin-bottom: .6rem;
        padding: .2em .4em;
        font-size: 1.2em;
        line-height: 1.8;
        text-align: center;
        font-weight: 700;
    }

    .coupon-sale-text {
        b {
			display: inline-block;
			margin-right: 1px;
			padding: 6px 11px 5px 11px;
            font-size: 1.75em;
            line-height: 1;
            text-align: center;
            font-weight: 700;
        }

        i {
            font-size: .7em;
            left: -2.1em;
        }

        sub {
            font-size: 124%;
			font-weight: 700;
        }
    }

    .btn-lg {
        font-size: 0.84375em;
		padding: 1.33em 4.75em 1.32em;
    }
}


// 1.2.2) Widget Block
.widget-block {
	.widget-title {
		padding-bottom: .5rem;
	}

	h5 {
		margin-bottom: 2rem;
		font-weight: 600;
		font-size: 14px;
		color: #7a7d82;
		line-height: 1;
	}

	p {
		font-weight: 400;
		font-size: 15px;
		color: #21293c;
		line-height: 1.42;
	}
}

// 2. Product Page ------------
.product-single-gallery {
    margin-bottom: 2.9rem;
}

.products-section {
	.product-default {
		.product-title {
			margin-bottom: 4px;
		}
	}

	.products-slider {
		padding-bottom: 1.2rem;
		margin-bottom: 1.2rem;
	}

	h2 {
		margin-bottom: 2.4rem;
		font-size: 1.6rem;
	}
} 

.custom-widget-container {
	.product-default {
		.product-title {
			margin-bottom: 5px;
			letter-spacing: 0;
		}
	}
}

// 3. About Page ------------
// 3.1) About Base
.about {
	.text-bg {
		margin-bottom: 1.7rem;
		color: #282d3b;
		font-size: 18px;
		line-height: 28px;
	}

	p {
		line-height: 24px;
	}

	.about-title {
		font-size: 2.4rem;
    	line-height: 1.15;
	}
}

.accordion-section {
	margin-top: .6rem;
}

// 3.1) About Element
.page-header-bg {
	padding: 11.3rem 0 9.6rem;

	h1 {
		color: #333;
		font-size: 3.5rem;
		font-family: $font-family;
		letter-spacing: .04em;
	}
}

// 3.2.1) About Cart
.card.card-accordion {
	.card-header {
		padding-top: .5rem;
		padding-bottom: .6rem;
		font-size: 18px;
		font-weight: 500;
		border: 0;
		color: $primary-color-dark;
		font-family: $font-family;
		letter-spacing: 0;
	}

	p {
		padding: 0.4rem 0 1.7rem;
	}
}

// 3.2.2) About Team Info
.team-section {
	padding-top: 7rem;
	padding-bottom: 7.2rem;
	background-color: #e5e5e5;

	.about-title {
		margin-bottom: 3.3rem;
	}

	.btn {
		padding: 1.5rem 4.63rem;
		margin-top: 5.6rem;
		font-size: 14px;
		line-height: 14px;
		border: none;
		background: #515151;
		color: #ffffff;
	}
}

.team-info {
	figure {
		overflow: hidden;
	}

	img {
		transition: transform .35s;
	}

	&:hover {
		img {
			transform: scale(1.1, 1.1);
		}
	}
}

// 3.2.4) About Testimonials
.testimonials-section {
    padding: 6.6rem 0 7.5rem;

	.about-title {
		margin-bottom: 3.3rem;
	}
	
	.testimonial blockquote {
		padding: 6px 20px 5px;
		margin: 0;

		&::before {
			display: none;
		}

		p {
			font-size: 16px;
			line-height: 1.85;
			font-family: $font-family;
			letter-spacing: 0.023em;
			text-align: center;

			&:before {
				content: '“';
				float: left;
				font-size: 37px;
				color: #141a1f;
				line-height: 0.5;
			}

			&:after {
				content: '“';
				float: right;
				font-size: 37px;
				color: #141a1f;
				line-height: 0.5;
				transform: scaleX(-1);
			}
		}
	} 
}

.testimonial-owner {
	span {
		text-transform: capitalize;
		font-size: 1.4rem;
		letter-spacing: 0;
	}

	figure {
		margin: auto;
		margin-bottom: .8rem;
		max-width: 70px;
	
		img {
			border-radius: 50%;
		}
	}
} 

.testimonial-title {
	margin: 0;
	font-weight: 500;
    text-transform: capitalize;
    font-size: 1.8rem;
}

.team-name {
	text-transform: uppercase;
    font-size: 17px;
    letter-spacing: .05em;
    color: #111;
    margin-top: 2.9rem;
}

// 4. Contact Page ------------
.contact-two {
	#map {
		margin-bottom: 1.6rem;
		height: 300px;
	}
  
	> .container {
	  	margin-bottom: 7.2rem;
	}
  
	.contact-title {
	  	margin-bottom: 1.8rem;
	  	font-weight: 300;
	  	color: rgb(119, 119, 119);
	}
  
	label {
		margin-bottom: 1.1rem;
	}
  
	.form-control {
	  	height: 38px;
	}
  
	textarea.form-control {
	  	min-height: 140px;
	}
  
	.form-group {
	  	margin-bottom: 1.8rem;
	}
  
	.btn {
		margin-top: 5px;
		padding: .9rem 1.5rem .9rem 1.5rem;
		font-size: 1.3rem;
		font-weight: 700;
	}
  
	.contact-info {
		margin-top: -4px;
  
		>div {
				margin-bottom: .5rem;
		}
  
		i {
			display: inline-block;
			margin-right: 2rem;
			border-style: solid;
			border-width: 1px;
			width: 43px;
			height: 43px;
			line-height: 40px;
			border-radius: 0;
			font-size: 16px;
			color: #ffffff;
			border-color: #ea6a4a;
			background: #ea6a4a;
		}
	}
}
  
.porto-sicon-description {
	line-height: 1.75;
}
   
.products-section .owl-carousel.dots-top .owl-dots {
    margin: 0px -2px 2.5rem;
}

.card.card-accordion .card-header{
	&:after {
		content: '\f067';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		font-size: 10px;
		right: 5px;
		color: #fff;
	}

	&:before {
		content: '';
		position: absolute;
		width: 18px;
		height: 18px;
		border-radius: 50%;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	&:not(.collapsed) {
		&:before {
			background: $primary-color-dark;
		}
	}

	&.collapsed {
		&:after {
			content: '\f068';
		}

		&:before {
			content: '';
			background-color: #929292;
		}
	}
}


// 5. Responsive
@include mq( xl, max ) {
	.shop-banner.banner.banner-5 h3 {
		font-size: 2.2em;
	}
}

@include mq( lg, max ) {
    .shop-banner.banner.banner-5 {
        font-size: 2vw;
    }
}

@include mq( sm, max ) {
    .shop-banner.banner.banner-5 {
        font-size: 1.3rem;
    }
} 

@include mq( xs, max ) {
	.product-price {
		font-size: 1.2rem;
	}
}