@charset "utf-8";
/*
Theme Name: CJ Harvest Supermarket
Author: Webdesign 309
Author URI: http://www.webdesign309.com/
Description: We are a full service webdesign and development company delivering high end design and development solution for our clients and delivering best solutions to attract more visibility and customization to your website.
Version: 3.0.0
Tags: peoria web development, chicago web development, custom wordpress development, advertising agency solutions, florida webdesign, chicago webdesign, illinois webdesign, custom webdesign development
*/


/* CSS Document */
/*----------------------------------------------------------------------------- */
@font-face { font-family: 'Adoha'; src: url('fonts/Adoha.eot'); src: url('fonts/Adoha.eot?#iefix') format('embedded-opentype'), url('fonts/Adoha.woff2') format('woff2'), url('fonts/Adoha.woff') format('woff'), url('fonts/Adoha.ttf') format('truetype'), url('fonts/Adoha.svg#Adoha') format('svg'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat-black'; src: url('fonts/Montserrat-Black.eot'); src: url('fonts/Montserrat-Black.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat-Black.woff2') format('woff2'), url('fonts/Montserrat-Black.woff') format('woff'), url('fonts/Montserrat-Black.ttf') format('truetype'), url('fonts/Montserrat-Black.svg#Montserrat-Black') format('svg'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat-bold'; src: url('fonts/Montserrat-Bold.eot'); src: url('fonts/Montserrat-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat-Bold.woff2') format('woff2'), url('fonts/Montserrat-Bold.woff') format('woff'), url('fonts/Montserrat-Bold.ttf') format('truetype'), url('fonts/Montserrat-Bold.svg#Montserrat-Bold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat-medium'; src: url('fonts/Montserrat-Medium.eot'); src: url('fonts/Montserrat-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat-Medium.woff2') format('woff2'), url('fonts/Montserrat-Medium.woff') format('woff'), url('fonts/Montserrat-Medium.ttf') format('truetype'), url('fonts/Montserrat-Medium.svg#Montserrat-Medium') format('svg'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat-Regular'; src: url('fonts/Montserrat-Regular.eot'); src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat-Regular.woff2') format('woff2'), url('fonts/Montserrat-Regular.woff') format('woff'), url('fonts/Montserrat-Regular.ttf') format('truetype'), url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat-SemiBold'; src: url('fonts/Montserrat-SemiBold.eot'); src: url('fonts/Montserrat-SemiBold.eot?#iefix') format('embedded-opentype'), url('fonts/Montserrat-SemiBold.woff2') format('woff2'), url('fonts/Montserrat-SemiBold.woff') format('woff'), url('fonts/Montserrat-SemiBold.ttf') format('truetype'), url('fonts/Montserrat-SemiBold.svg#Montserrat-SemiBold') format('svg'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Advantage'; src: url('fonts/Advantage.eot'); src: url('fonts/Advantage.eot?#iefix') format('embedded-opentype'), url('fonts/Advantage.woff2') format('woff2'), url('fonts/Advantage.woff') format('woff'), url('fonts/Advantage.ttf') format('truetype'), url('fonts/Advantage.svg#Advantage') format('svg'); font-weight: normal; font-style: normal; font-display: swap; }

:root{
--body-color: rgb(0, 0, 0);;
--header: rgb(0, 0, 0); 
--primary-color:rgb(0, 154, 0);
--second-primary-color: rgb(255, 102, 0);
--white-color:rgba(255, 255, 255, 1);
--span-font:'Advantage';

--body-font: 'Montserrat-Regular';
--heading-font: 'Adoha';
--font-semibold:'Montserrat-SemiBold';
--font-bold:'Montserrat-bold';
--font-medium:'Montserrat-medium';
--font-black:'Montserrat-black';

}

/* ::selection{
color: var(--body-color);
background-color: var(--white-color);
} */
/* 1. Create a Clean Base
------------------------------------------------------------------------------*/

html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address,
small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label,input, textarea, option, .nobox 
{background: transparent; border: 0; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}

blockquote, q {quotes: none;}
br {height: 0;}
ul, ol, dl, li {margin:0; padding:0; list-style-type: none;}
ul, ol {margin:0 0 0 0px;}
html, body{ border:none; -webkit-text-size-adjust:none;}


/* 2. Define Base Typography
------------------------------------------------------------------------------*/
body{padding: 0;margin: 0;font-family: var(--body-font); font-size: 16px; color: var(--body-color); line-height: 30px; box-sizing: border-box; overflow-x: hidden;}
*, *:after, *:before {box-sizing: border-box;}

svg path{ transition: all 0.3s; }

/* Create the Default Headers  */
h1, h2, h3, h4, h5, h6 {margin: 0; font-weight: normal;color: var(--header); line-height:1.2; font-family: var(--heading-font);}

/* Specific Header Settings */
h1,.h1 {font-size:80px;}
h2,.h2 {font-size:60px; line-height: 70px; }
h3,.h3 {font-size:34px;}
h4,.h4 {font-size:24px;}
h5,.h5 {font-size: 23px;}
h6,.h6 {font-size: 22px;}

/* Create the Default Paragraphs */
p {margin-bottom: 20px; }

/* Other Typo */
strong {font-weight: bold;}
hr {border:0 #000 solid; border-top-width: 1px; clear: both; height: 0;}
ol {list-style: decimal;}
ul {list-style: disc;}

/* 3. Images
------------------------------------------------------------------------------*/

/* Remove border around linked images */
img {max-width: 100%; border: 0; border-style: none;}

/* 4. Links
------------------------------------------------------------------------------*/

/* Default Link Types */
a {text-decoration:none;transition: 0.5s; display: inline-block; color:var(--primary-color); }


/* 5. Forms
------------------------------------------------------------------------------*/
.button, a.button, button, html input[type="button"], input[type="reset"], input[type="submit"] { font-family: var(--font-semibold); font-weight: normal; margin: 0 0 0 0;  padding:14px 45px;  border-radius:29px; background-color:var(--primary-color); border: 1px solid transparent; display: inline-block; vertical-align: middle; font-size: 16px; color: var(--white-color); line-height: 30px; position: relative;outline: none;box-shadow: none;text-align: center;text-decoration: none;-webkit-transition: 0.3s ease-in-out;transition: 0.3s ease-in-out; overflow: hidden; position: relative;z-index: 1; text-transform: uppercase;}
.button.button-border, a.button.button-border, button.button-border, html input[type="button"].button-border, input[type="reset"].button-border, input[type="submit"].button-border {background-color:transparent; color: var(--primary-color); border: 1px solid var(--primary-color);}

.button.button-border:after, a.button.button-border:after{border-radius:0; content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-color); z-index: -2; transition: all .35s}
.button.button-border:hover:after, a.button.button-border:hover:after{width: 0%;}

.button:hover, a.button:hover, button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { background-color: var(--second-primary-color); color: var(--white-color); }

input[type="search"], input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea {padding:10px 24px; font-family: var(--body-font);  font-size: 16px; background-color:transparent; letter-spacing: 0;width: 100%; color:var(--white-color); text-transform: none; filter: alpha(opacity=100); border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 6px;-webkit-border-radius: 6px;-moz-border-radius:6px; line-height:16px; box-shadow: none;-webkit-box-shadow: none;-moz-box-shadow: none;outline: none !important; width: 100%;-webkit-appearance: none;-moz-appearance: none;appearance: none; resize: none;}

input::-webkit-input-placeholder {color:  #777777;opacity:1;} 
input:-moz-placeholder {color: #777777; opacity:1;} 
input::-moz-placeholder {color:  #777777; opacity:1; } 
input:-ms-input-placeholder {color:  #777777;opacity:1;} 
textarea::-webkit-input-placeholder {color:  #777777; opacity:1; } 
textarea:-moz-placeholder {color: #777777; opacity:1; } 
textarea::-moz-placeholder {color:  #777777; opacity:1; } 
textarea:-ms-input-placeholder {color:  #777777;opacity:1; }

/* Removes fieldset borders. even on Opea 7 */
fieldset {border: 1px solid transparent;}

textarea{ min-height: 120px; }
/* 6. Tables
------------------------------------------------------------------------------*/

/* Table Fixes */
table {border-spacing: 0; border-collapse: collapse;}
td {text-align: right; font-weight: normal;}


/* 7. Framework
------------------------------------------------------------------------------*/
/* container */
.container{max-width: 1360px; width: 100%; padding-left: 50px; padding-right: 50px; margin: 0 auto;}
.row{display: flex;flex-wrap: wrap; margin-left: -15px; margin-right: -15px;}
/* .col-12,.col-11,.col-10,.col-9,.col-8,.col-7,.col-6,.col-5,.col-4,.col-3,.col-2,.col-1{position: relative; width: 100%; padding-right: 15px; padding-left: 15px; } */


.col_4 {max-width: 25%;}
.col_3 {max-width: 33.33%;}
.col_2 {max-width: 50%;}
.col_1 {max-width: 100%;}


.d-flex{ display:flex;}
.flex-wrap{flex-wrap:wrap;}
.justify-content-start{justify-content:flex-start;}
.justify-content-center{justify-content:center;}
.justify-content-end{justify-content:flex-end;}
.justify-content-between{justify-content:space-between;}
.align-items-start{align-items: flex-start;}
.align-items-center{align-items: center;}
.align-items-end{align-items: flex-end;}
.row-reverse{flex-direction: row-reverse;}
.text-center{text-align: center;}
.text-left{text-align: left;}
.text-right{text-align: right;}
.font-light {font-weight: 300;}
.table {width: 100%;}

.common_color{ color: var(--primary-color); }

header{ position: absolute; width: 100%; left: 0; top: 0; padding: 28px 0;z-index: 1; }
.header-container{ padding: 0 66px; display: flex; align-items: center; justify-content: space-between; /*overflow: hidden;*/}
.menu-toggle{ width: 40px; height: 26px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; cursor: pointer; position: relative;} 
.menu-toggle span{ background-color: var(--white-color); height: 3px; display: block; position: relative; width: 100%; transition: all 0.3s; }
/* .menu-toggle.active span{ background-color: var(--second-primary-color); } */
.menu-toggle.active span:nth-child(1){ transform: translateY(11px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity: 0; visibility: hidden; }
.menu-toggle.active span:nth-child(3){ transform: translateY(-9px) rotate(-45deg); }
.menu-toggle::before { content: ""; position: absolute; top: 50%; left: 50%; width: 55px; height: 55px; background: rgb(255, 102, 0); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease; z-index: 0; }
.menu-toggle:hover::before,.menu-toggle.active::before{ transform: translate(-50%, -50%) scale(1); }
.menu-toggle.active{ height: 23px; width: 32px; }

.header-menu{ display: flex; align-items: center; justify-content: flex-end; gap: 25px; }
nav ul{ display: flex; align-items: center; justify-content: flex-end; gap: 60px; }
nav ul li { line-height: 0;  opacity: 0; transform: translateY(20px); transition: all 0.4s ease;}
nav ul li a{ position: relative; text-transform: uppercase; font-family: var(--font-medium); font-size: 18px; line-height: 1.2; color: var(--white-color); transition: color 0.5s ease;}
.header-logo { max-width: 10%; width: 100%; line-height: 0; }
.header-logo a{ width: 100%; height: 100%; line-height: 0; }
nav ul li a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--second-primary-color), transparent); background-size: 300% 100%; opacity: 0; transition: opacity 0.5s; }
nav ul li a:hover { color: var(--second-primary-color); }
nav ul li a:hover::after { opacity: 1; animation: shimmer111 2s linear infinite !important; }
@keyframes shimmer111 { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
nav ul li a::before{ content: ''; height: 100%; border-right: 1.75px solid #fff; right: -30px; top: 0; position: absolute; }
nav ul li:last-child a::before{ display: none; }


/* banner */
.banner{ position: relative; padding: 0 20px; }
.video{ position: relative;height: 902px; border-radius: 0 0 30px 30px; overflow: hidden; }
.video video{ width: 100%; height: 100%; object-fit: cover;}
.video::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: #244901; left: 0; top: 0; opacity: 72%; }
.banner-content { position: absolute; bottom: 170px; width: 39%; }
.banner-content h1{ color: var(--white-color); }
.loading-letters { display: inline-block; perspective: 1000px; }
.loading-letters span { display: inline-block; transform-origin: 50% 50% -25px; transform-style: preserve-3d; animation: rotateIn 1.2s ease forwards; }
@keyframes rotateIn { 0% { transform: rotateX(-360deg); opacity: 0; color: orange; } 70% { transform: rotateX(0deg); opacity: 1; color: orange; } 100% { transform: rotateX(0deg); opacity: 1; color: white; } }

/* contribution */
.contribution{ padding: 90px 0 45px; position: relative; }
.contribution .container { overflow: auto; }
.contribution .container::after { content: ""; display: block; clear: both; }
.contribution-content{ float: left; width: 512px; margin-right: 150px; margin-bottom: 5px;  } 
.contribution-list ul{ padding: 15px 0 0; }
.contribution-list ul li{ float: left; width: 11%; font-family: var(--font-semibold); font-size: 20px; margin: 0 0px 30px 60px;  }
.contribution-list ul li:nth-child(n+4){ margin-right: 11px; }
.contribution-list ul li img{ display: block; max-width: 116px; height: 95px; margin-bottom:30px; }
.name { font-family: var(--span-font); font-size: 40px; display: block; width: 100%; line-height: normal; padding: 10px 0 30px; }
.stronger{ padding: 45px 0; position: relative; }
.stronger-inr{ display: flex; align-items: center; justify-content: space-between; gap: 64px; }
.stronger-left{ max-width: 52%; width: 100%;  }
.stronger-right{ max-width: 43%; }
.stronger-left-box{ position: relative; padding: 30px 0; height: 800px; }
.stronger-left-content{ position: absolute; top: 0; right: 0; text-align: right; color: var(--second-primary-color); font-family: var(--font-semibold); font-size: 16px; text-transform: uppercase;}
.stronger-left-content span{  color: rgb(94, 189, 5);font-family: var(--heading-font); display: block; font-size: 98px; line-height: 0.8;}
.top-left { width: 470px; border-radius: 30px; overflow: hidden; height: 590px; }
.top-left img,.bottom-right img{ width: 100%; height: 100%; object-fit: cover; }
.bottom-right{ width: 430px; height: 430px; position: absolute; bottom: 0; right: 0; border-radius: 30px; overflow: hidden;}
.stronger-right-box { padding: 0 20px; }
.stronger-right-box h2{ padding-bottom: 15px; }
.top-right { position: absolute; top: -100px; right: 0; height: 540px; animation: float 4s ease-in-out infinite; }
 /* @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } */



.partern{ padding: 45px 0 120px; position: relative; text-align: center; }
.partern h2{ padding: 0 0 15px; line-height: 70px; }
.partern-inr{ display: flex; align-items: start; justify-content: center; margin: 10px -22px 15px; position: relative; } 
.partern-item{ max-width: 25%; width: 100%; padding: 0 22px; position: relative;  }
.partern-item-box{ position: relative; text-align: left; }
.partern-item-box span{ font-size: 12px; display: block; width: 100%; }
.partern-item-box h3{ font-size: 20px; padding: 5px 0px; font-family: var(--font-bold); }
.partern-item-box .img-box{ margin-bottom: 20px; border: 1px solid var(--second-primary-color); width: 137px; height: 137px; border-radius: 50%; background-color: #fff; display: flex; align-items: center; justify-content: center; }
.partern-item::before{ content: ''; position: absolute; border-top: 1px dotted var(--header); width: 151px; top: 70px; right: 0; z-index: 0;  }
.partern-item:last-child:before{ display: none; }
.bottom-left{ position: absolute; left: 0; bottom: 0px; height: 550px; object-fit: contain; } 

.community{ position: relative; overflow-x:hidden; display: flex; justify-content: space-between; gap: 20px; }
.community > div{ max-width: 50%; width: 100%; position: relative; }

.community-left-box { line-height: 0; border-radius: 0 30px 30px 0; overflow: hidden; width: 100%; position: relative; left: 0; transform: translateX(-100%); transform-origin: left center; transition: all 0.5s; }
.community-right-box{line-height: 0; border-radius: 30px 0 0 30px; overflow: hidden; width: 100%; right: 0; position: relative; transform: translateX(100%); transform-origin: right center; transition: all 0.8s;}
.community.my-added-class .community-left-box, .community.my-added-class .community-right-box{ transform: translateX(0); }
.community > div img{ width: 100%; height: 100%; object-fit: cover; }
.community-content{ position: absolute; width: 36%; right: 210px; top: 218px; text-align: center; color: var(--white-color); line-height: 30px; }
.community-content h3{ font-size: 30px; line-height: 30px; text-align: center; padding: 15px 0 10px; }
.community-content svg { width: 45px; height: 45px; } .community-content svg path { fill: var(--white-color); animation: grow 0.8s infinite alternate ease-in-out; transform-origin: center; transform-box: fill-box; } @keyframes grow { from { transform: scale(0.9); fill: var(--white-color); } to { transform: scale(1); fill: rgb(94, 189, 5); } }

.popular{ position: relative; width: 100%; padding: 140px 0 70px; } 
.popular-inr{ display: flex; justify-content: space-between; }
.popular-left{ max-width: 45%; width: 100%; }
.popular-left-box h2{ padding: 0 0 10px; }
.accordion { position: relative; padding-left: 43px; }
.accordion-item { border-bottom: 1px solid rgb(197, 197, 197); padding: 15px 0; position: relative; }
.accordion-header { display: flex; align-items: center; cursor: pointer; }
.accordion-header .icon { font-size: 22px; width: 25px; font-weight: bold; transition: transform .3s ease; }
.accordion-header h3 { margin: 0; font-size: 18px; font-family: var(--font-bold);}
.accordion-body { height: 0; overflow: hidden; padding-left: 0px; transition: height .45s ease; }
.accordion-item.active .icon { transform: rotate(180deg); }
.accordion-item:last-child{ border-bottom: 0; }
.accordion-item::before{ content: '+'; position: absolute; left: -35px; top: 10px; font-size: 22px; color: var(--header); font-family: var(--font-bold); transition: 0.3s; }
.accordion-item.active::before{ content: '-'; ; }
.popular-right{ max-width: 39%; width: 100%; position: relative; }
.popular-counter { width: 280px; height: 180px; padding:0 38px; color: var(--white-color); border-radius: 20px;
  background-color: rgb(94, 189, 5); line-height: normal; display: flex; flex-direction: column; justify-content: center; }
.popular-counter > span{ font-family: var(--font-semibold); color: var(--white-color); display: block; padding: 0 0 5px; }
.popular-counter > span:last-child{ font-family: var(--body-font); }
.popular-counter h3{ font-size: 60px; line-height: 70px; color: var(--white-color); position: relative; }
.popular-counter h3::after{ content: '+'; position: relative; right: -2px; font-size: 60px; color: var(--white-color); font-family: var(--heading-font);  }
.couter-inr { display: flex ; gap: 20px; position: absolute; bottom: 75px; left: -157px; }
.popular-right-box { line-height: 0; position: relative; }
.popular-counter:last-child{ background-color: rgb(255, 102, 0); }
.top-right-egg{ position: absolute; right: 0; top: 95px; }

.join{ padding: 50px 0 111px; position: relative; }
.join-team-inr{ display: flex; justify-content: center; margin: 0 -10px; flex-wrap: wrap; }
.join-team-inr .join-item{ max-width: 33.33%; width: 100%; padding: 10px 10px; }
.join-team-inr .join-item .join-box{ width: 100%; position: relative;  overflow: hidden;  border-radius: 40px; background-color: rgb(197, 197, 197); line-height: 0;}
.join-team-inr .join-item .join-box img{ width: 100%; height: 100%; object-fit: cover; }
.join-team-inr .join-item .join-box .join-content{  width: 100%; padding: 29px 40px; background-color: rgb(250, 182, 136);  }
.join-team-inr .join-item .join-box .join-content a{font-family: var(--heading-font); font-size: 30px; line-height: 30px; display: flex; align-items: center; justify-content: space-between; color: var(--header);  }
.join-team-inr .join-item .join-box .join-content a:hover{ color: var(--white-color); }
.join-team-inr .join-item .join-box .join-content img{ width: 32px; height: 32px; filter: invert(0); transition: all 0.5s; }
.join-team-inr .join-item .join-box .join-content a:hover img{ filter: invert(1); }
.join-team-inr .join-item.sky-blue .join-content{ background-color: rgb(160, 231, 242); }
.join-team-inr .join-item.green .join-content{ background-color: rgb(174, 233, 118); }
.top-left-banana{ position: absolute; bottom: -50px; left: 0; }
/* footer */
footer{ padding: 0 20px; position: relative ; color: var(--white-color);}
.footer-bg{ background-color: rgb(36, 73, 1); border-radius: 30px 30px 0 0; padding:70px 0 55px; }
.footer-inr{ display: flex; align-items: start; justify-content: space-between; gap: 100px; }
.footer-left{ max-width: 40%; width: 100%; }
.footer-left ul{ column-gap: 0; column-count: 2; }
.footer-left ul li{ padding: 0 0 5px; }
.footer-left ul li a{ color: var(--white-color); }
.footer-right{ max-width: 60%; width: 100%; }
.footer-right h2{ color: var(--white-color); padding: 0 0 15px; }
.footer-right input[type="email"]{   border-radius: 10px;
  background-color: rgb(255, 255, 255); height: 53px; padding: 0 24px !important; color: var(--body-color); margin-bottom: 20px; }
.footer-left .social-icon { display: flex ; gap: 30px; align-items: center; justify-content: flex-start; padding: 47px 0 25px; }
.footer-left  .social-icon a{ width: 35px; height: 35px; position: relative; }
.footer-left  .social-icon a img{ filter: invert(1); }
.footer-left p{ margin: 0; }
.footer-left  .social-icon a::before { content: ""; position: absolute; top: 50%; left: 50%; width: 45px; height: 45px; background: rgb(255, 102, 0); border-radius: 50%; transform: translate(-50%, -50%) scale(0); transition: transform 0.4s ease; z-index: 0; }
.footer-left  .social-icon a:hover:before{ transform: translate(-50%, -50%) scale(1); }

ul li ul.sub-menu { padding-left: 0 !important; gap: 0; white-space: nowrap; background-color: var(--primary-color); display: block; border-radius: 5px; flex-direction: column; gap: 0; position: absolute; margin: 0; z-index: 3; margin-top: 11px; text-align: center; transform: scaleY(0); transition: all 0.3s ease; transform-origin: top; box-shadow: rgba(50, 50, 93, 0.15) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px; }
ul li ul.sub-menu li { padding: 10px 15px; display: block; border-bottom: 1px solid #fff;opacity: 1; transform: none;}
ul li ul.sub-menu li a { color: var(--white-color); text-align: left; display: block; }
ul li ul.sub-menu li a:hover{ color: var(--second-primary-color); }
ul li ul.sub-menu li a::after,ul li ul.sub-menu li a::before{ display: none; } ul li:hover > ul.sub-menu { transform: scaleY(1); }
ul li ul.sub-menu li:last-child{ border: 0; }



/*News Letter Footer */
.mailpoet_form{padding: 0 !important;}
.mailpoet_form .mailpoet_submit{display: inline-block;padding: 14px 45px !important;}
.mailpoet_form input.parsley-error{border: 2px solid red;}
.mailpoet_form .parsley-required, .mailpoet_form .parsley-custom-error-message{color: #fff;}


/* inner-pages */
.inner-banner{ position: relative; padding: 0 20px; }
/* .inner-banner .video{ min-height: 400; } */
/* .inner-banner .video img { width: 100%; height: 100%;} */
.inner-banner .banner-content{ width: 80%; font-size: 16px; color: var(--white-color); }
.inner-banner .banner-content h2{ font-size: 28px;color: rgb(94, 189, 5); line-height: 1.322; padding: 15px 0; }
.inner-banner .video::before{ opacity: 1; }
.inner-main-div::before{ content: ''; position: absolute; width: 100%; height: 100%; background-color: #244901; left: 0; top: 0; opacity: 1;  }
.inner-main-div .banner-content{ position: relative; bottom: auto; top: auto; left: auto; }
.inner-main-div { position: relative; padding: 136px 0 30px; border-radius: 0 0 30px 30px; overflow: hidden}
header.header-inner-logo { padding: 15px 0; }
header.header-inner-logo .header-logo { max-width: 7%;}

.about-contribution{ padding: 50px 0; }
.about-contribution-list{ padding-top: 15px; display: flex; justify-content: center; flex-wrap: wrap; margin: 0 -8px; gap: 15px 0; }
.about-contribution-item{ max-width: 25%; width: 100%; padding: 0 8px; }
.about-contribution-item .about-contribution-box{ width: 100%; position: relative; height: 100%; }
.about-contribution-item .about-contribution-box img{ margin: 0 0 10px; min-height: 111px; object-fit: none; }
.about-contribution-item .about-contribution-box  strong{ display: block; padding: 0 0 10px; font-family: var(--font-semibold);   font-size: 20px;}
.about-sub{ font-family: var(--font-semibold); display: block; padding: 0 0 8px; }
.about-community .container-box { line-height: 1.875; width: 69%; margin-left: auto; padding-right: 50px; padding-top: 0px; }
.about-community .container-box h2{ padding: 0 0 20px; }

.about-join{ padding: 60px 0; }

.meet{ position: relative; padding: 65px 0; }
.meet-inr{ display: flex; justify-content: center;  flex-wrap: wrap; gap: 44px; }
.meet-inr .meet-item{ max-width: 31%; width: 100%;  /* padding: 0 42px; */ }
.meet-item-box{ width: 100%; border-radius: 40px; overflow: hidden; /* height: 100%; */ }
.meet-item-box a{ line-height: 0; position: relative; }
.meet-img-box{ width: 100%;  height: 300px; overflow: hidden; position: relative;}
.meet-img-box a::before,.meet-img-box::before{content: ''; position: absolute; width: 100%; height: 100%; background-color: #244901; left: 0; top: 0; opacity: 72%; }
.meet-img-box img{ width: 100%; height: 100%; object-fit: cover; object-position: top; }
.meet-box-content{ padding: 25px; background-color: rgb(243, 241, 233); min-height: 376px; display: flex; flex-direction: column; }
.meet-box-content h3{ font-size: 20px; font-family: var(--font-semibold); padding: 0 0 12px; }
.meet-box-content .btn{ margin-top: auto; }
.meet-box-content .btn a{ line-height: 30px; }
.contact{ padding: 55px 0 95px; position: relative; }
.contct-inr{  display: flex; border-radius: 40px; overflow: hidden; width: 100%; overflow: hidden; background-color: rgb(244, 244, 244);}
.contact-left-img{ max-width: 45%; width: 100%; line-height: 0; }
.contact-left-img .contact-left-box{ width: 100%; line-height: 0; position: relative; height: 100%; }
.contact-left-img .contact-left-box img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; }
.contact-right-img { width: 100%; max-width: 55%;}
.contact-right-img .contact-right-box{  padding: 60px;  }
.contact-right-img .contact-right-box .input-fild{ width: 100%; padding-bottom: 20px; }
.contact-right-img .contact-right-box .input-fild:last-child{ padding: 0; }
.contact-right-img .contact-right-box .input-fild label{ font-size: 16px; display: block; padding: 0 0 8px; }
.contact-right-img .contact-right-box .input-fild input, textarea{ border-width: 1px; border-color: rgb(227, 227, 227); border-style: solid; border-radius: 7px; background-color: rgb(255, 255, 255); height: 51px; color: #000; }
.contact-right-img .contact-right-box .input-fild input[type="submit"]{font-family: var(--font-semibold); font-weight: normal; margin: 0 0 0 0; padding: 14px 45px; border-radius: 29px; background-color: var(--primary-color); border: 1px solid transparent; display: inline-block; vertical-align: middle; font-size: 16px; color: var(--white-color); line-height: 30px; position: relative; outline: none; box-shadow: none; text-align: center; text-decoration: none; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; overflow: hidden; position: relative; z-index: 1; text-transform: uppercase; height: auto; }
.contact-right-img .contact-right-box .input-fild input[type="submit"]:hover{ background-color: var(--second-primary-color); color: var(--white-color); }

.store-location{ width: 69%; line-height: 1.875; margin-right: auto;  padding-left: 40px; padding-top: 25px;}
.store-location ul li img{ width: 23px; height: auto; margin-top: 4px;}
.community-right-box{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
.store-location ul li, .store-location ul li a{ color: var(--body-color); }
.store-location ul li{ padding: 0 0 25px; display: flex; align-items: flex-start; justify-content: flex-start; gap: 14px; }
.store-location h2{ padding: 0 0 40px; }
.store-location ul li a:hover{ color:var(--second-primary-color); }
.store-location ul li strong{ display: block; }
.about-community .community-left{ display: flex; flex-direction: column; justify-content: center; }


html::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: var(--primary-color); }
html::-webkit-scrollbar { width: 6px; background-color: var(--second-primary-color); }
html::-webkit-scrollbar-thumb { background-color: var(--second-primary-color); }

.wpcf7-not-valid-tip{ display: none; }
.wpcf7-not-valid{ border: 1px solid red !important; }
.wpcf7 form .wpcf7-response-output{ margin: 15px 0 0; text-align: center; }
.popular-img { width: 100%; border-radius: 30px; overflow: hidden; }
.popular-img img{ border-radius: 30px; }
.submit-recaptcha { display: flex; align-items: center; gap: 20px; }
.recaptcha .wpcf7-not-valid-tip{ display: block !important; font-size: 14px; }

input[type="submit"]{ cursor: pointer; }
.footer-left ul li a:hover{ color: var(--second-primary-color); }
.meet-box-content h3 a:hover{ color: var(--second-primary-color); }

/* def-page */ 
.def-page{padding: 50px 0px 50px;}
.def-page p{ color: var(--body-color); font-style: normal; font-weight: normal; line-height: 28px;}
.def-page .right-img{float:right; margin:0 0 15px 40px; position: relative; z-index: 0; }
.def-page .left-img{float:left; margin:0 40px 15px 0; position: relative;}
.def-page .right-img img{border-radius: 10px; position: relative; border: 1px solid #0472B0;}
.def-page .left-img img{border-radius: 10px; position: relative; border: 1px solid #0472B0;}
.def-page h2, .def-page h3, .def-page h4, .def-page h5, .def-page h6{ margin: 0 0 10px 0;}
.def-page h2{font-size: 60px;line-height: 70px;} 
.def-page h3{font-size: 55px;line-height: 65px;}
.def-page h4{font-size: 50px;line-height: 60px;}
.def-page h5{font-size: 45px;line-height: 55px;} 
.def-page h6{font-size: 40px;line-height: 40px;}
.def-page ul {margin: 0;padding-bottom: 20px; }
.overflow{ overflow: inherit !important; }
.def-page ul li { list-style: none; color: var(--body-color);position: relative;padding: 5px 0 10px 25px;}
.def-page ul li:before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--second-primary-color); position: absolute; left: 0px; top: 16px; }
.def-page ol{padding-left: 0; padding-bottom: 20px;}
.def-page ol li {list-style-type:none;counter-increment:item;  padding: 5px 0 5px 0;  color: var(--body-color);}
.def-page ol li:before {display:inline-block; content: counter(item) "."; color: var(--body-color); padding-right:10px;}
.def-page ul.col-2, .def-page ul.col-3 { overflow: hidden }
.def-page ul.col-2 li {width: 50%;float: left;}
.def-page ul.col-3 li {width: 33.33%;float: left;}
.def-page p {padding-bottom: 0px;}
.privacy-page ol { margin-bottom: 25px;}
.privacy-page ol>li:before { padding-right: 05px;}
.privacy-page .privacy-inner{ padding-left: 0px; margin-bottom: 20px;}
.privacy-page .privacy-inner ul{ margin-top: 05px; }
.privacy-page ul,.privacy-page ol{ margin-left:0px;}
.privacy-page ol li{padding: 5px 0px;}
.pagenotfound {width: 100%;display: block;padding: 80px 0px;text-align: center;}
.pagenotfound h2 {font-size: 50px;font-weight: 600;}
.pagenotfound p{font-size: 24px;}
.thankyou {text-align: center;}
/* .thankyou h3 strong {font-size: 46px;} */
.clearfix:after { clear: both; display: block; visibility: hidden; content: ""; }
.def-page a{ color: var(--primary-color); }
.def-page a:hover{color: var(--body-color); }
/* .def-page strong{ font-size: 24px; } */

.our-team .join-team-inr .join-item .join-box .join-content h3 {
    margin-bottom:20px;
}


/* File Upload Styling */
.wpcf7 input[type="file"] { height: auto; width: 100%; padding: 7px 14px 7px 14px; border: 2px dashed #009a00; background: #f4f4f4; font-size: 14px; color: #333; cursor: pointer; transition: all 0.3s ease; }
.wpcf7 input[type="file"]:hover { /*     background: #ffecec; */ border-color: #009a00; }
.wpcf7 input[type="file"]::file-selector-button { padding: 10px 16px; border: none; font-family: var(--font-semibold); font-weight: normal; background: #009a00; color: #fff; cursor: pointer; margin-right: 10px; }
.wpcf7 input[type="file"]::file-selector-button:hover { background: #ff6600; }
.file-note { font-size: 12px; color: #666; margin-top: 6px; display: block; }
.big-textarea textarea, textarea.big-textarea { height: 120px; resize: vertical; }
.page-id-252 .def-page_otr.clearfix,.team_contat{ background-color: rgb(244, 244, 244); border-radius: 40px; padding: 40px; }
.default-content form .contct_form_col { width: 50%; padding: 10px; display: inline-block; vertical-align: top; margin: 0px -2px; }
.default-content form .contct_form_col1 { padding: 10px; }
.contct_form_group input { border-width: 1px; border-color: rgb(227, 227, 227); border-style: solid; border-radius: 7px; background-color: rgb(255, 255, 255); height: 51px; color: #000; /*box-shadow: 2px 0px 5px rgb(71 74 83 / 10%);*/ width: 100%; appearance: none; }
.contct_form_group label{ display: block; padding: 0 0 8px; }
.contct_form_col input[type="radio"]::after { position: absolute; content: ''; height: 15px; width: 15px; border: 2px solid var(--primary-color); border-radius: 50%; top: -8px; left: 0px; background-color: #fff; transition: 100ms; }
.contct_form_col input[type="radio"]:checked::after { background-color: var(--primary-color); }
.contct_form_col input[type="radio"] { height: auto; display: inline-block; margin-right: 10px; position: relative; padding: 0; }
.contct_form_col span.wpcf7-list-item label { display: flex; align-items: center; gap: 10px; }
.contct_form_col .wpcf7-list-item { margin: 0px 15px 0px 0px; }
.contct_form_sub_recpatcha { display: flex; align-items: flex-start; justify-content: center; gap: 10px; position: relative; }
.contct_form_sub_recpatcha .send_btn { padding-top: 7px; }


.meet-img-box::before{ display: none; }