/*
Theme Name: Ecofam
Theme URI: http://prosoft-phils.com/
Author: LCRP | Prosoft Phils
Author URI: http://prosoft-phils.com/
Description: Responsive Theme for Ecofam
*/

/*--------------------------------------------------------------
STYLE FOR CUSTOM THEME
--------------------------------------------------------------*/
/*section {
	padding-top: 70px;
	padding-bottom: 70px;
}*/

.border-top {
	border-top: 1px solid var(--color-lgray);
}

.border-top-dgrn {
	border-top: 1px solid var(--color-dgrn-gray);	
}

.border-bottom-white {
	border-bottom: 1px solid var(--color-white);
}

.modal {
	z-index: 10002;
}

	.modal-header {
		padding-bottom: 0;
	}

	.modal-header button.close {
	   background: none;
	   border: none;
	   font-size: 30px;
	}

.f20 {
	font-size: 20px;
}

.f24 {
	font-size: 24px;
}

.f64 {
	font-size: 64px;
}

.slick-track
{
    display: flex !important;
    margin-bottom: 1rem;
}

.slick-slide
{
    height: inherit !important;
}

section {
	scroll-margin: 90px;
}

/*--------------------------------------------------------------
LANDING PAGE
--------------------------------------------------------------*/
.landing-pg {
	min-height: 100vh;
   background: url('../img/ecofam-bg.jpg') no-repeat center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   display: flex;
   align-items: center;
   color: #fff !important;
   transition: 0.5s;
}

	.landing-pg a {
		color: #fff ;
		font-family: 'LT Saeada M';	
	}

		.landing-pg a:hover {
			color: #0d6efd;
		}

	.landing-pg p {
		font-size: 31px;
		margin-top: 14px;
		margin-bottom: 2rem;
	}

	.landing-pg i {
		font-family: 'Font Awesome 5 Free' !important;
	}

	.landing-pg ul {
		margin-bottom: 3rem;
	}

	.landing-pg ul li {
		padding-left: 4px;
		padding-right: 4px;
	}

	.landing-pg ul li img {
		border-radius: 26px;
		box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	}

	.landing-pg ul li a:hover {
		opacity: .8;
	}

.btn-learn-more {
	border: 2px dashed #fff;
	border-radius: 30px;
	font-size: 24px;
	font-family: 'LT Saeada M' !important;
	text-decoration: underline;
}
		
	.btn-learn-more:hover,
	.btn-learn-more:focus,
	.btn-learn-more:active,
	.btn-learn-more.active,
	.open > .dropdown-toggle.btn-learn-more {
		color: #9DAF89 !important;
		border-style: solid;
		background-color: #fff;
	}

.landing-pg .contact-div p {
	margin-bottom: 0;
	margin-top: 0;
	font-size: unset;
}

.landing-pg .social-links i {
	font-size: 24px;
}

.landing-pg .social-links i.fab {
	font-family: 'Font Awesome 5 Brands' !important;
}

#popup-learn-more {
	color: #333 !important;
}

#popup-learn-more .modal-body {
	padding: 0 2rem 3rem;
}

#popup-learn-more h2,
.side-content h2 {
	padding-bottom: 0;
	color: #9DAF89;
}

.side-content {
  height: 100%;
  width: 45%;
  position: fixed;
  z-index: 1;
  top: 0;
  right: -45%;
  background-color: #fff;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top:30px;
/*  padding-bottom: 30px;*/
  color: #333;
}

	.side-content .close-btn {
	  position: absolute;
	  top: 20px;
	  right: 15px;
	  font-size: 36px;
	  margin-left: 50px;
	  color: #9DAF89;
	}

	.popup-bg {
		background: url('../img/popup-bg.png') no-repeat top right;
	   -webkit-background-size: contain;
	   -moz-background-size: contain;
	   background-size: contain;
	   -o-background-size: contain;
	   padding-bottom: 120px;
	}

	.side-content.open {
/*		width: 45%;*/
		right: 0;
	}

	#main.open {
		width: 55%;
		margin-left: 0;
	}

	#main.close {
		width: 100%;
		margin-left: 0;
	}

