/* Animations */
@keyframes slideUp {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translate(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes expand {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(500px) scale(0.2);
  }
  100% {
    transform: translateX(0px) scale(1);
  }
}

*::hover,
*::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
}

body,
nav li,
ul {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}

.flex {
  display: flex;
}

hr {
  border: 2px solid #222222;
  width: 50px;
}

.top-heading h1 {
  font-size: 3rem;
  font-weight: normal;
  line-height: 0.5;
  animation: slideRight 0.9s ease forwards;
}
@media (max-width: 500px){
  .top-heading h1{
    font-size: 2rem;
  }
}
@media (max-width: 400px){
  .top-heading h1{
    font-size: 1rem;
  }
}
.image-mix-gallery-aboutus {
  margin-top: 5rem;
}
.image-mix-gallery-aboutus img {
  width: 100%;
}