/* Tablet size */
@media (max-width: 1024px) {
  /* Tablet Home */
  .home {
    height: 740px;
  }

  .home-obj-1 {
    left: -15vw;
    top: 10vh;
  }

  .home-obj-2 {
    bottom: 10vh;
  }

  .home-obj-3 {
    right: -20vw;
    top: 5vh;
  }

  /* Tablet Gallery */
}

/* Small Tablet size */
@media (max-width: 768px) {
  /* Navbar or Header */
  header.active {
    background-color: #50d8d7;
  }

  nav ul {
    display: block;
    background-color: #101010;
    width: 100%;
    height: max-content;
    order: 3;
    position: absolute;
    top: 0;
    transition: 00.5s;
    padding-top: 50px;
    z-index: -1;
    transform: translateY(-100%);
  }

  nav ul.active {
    display: block;
    transform: translateY(0);
    transition: 0.5s;
  }

  .nav-logo a {
    font-size: 1.4rem;
  }

  nav ul li a {
    width: 100%;
    text-align: center;
  }

  nav {
    padding-right: 3vw;
  }

  .menu-bar {
    display: flex;
  }

  .menu-bar span {
    background-color: #101010;
  }

  /* Tablet Home */
  .home {
    height: 740px;
  }

  .home-content {
    grid-template-columns: 1fr 9fr;
  }

  .home-mid {
    display: none;
  }

  .home-left {
    background-color: #ff9900;
  }
}

/* ------------------------------------------------ */

/* Mobile size */
@media (max-width: 540px) {
  /* Mobile Header and Navbar */
  header.active {
    background-color: #101010;
  }

  nav ul {
    display: block;
    background-color: #101010;
    width: 100%;
    height: max-content;
    order: 3;
    position: absolute;
    top: 0;
    transition: 00.5s;
    padding-top: 50px;
    z-index: -1;
    transform: translateY(-100%);
  }

  nav ul.active {
    display: block;
    transform: translateY(0);
    transition: 0.5s;
  }

  .nav-logo {
    width: 20.5vw;
  }

  .nav-logo a {
    font-size: 1.4rem;
  }

  nav ul li a {
    width: 100%;
    text-align: center;
  }

  nav {
    padding-right: 3vw;
  }

  .menu-bar {
    display: flex;
  }

  .menu-bar span {
    background-color: white;
  }

  /* Mobile Home */

  .home-content {
    grid-template-columns: 1fr;
  }

  .home-left,
  .home-right {
    display: none;
  }

  .home {
    height: 100vh;
  }

  .home-mid {
    display: flex;
  }

  /* Mobile About */

  #about {
    padding-top: 50px;
  }

  /* Mobile Gallery */

  /* Mobile Content Container */
}