/*---------------------------------Menu---------------------------------------*/
.menu{
   display: block;
   width: 100vw;
   height: 85px;
  /* background:url(../img/fertilizer-bigharvest-menu-main.svg) center center no-repeat;
   background-size:  100% auto;*/
   padding: 10px;
   box-shadow: 1px 1px black;
   position: fixed;
   float: left;
   z-index: 1111111111;
 }
 .Menu_color{
    background-color: rgba(0, 0, 0, 0.564);
 }
.menu ul {
    list-style: none;
    width:90%;
    height: 70px;   
    font-size: 100%;
    position: absolute;
    left: 3%;
    background-color: #87cb28aa;
    box-shadow: 1px 1px 1px 1px black;
    text-align: center;
   border-radius: 40px;
   }
   .menu ul a{
    color: white;
    text-decoration: none;
   }
.menu ul li{
    width: 13.2%;
    background-color: #33443c;
    float: left;
    margin:0;
    height: auto;
    padding: 10px;
    margin: 0.5%;
    margin-top: 1.2%;
    border-radius: 20px;
    transition: 0.2s ease-in;
     
}
.menu ul li:hover{
    background-color: #fff;
    color:#33443c; 
    box-shadow: 1px 1px 1px #33443c;
    font-size: 120%;
    }
.menu ul li:hover a{
       color:#33443c; 
      }
.menu ul li a{
color: white;
text-decoration: none;
text-align: center;
}

/*---------------------------------Mobile menu---------------------------------------*/
/*---------------------------------Mobile menu---------------------------------------*/
/*---------------------------------Mobile menu---------------------------------------*/
.mobile_menu{
    display: none;
    width: 100vw;
    height: 50px;
   
    background: url(../img/fertilizer-bigharvest-menu-main.svg) center center no-repeat;
    background-size: 100% auto ;
    float: left;
    margin: 0;
    padding: 0;
    position: fixed;
    right: 0;
    left: 0;
    z-index: 1111111111;    
   
}
.Menu_BG{
    background: rgba(0, 0, 0, 0.516);
}
.mobile_m_button{
    height: 40px;
    width: 40px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px #33443c;
   display: block;
    float: right;
    margin: 5px;
   
    background: url(../img/menu-open.svg) no-repeat center center;
    background-size: 100% 100%;
    background-color: #33443c;
    transition: 0.8s ease-in-out;
 
}
.mobile_m_button_close{
    height: 40px;
    width: 40px;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1px #33443c;
   display: none;
    float: right;
    margin: 5px;
   
    background: url(../img/menu-close.svg) no-repeat center center;
    background-size: 100% 100%;
    background-color: #33443c;
    transition: 0.8s ease-in-out;
 
}
.mobile_menu_container{
    display: block;
    width: 100%;
    height: 100%;
   
    position:absolute;
    top:-800px;
    transition: 0.5s ease-in-out;
  
   


}
.mobile_menu_container ul {
    list-style: none;
    width:63%;
    height: auto;   
    font-size: 100%;   
    background-color: #87cb28aa;
    box-shadow: 1px 1px 1px 1px black;
    text-align: center;
   border-radius: 40px;
   margin-top: 0;
   margin-left: 15%;
   margin-right: 15%;
   padding-top: 10px;
   padding-bottom: 10px;
  
   }
   #menu_button_ul li{
    color: white;
    text-decoration: none;
   }
   #menu_button_ul a{
    text-decoration: none;
   }
.mobile_menu_container ul li{
    width: 80%;
    background-color: #33443c;
    margin:3%;
    height: auto;
    padding: 10px;
 
    border-radius: 20px;
    transition: 0.2s ease-in;
    box-shadow: 1px 1px 1px 1px white;
     
}
.mobile_menu_container ul li:hover{
    background-color: #fff;
    color:#33443c; 
    box-shadow: 1px 1px 1px #33443c;
    font-size: 120%;
    }
.mobile_menu_container ul li:hover a{
       color:#33443c; 
      }
.mobile_menu_container ul li a{
color: white;
text-decoration: none;
text-align: center;
}

.social_media_Mobile_menu{
    height: 50px;
    width: 50px;
    float: left;
    margin: 1%;
    text-align: center;
}

/*---------------------------------@media---------------------------------------*/
@media only screen and (max-width: 1100px) {
    .menu ul {
    width: 55%;
    position: absolute;
    left: 22%;
      }

    }
    @media only screen and (max-width: 1000px) {
        .menu ul {
        width: 55%;
        position: absolute;
        left: 18%;
          }
    
        }
    @media only screen and (max-width: 910px) {
   
        .menu ul {
           width: 65%;
           
           position: absolute;
           left: 20%;
                   
        }
       
           }
          
             
           @media only screen and (max-width: 500px) {
   
               
            .mobile_menu_container ul {
             
    width:80%;
    
   margin-left: 2%;
   margin-right: 2%;
  
                  }
               }
           @media only screen and (max-width: 800px) {
   
            .menu{
              display: none;
              
              
            }
            .mobile_menu{
                display: block;
            }
            .social_media_Mobile_menu{
               
                margin-left: 3.1%;
               
            }
           
               }
               @media only screen and (max-width: 600px) {
   
                .social_media_Mobile_menu{
               
                    margin-left: 2%;
                   
                }
           
            }
            @media only screen and (max-width: 380px) {
   
                .social_media_Mobile_menu{
               height: 40px;
               width: 40px;
                    margin-left: 1%;
                   
                }
           
            }