@media screen and (min-width: 768px) {
  .header .header-wrapper .nav-bar .element:hover {
    background: #447E395B;
    color: #48FF00;
    transform: scale(1.2);
  }

  .drop-down-button:hover {
    box-shadow: 0 0 10px 5px #FFF;
  }
}

@media screen and (max-width: 768px) {
  .header {
    padding-inline: 30px;
  }

  .header .header-wrapper .nav-bar {
    position: absolute;
    width: 100vw;
    height: 30vh;
    left: 0;
    top: 10vh;
    margin: 0;
    background: green;
    flex-direction: column;
    justify-content: space-around;
    border-radius: 10px;
    transform: translateX(100%);
    transition: transform 0.4s;
  }

  .header .header-wrapper .nav-bar #logoIcon {
    display: block;
  }

  .header .header-wrapper .menu-bar {
    display: block;
    transition: transform 0.4s, opacity 0.4s;
  }

  .header .header-wrapper .menu-bar:active {
    transform: scale(0.9);
  }

  .header .header-wrapper .nav-bar.active {
    transform: translateX(0);
  }

  .element {
    width: 30%;
    border: 5px solid gray;
  }

  .section1-wrapper {
    flex-direction: column-reverse;
  }

  .welcome-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateY(-20vh);
  }

  .section4-wrapper {
    flex-direction: column;
  }
}