body{
    background: url(../img/backo.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment:fixed;
    background-size:cover;
    background-color: rgb(43, 43, 43);
    
    

    
}


.nr{
    color: #eee5e5;
}




*{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0;
    padding: 0;
    letter-spacing: 1px;
    line-height: 50px;

    
}

.menu{
  color: rgb(255, 255, 255);
  text-align: center;
  margin-bottom: 50px;
  font-size: 40px;
  font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;


 
  

  

    
}

.sallata{
    background: linear-gradient(45deg, #0f0f0f, #535353);
    margin: 10px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    border-style:inset;
    margin-bottom: 20px;
    color: white;
    padding: 10px 20px;
    border:  1px solid white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px
    
}

.daska{
    background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:ins20et;
        margin-bottom: 20px;
        margin-top: 15px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
    
}

.daska-list{
    display: none;
    margin: 15px;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(27, 27, 27);
    color: rgb(235, 193, 86);
    font-size: 9px;
    border:  1px solid white;
    border-color: rgb(255, 255, 255);
    text-align: left;
    
}

.daska-list.show5{
    display: block;
    animation: dropdown 0.5s forwards;
    overflow: hidden;
}

.daska-list.hide5{
    display: block;
    animation: dropup 0.5s forwards;
    overflow: hidden;
    display: none;
}

.img{
    background-color: rgb(25, 25, 26);
    border-radius: 50px;
    border: 2px solid white;
    
    margin-bottom: 20px;
    margin-top: 35px;
    display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  margin-bottom: 30px;

}

.menu-item{

    white-space: nowrap;
}

.sallat{
    display: none;
    margin: 15px;
    padding: 10px; 
    border-radius: 10px;
    background-color: rgb(27, 27, 27);
    color: rgb(243, 192, 64);
    font-size: 11px;
    border:  1px solid white;
    border-color: rgb(255, 255, 255);
    text-align: left;
    
}

.hidden{
    display: block;
    animation: dropdown 0.5s forwards;
    overflow: hidden;

}




.mengjes{
    background: linear-gradient(45deg, #0f0f0f, #535353);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    border-style:outset;
    border-color: goldenrod;
    color: white;
    padding: 10px 20px;
    border:  1px solid white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px
}

@keyframes dropdown {
    from {
        max-height: 0;
        opacity: 0;
    }
    to {
        max-height: 500px;
        opacity: 1;
    }
}

@keyframes dropup {
    from {
        max-height: 500px;
        opacity: 1;
    }
    to {
        max-height: 0px;
        opacity: 0;
        
    
    }
}


.hidden2 {
    display: none;
    animation: dropup 0.5s forwards;
    overflow: hidden;

    
    
    
   
}




.arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: solid rgb(255, 255, 255);;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
    
}

.arrow.up {
    transform: rotate(-135deg);
    
}

.mengjes-list{

    display: none;
    margin: 15px;
    padding: 10px;
    border-radius: 10px;
    background-color: rgb(27, 27, 27);
    color: rgb(235, 193, 86);
    font-size: 9px;
    border:  1px solid white;
    border-color: rgb(255, 255, 255);
    text-align: left;
    
    
    
  

    
}

.vita{
    color:aliceblue;
    margin-top: -32px;
    margin-left: 5px;

}

.shope{
    color:aliceblue;
    margin-top: -20px;
    margin-left: 5px;
    line-height: 15px;
    font-size: 9px;
    text-align: left;

}

.mengjes-list.show {
    display: block;
    animation: dropdown 0.5s forwards;
    overflow: hidden;
}

.mengjes-list.hide {
    display: block;
    animation: dropup 0.5s forwards;
    overflow: hidden;
    display: none;
}




.arrow2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: solid rgb(255, 255, 255);;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
    
}

.arrow2.up {
    transform: rotate(-135deg);

}

.shtese-list{
    display: none;
    margin: 15px;
    padding: 10px; 
    border-radius: 10px;
    background-color: rgb(27, 27, 27);
    color: rgb(243, 192, 64);
    font-size: 11px;
    border:  1px solid white;
    border-color: rgb(255, 255, 255);
    text-align: left;
}

.shtese{
    background: linear-gradient(45deg, #0f0f0f, #535353);
    margin: 10px;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    border-style:outset;
    border-color: goldenrod;
    color: white;
    padding: 10px 20px;
    border:  1px solid white;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.arrow3 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: solid rgb(255, 255, 255);;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    transition: transform 0.3s ease-in-out;
    
}

.arrow3.up {
    transform: rotate(-135deg);

}

.shtese-list.show2{
    display: block;
    animation: dropdown 0.5s forwards;
    overflow: hidden;
}

.shtese-list.hide2{
    display: block;
    animation: dropup 0.5s forwards;
    overflow: hidden;
    display: none;
}

.pika {
    flex-grow: 4;
    border-bottom: 1px inset goldenrod;
    margin: 0 10px;
    background: repeating-linear-gradient(to right, #ccc, #ccc 1px, transparent 3px);
   
  }
  
  .price {
    margin-left: 0px;
   font-size: 12px;
  }


  .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .name {
    flex: 1;
  }


.pojadok{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

.pojadok-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow4 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow14 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    
     .arrow14.up {
        transform: rotate(-135deg);
    
    }

    .arrow4.up {
        transform: rotate(-135deg);
    
    }

    .pojadok-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .pojadok-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .rizhoto{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .rizhoto-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .pojadok-list.show3{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .pojadok-list.hide3{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
    }

    .arrow5 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }


    .rizhoto-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .rizhoto-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .vvv{
        font-size: 15px;
        line-height: 20px;
        margin-top: 10px;
        margin: 5px;

        
    }

    .vv{
        font-size: 20px;
        line-height: 20px;
        margin: 10px;
    }

    .pasta{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }


    .pasta-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow6 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow6.up {
        transform: rotate(-135deg);
    
    }


    .pasta-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .pasta-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .pule{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .pule-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow7 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow7.up {
        transform: rotate(-135deg);
    
    }


    .pule-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .pule-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .vici{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .vici-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 9px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow8 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow8.up {
        transform: rotate(-135deg);
    
    }


    .vici-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .vici-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .fish{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .fish-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow9 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow9.up {
        transform: rotate(-135deg);
    
    }


    .fish-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .fish-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }



    .pica{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .pica-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow10 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow10.up {
        transform: rotate(-135deg);
    
    }


    .pica-list.show2{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .pica-list.hide2{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }


    .apet{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .apet-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow11 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow11.up {
        transform: rotate(-135deg);
    
    }


    .apet-list.show5{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .apet-list.hide5{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }




    .des{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .des-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow12 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow12.up {
        transform: rotate(-135deg);
    
    }


    .des-list.show5{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .des-list.hide5{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

    .footer{
        background-color: #000000;
        color: #ccc;
        border: white 5px inset;

        text-align: left;
        padding-left: 10px;
        line-height: 20px;
        margin-top: 40px;
    }

    .gllup{
        line-height: 15px;
        color: #eee5e5;
        display: block;
        

    }


    .vici2{
        background: linear-gradient(45deg, #0f0f0f, #535353);
        margin: 10px;
        padding: 10px;
        text-align: center;
        cursor: pointer;
        border-style:inset;
        margin-bottom: 20px;
        color: white;
        padding: 10px 20px;
        border:  1px solid white;
        border-radius: 25px;
        cursor: pointer;
        font-size: 16px
        
    }

    .vici2-list{
        display: none;
        margin: 15px;
        padding: 10px; 
        border-radius: 10px;
        background-color: rgb(27, 27, 27);
        color: rgb(243, 192, 64);
        font-size: 10px;
        border:  1px solid white;
        border-color: rgb(255, 255, 255);
        text-align: left;
    }

    .arrow13 {
        display: inline-block;
        width: 10px;
        height: 10px;
        border: solid rgb(255, 255, 255);;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
        transition: transform 0.3s ease-in-out;
        
    }

    .arrow13.up {
        transform: rotate(-135deg);
    
    }


    .vici2-list.show5{
        display: block;
        animation: dropdown 0.5s forwards;
        overflow: hidden;
    }
    
    .vici2-list.hide5{
        display: block;
        animation: dropup 0.5s forwards;
        overflow: hidden;
        display: none;
    }

     
     .gjuha {
        display: flex; 
        justify-content: center;
        gap: 15px;
        margin-bottom: 10px;
        
    
      }
  
     
      .gjuha a {
        display: inline-block; 
      }
  
      
      .gjuha img {
        width: 200px; 
        height: auto; 
        cursor: pointer; 
        border: 2px solid transparent; 
        transition: border-color 0.3s;
      }
  
      
      .gjuha img:hover {
        border-color: rgb(255, 255, 255); 
      }

      @media (max-width: 600px) {
        .photo-container {
          flex-direction: column; 
          align-items: center; 
        }
      }



      .nr{

      font-size: 12px;
      text-decoration: none;
        
      }

      .ig{
        margin-left: -8px;
        text-decoration: none;
        border: 0;
        display:flex;
        gap: 2px;
      }

      a[href^="tel"] {
        color: inherit;
        text-decoration: none; 
    }