/* ----------------------------------------------------

                Home Product Area CSS

---------------------------------------------------- */

.product-area { 

	padding: 60px 0 90px 0;

	position: relative;

}

@media (max-width: 991px) {

    .product-area {

    	padding-bottom: 30px;

	}

}



.product-area .main_title {

    margin-bottom: 50px;

}

@media (max-width: 991px) {

   	.product-area .main_title {

    	margin-bottom: 50px;

	}

}

.product-area .main_btn {

    font-size: 14px;

    line-height: 98px;

    width: 100%;

    margin-top: 30px;

}

.product-area .main_btn img {

   	width: auto !important;

    display: inline-block !important;

    -webkit-filter: brightness(0) invert(1);

    -moz-filter: brightness(0) invert(1);

    -ms-filter: brightness(0) invert(1);

    -o-filter: brightness(0) invert(1);

    filter: brightness(0) invert(1);

    margin-left: 32px;

    -webkit-transition: all 0.3s ease 0s;

    -moz-transition: all 0.3s ease 0s;

    -o-transition: all 0.3s ease 0s;

    transition: all 0.3s ease 0s

}

.product-area .main_btn:hover img {

    -webkit-filter: grayscale(100%);

    -moz-filter: grayscale(100%);

    -ms-filter: grayscale(100%);

    -o-filter: grayscale(100%);

    filter: grayscale(100%);

}



.single-product {

  	position: relative;

  	margin-bottom: 20px;

	padding: 15px;

}

@media (max-width: 991px){

	.single-product {

		padding: 0;

	}

}

.single-product .product-details {

    position: absolute;

    left: 0;

    bottom: 0;

    padding: 30px 50px;

    display: inline-block;

    background: white;

}

@media (max-width: 767px) {

    .single-product .product-details {

     	position: relative;

        width: 100%;

        background: #f9f9ff;

		padding: 30px;

	}

}



.single-product .product-details p {

	text-transform: uppercase;

	color: #1bbcad;

	font-size: 14px;

	margin-bottom: 5px;

	font-family: "Roboto";

}

.single-product .product-details h4 {

	font-family: "Arial";

	font-size: 24px;

	line-height: normal;

	margin: 0;

	font-weight: 600;

}

.single-product .product-details a {

    font-size: 16px;

    margin: 10px 0 0 0;

	color: #999;

	font-family: "Arial";

	font-weight: 400;

	text-transform: capitalize;

}

.single-product .product-details a:hover {

	text-decoration: underline;

	color: #1bbcad;

}







/* ----------------------------------------------------

              Why Choose Us Area CSS

---------------------------------------------------- */

.whyChooseus {

	padding-bottom: 60px;

}

.scroll-bg {

	width: 100%;

	height: 100%;

  	background: url("../../images/bg-img/pattern-light-blue-full.png") center repeat-x;

  	background-size: contain;

  	-webkit-animation: scroll 5s linear infinite;

          	animation: scroll 5s linear infinite;

}

@-webkit-keyframes scroll {

  to {

    background-position: -960px 150px;

  }

}

@keyframes scroll {

  to {

    background-position: -960px 150px;

  }

}

@media (max-width: 991px){

	.scroll-bg {

		/*display: none;*/

	}

}





.eachReason {

	position: relative;

	border-radius: 20px;

	background-color: white;

	border: 1px solid #ccc;

	padding: 45px 30px 30px 30px !important;

	margin: 45px 0 0 0;

}

.eachReason h5 {

	font-family: "Arial";

}

@media (min-width: 768px){

	.eachReason {

		padding: 30px !important;

		margin: 25px 0 0 0;

	}

}



.eachReason:hover > h5 {

	color: #24bbad;

	font-weight: 600;

}

.eachReason:hover {

	border: 2px solid #24bbad;

	cursor: pointer;

}

.eachReason:hover::before, 

.eachReason:hover::after { 

	position: absolute; 

	background: inherit; 

	content: ""; 

	z-index: 1;

}

.eachReason:hover::before { 

	width: 100px;

	left: calc(50% - 50px);

	height: calc(100% + 4px);

	top: -2px; 

}

.eachReason:hover::after {

	height: 100px;

	left: -2px;

	width: calc(100% + 4px);

	top: calc(50% - 50px);

}

.eachReason:hover > * {

	position: relative;

	z-index: 2;

}

.eachReason img {

	display: block;

	border: none;

	padding: 20px;

	margin-bottom: 30px;

	border-radius: 15px;

	background-color: #24bbad;

}

.eachReason h5 {

	color: black;

}

.eachReason p {

	font-size: 17px;

	margin: 15px 0 0 0;

	word-wrap: break-word;

	color: currentColor;

}