body {
            box-sizing: border-box;
            font-family: 'Estedad', 'Vazir', sans-serif;
        }
        
        .font-light { font-weight: 300; }
        .font-medium { font-weight: 500; }
        .font-bold { font-weight: 700; }
        
        .hero-bg {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(147, 197, 253, 0.1)), 
                        linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)),
                        url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><defs><pattern id="caps" patternUnits="userSpaceOnUse" width="120" height="120"><circle cx="60" cy="60" r="25" fill="%23e0f2fe" stroke="%23b3e5fc" stroke-width="2"/><circle cx="60" cy="60" r="15" fill="%2381d4fa"/><circle cx="60" cy="60" r="8" fill="%2329b6f6"/></pattern></defs><rect width="1200" height="800" fill="%23f8f9fa"/><rect width="1200" height="800" fill="url(%23caps)" opacity="0.6"/></svg>');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            min-height: 100vh;
            position: relative;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(ellipse at center, transparent 30%, rgba(248, 249, 250, 0.8) 100%);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }
        
        .glass-card:hover {
            background: rgba(255, 255, 255, 0.98);
            transform: translateY(-8px);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
        }
        
        .feature-card {
            transition: all 0.3s ease;
        }
        
        .feature-card:hover .feature-icon {
            color: #3b82f6;
            transform: scale(1.1);
        }
        
        .feature-icon {
            transition: all 0.3s ease;
        }
        
        .btn-gradient {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
        }
        
        .btn-outline {
            border: 2px solid #3b82f6;
            color: #3b82f6;
            transition: all 0.3s ease;
        }
        
        .btn-outline:hover {
            background: #3b82f6;
            color: white;
            transform: translateY(-2px);
        }
        
        .progress-bar {
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #60a5fa);
            border-radius: 2px;
            transform-origin: right;
            animation: progressFill 2s ease-out forwards;
        }
        
        @keyframes progressFill {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInRight {
            from {
                opacity: 0;
                transform: translateX(40px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        @keyframes fadeInScale {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }
        
        @keyframes slideInFromBottom {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease forwards;
        }
        
        .animate-fade-in-left {
            animation: fadeInLeft 0.8s ease forwards;
        }
        
        .animate-fade-in-right {
            animation: fadeInRight 0.8s ease forwards;
        }
        
        .animate-fade-in-scale {
            animation: fadeInScale 0.8s ease forwards;
        }
        
        .animate-slide-in-bottom {
            animation: slideInFromBottom 0.8s ease forwards;
        }
        
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
        }
        
        .scroll-animate-left {
            opacity: 0;
            transform: translateX(-40px);
        }
        
        .scroll-animate-right {
            opacity: 0;
            transform: translateX(40px);
        }
        
        .scroll-animate-scale {
            opacity: 0;
            transform: scale(0.8);
        }
        
        .scroll-animate-bottom {
            opacity: 0;
            transform: translateY(50px);
        }
        
        .counter-number {
            transition: all 0.3s ease;
        }
        
        .testimonial-card {
            background: rgba(255, 255, 255, 0.98);
            border: 1px solid rgba(59, 130, 246, 0.1);
            transition: all 0.3s ease;
        }
        
        .testimonial-card:hover {
            border-color: rgba(59, 130, 246, 0.3);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
        }
        
        .link-underline {
            position: relative;
            text-decoration: none;
        }
        
        .link-underline::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background: #3b82f6;
            transition: width 0.3s ease;
        }
        
        .link-underline:hover::after {
            width: 100%;
        }
        
        /* Simple Testimonials Slider Styles */
        .simple-slider-container {
            position: relative;
        }
        
        .testimonial-display {
            transition: all 0.3s ease;
        }


        .video-section {
  position: relative;
  width: 100%;
  height: 100vh; /* یا ارتفاع مورد نظر */
  overflow: hidden;
}

#bgVideo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 1;
  color: white;
}