/*Table of Contents*/
/* 
-> Common styles
-> Media Query styles
*/
/* 
-> Common styles - Starts here
*/

:root {
  --primary-color: #00802D;
  --primary-bg: #FEFCF0;
  --secondary-color: #318EE3;
  --white-color: #ffffff;
  --black-color: #000000;
  --transparent: #ffffff00;
}

/*Font family - Starts here*/
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Medium.eot');
  src: url('../fonts/Satoshi-Medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Medium.woff2') format('woff2'),
      url('../fonts/Satoshi-Medium.woff') format('woff'),
      url('../fonts/Satoshi-Medium.ttf') format('truetype'),
      url('../fonts/Satoshi-Medium.svg#Satoshi-Medium') format('svg');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Bold.eot');
  src: url('../fonts/Satoshi-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Bold.woff2') format('woff2'),
      url('../fonts/Satoshi-Bold.woff') format('woff'),
      url('../fonts/Satoshi-Bold.ttf') format('truetype'),
      url('../fonts/Satoshi-Bold.svg#Satoshi-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/Satoshi-Regular.eot');
  src: url('../fonts/Satoshi-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/Satoshi-Regular.woff2') format('woff2'),
      url('../fonts/Satoshi-Regular.woff') format('woff'),
      url('../fonts/Satoshi-Regular.ttf') format('truetype'),
      url('../fonts/Satoshi-Regular.svg#Satoshi-Regular') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
/*Font family - Ends here*/


body {
  font-family: 'Satoshi', Arial, sans-serif !important;
  font-weight: normal;
  font-size: 16px;
  background: var(--primary-bg);
  color: var(--black-color);
}

.custom-anchor a {
	text-decoration: none;
}

p{
	margin-bottom:0px !important;
}

.home p#breadcrumbs,
.search p#breadcrumbs,
.error404 p#breadcrumbs{
    display: none;
}

/*Font weight - Starts here*/
.font-bold {
  font-weight: bold !important;
}
.font-medium {
  font-weight: 500 !important;
}
.font-regular {
  font-weight: normal !important;
}
/*Font weight - Ends here*/


.primary-button .elementor-button{
	background: var(--primary-color);
	font-size:15px;
	font-weight:bold;
	color: var(--white-color);
	padding: 10px 24px;
	border-radius: 0px;
	&:hover{
		background: var(--black-color);
	}
}
#load-more-btn{
	background: var(--black-color);
	font-size:15px;
	font-weight:bold;
	color: var(--white-color);
	padding: 10px 24px;
	border-radius: 0px;
	&:hover{
		background: var(--primary-color);
	}
}
.main-footer a {
    color: #2676F8;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: 5px;
	&:hover{
		text-decoration: none;
	}
}

/* Home page products styles - starts here */
.home-product-section{
	article.product{
		position:relative;
		a.elementor-post__thumbnail__link {
    		margin-bottom: 0px !important;
		}
		.elementor-post__thumbnail {
    		max-width: 339.75px;
    		max-height: 292.11px;
		}
		.elementor-post__text {
    		position: absolute;
    		bottom: 0px;
    		left: 50%;
			transform: translate(-50%, 0%);
            background: #00802d;
            padding: 13px 15px;
			h3 {
				text-align: center;
				a{
				   	text-align: center;
    				font-size: 20px;
    				font-weight: 700 !important;
    				color: #FFFFFF;	
				}
			}
		}
	}
}
/* Home page products styles - Ends here */

.search-results article.ingredient,
.search-results article.page,
.search-results article.differentiators{
    display: none;
}

.main-header,
.mobile-header{
/* Lang styles - SH */
    .gtranslate_wrapper .gt_option {
        position: absolute !important;
        border: none !important;
        background: #f1f1f1 !important;
        box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05) !important;
        border-radius: 0px !important;
        width: 90% !important;
        overflow: hidden !important;
    }
    .gtranslate_wrapper .gt_switcher .gt_selected a {
        border: 0px !important;
    }
    .gtranslate_wrapper .gt_switcher {
    	border: 1px solid #DBDBDB;
        padding: 5px 7px;
        border-radius: 50px;
        background: #fff;
        width: 140px !important;
    }
