.header {
  height: 85vh;
  position: relative;
  height: 95vh;
  background-image: linear-gradient(
      to right bottom,
      rgba($color-primary-light, 0.8),
      rgba($color-primary-dark, 0.8)
    ),
    url(../img/hero-small.jpg);
  background-size: cover;
  background-position: top;
  /* -------------------------------------------------- */
  /* clip-path notes by Yahoo Baba Youtube video */
  /* To make circle shape  */
  /* syntax:--> circle(radiusOrCircleSize% at PositionAlongX-axis% PositionAlongY-axis% ) */
  /* clip-path: circle(20% at 50% 50%); it creates 20% radius circle from x-axis=50 and y-axis=50 */

  /* To make ellipse shape  */
  /* Syntax:-->ellise(radiusFromHorizontal radiusFromVertical at postionAlongX-axis positionAlongY-axis) */
  /* clip-path: ellipse(5% 30% at 50% 50%); it creates ellipse shape  along x-axis=50% y-axis=50% mean from center */

  /* To make rectangle shape  */
  /* syntax---> inset(top% right% bottom% left%)  */
  /* clip-path: inset(40% 20% 40% 40%); */

  /* To make polygon shape */
  /* syntax---> polygon(HideFromX-axis HideFromY-axis,HideFromX-axis HideFromY-axis,HideFromX-axis HideFromY-axis,HideFromX-axis HideFromY-axis)  */
  /* clip-path: polygon(0 0, 100% 0, 100% 200px, 0 100%); */
  /* -------------------------------------------------- */
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);

  @supports (clip-path: polygon(0 0)) or (-webkit-clip-path: polygon(0 0)) {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
    height: 95vh;
  }
  // RESPONSIVE IMAGES IN CSS USING MEDIA QUERIES (USING MIN-RESOLUTION)
  @media only screen and (min-resolution: 192dpi) and (min-width: 37.5em),
   only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 37.5em),
   only screen and (min-width: 125em) {
    background-image: linear-gradient(
        to right bottom,
        rgba($color-primary-light, 0.8),
        rgba($color-primary-dark, 0.8)
      ),
      url(../img/hero.jpg);
  }

  @include respond(phone) {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 85vh, 0 100%);
  }
  &__logo-box {
    position: absolute;
    top: 4rem;
    left: 4rem;
  }
  &__logo {
    height: 3.5rem;
  }
  &__text-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
}
