@import "../partials/vars";
/* Start menu */
header{
    background: linear-gradient(180deg, #1E1E1E 40.1%, rgba(30, 30, 30, 0) 100%);  
    position: absolute;
    width: 100%;
    z-index: 22;
}

header nav {
    max-width: 1440px;
    margin: auto;
    width: 100%;
    color: #fff;
    @include clamp("font-size", 14px, 1vw, 16px);
    display: flex;
    font-family: 'Playfair Display', serif;
    justify-content: left;
    padding: 18px 0px;
    border-bottom: 1px solid #D9D9D970;
    @media (max-width: 1440px) {
      max-width: max-content;
    }
    @media (max-width: 992px) {
      max-width: 100%;
      border-bottom: 1px solid #d9d9d900;
    }
   .nav_menu {
    display: flex;
    align-items: center;
     }

/* logo */
.nav_logo {
    padding-right: 35px;
    }

  }

  @media (min-width: 992px) {
    .close_icon {
      display: none ;
      }
  }
 
/* menu togggle */
  #menu-toggle{
  display: none;
  }

  .menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    text-transform: uppercase; 
  }
  
  .menu li {
    margin: 0 clamp(15px, 1.9vw, 30px);
    padding-top: 7px;
    svg{
        vertical-align: middle;
        cursor: pointer;
        margin-left: 4px;
    }
  }
  
  .menu a {
    color: #fff;
    fill: #fff;
    text-decoration: none;
    text-transform: uppercase;
  }
  .menu  li:hover a ,.menu li:hover svg {
    color: #EE7D00;
    fill: #EE7D00;
    transition: .4s;

  }
  
  .sub_menu ul li a{
    color: #000 !important;
  }
  .sub_menu ul li:hover a{
    color: #EE7D00 !important;
    transition: .4s;
  }
 
  .menu-toggle-label {
    cursor: pointer;
    display: none;
  }
  @media (max-width: 992px) {
    .menu li {
      margin: 0 7px;
      svg{
        position: absolute;
        right: 19px;
        top: 27px;
      }
    }
    }
// 
/* Start btn nav_reservation */
.nav_reservation {
    display: flex;
    align-items: center;
   
}
.agenda_{
  display: none;
}
.nav_reservation  li{
       padding-top: 7px;
       list-style: none;
       text-transform: uppercase;
}
.nav_reservation  li .btn_{
  position: relative;
   text-transform: uppercase;
   color: #fff;
   text-decoration: none;
   border: 1px solid rgba(255, 255, 255, 0.5);
   padding: 12px 30px;
   svg{
    vertical-align: middle;
    margin-right: 4px;
   }
}
//end
//Start sub-menu

.sub_menu{
position: relative;
}


.sub_menu::before{
content: '';
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='' viewBox='0 0 16 10'%3e%3cpath fill='%23fff' d='M7.996 9.176a.348.348 0 0 1-.247-.101L.098 1.423A.348.348 0 0 1 .589.93l7.407 7.405L15.4.93a.348.348 0 1 1 .492.492L8.241 9.074a.348.348 0 0 1-.245.102Z'/%3e%3c/svg%3e ");width: 24px;
display: block;
height: 20px;
position: absolute;
background-position: center;
background-repeat: no-repeat;
right: 0;
}
.sub_menu:hover:before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3e%3cg clip-path='url(%23a)'%3e%3cpath fill='%23EE7D00' d='m15.402 3.93-7.406 7.406L.59 3.93a.348.348 0 0 0-.491.492l7.651 7.652a.348.348 0 0 0 .492 0l7.652-7.652a.348.348 0 1 0-.492-.492Z'/%3e%3cpath fill='%23EE7D00' d='M7.996 12.176a.348.348 0 0 1-.247-.101L.098 4.423a.348.348 0 0 1 .491-.492l7.407 7.405L15.4 3.93a.348.348 0 1 1 .492.492L8.24 12.074a.348.348 0 0 1-.245.102Z'/%3e%3c/g%3e%3cdefs%3e%3cclipPath id='a'%3e%3cpath fill='%23fff' d='M0 0h16v16H0z'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e ");
}
.sub_menu ul{
  display:none;
	position:absolute;
	top:100%;
	right:0;
	background:#fff;
  width: max-content;
	padding:0;
  min-width: 159px;
  animation: growDown .2s ease-in-out forwards;
}

