/*Header CSS*/
.header {
      grid-row: 1 / 2;
      grid-column: 1 / 2;
      width: 100%;
      align-self: start;
      max-height: 180px;
      background-color: var(--dl-color-scheme-md-red);
      padding-bottom: 10px;
}

.header-container{
      display: grid;
      grid-template-columns: 80% 20%;
      column-gap: 10px;
      background-color: var(--dl-color-scheme-white);
}

/*CSS for Header Logo Image and Link*/
.logo-link{
      width: 100%;
      display: contents;
      grid-column: 1 / 2;
}


.logo {
      grid-column: 1 / 2;
      width:55%;
      margin-left: 5%;
      text-decoration: none;
      align-self: center;
      background-color: var(--dl-color-scheme-white);
      padding-top: var(--dl-space-space-unit);
      padding-bottom: var(--dl-space-space-unit);
}

/*CSS for Hamburger Menu*/
.hamburger-menu{
      grid-column: 2 / 3;
      justify-self: center;
      align-self: center;
}

#toggle {
      opacity: 0;
}

#toggle:checked + .hamburger-btn > span {
      transform: rotate(45deg);
      position: fixed;
}

#toggle:checked + .hamburger-btn > span::before {
      top: 0;
      transform: rotate(0deg);
      position: fixed;
}

#toggle:checked + .hamburger-btn > span::after {
      top: 0;
      transform: rotate(90deg);
      position: fixed;
    }

#toggle:checked ~ .menu-box {
      top: 0 !important;
}

.hamburger-btn {
      position: absolute;
      right: 40px; 
      margin-right: 8%;
      cursor: pointer;
      z-index: 2;
    }


.hamburger-btn > span,
.hamburger-btn > span::before,
.hamburger-btn > span::after {
      display: block;
      position: absolute;
      height: 7px;
      width: 50px;
      background-color: #d51a1a;
      transition-duration: .25s;
}

.hamburger-btn > span::before {
      content: '';
      top: -15px;
    }
.hamburger-btn > span::after {
content: '';
top: 15px;
}

.menu-box {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      position: fixed;
      z-index: 1;
      top: -150%;
      right: 0;
      width: 35%;
      height: 100%;
      margin: 0;
      padding: 80px 0;
      list-style: none;
      background-color: var(--dl-color-scheme-white);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
      transition-duration: .25s;
}

.menu-item {
      display: block;
      padding: 10px 30px;
      color: #333;
      font-size: 25px;
      font-weight: 500;
      text-decoration: none;
      transition-duration: .25s;
}

#header-text{
      color: var(--dl-color-scheme-md-red);
      font-weight: 700;
}

#menu-text{
      font-size: 20px;
}

/* Configuration for Mobile view*/
@media (max-width : 1000px) {
      .menu-box{
            width: 100%;
      }
      .logo{
            width: 80%;
      }
}