/*--------------------------------------------------------------
HOME
--------------------------------------------------------------*/
.home-fold-1 {
	padding-top: 160px;
   background: url('../img/fold-1-bg.png') no-repeat bottom center;
   background-color: #fff;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   padding-bottom: 0px;
}

	.home-fold-1 h2 {
		line-height: 72px;
		font-weight: 900;
	}

.home-fold-1-1 {
	background: url('../img/fold-1-bg2.png') no-repeat top center;
   background-color: #fff;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   padding-top: 40px;
}

.home-fold-2 {
	padding-top: 80px;
	padding-bottom: 80px;
	background-color: #fff;
}

	.home-fold-2 .slick-list {
		padding-bottom: 30px;
	}

	.slick-dots li button:before {
		font-size: 24px !important;
	}

	.slick-prev:before, .slick-next:before {
		font-size: 36px !important;
	}

	.slick-prev:before, .slick-next:before,
	.slick-dots li.slick-active button:before {
		color: var(--color-green) !important;
	}

	#reviews-carousel .slick-prev {
		left: -42px;
	}

	#reviews-carousel .slick-prev:before, 
	#reviews-carousel .slick-next:before,
	#reviews-carousel .slick-dots li.slick-active button:before {
		color: var(--color-lgreen) !important;
	}

.home-fold-3 {
	padding-top: 80px;
	padding-bottom: 80px;
	background: url('../img/reviews-bg.jpg') no-repeat center;
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 background-size: cover;
	 -o-background-size: cover;
}

.review-box {
	text-align: center;
	background: #fff;
	border-radius: 20px;
	padding: 30px 40px;
	margin-left: 16px;
	margin-right: 16px;
	cursor: grab;
	height: 100%;
}

	.review-box p {
		color: #353839;
	}

	.review-box strong {
		letter-spacing: 1.5px;
	}

.home-fold-4 {
	padding-top: 60px;
	padding-bottom: 80px;
	text-align: center;
}

	.home-fold-4 ul li {
		width: 24%;
		/*margin-left: 30px;*/
		/*margin-right: 30px;*/
		margin-bottom: 1.5rem;
	}

	.home-fold-4 ul li img {
		margin-left: auto;
		margin-right: auto;
	}

.home-fold-4 + .contact-fold {
	padding-top: 0;
}	

.contact-fold {
	padding-top: 60px;
	padding-bottom: 60px;
}

	.contact-fold .form-container {
		border-radius: 40px;
		background: var(--color-green);
		
	}

	.contact-fold .form-heading {
		text-align: left;
		color: #fff;
		padding: 36px 48px 0;
		/*padding: 36px 48px;*/
		margin-top: 100px;
	}

	.contact-fold .form-heading img {
    position: absolute;
    /*top: -100px;*/
    top: -150px;
	}

	.contact-fold .form-body {
		color: var(--color-green);
		background: #F0F0F0;
		border-radius: 40px;
		padding: 36px 48px 0;
		position: relative;
		z-index: 1000;
	}

	.contact-fold .form-body label {
		font-weight: 900;
		font-size: 20px;
		color: var(--color-green);
	}

	.contact-fold .form-body input:not(.btn),
	.contact-fold .form-body textarea {
		border-radius: 20px;
		background-color: #D9D9D9;
	}

.shop-buttons {
	position: relative;
	z-index: 999;
}

	.shop-buttons a {
		display: inline-flex;
		align-items: center;
	}

	.shop-buttons a img {
		height: 1rem;
		width: auto;
	}

