.navigation__bar {
  width: 85%;
  margin: 0 auto;
}
.timepass {
  display: flex;
  justify-content: space-between;
}
/* An inline image sits on the text baseline, so its link box runs a few pixels
   taller than the image and the image ends up above the box's centre. As a
   block the two boxes are the same, which is what lets the bar line the logo up
   with the icon across from it. */
.company__logo #logo img {
  display: block;
}
.topnav {
  margin-top: 10px;
  overflow: hidden;
}
.topnav .icon {
  display: none;
}
.topnav_subclass {
  display: flex;
  flex-direction: row;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 230px;
  border: 1px #000 solid;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content #category-nav {
  float: none;
  color: #000;
  padding: 8px 12px;
  font-size: 12px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content > p {
  letter-spacing: 1.3px;
  font-weight: 600;
  font-family: Montserrat, sans-serif;
  color: #666363;
  font-style: normal;
  font-size: 10px;
  padding-right: 16px;
  padding-left: 16px;
  padding-top: 12px;
}
.dropdown-content a:hover {
  background-color: #ddd;
  color: #000;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.contact__email p:hover,
.contact__number p:hover,
.dropdown-content p:hover {
    background-color: #ddd;
    cursor: pointer;
    color: #000;
}
.Contact.scrolled {
  color: #000;
}
.contact__email p,
.contact__number p {
  letter-spacing: 1.2px;
  display: block;
  text-align: left;
  font-family: Montserrat, sans-serif;
  color: #000;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 18px;
  padding-top: 8px;
}
.contact__email p {
  padding-bottom: 7px;
}
.break__line {
  margin-top: 10px !important;
  width: 85%;
  margin: 0 auto;
  border: 1px solid #e6e6e6;
}
.book__btn{
  cursor:pointer;

}
.book__btn.scrolled {
  background-color: #9f7a66 !important;
  color: #fff !important;
  cursor:pointer;
}

@media screen and (max-width: 1024px) {
  .book_dropdown{
    display: none;
  }
}

@media screen and (max-width: 600px) {
	.dropdown .dropbtn,
	.topnav a {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    /* The glyph is text, so its size is the font size. 15px (which used to sit
       inline on the element) was small for a thumb; this scales with the
       viewport the way the logo does. */
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1;
    padding: 0 4px;
  }
  /* Level with the logo across from it, whatever either of them measures: the
     bar centres its two sides instead of both hanging from the top edge, which
     left the icon a few pixels high. .topnav holds only the icon at this width,
     so centring it centres the icon. The logo's own top and bottom margins are
     unequal, which would tilt its box's centre away from the logo's, so the
     spacing moves to the bar and the two boxes become the two visible things. */
  .timepass {
    align-items: center;
  }
  .topnav {
    margin-top: 0;
  }
  .navigation__bar {
    padding-top: clamp(14px, 3.6vw, 22px);
    padding-bottom: clamp(10px, 2.4vw, 16px);
  }
  .company__logo #logo {
    margin-top: 0;
    margin-bottom: 0;
  }
  .topnav.responsive {
    position: absolute;
    /* was -10px, which cancelled the 10px margin .topnav used to carry. That
       margin is gone, so this starts at the top of the page instead. */
    top: 0;
    right: 0;
    width: 104vw;
    height: 100vh;
    background: #000;
  }
  /* Open, the panel is positioned rather than laid out in the bar, so the icon
     loses the bar's centring. This puts it back where it sits when the menu is
     closed: the bar's top padding, plus half the difference between the logo's
     height and the icon's. a.icon rather than .icon so it also outranks the
     link padding and size the open panel gives every other item in it, which
     was pushing the icon a further 10px down and shrinking the glyph. */
  .topnav.responsive a.icon {
    float: right;
    padding: 0 4px;
    font-size: clamp(26px, 7vw, 34px);
    line-height: 1;
  }
  .topnav_subclass {
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .topnav_subclass a {
    font-size: 22px;
    color: #fff;
  }
  .topnav.responsive .icon {
    position: absolute;
    /* Exactly where it sits with the menu closed, so opening it does not move
       the icon: the bar is 85% wide and centred, which puts its edge 7.5vw in,
       and the top is the bar's padding plus half the difference between the
       logo's height and the icon's. Both ends of that were fixed pixels before
       (33px and 10px), which no longer matched once the two grew fluid. */
    right: 7.5vw;
    top: calc(
      clamp(14px, 3.6vw, 22px) +
        (clamp(44px, 4vw, 56px) - clamp(26px, 7vw, 34px)) / 2
    );
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    color: #fff;
    font-size: 22px;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: absolute;
  }
  .topnav.responsive .dropdown .dropbtn {
    font-size: 22px;
    display: block;
    width: 100%;
    text-align: left;
    color: #fff;
  }
  .book_dropdown {
    display: none;
  }
  .book__btn {
    font-size: 22px !important;
  cursor:pointer;

  }
}