/* کارت‌های ویدیو */
.video-card .card-title {
  font-size: 1rem;
}

.video-card:hover {
  transform: translateY(-5px);
  transition: all 0.3s ease-in-out;
  box-shadow: 0 8px 20px rgba(111, 66, 193, 0.2);
}

/* نسبت 16:9 برای ویدیوهای افقی */
.ratio-16x9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 = 9 / 16 = 0.5625 */
  overflow: hidden;
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.ratio-16x9 iframe,
.ratio-16x9 script,
.ratio-16x9 div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        width: 100%;
        position: relative;
    }

    body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(0deg,rgba(172, 71, 255, 1) 0%, rgba(255, 249, 82, 1) 100%);
        z-index: -1; /* باعث می‌شود پشت محتوا باشد */
        animation: revealGradient 1.5s ease-out forwards;
    }

    @keyframes revealGradient {
        from {
            height: 0;
        }
        to {
            height: 100%;
        }
    }

    /* نمونه برای نشان دادن ناوبار */
    nav {
        color: #fff;
        text-align: center;
    }
    
    nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;


    background: rgba(255, 255, 255, 0.3); /* شفاف و مایل به سفید */
    backdrop-filter: blur(10px);          /* افکت بلور */
    -webkit-backdrop-filter: blur(10px);  /* برای سازگاری iOS */

    color: #000; /* رنگ متن تیره‌تر برای کنتراست */

    z-index: 1000;
}