@font-face {
  font-family: 'Droid Arabic Kufi';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/DroidKufi-Regular.eot);
  src: url(../fonts/DroidKufi-Regular.eot?#iefix) format('embedded-opentype'),
       url(../fonts/DroidKufi-Regular.woff2) format('woff2'),
       url(../fonts/DroidKufi-Regular.woff) format('woff'),
       url(../fonts/DroidKufi-Regular.ttf) format('truetype');
}

/* إعدادات عامة */
body {
    margin: 0;
    font-family: 'Droid Arabic Kufi';
    background: linear-gradient(135deg, #b8daf9, #fccba0);
    color: white;
    text-align: center;
    min-height: 100vh;
    padding: 30px 10px; /* يسمح بالتمرير عند وجود محتوى طويل */
    box-sizing: border-box;
}

/* تغليف كل الصفحة */
.wrapper {
    max-width: 800px;
    margin: 0 auto; /* مركز أفقيًا */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* الحاوية */
.container {
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    padding: 20px;
    margin: 1px 0; /* مسافة من الأعلى والأسفل */
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}


/* الشعار */
.logo img {
    max-width: 130px;
    margin-bottom: 10px;
    border-radius: 50%;
    border: 2px solid white;
	border:2px solid #fe690f;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
	background-color:#fff;
}

/* الأقسام */
.entry {
    background: rgba(0, 0, 0, 0.8); /* خلفية شفافة للأقسام */
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    transition: transform 0.3s, background 0.3s;
}

.entry:hover {
    transform: translateY(-5px);
    background: rgba(0, 0, 0, 0.8);
}

.entry h2 {
    color: #ef7107;
    margin-bottom: 10px;
    font-size: 18px;
}

.entry p {
    color: white;
    font-size: 12px;
}

/* الأيقونات */
.social-icons {
    margin-top: 20px;
}

.social-icons a {
    color: #000;
    margin: 0 10px;
    font-size: 1.5rem;
    transition: color 0.3s;
}

.social-icons a:hover, a:active {
    color: #fe690f;
}


/* قسم الصورة مع النص والعداد */
.countdown-section {
	position: relative;
	background: url('../../uploads/a.png') no-repeat center center;
	height: 300px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
    border-radius: 12px;
	
}

.countdown-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
}

.countdown-content {
	position: relative;
	z-index: 2;
}

.countdown-content h2 {
	font-size: 1rem;
	margin-top: 140px;
	text-align: center;
	width:300px;
}

.timer-text {
	font-size: 1rem;
	text-align: left;
	width:300px;
}

.countdown-content .timer {
	position: relative;
	top:11px;
	right:-17px;
	font-size: 23px;
	font-weight: bold;
	background-color:#000;
	padding:3px;
	border-radius:10px;
	width:200px;
	
}

.countdown-content .timer-icon {
    position: absolute;
    left: 225px; /* حرك الأيقونة إلى اليسار خارج الصندوق الأسود */
    top: 200px;
    font-size: 35px;
	width:46px;
	height:46px;
    color: white;
	background-color:#dc5000;
	border-radius:50%;
	line-height:44px;
	border:3px solid #fff;
}


/* الكلاس المخصص للبوردر المتحرك */
.border-animated {
	position: relative;
	overflow: hidden;
}

.border-animated::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	border-radius: 12px;
	pointer-events: none; /* تعطيل تفاعل البوردر مع الماوس */
}

/* تشغيل الحركة عند hover */
.border-animated:hover::before {
	animation: border-rotate 4s linear forwards;
}

@keyframes border-rotate {
	0% {
		border-top-color: #fe690f;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	25% {
		border-right-color: #fe690f;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
	50% {
		border-bottom-color: #fe690f;
		border-left-color: transparent;
	}
	75% {
		border-left-color: #fe690f;
	}
	100% {
		border-top-color: #fe690f;
		border-right-color: #fe690f;
		border-bottom-color: #fe690f;
		border-left-color: #fe690f;
	}
}

.hand{
   cursor: pointer;  /* تظهر اليد عند المرور فوق العنصر */
}

.language-intro-icon {
    position: relative; /* يسمح بتحديد موقع الصورة داخل هذا العنصر */
    display: flex; /* يجعل العنصر بحجم المحتوى */
    width: 100%; /* عرض الصورة يتكيف مع الحاوية */
	left:5px;
	top:5px;
	
}

.language-intro-icon i {
    transform: translate(-50%, -50%); /* لضمان التوسيط */
    object-fit: contain; /* التأكد من أن الصورة تبقى ضمن الحدود */
	color:#444;
	font-size:26px;
}