.modal-shop-item .modal-content {
	border-radius: 20px;
}

	.modal-shop-item .shop-thumbnail {
		padding: 10px;
		max-height: 250px;
		width: auto;
	}

	.modal-shop-item .modal-body {
		padding: 20px;
	}

	.modal-shop-item .modal-footer {
		background-color: var(--color-armygreen);
		border-bottom-right-radius: 16px;
		border-bottom-left-radius: 16px;
		padding: 20px;
	}

	.products-carousel .slick-prev {
		left: -35px;
	}

	.product-gallery-item {
		border-radius: 16px;
		background-color: #f0f0f0;
	}

	.product-gallery-item {
	   position: relative;
	  /*overflow: hidden;*/
	  /* margin-bottom: 30px; */
	  width: 100%;
	  height: 100%;
	  /*float: left;*/
	  /*margin: 10px;*/
	}

	.product-gallery-item .shop-thumbnail:hover {
		cursor: zoom-in;
	}

	.product-zoomed-container {
	    overflow: hidden;
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 600px;  
	    height: 400px;
	    background: #f0f0f0;
	}

	.zoom-img {
	    position: absolute;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    object-fit: contain;

	    transform-origin: top left;
	}


	.carousel-control-prev-icon {
	 	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23768367'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
	}

	.carousel-control-next-icon {
	  	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23768367'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
	}

	.carousel-control-next, .carousel-control-prev {
		width: 10% !important;
	}

.price-info ul li {
    margin-bottom: .5rem;
}

/*--------------------------------------------------------------
ABOUT
--------------------------------------------------------------*/
.about-fold-1 {
	padding-top: 150px;
	margin-top: 32px;
   background: url('../img/about-banner1.png') no-repeat top;
   /*background-color: #fff;*/
   -webkit-background-size: contain;
   -moz-background-size: contain;
   background-size: contain;
   -o-background-size: contain;
  position: relative;
  color: var(--color-green);
}

	.about-fold-1 h1 {
		font-size: 54px;
		line-height: 46px;
	}

	.about-fold-1 img {
    position: absolute;
    top: 0;
    right: 0;
    width: 800px;
	}

.about-fold-2 {
	margin-top: -100px;
	padding-top: 240px;
	padding-bottom: 80px;
	background: url('../img/about-fold-2-bg.png') no-repeat top center;
	/*background-color: #fff;*/
	 -webkit-background-size: cover;
	 -moz-background-size: cover;
	 background-size: cover;
	 -o-background-size: cover;
	 position: relative;
	 z-index: 1001;
}

	.material-box {
		margin-bottom: 1.5rem;
	}

	.material-box .accordion-item {
		border: none;
		border-radius: 20px;
		padding: 16px;
	}

	.material-box .accordion-header {
		padding-bottom: 0;
	}

	.material-box .accordion-button {
		background: none !important;
		box-shadow: none;
		color: #333;
		padding-bottom: 0;
	}

.about-fold-3 {
	padding-top: 80px;
	padding-bottom: 80px;
}

	.certification-box {
		text-align: center;
		background: #F0F0F0;
		padding: 24px;
		border-radius: 20px;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		align-content: space-between;
	}

	.certification-box:hover {
		background: var(--color-lgreen);
		/*color: #fff;*/
	}

	.certification-box img {
		max-height: 55px;
		width: auto;
		margin: auto;
	}

	.certification-box p {
		width: 100%;
	}

/*--------------------------------------------------------------
JOIN
--------------------------------------------------------------*/
.join-fold-1 {
	padding-top: 150px;
	padding-bottom: 80px;
	margin-top: 32px;
   background: url('../img/join-bg.png') no-repeat top;
   background-color: #fff;
   -webkit-background-size: contain;
   -moz-background-size: contain;
   background-size: contain;
   -o-background-size: contain;
  position: relative;
  color: var(--color-green);
}

.join-fold-2 {
	padding-top: 80px;
	padding-bottom: 80px;
	background: #9DAF89;
	text-align: center;
	color: #fff;
}

