navbar{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #379237;
  margin: 0px auto;
}

 nav .toggle{
   font-size: 30px;
   color: #0008C1;
   line-height: 45px;
   cursor: pointer;
   margin-right: 20px;
   display: none;
 }

 nav ul{
   direction: rtl;
 }

 nav ul li{
   margin: 0px;
   padding: 0px;
   position: relative;
   display: inline-block;
   
 }

 nav ul li a{
   font-size: 15px;
   font-weight: 400;
   line-height: 45px;
   color: #FFF;
   text-decoration: none;
   text-transform: uppercase;
   padding: 15px;
 }

 nav ul li:first-child{
  background-color: #379237;
  color: #FFF
 }

 nav ul li:hover{
   background-color: #0008C1;
   /* color: #FFF */
 }

 nav ul li:hover a{
   color: #FFF
 }
 navbar .social{
   margin-left: 20px
 }

 navbar .social .fa-brands{
   font-size: 20px;
   padding-left: 5px;
   color: #CCC
 }

 navbar .social .fa-brands:hover{
   font-size: 22px;
   cursor: pointer;
   color: #16C79A
 }