/* --SCROLL-- */
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px); /* Yukarı doğru hareket */
  }
  100% {
    transform: translateY(0);
  }
}

#scrollToTopBtn {
  position: fixed;
  bottom: 20px; /* Ekranın altına 20px mesafe */
  right: 20px; /* Ekranın sağ tarafına 20px mesafe */
  font-size: 2rem;
  background-color: #ff0101; /* Kırmızı renk */
  color: white;
  border: none;
  width: 50px; /* Butonun genişliği */
  height: 50px; /* Butonun yüksekliği */
  border-radius: 50%; /* Tam yuvarlak şekil */
  display: none; /* Başlangıçta görünmez */
  justify-content: center; /* Yatayda ortalama */
  align-items: center; /* Dikeyde ortalama */
  text-align: center; /* Simgeyi ortalamak için */
  animation: moveUpDown 1s ease-in-out infinite; /* Yukarı-aşağı animasyonu */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Sayfanın üstünde görünmesi için */
}

#scrollToTopBtn:hover {
  background-color: #c00000; /* Hover rengi */
}


/* --ARROW-- */
.arrow-container {
  position: absolute;
  bottom: 12%; /* Home div'inin altına 10px mesafe */
  left: 50%;
  transform: translateX(-50%); /* Yatayda ortalamak için */
  animation: upDown 1.5s infinite; /* Yukarı-aşağı hareket animasyonu */
}

.arrow-container i{
  color:#ffffff;
}


@keyframes upDown {
  0%, 100% {
    transform: translateY(0) translateX(-50%);
  }
  50% {
    transform: translateY(20px) translateX(-50%);
  }
}

@media (max-width: 768px) {
  .home {
    height: 100vh; /* Mobilde de ekranın tamamını kapsasın */
  }

  .arrow-container {
    bottom: 12%; /* Alt mesafeyi aynı tutalım */
  }
}