.join-fold-3 {
	padding-top: 80px;
	padding-bottom: 80px;
}

	.join-fold-3 .green-story {
		padding: 0 10px;
		position: relative;
		cursor: grab;
	}

	.join-fold-3 .green-story p {
		color: #fff;
		position: absolute;
		bottom: 10px;
		width: 80%;
		left: 50%;
		transform: translateX(-50%);
	}

/*--------------------------------------------------------------
SHOP
--------------------------------------------------------------*/
.shop-fold-1 {
	padding-top: 140px;
	padding-bottom: 100px;
	margin-top: 32px;
   background: url('../img/shop/shop-bg.png') no-repeat top;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
  position: relative;
  color: var(--color-green);
}

.shop-fold-2,
.shop-item-fold {
	padding-top: 60px;
	padding-bottom: 200px;
}

/*--------------------------------------------------------------
CONTACT US
--------------------------------------------------------------*/
.contact-pg {
	padding-bottom: 80px;
}

.contact-pg + .contact-fold {
	padding-bottom: 240px;
}

/*--------------------------------------------------------------
HEADER
--------------------------------------------------------------*/
.desktop-header-fixed {
	padding-bottom: 15px;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 10001;
}

.header {
	-webkit-transition: all 300ms ;
	-moz-transition: all 300ms ;
	-ms-transition: all 300ms ;
	-o-transition: all 300ms ;
	transition: all 300ms ;
}

.top-header {
	background: #333;
	color: #fff;
}

.floating-header {
    margin-top: 1.5rem;
    padding: 15px 60px;
    background: #fff;
    border-radius: 108px;
    box-shadow: 0px 4px 4px 0px #00000026;
}

.logo img {
	max-height: 55px;
}

/*HEADER ON SCROLL*/
.desktop-header-scroll {
	/*background: #fff;*/
	-webkit-transition: all 300ms ;
	-moz-transition: all 300ms ;
	-ms-transition: all 300ms ;
	-o-transition: all 300ms ;
	transition: all 300ms ;
}

/*.desktop-header-scroll ul.nav-menu > li > a {
		color: #333;
	}

.desktop-header-scroll .logo img {
	width: 65%;
}
*/

/*NAV MENU*/
.menu-nav {
	align-self: center;
}

ul.nav-menu,
ul.footer-menu {
	list-style: none;
	text-align: right;
	padding-left: 0;
	/*border: 1px solid red;*/
	margin: 0;
}

ul.footer-menu {
	columns: 2;
	-webkit-columns: 2;
   -moz-columns: 2;
   text-align: left;
}

	ul.nav-menu li {
		display: inline-block;
	}

		ul.nav-menu > li > a,
		ul.footer-menu > li > a {
			text-decoration: none;
			font-family: 'LT Saeada L', arial, sans-serif;
			padding: 5px 20px;
			-webkit-transition: all 300ms ;
			-moz-transition: all 300ms ;
			-ms-transition: all 300ms ;
			-o-transition: all 300ms ;
			transition: all 300ms ;
			display: block;
		}

		ul.nav-menu > li > a {
			color: var(--color-white);
		}

		ul.footer-menu > li > a {
			color: var(--color-dgray);
		}

	ul.nav-menu li:last-child {
		background: var(--color-green);
		color: #fff !important;
		border-radius: 18px;
	}

		ul.nav-menu li:last-child:hover {
			background: var(--color-lgreen);
		}

	ul.nav-menu li:last-child a {
		color: var(--color-white) !important;
	}

	/*NAV ACTIVE LINK*/
	ul.nav-menu > li.current_page_item > a,
	ul.nav-menu > li.current-menu-item > a {
		color: var(--color-armygreen) !important;
		font-weight: 700;
	}

	/*NAV ON HOVER*/
	ul.nav-menu li a:hover{
		-webkit-transition: all 300ms ;
		-moz-transition: all 300ms ;
		-ms-transition: all 300ms ;
		-o-transition: all 300ms ;
		transition: all 300ms ;
	}

	ul.nav-menu li:not(:last-child) a:hover {
		color: var(--color-armygreen) !important;
	}

	ul.nav-menu li:last-child a:hover {
		color: var(--color-blue) !important;
	}

	ul.footer-menu li a:hover {
		color: var(--color-armygreen);
	}

