.courses-section {
			padding:0 auto;
			margin:0 auto;
			margin-top:110px;
			margin-bottom:20px;
			background: #fff;
			padding: 5px;
			border-radius: 12px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			width: 85%;
			max-width: 800px;
		}

.step {
    display: none; /* إخفاء الخطوة */
    opacity: 0;
    transform: translateY(10px); /* انتقال بسيط من الأسفل */
    transition: opacity 0.6s ease-in-out, transform 0.5s ease-in-out; /* تأثير التلاشي والتحريك */
}

.step.active {
    display: block;
    opacity: 1;
    transform: translateY(0); /* إعادة العنصر إلى موقعه الطبيعي */
}


		h3 {
			font-size: 22px;
			text-align: center;
			margin-bottom: 20px;
			color: #333;
		}

		.option-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			margin-top: 20px;
		}

		.optionco {
			border-radius: 12px;
			text-align: center;
			padding: 2px;
			cursor: pointer;
			transition: all 0.3s ease-in-out;
			font-size: 18px;
			font-weight: bold;
			color: white;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}

		.option.male {
			background: #007ad5; /* أزرق */
			border: 1px solid #0056b3;
			color:#fff;
			
		}

		 .icon-container i{
			margin-top:15px;
		}

		.option.female {
			background: #ab0087; /* وردي */
			border: 1px solid #d14789;
			color:#fff;
		}

		.option i {
			font-size: 34px;
			margin-bottom: 10px;
			transition: transform 0.3s ease-in-out;
		}

		.option:hover {
			transform: scale(1.08);
		}

		.option:hover i {
			transform: rotate(20deg);
		}

		.option.selected {
			box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
			transform: scale(1.08);
			border-width: 2px;
		}

		/* تحسين النصوص */
		.option p {
			margin-top: 5px;
		}

        input[type="text"], input[type="tel"] {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 16px;
        }
		#step2 h3 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 10px;
    color: #333;
}

/* تخصيص الألوان حسب الفئة */
.option[data-value="18-24"] {
    background: #ff6347; /* طماطم */
    border: 2px solid #ff4500;
}

.option[data-value="25-34"] {
    background: #32cd32; /* أخضر */
    border: 2px solid #228b22;
}

.option[data-value="35-44"] {
    background: #1e90ff; /* أزرق */
    border: 2px solid #4682b4;
}

.option[data-value="45+"] {
    background: #ffa500; /* برتقالي */
    border: 2px solid #ff8c00;
}


.option[data-value="employee"] {
    background: #4ecd2f; /* أخضر */
    border: 2px solid #228b22;
}

.option[data-value="entrepreneur"] {
    background: #ff6347; /* طماطم */
    border: 2px solid #ff4500;
}

.option[data-value="student"] {
    background: #1e90ff; /* أزرق */
    border: 2px solid #4682b4;
}

.option[data-value="unemployed"] {
    background: #ff8c00; /* برتقالي */
    border: 2px solid #e07b00;
}

.option[data-value="other"] {
    background: #8f2fcd; /* ذهبي */
    border: 2px solid #7610b8;
}


  .image-container img {
    width: 100%;
    border-radius: 8px;
  }

  .video-container iframe {
    width: 100%;
    height: 315px;
    border-radius: 8px;
  }

  .pricing-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .pricing-option {
    padding:1px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }



  .buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .buttons button {
    padding: 12px 25px;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s;
    outline: none;
  }

  .buttons button:hover {
    transform: scale(1.05);
  }

  .buttons .next {
    background-color: #007BFF;
    color: white;
  }

  .buttons .next {
    background-color: #28a745;
    color: white;
  }


.suscribvip {
    display: block;
    width: fit-content;
    margin: 20px auto; /* يجعله في المنتصف أفقياً */
    padding: 9px 24px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(45deg, #ff7f50, #ff4500); /* تدرج لوني */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.suscribvip:hover {
    background: linear-gradient(45deg, #ff6347, #ff4500); /* لون مختلف عند التحويم */
    transform: scale(1.05);
}



.zrradio {
    display: block;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}


/* التأثير عند التحويم */
.zrradio:hover {
    background-color: #f9f9f9;
    border-color: #007bff;
}


/* التأثير عند التحديد */
.zrradio:active {
    background-color: #f9f9f9;
    border-color: #007bff;
}

#name, #email, #phone{
	width: 100%; 
	margin-bottom: 10px; 
	padding: 10px;
	border: 1px solid #ddd; 
	border-radius: 5px;
}


/* تنسيق الحاوية الرئيسية */
#step4 {
    padding:5px;
    border-radius: 10px;
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin:5px;
}

/* تنسيق العناوين الرئيسية */
#step4 h3 {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 700;
    text-align: center;
    line-height: 1.4;
    color: #0b4dc5;
}

/* تنسيق العناوين الرئيسية */
#step4 h4 {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 700;
    line-height: 1.4;
    color: #0b4dc5;
}

/* تنسيق العناوين الرئيسية */
#step4 strong {
    font-size: 18px;
    margin-bottom: 3px;
    font-weight: 700;
    line-height: 1.4;
    color: #0b1c32;
}

.intro-heading {
    font-size: 30px;
    color: #0066cc;
    font-weight: bold;
}

.intro-text {
    font-size: 18px;
    text-align: justify;
    margin-bottom: 20px;
}

.sub-heading, .question-title, .why-choose-us-title, .guarantee-title,
.what-happens-title, .trust-building-title, .course-content-title,
.methodology-title, .duration-title, .why-choose-us-again-title {
    font-size: 22px;
    color: #004b87;
    margin-bottom: 15px;
}

