body{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: merriweather;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#loader-box {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgb(10, 10, 10,0.5);
    justify-content: center;
    align-items: center;
    z-index: 3;
   
  }
  
  .loader-content {
    background: rgb(4, 4, 4);
    height: 400px;
    color: white;
    max-width: 550px;
    padding: 2rem;
    text-align: center;
    border-radius: 2%;
    margin-bottom: 3rem;
    box-shadow: rgba(236, 233, 233, 0.19) 0px 10px 20px, rgba(244, 240, 240, 0.23) 0px 6px 6px;
  }
  
  #loader-box h2 {
    margin-top: 1rem;
    color: white; /* Adjust the color as needed */
  }
  
  #loader-box p {
    margin: 10px 0;
  }

  .imgg{
    height: 60px;
    margin-top: -1rem;
  }

  .imggg{
    height: 40px;
  }

  .opening-hours{

    width: 90%;
    margin: 6rem auto;
    margin-top: 5rem;
    
    padding: 2rem;
   
   
  }

  .hr1{
    font-size: 1.8rem;
    font-weight: 700;
    text-align: center;
  }

  .hr2{
    text-align: center;
   
  }

  .hr3{
     color: red;
     font-weight: 700;
  }

  
  .icon6{
    color: white;
    font-size: 2rem;
    width: 10%;
    position: relative;
    left: 85%;
    margin-top: -1.5rem;
  }

.main{
    flex-grow: 1;
}

.nav1{
    background-color: white;
    display: flex;
    justify-content:space-around;
    border: 2px solid black;
     padding-top: .9rem;
     padding-bottom: .5rem;
     padding-left: .5rem;
     padding-right: .6rem;
    position: fixed;
    left: 1rem;
    top: .5rem;
    width: 98%;
    z-index: 2;
   

}

.item2 .home{
    display: none;
}
.item1 a{
    font-family: 'Brush Script', cursive;
    font-weight: 900;
    font-size: 1.6rem;
    color: black;
    text-decoration: none;
 
  
  
}
.item1{
    margin-top: .7rem;
}

.item2 ul li {
 display: inline-block;
 padding-top: .3rem;
}

.item2 ul li a{
    color: rgb(63, 62, 62);
    font-family: ;
    font-size: 13px;
    font-weight: 600;
    line-height:16.8px;
    text-decoration: none;
    padding: .5rem;
    position: relative;
    
    
}

.item2 ul li a:hover{
    color: #2980b9;
}

.item2 ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px; /* Adjust the border-bottom height as needed */
    background-color: #007bff; /* Adjust the border-bottom color as needed */
    transition: width 0.3s ease; /* Add transition property for animation */
  }
  
  .item2 ul li a:hover::after {
    width: 100%;
  }

.icon1,.icon2{
    display: none;
}
.i1{
    height: 50px;
    background-color: white;
}
.reservation-button{
    padding: .8rem;
    background-color: black;
    transition: .5s;
    color: white;
    border: none;
}
.reservation-button:hover{
    background-color: red;
}
.section1{
   background-image: url('../img/Ratskeller_Mls_015.jpg');
   height:70vh;
   width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   margin: 0 auto;
   background-size: cover;
   display: flex;
   animation: changeImage 15s linear infinite;

}

@keyframes changeImage {
    0%, 100% {
        background-image: url('../img/Ratskeller_Mls_015.jpg');
    }
    25% {
        background-image: url('../img/3.jpg');
    }
    50% {
        background-image: url('../img/7.jpg');
    }
    75% {
        background-image: url('../img/Ratskeller_Mls_015.jpg');
    }
   
}


.para1{
    margin-right: auto;
    margin-top: auto;
    margin-bottom: -.6rem;
    background-color: white;
    padding: 2rem;
    width: 450px;
    font-family: 'Great Vibes', cursive;
font-family: 'Lavishly Yours', cursive;
font-family: 'Noto Serif', serif;
     text-align: center;
     letter-spacing:px;
    font-style: italic;    

}
.para1 a{
    color: black;
    
    font-weight: 100;
    font-size:2.3rem;
    color: black;
    text-decoration: none;
  
    padding: .5rem;

}

.left-icon,
.right-icon {
  position: absolute;
  top: 50%;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  background-color: black;
  user-select: none;
}

.left-icon {
  left: 10px;
}

.right-icon {
  right: 10px;
}

.welpart{
    margin-top: 2rem;
    background-color: black;
    color: white;
    height: 410px;
    display: flex;
    flex-direction: column;
    width: 95%;
   
}
.welpart p{
    width: 80%;
    margin: 10px auto;
    padding-top: 2.9rem;
}

.welbutton a{
  color: white;
  text-decoration: none;
}