@keyframes growDown {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}
.sub_menu ul li{
  margin: 0;
  padding: 8px 0px 8px 0px;
  width: 100%;
}
.sub_menu a{
  margin-right: 26px;
}
.sub_menu ul li a{
  line-height:120%;
	padding:10px 15px;
  color: black;
 
}

.sub_menu:hover ul{
	display:block !important
}
@media (max-width: 992px) {
  .sub_menu ul{
    position:relative;
  }

}
//END

// Start language 
.lang-trigger{
  
   padding-left: 20px;
   padding-top: 9px;
   position: relative;
   cursor: pointer;
    ul{
    position: absolute;
    display: none;
    box-shadow: 0 10px 24px 0 #0000001a;
    color: #000;
    margin: -.2rem 0rem;
    max-height: 245px;
    opacity:1;
    overflow: hidden;
    right: -1px;
    top: calc(100% + .3rem);
    transition: max-height .3s ease;
    padding: 5px 5px;
    width: 47px;
    z-index: -1;
    background-color: #fff;
    li a {
      display: flex;
      color: #000;
      img{
        margin-right: 2px;
        margin-top: 2px;
      }
      
    }
    }
    .icon_flag{
         svg{
          padding-bottom: 2px;
         }
      @media  (max-width: 992px) {
        svg{
          width: 21px;
          height: 21px;
         }
      }
    }
    svg{
      vertical-align: bottom;
    }
}
.lang-trigger ul li a:hover{
 color: #EE7D00;
}

.lang-trigger:hover  ul, .lang-trigger:focus ul {
    max-height: 245px;
    opacity: 1;
    z-index: 10; 
    display: block;
    background-color: #fff;
   border-radius: 1px;
   a{
    
     color: #000;
   }
  }
  .nav_reservation{
 
    .btn_resrvation{
     
      .button--ujarak::before{
      border: 1px solid;
      }
    }

    

    }
  //end

/* Start Responsie menu */

@media (max-width: 1464px) {
 
  .nav_reservation{

    .btn_resrvation{
      // right: 20px;
      // position: absolute;
      .btn_{
        display: none;
      }
      .agenda_{
        display: block;

      }
      
    }
  }
}
@media (max-width: 992px) {

.nav_logo {
 padding-right: 0px !important;
 width: 33%;
 text-align: center;

}

@media (max-width: 992px) {
  .nav_reservation{
    width: 33%;
    .btn_resrvation{
      right: 16px;
      position: absolute;
    }
    .lang-trigger {
      top: 26px;
      left: -999px;
      transition: left 0.5s;
      }
     .active_lang{
      display: block;
      font-size: 20px;
      z-index: 22;
      left: 0px;
      position: fixed;
     }
  }
}

/* icon - menu */
.toggle {
    position: relative;
    width: 53px;
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  
  .toggle span {
    position: absolute;
    width: 24px;
    height: 1.8px;
    border-radius: 4px;
    background: #ffffff;
    transition: 0.5s;
  }
  
  .toggle span:nth-child(2) {
    transform: translateY(-10px);
    width: 19px;
    left: 15px;
  }
  
  .toggle span:nth-child(3) {
    transform: translateY(10px);
    width: 15px;
    left: 15px;
  }
  
  .toggle.active span:nth-child(1) {
    transform: translateX(60px);
  }
  
  .toggle.active span:nth-child(2) {
    width: 40px;
    transform: translateX(0) rotate(45deg);
    transition-delay: 0.2s;
  }
  
  .toggle.active span:nth-child(3) {
    width: 40px;
    transform: translateX(0) rotate(-45deg);
    transition-delay: 0.4s;
  }


  /* end */
 
  /* Start menu */
   .menu_active{
     left: 0 !important;
    }
    
    nav{
    justify-content: left;
    padding: 18px 0px;
    }
    .menu {
      transition: left 0.5s;
      width: 100%;
      position: fixed;
      display: block;
      top: 0px;
      height: 100%;
      left: -990px;
      background-color: #7E2110;
      color: #fff;
      padding-top: 87px;
      z-index: 22;
      height: 100vh;
      .close_icon{
        cursor: pointer;
        right: 0;
        position: absolute;
        padding-right: 26px;
        top: 33px;  
      }
    }
    
    
    .menu a {
      display: block;
      padding: 18px 14px;
      font-size: 20px;
     
      
    }
   

    .menu-toggle-label {
        display: flex;
        align-items: center;
        width: 33%;
        font-size: 16px;
    }
    
  
  }