/*:::::::::::::::::: HEADER ::::::::::::::::::*/

#headContainer {
  width: 100%;
  height: 300px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  background-color: rgb(230, 230, 230);
}

#headContainer .slide {
  width: calc(860px * 4 / 4);
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
}

#headContainer .slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: swipeOut 15s ease infinite;
}

@keyframes swipeOut {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-100%);
  }
  45% {
    transform: translateX(-100%);
  }

  50% {
    transform: translateX(-200%);
  }
  70% {
    transform: translateX(-200%);
  }

  75% {
    transform: translateX(-300%);
  }
  95% {
    transform: translateX(-300%);
  }

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

#pagintaion {
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#pagintaion span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgb(180, 180, 180);
}

#pagintaion span:nth-of-type(1) {
  animation: colorDot1 15s ease infinite;
}

#pagintaion span:nth-of-type(2) {
  animation: colorDot2 15s ease infinite;
}

#pagintaion span:nth-of-type(3) {
  animation: colorDot3 15s ease infinite;
}

#pagintaion span:nth-of-type(4) {
  animation: colorDot4 15s ease infinite;
}

#pagintaion span:nth-of-type(5) {
  animation: colorDot5 15s ease infinite;
}

@keyframes colorDot1 {
  0% {
    background-color: rgb(180, 180, 180);
  }
  2% {
    background-color: white;
  }

  20% {
    background-color: white;
  }
  25% {
    background-color: rgb(180, 180, 180);
  }
}

@keyframes colorDot2 {
  25% {
    background-color: rgb(180, 180, 180);
  }
  27% {
    background-color: white;
  }

  45% {
    background-color: white;
  }
  50% {
    background-color: rgb(180, 180, 180);
  }
}

@keyframes colorDot3 {
  50% {
    background-color: rgb(180, 180, 180);
  }
  52% {
    background-color: white;
  }

  70% {
    background-color: white;
  }
  75% {
    background-color: rgb(180, 180, 180);
  }
}

@keyframes colorDot4 {
  75% {
    background-color: rgb(180, 180, 180);
  }
  77% {
    background-color: white;
  }

  95% {
    background-color: white;
  }
  100% {
    background-color: rgb(180, 180, 180);
  }
}

@keyframes colorDot5 {
  0% {
    background-color: rgb(180, 180, 180);
  }
  2% {
    background-color: white;
  }

  20% {
    background-color: white;
  }
  25% {
    background-color: rgb(180, 180, 180);
  }
}

@media (max-width: 862px) {
  #headContainer {
    height: fit-content;
  }
}