/* Lang styles - EH */
/* Search Styles - SH */
	.header-search{
		.prefix-icon {
    		display: none !important;
		}
		.theplus-mailchimp-wrapper .plus-newsletter-input-wrapper span.prefix-icon + input.form-control,
		.theplus-post-search-wrapper .plus-newsletter-input-wrapper span.prefix-icon + input.form-control {
            padding-left: 15px !important;
			padding: 10px 20px;
			outline:0px;
		}
		.theplus-mailchimp-wrapper .plus-newsletter-input-wrapper, 
		.theplus-post-search-wrapper .plus-newsletter-input-wrapper {
			transition: all 0.5s ease-out !important;
            width: 41.6px;
		}
		.theplus-mailchimp-wrapper .plus-newsletter-input-wrapper:hover, 
		.theplus-post-search-wrapper .plus-newsletter-input-wrapper:hover {
			transition: all 0.5s ease-out !important;
			width: 100%;
		}
		button.search-btn-submit {
    		background: #ffffff;
		}
		button.subscribe-btn-submit, 
		button.search-btn-submit{
			color: #000000;
            padding: 6px 7px 6px 4.5px;
            font-size: 16px;
		}
		input:-internal-autofill-selected {
			background-color: #FFFFFF !important;
		}
		form.theplus-post-search-form {
    		margin-bottom: 0;
		}
		.theplus-post-search-wrapper input:focus{
			border: 1px solid #DBDBDB;
		}
	}
/* Search Styles - EH */
}
.main-header{
		position: fixed;
		z-index:9999;
		top:0px;
}
.main-header.header-scroll-effect {
    background: #fff;
    box-shadow: 0px 1px 5px 0px #d5d5d5;
}
/* 
-> Common styles - Ends here
*/

/* 
-> Media Query styles - Starts here
*/

/*Desktop - Large screen*/
@media (min-width: 1025px){
	.main-header{
		.huger-menu{
			.mdp-huger-elementor-mega-menu-item {
    			padding: 7px 25px;
    			border: 1px solid #DBDBDB;
    			border-radius: 50px;
    			background: #fff;
    			height: 41.1px;
    			vertical-align: middle;
				min-width: max-content !important;
				.mdp-huger-elementor-submenu{
					border-radius: 16px;
                    box-shadow: 0px 3px 3px 1px #bfbfbf87;
                    top: 40px;
                    left: 0px;
				}
				&:hover{
					border: 1px solid #00802D;
						.mdp-huger-elementor-mega-menu-title{
							color: #00802D;
							height:34px;
						}
				}
				&.mdp-huger-elementor-mega-menu-item-current{
					border: 1px solid #00802D;
					.mdp-huger-elementor-mega-menu-title{
						color: #00802D;
					}
					.fa-chevron-down:before {
    					color: #00802D;
					}
				}
			}
		}
	}	

}
/*Tab and Mobile*/
@media (max-width: 1025px){
	.single-product .product {
    	width: 100%;
    	padding: 0px 20px;
	}

	.mobile-header {
		position: fixed;
		z-index:9999;
		top:0px;
    	background: #FFF;
		box-shadow: 0px 1px 5px 0px #d5d5d5;
		  nav.elementor-nav-menu--dropdown {
            position: fixed;
            width: 100%;
            left: 0;
            top: 54px;
            z-index: 99;
            height: 100vh;
            border-top: 1px solid #e0e0e0;
			padding-top: 15px;
        }

		.elementor-menu-toggle {
    		padding: 0px;
		}

		.theplus-mailchimp-form input.form-control, 
		.theplus-post-search-form input.form-control {
    		padding: 9px 20px;
		}

        .gtranslate_wrapper .gt_switcher {
            padding: 4px 7px;
        }
        .header-search {
            .theplus-mailchimp-wrapper .plus-newsletter-input-wrapper:hover, .theplus-post-search-wrapper .plus-newsletter-input-wrapper:hover {
                width: 175px !important;
            }
        }
	}
}
/*Tab*/
@media (min-width: 768px) and (max-width: 1025px){
.mobile-header nav.elementor-nav-menu--dropdown {
 top: 80px;
}
.single-product .product{
	margin-top:150px;		
}
/* Home page products styles - starts here */
.home-product-section{
	article.product{
		.elementor-post__text {
            padding: 10px 8px;
			h3 {
				a{
    				font-size: 12px;
				}
			}
		}
	}
}
/* Home page products styles - Ends here */
}

