/* ۱) آماده‌سازی هدر برای موقعیت‌دهی نسبت */
.site-header, #masthead {
  position: relative !important;
  overflow: visible !important;
}

/* ۲) wrapper کلی افکت بارش */
.stinovment-header-rain-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* ۳) کانتینر قطره‌ها */
.stinovment-header-rain {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* ۴) استایل و انیمیشن هر قطره */
.stinovment-header-rain span {
  position: absolute;
  top: -2em;
  font-size: 1.2rem;
  color: #ffffff;
  opacity: 0.5;
  white-space: nowrap;
  animation: fall linear infinite;
}

/* ۵) موقعیت و مدت زمان تصادفی برای نمونه */
.stinovment-header-rain span:nth-child(1)  { left:  5%;  animation-duration: 4s;   }
.stinovment-header-rain span:nth-child(2)  { left: 15%;  animation-duration: 5.5s; }
.stinovment-header-rain span:nth-child(3)  { left: 25%;  animation-duration: 4.8s; }
.stinovment-header-rain span:nth-child(4)  { left: 35%;  animation-duration: 6.2s; }
.stinovment-header-rain span:nth-child(5)  { left: 45%;  animation-duration: 4.4s; }
.stinovment-header-rain span:nth-child(6)  { left: 55%;  animation-duration: 5.1s; }
.stinovment-header-rain span:nth-child(7)  { left: 65%;  animation-duration: 4.9s; }
.stinovment-header-rain span:nth-child(8)  { left: 75%;  animation-duration: 6.0s; }
.stinovment-header-rain span:nth-child(9)  { left: 85%;  animation-duration: 5.3s; }
.stinovment-header-rain span:nth-child(10) { left: 95%;  animation-duration: 4.7s; }

/* ۶) تعریف انیمیشن افتادن */
@keyframes fall {
  0%   { transform: translateY(0); }
  100% { transform: translateY(110vh); }
}