:root {
    --primary-color: #293E1E;
    --accent-color: #F5F5DC;
    --secondary-color: #FFD700;
    --neutral-color: #FFFFFF;
    --dark-accent-color: #8B4513;
  }
  
  /* Example usage */
  body {
    background-color: var(--accent-color);
    color: var(--dark-accent-color);
  }
  
  .header, footer {
    background-color: var(--primary-color);
    color: var(--neutral-color);
  }
  
  a, button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
  }
  
.header{
    display: flex;
    justify-content: space-between;
    padding: 0px 20px;
}
.logo{
    width: 170px;
}
.nav-items > ul {
    font-size: 21px;
    display: flex;
    list-style-type: none;
}
.nav-items > ul > li {
    padding: 10px;
    margin: 10px;
}
.res-container{
  display: flex;
  flex-wrap: wrap;
}
.res-card{
    width: 270px;
    min-height: 400px;
    background-color: #FFFFFF;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 30px;
    transition: transform 0.2s;
}
.res-card:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
.content {
    padding: 0px 20px; 
  }
   
.search{
    padding: 10px;
}
.res-card > span {
    position: absolute;
}

.res-logo{
   width: 270px; 
   height: 200px;
   object-fit: cover;
}

.filter-btn{
    background-color: #FFD700;
    color: #293E1E;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    margin: 10px;
}

.shim-photo{
  width: 270px; 
  height: 200px;
  background-color: rgb(219, 219, 219);
  margin-bottom: 40px;
}

.shim-line{
  width: 200px; 
  height: 5px;
  margin: auto;
  margin-bottom: 15px;
  border-radius: 3px;
  background-color: rgb(219, 219, 219);
}
.shim-box{
  width: 70px;
  height: 30px;
  margin: 40px;
  background-color: rgb(219, 219, 219);
}

.srch-bar {
  width: 100%;
  max-width: 400px; /* Maximum width for the search bar */
  padding: 10px; /* Inner padding */
  border: 2px solid #293E1E; /* Deep Green border */
  border-radius: 5px 0 0 5px; /* Rounded left corners */
  font-size: 16px; /* Font size for input text */
  outline: none; /* Remove default outline */
}

.srch-btn {
  padding: 10px 20px; /* Inner padding */
  background-color: #293E1E;; /* Warm Yellow background */
  color: white; /* Deep Green text color */
  border: 2px solid #293E1E; /* Deep Green border */
  border-left: none; /* Remove left border to blend with input */
  border-radius: 0 5px 5px 0; /* Rounded right corners */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 16px; /* Font size for button text */
  transition: background-color 0.3s; /* Smooth background color transition */
}