/*Navigation Bar*/
.topnav {
    padding-top: 15px;
    padding-right: 15px;
    text-align: center;
    position: fixed;
    right: 0;
    z-index: 5;
    font-weight: 200;
    
    }
    
    .topnav a {
      text-decoration: none;
      color: rgba(94, 94, 94,0.9);
      padding-left: 20px;
      padding-right: 20px;    
      padding-top: 10px;
      padding-bottom: 10px;
      height: 20px;
      width: auto;
      text-align: center;
      z-index: 2;
      font-family: 'Playfair Display', serif;
      font-weight: 500;
      transition-duration: 0.3s;
    
    
    }
    
    @media (max-width: 700px) {
      .topnav a {
          display: none;
      }
    }
    
    .topnav a:hover {
      color: rgb(243, 211, 189);
      background-color: rgba(94, 94, 94,0.9);
      border: none;
      text-decoration: none;
      cursor: pointer;
    }
    
    
    .topnav a.active {
      background-color: rgba(183,137,112,0.8);
      color: white;
      font-family: 'Playfair Display', serif;
      font-weight: 500;
    }
    
    
    /*nav for mobile*/
    
    
    
    @media (min-width: 700px) {
      nav {
          display: none;
      }
    }
    
    @media (min-width: 700px) {
      .checkbox {
          display: none;
      }
    }
    
    
    .container {
      max-width: 100%;
      width: 100%;
    
    }
    
    .navbar {
      width: 100%;
    }
    
    .nav-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 62px;
      z-index: 100;
    
    }
    
    .navbar .menu-items {
      display: flex;
      background-color: rgba(183,137,112,0.95);
      position: fixed;
    
    }
    
    .navbar .nav-container li {
      list-style: none;
      padding-top: 5%;
      padding-bottom: 5%;
      padding-right: 10%;
    }
    
    .navbar .nav-container a {
      text-decoration: none;
      color: #0e2431;
      font-weight: 500;
      font-size: 1.2rem;
      padding: 0.7rem;
      color: rgba(94, 94, 94, 0.95);
    
    }
    
    .navbar .nav-container a:hover{
        font-weight: bolder;
        color:#B78970;
        background: rgba(94, 94, 94,0.9);
    }
    
    .nav-container {
      display: block;
      position: fixed;
      height: 60px;
    }

    /* Dropdown container */
.topnav .dropdown {
  position: relative;
  display: inline-block;
}




/* Dropdown content */
.topnav .dropdown-content {
  display: none;
  position: absolute;
  background-color: rgba(183, 137, 112, 0.8);
  width: 99px;
  z-index: 1;
  opacity: 0; /* Initially hidden */
  visibility: hidden; /* Initially hidden */
  transition: opacity 0.3s, visibility 0.3s;
  margin: 10px 100px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  display: block;

}

.topnav .dropdown:hover .dropdown-content {
  display: block;
  opacity: 1; /* Fades in */
  visibility: visible;
}

.topnav .dropdown-content a {
  color: rgba(94, 94, 94, 0.95);
  text-decoration: none;
  display: block;
  padding: 1rem 0; 
  transition: background-color 0.3s, color 0.3s;
}

.topnav .dropdown-content a:hover {
  background-color: rgba(94, 94, 94, 0.9);
  color: #B78970;
}
    
    .nav-container .checkbox {
      position: fixed;
      display: block;
      height: 32px;
      width: 32px;
      top: 20px;
      right: 20px;
      z-index: 5;
      opacity: 0;
      cursor: pointer;
      
    }
    
    .nav-container .hamburger-lines {
      display: block;
      height: 22px;
      width: 29px;
      position: fixed;
      top: 17px;
      right: 20px;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .nav-container .hamburger-lines .line {
      display: block;
      height: 2px;
      width: 100%;
      border-radius: 10px;
      background: rgba(94, 94, 94,0.9);
    }
    
    .nav-container .hamburger-lines .line1 {
      transform-origin: 0% 0%;
      transition: transform 0.4s ease-in-out;
    }
    
    .nav-container .hamburger-lines .line2 {
      transition: transform 0.2s ease-in-out;
    }
    
    .nav-container .hamburger-lines .line3 {
      transform-origin: 0% 100%;
      transition: transform 0.4s ease-in-out;
    }
    
    .navbar .menu-items {
      padding-top: 120px;
      box-shadow: inset 0 0 100% rgba(255, 255, 255, .5);
      height: 100vh;
      width: 100%;
      transform: translate(150%);
      display: grid;
      flex-direction: column;
      transition: transform 0.5s ease-in-out;
      text-align: center;
    
    }
    
    
    
    
    
    
    .navbar .menu-items li {
      margin-bottom: 1.2rem;
      font-size: 1.5rem;
      font-weight: 500;
    }
    
    
    .nav-container input[type="checkbox"]:checked ~ .menu-items {
      transform: translateX(0);
    }
    
    .nav-container .a:active ~ .menu-items {
      transform: translateX(-150%);
    }
    
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
      transform: rotate(45deg);
    }
    
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
      transform: scaleY(0);
    }
    
    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
      transform: rotate(-45deg);
    }
    
    .menu-items .a input[type="href"]:checked ~ .nav-container .menu-items{
      transform: translate(-150%);
      
    }