// Product Area
.product_area{
	@extend .section_padding_2;
	.card{ 
		position: relative;
		z-index: 1;	
		border-radius: 0px;
		overflow: hidden;
		border: none;
		margin-bottom: 45px;
		.batch{
			position: absolute;
			z-index: 3;
			background: red;
			padding: 10px;
			font-size: 14px;
		    right: 30px;
		    left: auto;
		    top: 30px;
			color: #fff;
			@include firasans(500);
		}
		.img_wrapper{
			position: relative;
			z-index: 1;	
			text-align: center;
			padding: 40px 30px;
			height: 350px;
			overflow: hidden;
			img{
				border-radius: 0;
				width: 90%;
				@include transition(all, .3s, ease-in-out);
			}
			&:hover .boxed_btn{ top: 40%; opacity: 1;}
			&:hover img{ opacity: .8;}
			.boxed_btn{
				color: #fff;
				opacity: 0;
			    position: absolute;
			    z-index: 1;
			    text-transform: uppercase;
			    @include transition(all, .5s, ease-in-out);
			    top: 30%;
			    @include firasans(500);
			    background: $brand_2;
			    padding: 10px 20px;
			    left: 50%;
			    transform: translateX(-50%);
			    &:hover{
			    	background: $green;
			    	color: #fff;
			    }
			}
		}
		.card-body {
		    text-align: center;
		    padding: 30px 35px;
		    background: #fff;
			h5.card-title {
			    font-size: 20px;
			    @include firasans(700);
				a{
					color: #000;
					&:hover{ color: #000; }
				}
			}
			p.card-text {
			    font-size: 22px;
			    @include firasans(500);
			    text-transform: uppercase;
			    color: $text;
			    span{ opacity: .5; text-decoration: line-through; }
			}	
		}
	}
}


@media #{$tab_device}{
	.product_area .card .img_wrapper {   height: 260px; }
}
@media #{$small_mobile}{

	.product_area .card .img_wrapper {   height: 260px; }
}