/*----- NAV MENU: 1st LEVEL SUB MENU -----*/
	ul.nav-menu li ul.sub-menu {
		display: none;
	}

	ul.nav-menu li:hover ul.sub-menu {
		display: block;
	}
	
	ul.nav-menu li ul.sub-menu {
		list-style: none;
		padding-left: 0px;
		text-align: center;
		position: absolute;
		z-index: 1001;
		background: rgba(0,0,0,0.9);
		border-top: 3px solid #6b0500;
		margin-left: 0;
	}

	ul.nav-menu li ul.sub-menu li {
		display: block;
		margin-left: 0;
		border-bottom: 1px solid rgba(255,255,255,0.2);
	}

	ul.nav-menu li ul.sub-menu li a {
		color: #fff;
		display: block;
		min-width: 100px;
		padding-top: 6px;
		padding-bottom: 6px;
	}

		ul.nav-menu li ul.sub-menu li a:hover {
			background: #6b0500;
			-webkit-transition: all 0ms !important;
			-moz-transition: all 0ms !important;
			-ms-transition: all 0ms !important;
			-o-transition: all 0ms !important;
			transition: all 0ms !important;
		}

	ul.nav-menu > li.menu-item-has-children a::after {
		content: "\f107";
		font-family: 'Font Awesome 5 Free';
  		font-weight: 900;
		padding-left: 10px;
		color: red;
	}

		ul.nav-menu > li.menu-item-has-children ul li a::after {
			content: none;
		}

/*--------------------------------------------------------------
FOOTER
--------------------------------------------------------------*/
section:last-of-type {
	background: url('../img/trees-bg.png') no-repeat;
	background-position: bottom center;
	background-attachment: fixed;
	background-size: cover;
	padding-bottom: 200px;
}

footer {
	padding-top: 80px;
	/*padding-top: 200px;*/
	/*padding-top: 550px;*/
	margin-top: -140px;
	/*margin-top: -300px;*/
   background: url('../img/footer-bg.png') no-repeat top;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
   /*padding-bottom: 100px;*/
   padding-bottom: 10px;
   position: relative;
}

	/*footer .floating-trees {
		position: fixed;
		z-index: -1;
		bottom: 0;
		width: 100%;
	}*/

.social-profiles {
	/*border: 2px solid #fff;*/
	/*border-radius: 40px;*/
	width: fit-content;
}

.social-profiles li {
	padding: 4px 20px;
}

/*.social-profiles li:not(:last-child) {
	border-right: 2px solid #fff;
}*/

.social-profiles i {
	font-size: 28px;
}

/*--------------------------------------------------------------
404 PAGE
--------------------------------------------------------------*/
.pg-404 {
	position: relative;
	height: 100vh;
}

.pg-404-content {
	width: 100%;
	position: absolute;
	left: 50%;
	top: 60%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

	.pg-404-content i {
		margin-bottom: 20px;
	}

	.pg-404-content h1 {
		margin-bottom: 20px;
	}

	.pg-404-content p {
		margin-bottom: 0;
	}

/*--------------------------------------------------------------
NAV TAB STYLE RESET
--------------------------------------------------------------*/
.nav-tab-style-reset .nav-tabs {
	border-bottom: none;
}

.nav-tab-style-reset .nav-tabs .nav-item.show .nav-link,
.nav-tab-style-reset .nav-tabs .nav-link.active {
	background: none;
	border-color: none;
}

.nav-tab-style-reset .nav-tabs .nav-link {
	border: none;
}