@charset "utf-8";

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

Name: style.css
Version: 1.0

-------------------------------------
Table of contents

    01. Google font
    02. Reset
    03. Typography
    04. Hover
    05. Height
    06. Width
    07. Float
    08. Bottom
    09. Margin
    10. Color
    11. Padding
    12. Border
    13. Font Size
    14. Line Height
    15. Banner
    16. Button
    17. Position
    18. Top Social Link
    19. Navigation Bar
    20. Counter Section
    21. Transition
    22. OverFlow
    23. Shape Box
    24. Z Index
    25. Display Block
    26. Volunteer
    27. Footer Section

*/

/* ===================================
    Google font
====================================== */

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900');

/* ===================================
    Reset
====================================== */
html {scroll-behavior: smooth}
body{color:#777; font-size: 14px; font-weight: 300}
.carousel-inner {overflow: hidden}
.navbar {margin-bottom: 0}
ul{margin: 0; padding: 0; list-style-type:none}
a:hover{text-decoration: none}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{margin: 0}
p{margin-bottom: 0;}
a{text-decoration: none}

figure{margin: 0}
/* ===================================
    Typography
====================================== */
/*font family*/
.roboto_font {font-family: 'Roboto', sans-serif;}
/* ===================================
    Border
====================================== */
.border_tb{border-top: 1px solid #ccc; border-bottom: 1px solid #ccc}
/* ===================================
    Letter Spacing
====================================== */
.letter_spacing_2{letter-spacing: 2px}
/* ===================================
    Margin
====================================== */
.margin_0_auto{margin: 0 auto}
/*margin*/
.margin_lr_30       {margin: 0 30px}
/*Margin Bottom*/
.margin_bottom_5    {margin-bottom: 5px}
.margin_bottom_10   {margin-bottom: 10px}
.margin_bottom_15   {margin-bottom: 15px}
.margin_bottom_20   {margin-bottom: 20px}
.margin_bottom_25   {margin-bottom: 25px}
.margin_bottom_26   {margin-bottom: 26px}
.margin_bottom_30   {margin-bottom: 30px}
.margin_bottom_35   {margin-bottom: 35px}
.margin_bottom_40   {margin-bottom: 40px}
.margin_bottom_50   {margin-bottom: 50px}
.margin_bottom_53   {margin-bottom: 53px}
.margin_bottom_60   {margin-bottom: 60px}
.margin_bottom_65   {margin-bottom: 65px}
.margin_bottom_70   {margin-bottom: 70px}
.margin_bottom_75   {margin-bottom: 75px}
.margin_bottom_80   {margin-bottom: 80px}
.margin_bottom_85   {margin-bottom: 85px}
.margin_bottom_90   {margin-bottom: 90px}
.margin_bottom_95   {margin-bottom: 95px}
.margin_bottom_100  {margin-bottom: 100px}

/*Margin Right*/
.margin_right_14    {margin-right: 14px}
.margin_right_10    {margin-right: 10px}
.margin_right_15    {margin-right: 15px}
.margin_right_20    {margin-right: 20px}
.margin_right_30    {margin-right: 30px}
.margin_right_60    {margin-right: 60px}

/*Margin Left*/
.margin_left_14     {margin-left: 14px}
.margin_left_10     {margin-left: 10px}
.margin_left_15     {margin-left: 15px}
.margin_left_20     {margin-left: 20px}
.margin_left_30     {margin-left: 30px}
.margin_left_50     {margin-left: 50px}
.margin_left_60     {margin-left: 60px}
.margin_left_100    {margin-left: 100px}

/*Margin Top*/
.margin_top-184     {margin-top: -187px}
.margin_top_10      {margin-top: 10px}
.margin_top_15      {margin-top: 15px}
.margin_top_20      {margin-top: 20px}
.margin_top_25      {margin-top: 25px}
.margin_top_30      {margin-top: 30px}
.margin_top_40      {margin-top: 40px}
.margin_top_35      {margin-top: 35px}
.margin_top_50      {margin-top: 50px}
.margin_top_60      {margin-top: 60px}
.margin_top_80      {margin-top: 80px}
.margin_top_90      {margin-top: 90px}
.margin_top_95      {margin-top: 95px}
.margin_top_100     {margin-top: 100px}

/* ===================================
     Color
====================================== */
/*Colors*/
.color_fff{color: #fff}
.color_8bc24a{color: #8bc24a}
.color_fbb942{color: #fbb942}
.color_000 {color: #000}
.color_333 {color: #333}
.color_777 {color: #777}
/*Background Colors*/
.bg_color_8bc24a{background-color: #8bc24a}
.bg_color_fbb942{background-color: #fbb942}
.bg_fff {background-color: #fff}
.bg_303030{background-color: #303030}
/* ===================================
    padding
====================================== */

/*padding*/
.no_padding     {padding: 0}
.padding_15     {padding: 15px}
.padding_30     {padding: 43px 30px}
.padding_50     {padding: 50px}
.padding_lr_95  {padding: 0 95px}
.padding_tb_15  {padding: 15px 0}
.padding_tb_20  {padding: 20px 0}
.padding_tb_30  {padding: 30px 20px}
.padding_tb_40  {padding: 40px 0}

/*padding top*/
.padding_top_5      {padding-top: 5px}
.padding_top_8      {padding-top: 8px}
.padding_top_10     {padding-top: 10px}
.padding_top_13     {padding-top: 13px}
.padding_top_15	    {padding-top: 15px}
.padding_top_20     {padding-top: 20px}
.padding_top_21     {padding-top: 21px}
.padding_top_25     {padding-top: 25px}
.padding_top_30     {padding-top: 30px}
.padding_top_35     {padding-top: 35px}
.padding_top_40     {padding-top: 40px}
.padding_top_45	    {padding-top: 45px}
.padding_top_50     {padding-top: 50px}
.padding_top_60     {padding-top: 60px}
.padding_top_70     {padding-top: 70px}
.padding_top_80     {padding-top: 80px}
.padding_top_90     {padding-top: 90px}
.padding_top_95     {padding-top: 95px}
.padding_top_100    {padding-top: 100px}
.padding_top_105    {padding-top: 105px}
.padding_top_150    {padding-top: 150px}
.padding_top_130    {padding-top: 130px}
.padding_top_180    {padding-top: 180px}
.padding_top_200    {padding-top: 200px}
.padding_top_284    {padding-top: 284px}
.padding_top_300    {padding-top: 300px}

/*padding bottom*/
.padding_bottom_5   {padding-bottom: 5px}
.padding_bottom_8   {padding-bottom: 8px}
.padding_bottom_10	{padding-bottom: 10px}
.padding_bottom_13  {padding-bottom: 13px}
.padding_bottom_15	{padding-bottom: 15px}
.padding_bottom_17  {padding-bottom: 17px}
.padding_bottom_20  {padding-bottom: 20px}
.padding_bottom_21  {padding-bottom: 21px}
.padding_bottom_25  {padding-bottom: 25px}
.padding_bottom_30  {padding-bottom: 30px}
.padding_bottom_35  {padding-bottom: 35px}
.padding_bottom_40  {padding-bottom: 40px}
.padding_bottom_50  {padding-bottom: 50px}
.padding_bottom_45	{padding-bottom: 45px}
.padding_bottom_55  {padding-bottom: 55px}
.padding_bottom_60  {padding-bottom: 60px}
.padding_bottom_65  {padding-bottom: 65px}
.padding_bottom_70  {padding-bottom: 70px}
.padding_bottom_75  {padding-bottom: 75px}
.padding_bottom_80  {padding-bottom: 80px}
.padding_bottom_85  {padding-bottom: 85px}
.padding_bottom_85  {padding-bottom: 85px}
.padding_bottom_90  {padding-bottom: 90px}
.padding_bottom_100 {padding-bottom: 100px}
.padding_bottom_200 {padding-bottom: 200px}
.padding_bottom_300 {padding-bottom: 300px}
.padding_bottom_400 {padding-bottom: 400px}

/*padding left*/
.padding_left_0     {padding-left: 0}
.padding_left_10    {padding-left: 10px}
.padding_left_15    {padding-left: 15px}
.padding_left_20    {padding-left: 20px}
.padding_left_25    {padding-left: 25px}
.padding_left_30	{padding-left: 30px}
.padding_left_40    {padding-left: 40px}
.padding_left_50    {padding-left: 50px}
.padding_left_55    {padding-left: 55px}
.padding_left_58    {padding-left: 58px}
.padding_left_60    {padding-left: 60px}
.padding_left_70    {padding-left: 70px}
.padding_left_75    {padding-left: 75px}
.padding_left_80    {padding-left: 80px}
.padding_left_85    {padding-left: 85px}
.padding_left_95    {padding-left: 95px}
.padding_left_100   {padding-left: 100px}

/*padding right*/
.padding_right_0    {padding-right: 0}
.padding_right_10   {padding-right: 10px}
.padding_right_15   {padding-right: 15px}
.padding_right_20   {padding-right: 20px}
.padding_right_30	{padding-right: 30px}
.padding_right_40   {padding-right: 40px}
.padding_right_50   {padding-right: 50px}
.padding_right_55   {padding-right: 55px}
.padding_right_58   {padding-right: 58px}
.padding_right_60   {padding-right: 60px}
.padding_right_70   {padding-right: 70px}
.padding_right_75   {padding-right: 75px}
.padding_right_80   {padding-right: 80px}

/* ===================================
     Font Size
====================================== */
/*Font Size*/
.font_size_12   {font-size: 12px}
.font_size_14   {font-size: 14px}
.font_size_16   {font-size: 16px}
.font_size_18   {font-size: 18px}
.font_size_20   {font-size: 20px}
.font_size_22   {font-size: 22px}
.font_size_24   {font-size: 24px}
.font_size_26   {font-size: 26px}
.font_size_28   {font-size: 28px}
.font_size_30   {font-size: 30px}
.font_size_32   {font-size: 32px}
.font_size_34   {font-size: 34px}
.font_size_36   {font-size: 36px}
.font_size_40   {font-size: 40px}
.font_size_42   {font-size: 42px}
.font_size_44   {font-size: 44px}
.font_size_48   {font-size: 48px}
.font_size_60   {font-size: 60px}
.font_size_64   {font-size: 64px}
.font_size_50   {font-size: 50px}
.font_size_70   {font-size: 70px}
.font_size_80   {font-size: 80px}
.font_size_90   {font-size: 90px}

/*Font weight*/
.font_weight_100{font-weight: 100}
.font_weight_300{font-weight: 300}
.font_weight_400{font-weight: 400}
.font_weight_500{font-weight: 500}
.font_weight_600{font-weight: 600}
.font_weight_700{font-weight: 700}
.font_weight_900{font-weight: 900}
/* ===================================
     Line Height
====================================== */
/*Line Height*/
.line_height_18    {line-height: 18px}
.line_height_22    {line-height: 22px}
.line_height_24    {line-height: 24px}
.line_height_25    {line-height: 25px}
.line_height_28    {line-height: 28px}
.line_height_30    {line-height: 30px}
.line_height_34    {line-height: 34px}
.line_height_36    {line-height: 36px}
.line_height_40    {line-height: 40px}
.line_height_42    {line-height: 42px}
.line_height_48    {line-height: 48px}
.line_height_54    {line-height: 54px}
.line_height_65    {line-height: 65px}
.line_height_80    {line-height: 80px}
.line_height_82    {line-height: 82px}

/*Height*/
.height_24{height: 24px}

/* ===================================
     Button
====================================== */
.btn_banner{font-size: 16px; font-weight: 500; color: #fff; background-color: #8bc24a; padding: 10px 60px; display: inline-block; border-radius: 32px; text-transform: uppercase; box-shadow: 0 0 0 8px rgba(139,194,74,.20); transition:all ease-in-out 0.5s; margin-bottom: 12px}
.btn_organic_food{display: inline-block; font-size: 14px; color: #fff; font-weight: 400; background-color: #333; padding: 5px 20px; border-radius: 25px; margin-top: 15px; text-transform: uppercase}
.btn_add_cart{display: none;font-size: 14px; font-weight: 400; background-color: transparent; padding: 3px 15px; border-radius: 25px; color: #fff; transition: all ease-in-out 0.5s}
.btn_guarantee_food_box{font-weight: 500; border: 1px solid #dad9d6; padding: 7px 30px; border-radius: 25px; color: #777; background-color: #fff; display: inline-block; transition:  all ease-in-out 0.5s}
.btn_deal_of_day{box-shadow: 0 0 0 1px rgba(0,0,0,.10); display: inline-block; font-size: 14px; font-weight: 500; border-radius: 25px; background-color: #fff; padding: 5px 20px; color: #777; transition: all ease-in-out 0.5s}
.btn_blog_post{display: inline-block; font-weight: 500; padding: 5px 20px; border-radius: 25px; box-shadow: 0 0 0 1px rgba(0,0,0,.10); color: #777; transition: all ease-in-out 0.5s}
/* ===================================
         Hover
====================================== */
.top_social_links li:hover i{color: #547f22}
.organic_food_box:hover{background-color: #fbb942; border: 2px solid #fbb942}
.organic_food_box:hover .inner_food_box_color {color: #fff}
.organic_food_box:hover .btn_organic_food{background-color: rgba(0,0,0,.30); color: #fff; box-shadow: none}
.organic_food_box:hover .btn_add_cart{display:inline-block; color: #fff}
.organic_food_box:hover .rating_star ul li{color: #fff}
.guarantee_food_box:hover .inner_round_img{background-color: #fbb942; box-shadow: 0 0 0 10px rgba(251,185,66,.20)}
.guarantee_food_box:hover .btn_guarantee_food_box{background-color: #fbb942; border: 1px solid #fbb942; color: #fff}
.outer_nutritionist_box:hover .hover_box{display: block}
.btn_banner:hover{background-color: #fbb942; box-shadow: 0 0 0 10px rgba(251,185,66,.20); color: #fff}
.hover_team li i:hover{color: #fff}
.btn_blog_post:hover{background-color: #fbb942; color: #fff}
.btn_deal_of_day:hover{color: #777}
.top_navigation .navigation .menubar>li>a:hover{color: #547f22}
/* ===================================
      Navigation Bar
====================================== */
.top_navigation{z-index: 999}
.logo{position: relative}
.logo:before{position: absolute; content: ""; width: 120px; height: 120px; background-color: #8bc24a; border-radius: 100%; top: -28px; left: -11px}
.logo img{position: relative}
.top_navigation .navigation .menubar>li>a{color: #fff; font-size: 16px; font-weight: 400; padding: 20px 0; margin: 0 20px; transition: all ease-in-out 0.5s}
.top_social_links li{display: inline-block}
.top_social_links li a i{color: #fff; font-size: 16px; padding: 0 3px}
.navbar-toggler-icon{background-image:url("../images/toogle_button.svg")}
.navbar {
    border-radius: 0;
    transition: all 0.3s ease-out;
    position: absolute
}
.affix {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
}
/* fixed to top styles */
.affix.navbar {
    background-color: #8bc24a;
}
.affix.navbar .nav-item>a,
.affix.navbar .navbar-brand {
    color: #fff;
}
.top_navigation.affix .logo:before{display: none}
/* ===================================
     Banner
====================================== */
.bg_home_page{background: url("../images/home_page_banner.jpg") no-repeat center; background-size: cover; position: relative; height: 800px; display: table; width: 100%}
.bg_sub_page{background: url("../images/home_page_banner.jpg") no-repeat center; background-size: cover; position: relative; height: 340px; display: table; width: 100%}
.inner_home_banner{display: table-cell; vertical-align: middle}
.inner_sub_page_banner{display: table-cell; vertical-align: middle}
/* ===================================
      Organic Food Menu Section
====================================== */
.organic_food_box{border: 2px solid #e5e5e5; background-color: #e8e8e8; border-radius: 15px; transition: all ease-in-out 0.5s; position: relative}
.organic_food_box:before{position: absolute; content: "SALE"; color: #fff; font-size: 12px; line-height: 12px; background-color: #8bc24a; border-radius: 25px; padding: 5px 20px; top: -10px}
.organic_food_box figure{border-radius: 13px 13px 0 0}
.inner_food_box{padding: 20px 0}
.inner_food_box_color{transition: all ease-in-out 0.5s}
.rating_star ul li{display: inline-block; font-size: 16px; color: #fbb942; transition: all ease-in-out 0.5s}
/* ===================================
      Food Guarantee Section
====================================== */
.bg_food_guarantee{background: url("../images/food_guarantees.png") no-repeat center; background-size: cover}
.inner_round_img{width: 110px; height: 110px; background-color: #8bc24a; border-radius: 100%; display: table; box-shadow: 0 0 0 10px rgba(139,174,94,.20); margin: 0 auto; margin-bottom: 40px; transition:  all ease-in-out 0.5s}
.inner_round_img figure{display: table-cell; vertical-align: middle; text-align: center}
/* ===================================
      Deal of the Day Section
====================================== */
.bg-deal_of_day{position: relative}
.bg-deal_of_day:before{position: absolute; content: ""; background: url("../images/bg_deal_of_day.png") no-repeat; width: 281px; height: 280px; left: 0; top: 0; z-index: -1}
.bg-deal_of_day:after{position: absolute; content: ""; background: url("../images/bottom_deal_of_day.png") no-repeat; width: 293px; height: 288px; right: 0; bottom: 0; z-index: -1}
.deal_price{font-size: 20px; line-height: 18px; font-weight: 600; margin-bottom: 23px}
.inner_deal_box{border-radius: 20px 0 0 20px}
.flex_stretch{flex: 1}
.inner_img_deal_box{padding: 0 10px; margin-left: -14px}
.carousel-control-next, .carousel-control-prev{display: none}
.deal_box01{background: url("../images/fresh_peech.png") no-repeat center; background-size: cover; height: auto}
.deal_box02{background: url("../images/fresh_resberry.png") no-repeat center; background-size: cover; height: auto}
.deal_of_day_indicators{bottom: -50px}
/* ===================================
      Organic Food List Section
====================================== */
.inner_img_food_list{width: 160px; height: 160px; background-color: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.10); border-radius: 25px; display: table}
.inner_img_food_list figure{display: table-cell; vertical-align: middle}
.price_food-list{font-size: 24px; line-height: 36px; color: #8bc24a; font-weight: 500; margin-bottom: 20px}

/* ===================================
      Our Nutritionist Team Section
====================================== */
.outer_nutritionist_box{position: relative}
.hover_box{background-color: #fbb942; color: #fff; padding: 60px 30px; border-radius: 20px; display: none; position: absolute; top: 0}
.hover_team li{display: inline-block}
.hover_team li i{color: #454545; font-size: 16px; padding: 0 3px; transition:  all ease-in-out 0.5s}
.hover_team li:first-child i{padding-left: 0}
.hover_team li:last-child i {padding-right: 0}
/* ===================================
      Testimonial Section
====================================== */
.main_banner_slider_indicators{bottom:-80%}
.testimonial_indicators{bottom: -60px}
.carousel-indicators li{background-color: #8bc24a}
.carousel-indicators .active{background-color: #fbb942}
/* ===================================
  Blog Post Section
====================================== */
.blog_post_box{box-shadow: 0 0 0 2px rgba(229,229,229,.9); border-radius: 16px}
.date_blog_post{position: relative}
.date_blog_post:before{position: absolute; content: ""; height: 1px; background-color: #8bc24a; width: 25%; left: 0; bottom: -25px}
/* ===================================
          Get in Touch Features
====================================== */
.form-control{font-size: 16px; padding: 15px; border: none; border-bottom: 1px dashed #777; background-color: transparent}
.form-control:focus{background-color: transparent; border-bottom: 1px dashed #777; outline: none; box-shadow: none}
.btn{float: left; background-color: #fbb942; font-size: 14px; font-weight: 400; color: #fff; padding: 5px 20px; border-radius: 20px}
.weekly_schedule li{text-align: left; font-size: 16px; line-height: 32px; color:#777}
.weekly_schedule li span{float: right}
.contact_details{margin: 10px 0}
.contact_details li{text-align: left; padding: 20px 0 20px 70px; position: relative}
.contact_details li:first-child:before{position: absolute; content: ""; background: url("../images/map_marker.png"); width: 24px; height: 32px; left: 10px; top: 25px}
.contact_details li:nth-child(2):before{position: absolute; content: ""; background: url("../images/phone.png"); width: 32px; height: 32px; left: 10px; top: 15px}
.contact_details li:last-child:before{position: absolute; content: ""; background: url("../images/email.png"); width: 32px; height: 24px; left: 10px; top: 20px}
.contact_details li span{font-size: 18px; font-weight: 300; color: #777}
.contact_details li a i{font-size: 32px; color: #777}
/* ===================================
      Footer Section
====================================== */
.footer_logo>li:first-child{margin-bottom: 20px}
.footer_pages_link h4{font-size: 18px; line-height: 24px; font-weight: 500; margin-bottom: 20px}
.footer_pages_link_list li a{font-size: 14px; line-height: 26px; font-weight: 300; color: #fff; transition: all ease-in-out 0.5s}
.footer_contact_info ul li{display: inline-block}
.footer_contact_info ul li a{display: table; width: 38px; height: 38px; border-radius: 100%; transition: all ease-in-out 0.5s}
.footer_contact_info ul li a:hover{background-color: #fbb942}
.footer_contact_info ul li a i{display: table-cell; vertical-align: middle; text-align: center; color: #fff}
.footer_pages_link_list li a:hover{color: #fbb942}
span.error{display: none !important;}
.form-control.error{border-bottom: 1px solid #cc0000}
span.form-success{color: green !important;}

@media only screen and (min-width: 992px){
    .menubar li:hover .dropdown_menu {display: block}
    .menubar li:hover .dropdown_submenu {display: block}
    .menubar li:hover .dropdown_company {display: block}

}