<template>
  <div class="nav-bar-style" fixed="top">
    <b-container >
      
      <div  class="d-flex justify-content-between">
        <div class="d-flex justify-content-start">

          <custom-logo class="d-flex align-self-center container-logo col-md-6" />
      
       <b-col md="6" class="sub-title d-flex justify-content-start">
        Quero ser uma consultora.
      </b-col>
       
       
        </div>

      </div>
      <hr class="transition-line"/>
     
     

    </b-container>

   
 
  </div>
</template>

<script>
import NavButton from '@/components/navbar/NavButton.vue';
import CustomLogo from '@/components/shared-components/Logo.vue';


export default {
  components: {
    NavButton,
    CustomLogo,
  
   
  },
  name: 'nav-bar',
  data: () => ({
    
  }),
};
</script>

<style lang="scss" >
.container-logo{
  margin-right: 0px !important;
  
  img{
    border-right: solid !important;



  }
}


@media (max-width:  768px) { 
 .container-logo{
  
  
  img{
  max-width: 100%;


  }
}
}
</style>

<style scoped lang="scss">
@import '../../../assets/css/main.scss';

  .sub-title{
    align-items: center; /* align vertical */
    color: #fff;
    font-size: 1.4em;
  }
  
.navbar-color {
    background-color: #FF9B64;
}



.nav-bar-style {
  height: 100px;
  background: #FF9B64;
}

div span {
  display: block;
}

.navigation-drawer-icon {
  position: absolute;
  left: 20px;
  top: 20px;
  padding: 5px;
  color: #eee;
  font-size: 1.5em;
  cursor: pointer;

}

.mobile-menu-active {
  visibility: visible !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}


.mobile-menu-overlay {
  background-color: rgba(0, 0, 0, .6);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
}

.mobile-menu {
  position: fixed;
  left: 0;
  z-index: 101;
  top:0;
  visibility: hidden;
  width: 300px;
  height: 100%;
  background: $theme-color-blue;
  color: white;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translate3d(-100%, 0, 0);
  transform: translate3d(-100%, 0, 0);
  
  .navigation-menu-wrap{
    padding: 0;
    margin: 0;
    list-style: none;

    li{
      display: block;

      a{
        display: block;
        width: 100%;
        padding: 10px;
        color: #fff;
        text-align: left;
        cursor: pointer;

        &:hover{
          background: #ED8626;
          text-decoration: none;
        }
      }
    }
  }

}


</style>
