@import url("https://fonts.googleapis.com/css2?family=Playfair+Display&family=Oxanium:wght@200..800&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Playfair Display, "Times New Roman", Times, serif;
}

body {
  background-color: #f1f1f1;
  color: #151515;
}
li {
  list-style: none;
}

a {
  /* color of links */
  color: #f5f5f5;
  text-decoration: none;
}

/* Header Section */
#header-section {
  background-image: url("../background-canvas.jpg");
  background-position: top;
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  padding-bottom: 2rem;
}

.header-text-wrapper {
  z-index: 2;
}

.header-content-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-content-left, .header-content-right {
  flex-basis: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header-content-left p:nth-child(1){
  font-size: 3rem;
  letter-spacing: .5rem;
}

.header-content-left p:nth-child(2){
  font-size: 5rem;
  font-weight: bold;
}

.header-content-left p:nth-child(3){
  padding: 2rem;
  font-size: 1.8rem;
  text-align: center;
}

.header-content-right img {
  margin-top: 3rem;
  width: 80%;
}


/* Pics Slide Scroll */
/*** LOGO SCROLL ***/
@keyframes slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

.pics {
  overflow: hidden;
  padding: 5px 0;
  background-color: #fddebb;
  white-space: nowrap;
  position: relative;
}

.pics:hover .pics-slide {
  animation-play-state: paused;
}

.pics-slide {
  display: inline-block;
  animation: 35s slide infinite linear;
}

.pics-slide img {
  width: 300px;
    vertical-align: middle; /
}

@media (max-width: 768px) {
  #header-section {
    height: 100%;
  }

.header-content-wrapper {
 flex-direction: column-reverse;
 gap: 2rem;
 text-align: center;
}

.header-content-left p:nth-child(1){
  font-size: 1.4rem;
  letter-spacing: .5rem;
}

.header-content-left p:nth-child(2){
  font-size: 2.5rem;
}

.header-content-left p:nth-child(3){
  padding: 2rem;
  font-size: 1.4rem;
  text-align: center;
}

.header-content-right img {
  margin-top: 6rem;
  width: 100%;
}

  /* Pics Slide Scroll */
   .pics {
    padding: 5px 0;
  }

  .pics:hover .pics-slide {
  animation-play-state: running;
}
}