.bgImage {
 background-image: url(img/2.jpg);
 height: 100%;
 width: 100%;
 background-repeat: no-repeat;
 background-size: cover;
}

.typing-text {
 font-size: 24px;
 white-space: nowrap;
 overflow: hidden;
 position: relative;
 display: inline-block;
}
.typing-text::after {
 content: "";
 position: absolute;
 right: 0;
 width: 3px;
 height: 100%;
 background-color: white;
 animation: blink 1s step-end infinite;
}

@keyframes blink {
 0%,
 100% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
}

#textHead {
 white-space: nowrap;
 overflow: hidden;
 position: relative;
 display: inline-block;
 opacity: 0;
}

@keyframes slide-in-top {
 0% {
  transform: translateY(-50px);
  opacity: 0;
 }
 50% {
  transform: translateY(0);
  opacity: 1;
 }
 100% {
  transform: translateY(0);
  opacity: 1;
 }
}

@keyframes slide-out-bottom {
 0% {
  transform: translateY(0);
  opacity: 1;
 }
 50% {
  transform: translateY(0);
  opacity: 1;
 }
 100% {
  transform: translateY(30px);
  opacity: 0;
 }
}

.slider-container {
 overflow: hidden;
 position: relative;
}
.slider-wrapper {
 display: flex;
 transition: transform 0.5s ease-in-out;
}
.slider-item {
 min-width: 100%;
 box-sizing: border-box;
}
.prev,
.next {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background: rgba(0, 0, 0, 0.5);
 color: white;
 padding: 0.5rem;
 cursor: pointer;
}
.prev {
 left: 0.5rem;
}
.next {
 right: 0.5rem;
}
.slider-item-left,
.slider-item-right {
 opacity: 0.5;
}