.elementor-kit-5{--e-global-color-primary:#0EFDC2;--e-global-color-secondary:#54595F;--e-global-color-text:#FFFFFF;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"YekanBakh";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"YekanBakh";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"YekanBakh";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"YekanBakh";--e-global-typography-accent-font-weight:500;background-color:#000000;background-image:url("https://jozvino.shop/wp-content/uploads/2025/05/25-1.png");color:#FFFFFF;font-family:"YekanBakh", Sans-serif;font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:#0EFDC2;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1192px;}.e-con{--container-max-width:1192px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* 1. محفظه اصلی ستاره‌ها */
.floating-stars-background {
  position: fixed; /* یا 'absolute' اگر می‌خواهید در یک بخش خاص باشد */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* پشت محتوای اصلی شما قرار می‌گیرد */
  overflow: hidden; /* ستاره‌ها از کادر بیرون نمی‌زنند */
  pointer-events: none; /* باعث می‌شود قابل کلیک نباشد و مزاحم محتوا نشود */
}

/* 2. خود ستاره/حباب */
.star {
  position: absolute;
  bottom: -20px; /* شروع از پایین صفحه */
  background-color: #FFF;
  border-radius: 50%; /* این آن را به حباب تبدیل می‌کند */
  opacity: 0.7;
  
  /* افکت درخشش ستاره‌ای */
  box-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF;
  
  /* انیمیشن اصلی */
  animation-name: floatUp;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

/* 3. تعریف انیمیشن (حرکت به بالا) */
@keyframes floatUp {
  0% {
    transform: translateY(0);
    opacity: 0.7;
  }
  100% {
    transform: translateY(-110vh); /* کمی بالاتر از بالای صفحه می‌رود */
    opacity: 0;
  }
}

/* 4. ایجاد تنوع (مهم‌ترین بخش!) 
 این بخش باعث می‌شود ستاره‌ها با اندازه‌ها، سرعت‌ها و زمان‌های شروع متفاوت ظاهر شوند
*/

.star:nth-child(1) {
  width: 2px;
  height: 2px;
  left: 10%; /* موقعیت افقی */
  animation-duration: 15s; /* سرعت */
  animation-delay: 0s; /* زمان شروع */
}

.star:nth-child(2) {
  width: 4px;
  height: 4px;
  left: 20%;
  animation-duration: 10s;
  animation-delay: 2s;
}

.star:nth-child(3) {
  width: 3px;
  height: 3px;
  left: 30%;
  animation-duration: 12s;
  animation-delay: 5s;
}

.star:nth-child(4) {
  width: 2px;
  height: 2px;
  left: 40%;
  animation-duration: 18s;
  animation-delay: 1s;
}

.star:nth-child(5) {
  width: 3px;
  height: 3px;
  left: 50%;
  animation-duration: 9s;
  animation-delay: 3s;
}

.star:nth-child(6) {
  width: 2px;
  height: 2px;
  left: 60%;
  animation-duration: 14s;
  animation-delay: 7s;
}

.star:nth-child(7) {
  width: 4px;
  height: 4px;
  left: 70%;
  animation-duration: 11s;
  animation-delay: 4s;
}

.star:nth-child(8) {
  width: 3px;
  height: 3px;
  left: 80%;
  animation-duration: 16s;
  animation-delay: 2s;
}

.star:nth-child(9) {
  width: 2px;
  height: 2px;
  left: 90%;
  animation-duration: 13s;
  animation-delay: 6s;
}

.star:nth-child(10) {
  width: 3px;
  height: 3px;
  left: 95%;
  animation-duration: 10s;
  animation-delay: 8s;
}/* End custom CSS */