#logoAndVideo {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  transition: 1s;
  box-sizing: border-box;
}
/* এটা হল logo টা যাওয়া আর আসার সময় রাস্তা সোজা আছে কিনা তা মেজরমেন্ট সেট করা হয়েছে এখানে */
#logoAndVideo.scrolled {
  height: 250px;
}
/* এটা ভিডিওটার জন্য কাজ */
.banner {
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transition: 1s;

}
/* এটা logo টা যখন top 0 থে চলে যাবে তখন নিছের video টার opacity 0 হয়ে যাবে */
.scrolled .banner {
  opacity: 0;
}
.logo {
  position: absolute;
  top: calc(60% - 150px);
  left: calc(43% - 150px);
  transition: 1s;
  
}
.scrolled .logo {
  position: relative;
  top: 10px;
  left: 20px;
  opacity: 0;
}
/* এটা logo এর সাইজ */
.logo img {
    width: 400px;
  transition: 1s;
}
/* এটা logo টা top 0 তে গিয়ে কতো ছোওট হবে তা সেট করে */
.scrolled .logo img {
  width: 80px;
}

.custom-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  opacity: 0.7;
}

.custom-badge svg {
  animation: rotate 12s linear infinite;
  transition: 0.4s ease;
}

.custom-badge:hover svg {
  transform: scale(1.05);
  opacity: 1;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}