/* تنسيق الفقرات */
#step4 p {
    font-size: 18px;
    color: #34495e;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* تنسيق الصورة المصغرة للفيديو */
#step4 .video-thumbnail {
    text-align: center;
    margin: 10px 0;
}

#step4 .video-thumbnail img {
    border-radius: 10px;
    transition: transform 0.3s ease-in-out;
	display: block;
    margin: 0 auto;
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3);
}

#step4 .video-thumbnail iframe {
    border-radius: 3px;
	border: 10px solid #fff; 
    box-shadow: 0 0px 8px rgba(0, 0, 0, 0.3);
    background-color: #000;
	
}

#step4 .video-thumbnail img:hover {
    transform: scale(1.02);
}

.bullet-list {
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.course-steps {
    padding-left: 30px;
    margin-bottom: 20px;
    font-size: 18px;
}

.course-steps li {

}

.ordered-list {
    list-style-type: decimal;
}

/* إضافة فواصل بين الأقسام */
#step4 hr {
    border: none;
    border-top: 2px solid #e0e0e0;
    margin: 30px 0;
}

/* تنسيق الأقسام الأخرى */
#step4 .section-title {
    font-size: 18px;
    color: #2980b9;
    font-weight: bold;
    margin-bottom: 10px;
}

/* التنسيق الخاص بالنصوص المميزة */
#step4 .highlight {
    background-color: #eaf4f9;
    padding: 10px;
    border-left: 5px solid #2980b9;
    font-weight: 600;
}

/* تخصيص النماذج أو القوائم */
#step4 ul {
    padding-left: 20px;
    list-style-type: disc;
}

#step4 ul li {
    font-size: 18px;
    color: #555;
   
}

/* تخصيص الأزرار */
#step4 .btn {
    background-color: #2980b9;
    color: #fff;
    padding: 12px 25px;
    border-radius: 5px;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}

#step4 .btn:hover {
    background-color: #1c5d84;
}

/* تخصيص تنسيق الفقرات المتقدمة */
#step4 .advanced-paragraph {
    background-color: #ecf0f1;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 30px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* تخصيص العناوين الفرعية */
#step4 .sub-title {
    font-size: 22px;
    color: #8e44ad;
    margin-bottom: 15px;
    font-weight: 600;
}
#step4 .video-container {
    margin: 30px 0;
    text-align: center;
}

#step4 .video-container video {
    width: 100%;
    max-width: 600px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#videoThumbnail {
    cursor: pointer;
    width: 100%;
    max-width: 600px;
}

/* تنسيق نافذة الفيديو المنبثقة */
.custom-popup {
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 15px;
    padding: 2px;
    max-width: 600px;
    width: 80%;
    position: relative;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.4);
}

/* حاوية الفيديو */
.video-popup-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* محتوى الفيديو */
.video-popup-content {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    max-width: 600px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    text-align: center;
}

/* تنسيق مشغل الفيديو */
.video-player {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

/* زر الإغلاق */
.custom-close-button {
    background: transparent;
    color: #fff;
    border: none;
    font-size: 28px;
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.custom-close-button:hover {
    transform: scale(1.2);
}



/* صفحة الويبنار والفيديو في الخطوة الرابعة*/

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); /* توزيع العناصر بشكل مرن */
    gap: 10px;
    justify-content: center; /* محاذاة العناصر في المنتصف */
}

.review-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* توسيط المحتوى داخل العنصر */
    text-align: center;
    cursor: pointer;
    width: 140px; /* ضبط العرض لضمان ترتيب العناصر بشكل متناسق */
}

.review-item img {
    width: 100%;
    max-width: 140px;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.review-item img:hover {
    transform: scale(1.1);
}

/* تنسيق النافذة المنبثقة */
.custom-popup-video-w {
    background: rgba(0, 0, 0, 0.9) !important; /* خلفية داكنة شفافة */
    padding: 0 !important;
    border-radius: 12px !important;
    width: 90% !important;
    max-width: 800px !important;
    box-shadow: 0px 4px 20px rgba(255, 255, 255, 0.2) !important;
}

/* جعل الفيديو يستجيب للحجم */
.custom-html-container-video-w {
    width: 100%;
    padding: 0 !important;
}

/* تصميم زر الإغلاق */
.custom-close-button-video-w {
    position: absolute;
    top: -15px;
    right: -15px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    border: none;
    font-size: 18px;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease-in-out;
}

.custom-close-button-video-w:hover {
    background: rgba(255, 0, 0, 1);
}

/* تنسيق الفيديو */
.video-popup-container-video-w {
    position: relative;
    width: 100%;
    max-width: 800px;
    margin: auto;
}

.video-popup-content-video-w video {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}





/* Step 3: Pricing offers */

.pricing-options {
    color: #333;
    margin: auto;
}

.pricing-option {
    display: block;
    padding: 20px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    border-radius: 8px;
    background-color: #f9f9f9;
    transition: all 0.3s ease;
    cursor: pointer;
}

.pricing-option:hover {
    background-color: #eef5ff;
    border-color: #0b4dc5;
}

.pricing-option input {
    margin-right: 10px;
}

h4 {
    color: #0b4dc5;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
    display: inline-block;
}

.section-title {
    font-size: 1em;
    margin-top: 10px;
    color: #0073e6;
    margin-bottom: 5px;
    font-weight: bold;
}

.offer-list {
    font-size: 12px;
    list-style: none;
    padding-left: 20px;
    color: #555;
}

.offer-list li {
    margin-bottom: 5px;
}

.price {
    font-size: 1em;
    color: #e74c3c;
    font-weight: bold;
}

.price del {
    color: #ccc;
}

.discounted-price {
    color: #27ae60;
}

.target-group {
    font-size: 14px;
    color: #555;
}