/* 
** The Header Media Queries **
** Tweak as per your needs **
*/
.brand img {
  width: 260px;
  height: auto;
  padding-right: 30px;
}

.site-header {
  margin: 0 auto;
  position: relative;
  background-color: #E8C387; 
}
.site-header1 {
  margin: 0 auto;
  position: relative;
  background-color: #E8C387; 
  margin-top: 60px;
  max-width: 1290px;
  max-height: 114px;
}

.site-header__wrapper1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  @media (min-width: 660px) {
    .site-header__wrapper1 {
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 30px;
      padding-left: 30px; } }
      .site-header__wrapper2 {
        display: flex;
        justify-content: center;
        align-items: center; }
        @media (min-width: 660px) {
          .site-header__wrapper2 {
            padding-right: 30px;
            padding-left: 30px; } }
@media (max-width: 659px) {
  .site-header__end {
    padding-right: 4rem; } }

@media (min-width: 660px) {
  .nav__wrapper {
    display: flex; } }

@media (max-width: 659px) {
  .nav__wrapper {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: -1;
    background-color: #d9f0f7;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; }
    .nav__wrapper.active {
      visibility: visible;
      opacity: 1;
      transform: translateY(0); } }

.nav__item a {

  padding: 1.5rem 1rem; }

.nav__toggle {
  display: none; }
  @media (max-width: 659px) {
    .nav__toggle {
      position: absolute;
      right: 1rem;
      top: 1rem; } }