*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
  }

::selection{
  background-color: #066845;
}

 /*navbar*/
 .navbar-nav .nav-item .nav-link{
    font-weight: 600;
    font-size:13px !important;
        font-family: "Nunito", Arial, sans-serif;
        padding: 19.5px 22px;
  color: white !important;
}
 

#navbutton {
  
  background-color: transparent;
  color: #066845;
  border: 2px solid #066845;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 110px;
  height: 40px;
  margin-right: 20px;
}

/* Animation styles */
#navbutton::before,
#navbutton::after {
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  color: white !important;
  background-color: #066845; /* Green color */
  top: 0;
  transition: width 0.3s ease-in-out;
  z-index: -1;
}
#navbutton:hover{
  color: white !important;
}

#navbutton::before {
  left: 0;
}

#navbutton::after {
  right: 0;
}

#navbutton:hover::before,
#navbutton:hover::after {
  width: 50%;

}

/* Animation keyframes */
@keyframes expandFromLeft {
  0% { width: 0; }
  100% { width: 50%; }
}

@keyframes expandFromRight {
  0% { width: 0; }
  100% { width: 50%; }
}

#navbutton:hover::before {
  animation: expandFromLeft 0.3s forwards;

}

#navbutton:hover::after {
  animation: expandFromRight 0.3s forwards;
}


@media(max-width:992px){
  .navbar-brand img{
      margin-left: 90px !important;
  }
   #navbutton{
     margin: 20px !important;
   }
   

  
}
@media(max-width:520px){
  .navbar-brand img{
    margin-left: 0px !important;
  }
}
@media(max-width:425px){
     .navbar-brand img{
      width: 120px !important;
      height: 60px !important;
     }
}




/*gallery */
.gallery{
    padding: 20px;
}
.gallery ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 15px;

}
.gallery ul li{
    list-style: none;
    font-size: 22px;
    font-weight: 400;
    font-family: Old Standard TT, Arial, sans-serif !important;
    color: Black;
    margin: 5px;
    padding: 8px 20px;
    cursor: pointer;
    letter-spacing: 1px;
    
}
.gallery ul li.active{
    border-bottom: 3px solid #bf9863;
    color: #c5a880;
}

.items-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.items{
    position: relative;
    width: 400px;
    height: 250px;
    margin: 5px;
    border: 1px solid #b5954e;
}
.items img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media(max-width:430px){
  .gallery ul{
    display: block;
 justify-content:unset;
 padding-left: 0rem !important;
  }
}