html { scroll-behavior: smooth; }
        body { background-color: #11131a; color: #d1d5db; }
        
        /* Glassmorphism Cards */
        .glass-panel {
            background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            transition: all 0.3s ease;
        }
        
        .glass-panel-dark {
            background: rgba(15, 20, 30, 0.6);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            border-radius: 12px;
        }

        .glass-nav {
            background: rgba(17, 19, 26, 0.85);
            backdrop-filter: blur(12px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Testimonial Quote Outline Icon */
        .quote-outline {
            -webkit-text-stroke: 2px #e2e8f0;
            color: transparent;
            opacity: 0.5;
        }

        /* Scroll to top hide/show */
        .scroll-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
        .scroll-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
        
        /* Edge to edge service cards */
        .service-img-card:hover img { transform: scale(1.1); }
        
        /* 3D Flip Cards for Services */
        .perspective-1000 { perspective: 1000px; }
        .preserve-3d { transform-style: preserve-3d; }
        .backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
        .rotate-y-180 { transform: rotateY(180deg); }
        
        /* Swiper Customization */
        .swiper-pagination-bullet-active { background-color: #DE3B34 !important; }
        .testimonial-swiper { padding-bottom: 3rem !important; }
		
		.flip-card {
            perspective: 1000px;
            background-color: transparent;
        }
        .flip-card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s cubic-bezier(0.4, 0.2, 0.2, 1);
            transform-style: preserve-3d;
        }
        .flip-card:hover .flip-card-inner {
            transform: rotateY(180deg);
        }
        .flip-card-front, .flip-card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
        .flip-card-back {
            transform: rotateY(180deg);
        }
		
		
		    .plans {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 30px;
      padding: 50px 20px 70px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background: #1a1a2e;
      border: 1px solid #2a2a4a;
      border-radius: 16px;
      padding: 36px 28px;
      width: 320px;
      display: flex;
      flex-direction: column;
      transition: transform 0.2s, box-shadow 0.2s;
    }
    .card:hover {
      transform: translateY(-6px);
      box-shadow: 0 12px 40px rgba(230, 57, 70, 0.2);
    }
    .card.popular {
      border-color: #e63946;
      position: relative;
    }
    .badge {
      position: absolute;
      top: -14px;
      left: 50%;
      transform: translateX(-50%);
      background: #e63946;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 700;
      padding: 4px 16px;
      border-radius: 20px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .plan-name {
      font-size: 1.2rem;
      font-weight: 700;
      color: #e63946;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-bottom: 8px;
    }
    .price {
      font-size: 2.6rem;
      font-weight: 800;
      color: #fff;
    }
    .price span {
      font-size: 1rem;
      font-weight: 400;
      color: #aaa;
    }
    .desc {
      font-size: 0.9rem;
      color: #888;
      margin: 10px 0 20px;
      line-height: 1.5;
    }
    .divider {
      border: none;
      border-top: 1px solid #2a2a4a;
      margin-bottom: 20px;
    }
	.plans ul {
		list-style: none;
		flex: 1;
		margin-bottom: 28px;
	}
    ul li {
      font-size: 0.92rem;
      color: #ccc;
      padding: 6px 0;
      display: flex;
      align-items: flex-start;
      gap: 8px;
      line-height: 1.4;
    }
/* إظهار علامة الصح فقط داخل قسم الباقات */
.plans ul li::before {
  content: "✓";
  color: #e63946;
  font-weight: 900;
  margin-right: 10px; /* مسافة بين العلامة والنص */
  display: inline-block;
}

.plans ul {
  list-style: none;
  padding: 0;
}

    .btn {
      display: block;
      text-align: center;
      background: #e63946;
      color: #fff;
      font-weight: 700;
      font-size: 1rem;
      padding: 14px;
      border-radius: 10px;
      text-decoration: none;
      transition: background 0.2s, transform 0.1s;
      letter-spacing: 0.5px;
    }
    .btn:hover {
      background: #c1121f;
      transform: scale(1.02);
    }

/* كروت الستوري تلر تبدأ من هنا */
.storyteller-headingst {
    font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 48px; /* حجم الخط كما في الصورة */
    font-weight: 800; /* خط سميك جداً */
    letter-spacing: -1px; /* تقريب الحروف قليلاً للحصول على المظهر العصري */
    text-align: center;
    line-height: 1.2;
}

/* اللون الأبيض للجزء الأول والثالث */
.text-whitest {
    color: #ffffff;
}

/* اللون الأحمر المائل للوردي (Pinkish Red) كما في الصورة */
.text-redst {
    color: #e63946; /* هذا الكود اللوني مطابق تماماً للصورة المرفقة */
}

/* تنسيق النص الفرعي (Social Media Content...) */
.sub-headingst {
    color: #aaaaaa; /* لون رمادي فاتح */
    font-size: 18px;
    font-weight: 400;
    margin-top: 15px;
    display: block;
    font-family: 'Segoe UI', sans-serif;
}