.main-nav{
position: relative; 
}
.main-nav .nav-lin{position: relative;}
.main-nav svg.nav-line{
  position: absolute;
  top:3em;
  left: -3em;
}
.logo{
  position:relative;
  top:0em;
  bottom: 5em;
  z-index: 10;
}
.main-nav ul{  
   position: absolute;
   left: 5em;
   z-index: 15;
 }
.main-nav ul li{
 position: relative;
 left: -8em;
margin: 4em 2em;
}
.main-nav ul li a{color:rgb(27, 27, 27);}
.main-nav ul li a:hover{
  border-left: .2em solid var(--secondary-color);
  line-height: 1.6;
}

/*===============Mobile nav=============*/
.mobile-nav{
  display: none;
}

@media (max-width:1300px){
  .mobile-nav{
    display:block;
    position:fixed;
    left: -1em;    
    top:25em;
    z-index:100;
  }
  .main-nav{display: none;}
  
 
.logo{

  position:relative;
  top:0em;
  bottom: 5em;
  z-index: 10;
}
.mobile-nav ul{
  display: flex;
  position: absolute;
  background: var(--secondary-color);
  border-radius: 15em;
  
  
  

 }
.mobile-nav ul li{
  margin: 0 .5em;
  padding: .5em;
}

.mobile-nav ul li a{
  
  color:rgb(27, 27, 27);
}
.mobile-nav ul li a .fa:hover{
  color: var(--white);
  
}
}