.welbutton{
    border: 2px solid white;
    padding: .7rem;
    background-color: black;
    color: white;
    width: 40%;
    margin: 0 auto;
    
    
    
}

.welbutton:hover{
    background-color: red;
    color: black;
   
}

.welbutton a:hover{
  
  transition: .5s;
}

.menu{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    width: 70%;
    margin: 0 auto;
    margin-top: 2rem;
}
.menu1 img{
    width: 90%;
    height: 400px;
}

.menu2{
    padding: ;
    border: 2px solid black;
    width: 80%;
    height: 335px;
    align-self: center;
    justify-self: center;
    font-family: 'Times New Roman', Times, serif;
    
}

.sub1{
    text-align: center;
    font-size: 1.4rem;
    border-bottom: 2px solid black;
    font-style: italic;
    padding: .5rem;
}

.sub2{
    padding: .6rem 1rem;
    font-size: 1.1rem;
}

.buttons{
    
}
   
    .button1, .button2 {
     
        margin-bottom: .5rem;
        margin-left: 2.2rem;
        padding: 10px 20px;
        font-size: 16px;
        background-color: black;
        color: #fff;
        border: none;
        cursor: pointer;
        transition: transform 0.3s ease-in-out; /* Add transition for smooth animation */
      
      }
    
      /* Add hover effect */
      .button1:hover, .button2:hover {
        transform: scale(1.1); /* Scale up by 10% on hover */
        background-color: rgb(224, 34, 20);
      }
    .reser{
        background-image: url('../img/3.jpg');
        background-position: center;
        height: 400px;
        width: 90%;
        margin: 60px auto;
        display: flex;
        flex-direction: column;
    }
    .reser1{
        background-color: rgba(0, 0, 0, 0.4); /* Adjust the alpha channel for the level of background transparency */
        
        width: 100%;
        margin: 0 auto;
        height: 400px;
    }
 .reser11{
   display: flex;
   flex-direction: column;
   margin: 10rem auto;
   width: 20%;
 }

    .reser1 h4{
         color: white;
         font-style: italic;
         font-family: merriweather;
         
    }

    .reser2{
        border: none;
        padding: .7rem;
        color: white;
        background-color: red;
        width: 90%;
        margin-top: .5rem;
        transition: .5s;
    }
    .reser2:hover{
      background-color: black;
    }

    .popup-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh ;
        background-color: white; /* Semi-transparent background */
        padding: 20px;
        box-sizing: border-box;
        overflow-y: hidden;
        overflow-x: hidden;
        /* Enable scrolling if content is too long */
      }
      
      .popup-content {
        margin-top: 4rem;
        height: 100vh;
       
        padding: 20px;
        border-radius: 10px;
     
        box-sizing: border-box;
      }

      label{
        font-size: .9rem;
        margin-top: .5rem;
      }
      select, input{
        width: 100%;
        padding: .5rem;
        border: 2px solid black;
      }
      form{
       width: 50%;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
      }

      label{
        justify-self: flex-start;
        align-self: flex-start;
      }

      .reser3{
        padding: .6rem;
        background-color: black;
        color: white;
        width: 50%;
        margin-top: 1rem;
        margin-left: 8rem;
        margin-bottom: 8rem;
      }
      .icon4{
        position: relative;
        left: 70%;
        font-size: 2rem;
      }
    
      .footnav{
        border: 2px solid black;
        padding: 1rem;
        margin-top: -2rem;
       
      }
      .footnav ul{
        width: 40%;
        margin: 0 auto;
      }

      .footnav ul li{
       display: inline-block;
       padding-left: .7rem;        
      }

      .footnav ul li button{
        padding: .5rem .8rem;
        background-color: black;
        color: white;
        width: 100%;
        border: none;

      }

      .footnav ul li button:hover{
        background-color: red;
        transition: .7s;
      }

      .footnav ul li a{
        text-decoration: none;
        color: black;
      }

     .footnav ul li a:hover{
        color: red;
     }
.footer{
    background-color: white;
  
    padding-top: rem;
}

.copy1{
    text-align: start;
     font-size: .9rem;

    padding-bottom: .4rem;
    font-weight: 300;
}

.copy2{
    padding-top: .5rem;
    text-align: right;
    font-weight: 400;
   
}


.card11{

    padding-top: 5rem;
    width: 60%;
    padding: 1rem;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin: 0 auto;
    border-radius: 20px 20px;
    background-color: aliceblue;
    color: black;
    margin: 0 auto;
    line-height: 30px;
}

.popup-container1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 3rem;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: 2s;
    z-index: 9999999999;
  }



  .cont1 .a1{
     text-decoration: none;
     color: black;
     
  }

  .cont1 a{
    text-decoration: none;
  }

  .popup-container1 h4{
    border: 2px solid black;
    padding: .5rem .2rem;
    margin-bottom: 2rem;
  }


 .icon5{
    position: absolute;
    left: 90%;
    top:3%;
 }

 .loca1{
    padding: .5rem;
    background-color: black;
    color: white;
    margin-left: 2.5rem;
    margin-top: 1rem;
 }