/*Mobile*/
@media (max-width: 767px){
/* Search styles - SH */
.mobile-header{
    .theplus-mailchimp-form input.form-control, .theplus-post-search-form input.form-control {
        padding: 4.5px 20px !important;
    }
    .header-search {
        button.subscribe-btn-submit, button.search-btn-submit {
            color: #000000;
            padding: 0px 6px 0px 0px;
            font-size: 14px;
        }
        .theplus-mailchimp-wrapper .plus-newsletter-input-wrapper, 
        .theplus-post-search-wrapper .plus-newsletter-input-wrapper {
            width: 37px !important;
        }
        .theplus-mailchimp-wrapper .plus-newsletter-input-wrapper:hover, 
        .theplus-post-search-wrapper .plus-newsletter-input-wrapper:hover {
            width: 102px !important;
        }
    }
}
/* Search styles - EH */
/* Lang styles - SH */
.mobile-header {
	.gtranslate_wrapper {
	    .gt_switcher {
            padding: 4px 7px;
            width: 60px !important;
		        .gt_selected a,
		        .gt_option a{
        	        border: 0px !important;
        	        font-size: 0px;
    	        }
        }
	    .gt_switcher a img {
    	    width: 15px !important;
    	    height: 15px !important;
	    }
	    .gt_switcher .gt_selected a:after {
    	    height: 15px;
    	    display: inline-block;
    	    position: absolute;
    	    right: 6px;
    	    width: 10px;
	    }
	}
}
/* Lang styles - EH */
	
/* Home page products styles - starts here */
.home-product-section{
	article.product{
		.elementor-post__thumbnail {
    		max-width: 100%;
    		max-height: 100%;
		}
		.elementor-post__text {
			h3 {
				a{
    				font-size: 16px;
				}
			}
		}
	}
}
/* Home page products styles - Ends here */
.single-product .product{
	margin-top:130px;		
}
}
@media(min-width:390px) and (max-width:767px){
.mobile-header{
    .header-search {
        .theplus-mailchimp-wrapper .plus-newsletter-input-wrapper, 
        .theplus-post-search-wrapper .plus-newsletter-input-wrapper {
            width: 37px !important;
        }
        .theplus-mailchimp-wrapper .plus-newsletter-input-wrapper:hover, 
        .theplus-post-search-wrapper .plus-newsletter-input-wrapper:hover {
            width: 125px !important;
        }
    }
}
}
/* 
-> Media Query styles - Ends here
*/

p#breadcrumbs{
	position: absolute;
    top: 122px;
    text-align: center;
    width: 100%;
	span:first-child{
		display: block;
		width: 1420px;
		margin: auto;
    	text-align: left;
		span:first-child{
			display: inline !important;
		}
	}
	span a{
		color: #7D7D7D !important;
		font-size: 16px;
		font-weight: 500;
		&:hover{
			color: #00802D !important;
		}
		span.breadcrumb_last a{
	    	color: #000000;
			font-weight:600;
		}
	}
	span.breadcrumb-divider {
    	margin: 0px 10px;
	}
}
article{
	img{
		transform: scale(1);
    	transition: all 0.5s ease-out !important;
	}
	&:hover{
		img{
		transform: scale(1.2);
    	transition: all 0.5s ease-out !important;
		}
	}
}

/* new code */
/* Ingredient Filter Styles */
.ingredient-filter-container {
    padding: 40px 20px;
    max-width: 1420px;
    margin: auto;
    margin-top: 150px;
}

.page-title {
    font-size: 34px;
    font-weight: 500;
    margin-bottom: 30px;
}

.search-container {
    margin-bottom: 30px;
}

#ingredient-search-form {
    display: flex;
    max-width: 500px;
}

#ingredient-search {
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #E5E5E5;
    border-radius: 4px 0 0 4px;
    font-size: 14px;
}

.search-btn {
    padding: 10px 20px;
    background-color: #096A2B;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: 500;
}

.search-btn:hover {
    background-color: #07561f;
}

.products-count {
    margin-bottom: 20px;
    font-weight: 500;
}

#filtered-products-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
	justify-content: center;
}

#filtered-products-container.loading {
    opacity: 0.5;
    pointer-events: none;
}


#load-more {
    background-color: #096A2B;
    border: none;
    padding: 10px 40px;
    font-weight: 500;
    margin-top: 30px;
}

#load-more:hover {
    background-color: #07561f;
}

/* Responsive styles */
@media (max-width: 767px) {
    .ingredient-filter-container {
        margin-top: 100px;
        padding: 20px 15px;
    }
    
    .page-title {
        font-size: 24px;
    }
    
    #filtered-products-container {
        gap: 15px;
    }
    
    .col-md-3 {
        width: calc(50% - 7.5px);
    }
}

/* for carousel */
/* Add this to your CSS if needed */
.static-product-images {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.static-product-images img {
    cursor: pointer;
    /* Add any other styling you need */
}

.page-template-ingredient-filter .product-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;

img.product-image {
    max-width: 339.75px;
    max-height: 292.11px;
}
h3.product-title {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0%);
    background: #00802d;
    padding: 13px 15px;
    color: #fff;
    width: 100%;
    border-radius: 0px 0px 8px 8px;
}
}