@media only screen and (max-width: 1050px){

    .loader-content {
        
        height: 490px;
        max-width: 450px;
        margin-bottom: 3rem;
      }
    .nav1{
        background-color: white;
        display: flex;
        justify-content:space-around;
        border: 2px solid black;
         padding-top: .9rem;
         padding-bottom: .5rem;
         padding-left: .5rem;
         padding-right: .6rem;
        position: fixed;
        left: 1rem;
        top: .5rem;
        width: 90%;
    }

    .item1{
        margin-top: -.5rem;
        padding: 1rem;
    }

    .icon1{
        margin-top: -.4rem;
        padding: 1rem;
    }

    .item2{
        padding-top:0 ;
        padding-left: 0;
        position: absolute;
        top: -110vh;
        left: 0;
        right: px;
        height: 100vh;
        width: 100%;
        background-color: white;
        border: 3px solid black;
        z-index: 2;
        transition: top 1s ease;

      }
    
    .card11{
        width: 100%;
    }
    .popup-container{
      display: none;
    }

      .item2 ul li {
         text-align: center;
         display: block;
         padding-bottom: 2.1rem;
         padding-left: 0;
         margin: 0; 
         padding-right:2.3rem;
         
         
      }

      .item2 .home{
        padding-top: 3rem;
      }
      .item2 ul li a{
        font-size: 1.5rem;
       
    }

    
    .icon1,.icon2{
        display: block;
    }
     
    .fa-arrow-left{
     position: absolute;
     right: 8%;
     top:1.7%;
     font-size: 1.5rem;
     display: block;

    }
    .fa-bars-staggered{
        padding-top: .4rem;
        font-size: 1.2rem;
        display: block;
    }
    .logo{
        font-size: 1.3rem;
    }
    .item2 .home{
        display: block;
    }
    .item1 a{
        font-family: 'Brush Script', cursive;
        font-weight: 900;
        font-size: 1.3rem;
        color: black;
        text-decoration: none;
        border: 0px solid black;
        padding: 0;
    }
    .para1{
        margin-left: auto;
        margin-top: auto;
    
        padding: 1.4rem;
    
    }
    .para1 a{
        color: black;
       
        font-size: 1.8rem;
        color: black;
        text-decoration: none;
      
        padding: .5rem;
    
    }

    .section1{
      height: 40vh;
      background-position: center;
    }

    
  .opening-hours{

    width: 100%;
    margin: 0 auto;
    padding: 2rem;
  }

  .hr1{
    font-size: 1.3rem;
  }

 
  .reser1 h4{
        color: white;
        font-style: italic;
       font-size: 1.2rem;
          
     }

    .welpart{
        height: 550px;
        width: 100%;
        
    }
    .welpart p{
        width: 80%;
    }

    .welbutton{
        width: 50%;
       
    }

    

    .menu{
        width: 100%;
        margin-top: .5rem;
    }
    .menu1 img{
        width: 100%;
        margin:0;

    }
    .menu2{
        width: 90%;
        margin-top: .5rem;
    }

    .reser11{
         width: 55%;
        
    }

    form{
        width: 100%;
        margin: 0 0;
        box-sizing: border-box;
       }

       form label{
        width: 100%;
       }
      .l1{
        text-align: start;
      }

      form input{
        width: 100%;
        box-sizing: border-box;
      }
 
       .reser3{
         padding: .6rem;
         background-color: black;
         color: white;
         width: 50%;
         margin-top: 1.5rem;
         margin-left: 1rem;
         margin-bottom: 8rem;
       }
       .icon4{
         position: relative;
         left: 40%;
       }

       .footnav ul{
        width: 100%;
        margin: 0 auto;
      }

      .footnav ul li{
       display: inline-block;
       padding-left: .7rem;        
      }

      .footnav ul li button{
        margin-top: .7rem;
        margin-left: 2.8rem;
        padding: .8rem 1rem;
        background-color: black;
        color: white;
        width: 100%;
        border: none;

      }

      .popup-container1 {
        display: none;
        position: fixed;
        top: 60%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        background-color: white;
        padding: 3rem;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      .popup-content {
         margin-top: 4rem;
        width: 100%;
        padding: 20px;
        border-radius: 10px;
        box-sizing: border-box;
      }

     

      .i1{
        height: 30px;
        background-color: white;
    }
}

.menu > .menu2 {
  width: 100%;
}

.menu > .menu2 > .buttons {
  display: flex;
  flex-wrap: wrap;
}