/* إعدادات عامة */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-color: #5FB38E;
--primary-dark: #1F6B4F;
--secondary-color: #A8DCC3;
--accent-color: #5FB38E;
--bg-dark: linear-gradient(180deg, var(--primary-dark, #1F6B4F) 0%, var(--primary-color, #5FB38E) 30%, var(--secondary-color, #A8DCC3) 60%, #FFFFFF 85%, #FFFFFF 100%);
--bg-darker: linear-gradient(180deg, var(--primary-color, #5FB38E) 0%, var(--secondary-color, #A8DCC3) 40%, #FFFFFF 75%, #FFFFFF 100%);
--primary-dark-rgb: 15, 61, 46;
--primary-color-rgb: 95, 179, 142;
--text-primary: #FFFFFF;
--text-secondary: #FFFFFF;
--gradient-1: linear-gradient(135deg, #5FB38E 0%, #1F6B4F 100%);
--gradient-2: linear-gradient(135deg, #A8DCC3 0%, #5FB38E 100%);
--gradient-3: linear-gradient(135deg, #A8DCC3 0%, #5FB38E 100%);
--shadow-glow: 0 0 30px rgba(95, 179, 142, 0.3);
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
body {
font-family: 'Cairo', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
background-attachment: fixed;
background-size: cover;
color: var(--text-primary);
direction: rtl;
overflow-x: hidden;
line-height: 1.6;
min-height: 100vh;
}
/* منع الصور من التأثير على الشعار */
img {
max-width: 100%;
height: auto;
}
/* استثناء الشعار من القاعدة العامة */
.nav-brand .nav-logo-image,
.nav-brand img.nav-logo-image {
max-width: 70px !important;
max-height: 70px !important;
}
/* إخفاء نص اسم الموقع */
.nav-brand-text {
display: none !important;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* صفحة الخبر - توسيط المحتوى عند العرض من الموقع (يتجاوز أي قواعد عامة) */
.news-article-page .container {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100%;
box-sizing: border-box;
}
.news-article-page .article-header .container {
text-align: center;
}
.news-article-page .article-content-wrapper {
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* بطاقة اللوقو المنفصلة - على يمين الشاشة مباشرة */
.logo-card-wrapper {
position: fixed;
top: 1.5rem;
right: 1.5rem;
z-index: 1001;
pointer-events: none;
}
/* على الشاشات المتوسطة - مسافة أكبر */
@media (min-width: 1200px) {
.logo-card-wrapper {
right: 2rem;
}
}
/* على الشاشات الكبيرة */
@media (min-width: 1400px) {
.logo-card-wrapper {
right: 2.5rem;
}
}
@media (min-width: 1600px) {
.logo-card-wrapper {
right: 3rem;
}
}
@media (min-width: 1920px) {
.logo-card-wrapper {
right: 4rem;
}
}
/* على الشاشات الصغيرة - ضمان عدم الخروج عن الشاشة */
@media (max-width: 1199px) {
.logo-card-wrapper {
right: 1rem;
top: 0.5rem;
}
}
/* حجم اللوقو من الإعدادات (--logo-icon-size) أو 70px افتراضياً لتفادي تغيّر الحجم بعد تحميل JS */
.logo-card {
display: flex;
align-items: center;
justify-content: center;
width: var(--logo-icon-size, 70px);
height: var(--logo-icon-size, 70px);
min-width: var(--logo-icon-size, 70px);
min-height: var(--logo-icon-size, 70px);
max-width: var(--logo-icon-size, 70px);
max-height: var(--logo-icon-size, 70px);
background: #FFFFFF;
backdrop-filter: blur(30px);
border: 1px solid rgba(var(--card-border-color-rgb, 15, 61, 46), 0.1);
border-radius: 25px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--card-border-color-rgb, 15, 61, 46), 0.05);
transition: box-shadow 0.3s ease, transform 0.3s ease;
pointer-events: auto;
padding: 0;
text-decoration: none;
}
/* خلفيات اللوقو */
.logo-bg-white {
background: #FFFFFF !important;
}
.logo-bg-gradient {
background: var(--gradient-1) !important;
}
.logo-bg-transparent {
background: transparent !important;
backdrop-filter: blur(10px) !important;
}
.logo-bg-custom {
/* يتم تطبيق اللون عبر inline style */
}
.logo-card:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
}
.logo-card-image {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 12px !important;
display: block !important;
}
.logo-card-icon {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
border-radius: 16px;
background: var(--gradient-1);
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(95, 179, 142, 0.3);
position: relative;
overflow: hidden;
}
.logo-card-icon i {
color: var(--icon-color, #FFFFFF);
font-size: 3.5rem;
z-index: 1;
position: relative;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
transition: font-size 0.3s ease;
}
/* أزرار التحكم في حجم اللوقو */
.logo-size-controls {
position: absolute;
top: -45px;
right: 0;
display: flex;
gap: 0.5rem;
z-index: 1002;
pointer-events: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.logo-card-wrapper:hover .logo-size-controls {
opacity: 1;
visibility: visible;
}
.logo-size-btn {
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(var(--card-border-color-rgb, 15, 61, 46), 0.2);
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 0;
}
.logo-size-btn:hover {
background: rgba(var(--primary-color-rgb, 95, 179, 142), 0.2);
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 95, 179, 142), 0.3);
}
.logo-size-btn:active {
transform: translateY(0);
}
.logo-size-btn i {
font-size: 0.75rem;
line-height: 1;
}
/* إخفاء الأزرار على الموبايل */
@media (max-width: 1199px) {
.logo-size-controls {
display: none !important;
}
}
.logo-card-icon img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
object-position: center !important;
}
/* شريط علوي - توسيط ديناميكي حسب المحتوى */
.navbar {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%) translateY(20px);
width: auto;
max-width: calc(100% - 3rem - 180px);
min-width: fit-content;
background: var(--navbar-bg-color, #FFFFFF);
backdrop-filter: blur(30px);
border: 1px solid rgba(var(--navbar-border-color-rgb, 15, 61, 46), 0.1);
border-radius: 25px;
z-index: 1000;
padding: 1rem 1.5rem;
transition: var(--transition);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(var(--navbar-border-color-rgb, 15, 61, 46), 0.05);
/* توسيط ديناميكي */
display: flex;
justify-content: center;
align-items: center;
}
/* على الشاشات المتوسطة */
@media (min-width: 1200px) {
.navbar {
max-width: calc(100% - 4rem - 180px);
}
}
/* على الشاشات الكبيرة */
@media (min-width: 1400px) {
.navbar {
max-width: calc(100% - 5rem - 180px);
}
}
@media (min-width: 1600px) {
.navbar {
max-width: calc(100% - 6rem - 180px);
}
}
@media (min-width: 1920px) {
.navbar {
max-width: calc(100% - 8rem - 180px);
}
}
/* على الشاشات الصغيرة - منع الخروج عن الشاشة */
@media (max-width: 1199px) {
.navbar {
max-width: calc(100% - 2rem - 160px);
padding: 1rem 1rem;
}
}
.navbar .container {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
position: relative;
gap: 0.4rem;
flex-wrap: nowrap;
overflow: visible;
padding: 0;
margin: 0;
width: 100%;
/* توسيط ديناميكي للمحتوى */
flex: 1;
}
/* تحسين تنسيق القائمة العلوية - سطر واحد */
.nav-menu {
display: flex;
list-style: none;
gap: 0.3rem;
align-items: center;
margin: 0;
padding: 0;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
overflow: visible;
position: relative;
flex: 1;
}
/* قائمة سطر واحد */
.nav-menu-single-row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.3rem;
}
/* زر تسجيل المستفيدين */
.nav-register-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
color: var(--text-primary, #FFFFFF);
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2);
margin-left: 0.5rem;
}
.nav-register-btn:hover {
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.3);
}
.nav-register-btn i {
font-size: 0.9rem;
}
/* wrapper للقائمة - سطر واحد */
.nav-menu-wrapper:not(.mobile-menu-wrapper) {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
min-width: 0;
gap: 0;
overflow: visible;
position: relative;
z-index: 100;
margin: 0;
padding: 0;
width: 100%;
}
/* إخفاء قائمة الجوال على الديسكتوب */
@media (min-width: 769px) {
.nav-menu-wrapper.mobile-menu-wrapper {
display: none !important;
}
}
/* خط فاصل بين الصفين - مخفي لأننا نستخدم سطر واحد */
.nav-menu-divider {
display: none !important;
}
/* إخفاء زر تسجيل المستفيدين من القائمة المنسدلة على الديسكتوب */
.nav-menu-mobile-register {
display: none !important;
}
.nav-mobile-divider {
display: none !important;
}
.nav-brand {
display: flex !important;
align-items: center !important;
gap: 0.75rem;
text-decoration: none;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
transition: all 0.3s ease;
flex-shrink: 0;
cursor: pointer;
}
.nav-brand:hover {
transform: scale(1.02);
}
.nav-brand-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.nav-brand-title {
font-size: 1.1rem;
font-weight: 700;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
line-height: 1.3;
}
.nav-brand-subtitle {
font-size: 0.75rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.6);
line-height: 1.2;
font-weight: 400;
}
.nav-brand span {
display: inline-block;
line-height: 1.3;
margin: 0;
padding: 0;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
transition: all 0.3s ease;
}
.nav-brand:hover {
transform: scale(1.05);
}
.nav-brand:hover .planet-icon {
transform: scale(1.1);
box-shadow: 0 0 25px rgba(95, 179, 142, 0.5),
inset -3px -3px 8px rgba(0, 0, 0, 0.15);
}
/* صورة الشعار - حجم كبير وواضح */
.navbar .nav-brand .nav-logo-image,
.navbar .nav-brand img.nav-logo-image,
.nav-brand .nav-logo-image,
.nav-brand img.nav-logo-image,
.nav-logo-image {
width: 70px !important;
height: 70px !important;
min-width: 70px !important;
min-height: 70px !important;
max-width: 70px !important;
max-height: 70px !important;
object-fit: contain !important;
object-position: center !important;
border-radius: 16px !important;
flex-shrink: 0 !important;
display: block !important;
transition: all 0.3s ease;
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
/* منع أي قواعد أخرى من التأثير */
.navbar img.nav-logo-image,
.navbar .container .nav-brand img.nav-logo-image {
width: 70px !important;
height: 70px !important;
max-width: 70px !important;
max-height: 70px !important;
}
.nav-brand:hover .nav-logo-image {
transform: scale(1.1);
box-shadow: 0 0 25px rgba(95, 179, 142, 0.5);
}
/* منع أي قواعد CSS أخرى من التأثير على الشعار */
.nav-brand img:not(.nav-logo-image) {
max-width: 100%;
height: auto;
}
.nav-brand .planet-icon {
width: 70px !important;
height: 70px !important;
min-width: 70px !important;
min-height: 70px !important;
border-radius: 16px;
background: var(--gradient-1);
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 12px rgba(95, 179, 142, 0.3);
position: relative;
flex-shrink: 0;
overflow: hidden;
}
.nav-brand .planet-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.nav-brand .planet-icon::before {
content: '';
position: absolute;
top: 12%;
left: 22%;
width: 6px;
height: 6px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
box-shadow: 8px 4px 0 rgba(255, 255, 255, 0.3),
16px -6px 0 rgba(255, 255, 255, 0.2);
}
.nav-brand .planet-icon i {
color: var(--icon-color, #FFFFFF);
font-size: 1.8rem;
z-index: 1;
position: relative;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
.nav-brand i:not(.planet-icon i) {
display: none;
}
.nav-menu {
display: flex;
list-style: none;
gap: 0.5rem;
align-items: center;
margin: 0;
padding: 0;
flex-wrap: nowrap;
justify-content: center;
width: 100%;
overflow: visible;
position: relative;
}
.nav-menu-row-1 {
flex-wrap: nowrap;
max-width: 100%;
overflow: visible;
gap: 0.3rem;
}
.nav-menu-row-2 {
flex-wrap: nowrap;
max-width: 100%;
overflow: visible;
gap: 0.3rem;
}
.nav-link {
color: rgba(var(--navbar-text-color-rgb, 15, 61, 46), 0.8);
text-decoration: none;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
padding: 0.5rem 0.75rem;
border-radius: 8px;
display: inline-block;
white-space: nowrap;
flex-shrink: 0;
font-size: 0.9rem;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0.25rem;
right: 1rem;
left: 1rem;
width: 0;
height: 2px;
background: var(--gradient-1);
border-radius: 2px;
transition: var(--transition);
}
.nav-link:hover {
color: rgba(var(--navbar-text-color-rgb, 15, 61, 46), 1);
background: rgba(var(--navbar-text-color-rgb, 15, 61, 46), 0.1);
transform: translateY(-2px) scale(1.05);
box-shadow: 0 4px 12px rgba(var(--navbar-text-color-rgb, 15, 61, 46), 0.15);
}
.nav-link.active {
color: rgba(var(--navbar-text-color-rgb, 15, 61, 46), 1);
background: rgba(var(--navbar-text-color-rgb, 15, 61, 46), 0.12);
font-weight: 600;
}
.nav-link:active {
transform: translateY(0) scale(0.98);
box-shadow: 0 2px 6px rgba(var(--navbar-text-color-rgb, 15, 61, 46), 0.2);
}
.nav-link:hover::after,
.nav-link.active::after {
width: calc(100% - 2rem);
right: 1rem;
}
/* تحسينات للشريط العلوي الجديد */
.navbar {
padding: 1rem 2rem;
}
.navbar .container {
flex-wrap: wrap;
}
/* إزالة القيود على عدد العناصر - سطر واحد */
.nav-menu-row-1 li:nth-child(n+8) {
display: inline-block;
}
.nav-menu-row-2 {
display: none !important;
}
.nav-menu-row-2:not(:empty) {
display: none !important;
}
/* القوائم المنسدلة */
.nav-item-dropdown {
position: relative;
flex-shrink: 0;
white-space: nowrap;
overflow: visible;
z-index: 1000;
}
.nav-menu li {
flex-shrink: 0;
white-space: nowrap;
}
.dropdown-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
position: relative;
}
.dropdown-toggle i {
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.nav-item-dropdown:hover .dropdown-toggle i {
transform: rotate(180deg);
}
/* إضافة منطقة انتقالية (bridge) بين القائمة الرئيسية والقائمة المنسدلة - تغطي الفجوة بالكامل */
.nav-item-dropdown::before {
content: '';
position: absolute;
top: 100%;
right: -30px;
left: -30px;
height: 1rem;
background: transparent;
z-index: 10000;
pointer-events: auto;
}
.dropdown-menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
margin-top: 0;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border: 1px solid rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
list-style: none;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
z-index: 10001;
display: block !important;
pointer-events: none;
}
/* على الديسكتوب: JavaScript سيتحكم في القوائم المنسدلة بالكامل */
/* على الموبايل: استخدام CSS hover */
@media (max-width: 768px) {
.nav-item-dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: none;
pointer-events: auto;
}
}
/* إبقاء القائمة مفتوحة عند hover على أي عنصر داخل القائمة المنسدلة */
.nav-item-dropdown .dropdown-item:hover {
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 1);
padding-right: 2rem;
}
.dropdown-item {
display: block;
padding: 0.75rem 1.5rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.8);
text-decoration: none;
transition: all 0.2s ease;
font-weight: 500;
}
.dropdown-item:hover {
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 1);
padding-right: 2rem;
}
.nav-toggle {
display: none;
flex-direction: column;
gap: 4px;
cursor: pointer;
}
.nav-toggle span {
width: 25px;
height: 3px;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.8);
border-radius: 2px;
transition: var(--transition);
}
/* زر القائمة للجوال (منفصل) - مخفي على الديسكتوب */
.mobile-nav-toggle {
display: none;
}
/* قسم الهيرو - الخلفية الشفافة عند وجود فيديو/صورة حتى تظهر وتعمل الشفافية 100% */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding-top: 120px;
border-bottom: none !important;
}
/* عندما لا يوجد فيديو ولا صورة نضع لون الخلفية */
.hero.hero-no-bg {
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.98) !important;
}
/* إخفاء أي خط من الـ pseudo elements تحت الهيرو */
.hero::after {
display: none !important;
}
/* قالب الفيديو - خلفية شفافة حتى يظهر الفيديو وتعمل شفافيته من الإعدادات */
.hero-template-video {
background: transparent !important;
padding-top: 0 !important;
overflow: hidden;
}
.hero-template-video::before,
.hero-template-video::after {
display: none !important;
}
.hero-background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 1) !important;
z-index: 0;
transition: opacity 0.3s ease;
}
/* إخفاء overlay في قالب الفيديو */
.hero-template-video .hero-background-overlay {
display: none !important;
}
.hero-background-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
transition: opacity 0.3s ease;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* تحسين جودة الفيديو في قالب الفيديو - وضوح عالي بدون ضبابية */
.hero-template-video .hero-background-video {
/* ضمان الحجم الكامل بدون تقليل */
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: none !important;
max-height: none !important;
/* تحسين الوضوح - إزالة أي ضبابية */
object-fit: cover !important;
object-position: center center !important;
/* إزالة أي تأثيرات قد تسبب الضبابية */
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
/* إزالة أي transforms قد تسبب الضبابية */
transform: none !important;
-webkit-transform: none !important;
scale: 1 !important;
/* تحسين العرض */
-webkit-backface-visibility: visible;
backface-visibility: visible;
/* ضمان الجودة العالية - استخدام الإعدادات الافتراضية */
image-rendering: auto;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
/* منع أي scaling */
zoom: 1;
-webkit-zoom: 1;
/* الشفافية من الإعدادات عبر inline style في القالب - لا نُجبر opacity هنا */
z-index: -1 !important;
/* منع أي تأثيرات CSS أخرى */
will-change: auto;
-webkit-perspective: none;
perspective: none;
}
/* إخفاء أي عناصر تحكم في الفيديو */
.hero-background-video::-webkit-media-controls {
display: none !important;
}
.hero-background-video::-webkit-media-controls-enclosure {
display: none !important;
}
.hero-background-video::-webkit-media-controls-panel {
display: none !important;
}
.hero-background-video::-webkit-media-controls-play-button {
display: none !important;
}
.hero-background-video::-webkit-media-controls-start-playback-button {
display: none !important;
}
/* النجوم المتحركة */
.stars,
.stars2,
.stars3 {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.stars {
background: transparent url('data:image/svg+xml,') repeat;
animation: animateStars 50s linear infinite;
}
.stars2 {
background: transparent url('data:image/svg+xml,') repeat;
animation: animateStars 100s linear infinite;
}
.stars3 {
background: transparent url('data:image/svg+xml,') repeat;
animation: animateStars 150s linear infinite;
}
@keyframes animateStars {
from { transform: translateY(0); }
to { transform: translateY(-2000px); }
}
.hero .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-content {
animation: fadeInRight 1s ease-out;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(95, 179, 142, 0.2);
border: 1px solid rgba(95, 179, 142, 0.3);
border-radius: 50px;
color: var(--primary-color);
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.hero-title {
font-size: 3.5rem;
font-weight: 900;
margin-bottom: 1.5rem;
color: var(--hero-title-color, var(--primary-color));
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: var(--hero-title-color, var(--primary-color));
background-clip: unset;
line-height: 1.2;
}
.typing-cursor {
display: inline-block;
color: var(--hero-title-color, var(--primary-color));
font-weight: 700;
animation: blink 1s infinite;
margin-right: 2px;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.hero-description {
font-size: 1.25rem;
color: var(--hero-text-color, var(--text-secondary));
margin-bottom: 2.5rem;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
/* أيقونات التواصل الاجتماعي في الهيرو */
.hero-social-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-top: 2rem;
animation: fadeInUp 0.8s ease-out 0.5s both;
}
.social-link {
position: relative;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(95, 179, 142, 0.3);
border-radius: 50%;
color: var(--icon-color, white);
}
.hero .social-link {
color: var(--hero-social-icon-color, var(--icon-color, white));
font-size: 1.25rem;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
z-index: 1;
}
.social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
border-radius: 50%;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.social-link:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.social-link:hover {
transform: translateY(-5px) scale(1.1);
border-color: rgba(95, 179, 142, 0.6);
box-shadow: 0 10px 30px rgba(95, 179, 142, 0.4);
}
.social-link i {
position: relative;
z-index: 2;
transition: transform 0.4s ease;
}
.social-link:hover i {
transform: scale(1.2) rotate(360deg);
}
/* ألوان خاصة لكل منصة */
.social-link[data-platform="facebook"]::before {
background: linear-gradient(135deg, #1877F2 0%, #0A5FCC 100%);
}
.social-link[data-platform="facebook"]:hover {
border-color: #1877F2;
box-shadow: 0 10px 30px rgba(24, 119, 242, 0.4);
}
.social-link[data-platform="twitter"]::before {
background: linear-gradient(135deg, #000000 0%, #14171A 100%);
}
.social-link[data-platform="twitter"]:hover {
border-color: #000000;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}
.social-link[data-platform="instagram"]::before {
background: linear-gradient(135deg, #E4405F 0%, #C13584 50%, #833AB4 100%);
}
.social-link[data-platform="instagram"]:hover {
border-color: #E4405F;
box-shadow: 0 10px 30px rgba(227, 64, 95, 0.4);
}
.social-link[data-platform="linkedin"]::before {
background: linear-gradient(135deg, #0077B5 0%, #005885 100%);
}
.social-link[data-platform="linkedin"]:hover {
border-color: #0077B5;
box-shadow: 0 10px 30px rgba(0, 119, 181, 0.4);
}
.social-link[data-platform="youtube"]::before {
background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
}
.social-link[data-platform="youtube"]:hover {
border-color: #FF0000;
box-shadow: 0 10px 30px rgba(255, 0, 0, 0.4);
}
.social-link[data-platform="whatsapp"]::before {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
}
.social-link[data-platform="whatsapp"]:hover {
border-color: #25D366;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
}
.social-link[data-platform="telegram"]::before {
background: linear-gradient(135deg, #0088CC 0%, #006699 100%);
}
.social-link[data-platform="telegram"]:hover {
border-color: #0088CC;
box-shadow: 0 10px 30px rgba(0, 136, 204, 0.4);
}
/* تأثير glow عند hover */
.social-link::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.4s ease;
z-index: 0;
}
.social-link:hover::after {
width: 150%;
height: 150%;
animation: socialGlow 1.5s ease-in-out infinite;
}
@keyframes socialGlow {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.1);
}
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
font-family: 'Cairo', sans-serif;
border: none;
cursor: pointer;
}
.btn-primary {
background: var(--gradient-1);
color: var(--text-primary, white);
box-shadow: var(--shadow-glow);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(95, 179, 142, 0.5);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-3px);
}
/* كوكب Astro */
.hero-image {
position: relative;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
animation: fadeInLeft 1s ease-out;
z-index: 2;
}
.astro-planet {
position: relative;
width: 300px;
height: 300px;
}
/* أزرار التحكم في حجم أيقونة الهيرو */
.hero-icon-size-controls {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.5rem;
z-index: 100;
pointer-events: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.astro-planet:hover .hero-icon-size-controls {
opacity: 1;
visibility: visible;
}
.hero-icon-size-btn {
width: 36px;
height: 36px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(var(--card-border-color-rgb, 15, 61, 46), 0.2);
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.8);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
padding: 0;
}
.hero-icon-size-btn:hover {
background: rgba(var(--primary-color-rgb, 95, 179, 142), 0.2);
border-color: var(--primary-color);
color: var(--primary-color);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 95, 179, 142), 0.3);
}
.hero-icon-size-btn:active {
transform: translateY(0);
}
.hero-icon-size-btn i {
font-size: 0.8rem;
line-height: 1;
}
/* إخفاء الأزرار على الموبايل */
@media (max-width: 1199px) {
.hero-icon-size-controls {
display: none !important;
}
}
.planet {
width: 200px;
height: 200px;
border-radius: 50%;
background: var(--hero-circle-bg, var(--gradient-1));
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 60px rgba(var(--primary-color-rgb, 95, 179, 142), 0.6),
inset -20px -20px 40px rgba(0, 0, 0, 0.3);
transition: width 0.3s ease, height 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.planet i {
font-size: 4rem;
color: var(--hero-circle-icon-color, var(--text-primary, #FFFFFF));
z-index: 3;
position: relative;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.planet-icon-image {
width: 75% !important;
height: 75% !important;
max-width: 150px !important;
max-height: 150px !important;
object-fit: contain !important;
position: relative;
z-index: 3;
display: block;
margin: 0 auto;
transition: width 0.3s ease, height 0.3s ease, max-width 0.3s ease, max-height 0.3s ease;
}
.planet::before {
content: '';
position: absolute;
top: 20%;
left: 30%;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 40px 20px 0 rgba(255, 255, 255, 0.2),
80px -30px 0 rgba(255, 255, 255, 0.1);
}
.orbit,
.orbit2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 2px solid rgba(95, 179, 142, 0.3);
border-radius: 50%;
animation: rotateOrbit 15s linear infinite;
}
.orbit {
width: 250px;
height: 250px;
}
.orbit2 {
width: 300px;
height: 300px;
animation-duration: 25s;
animation-direction: reverse;
}
.orbit::before,
.orbit2::before {
content: '';
position: absolute;
top: -10px;
right: 50%;
width: 20px;
height: 20px;
background: var(--primary-color);
border-radius: 50%;
box-shadow: 0 0 20px rgba(95, 179, 142, 0.8);
}
@keyframes rotatePlanet {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes rotateOrbit {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.scroll-indicator {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--hero-title-color, var(--text-secondary));
font-size: 1.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
/* قسم من نحن - تصميم احترافي */
.about-section {
padding: 8rem 0;
position: relative;
background-color: var(--sec-bg, #FFFFFF);
min-height: 100vh;
margin-top: 4rem;
overflow: hidden;
}
/* إلصاق أول قسم بالهيرو بدون مسافة */
.hero + section {
margin-top: 0 !important;
}
.about-background-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(var(--primary-color-rgb, 95, 179, 142), 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(var(--primary-dark-rgb, 31, 107, 79), 0.03) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
animation: patternMove 20s ease-in-out infinite;
}
@keyframes patternMove {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(20px, -20px) scale(1.05);
}
}
/* إزالة أي خط فاصل أخضر بين الهيرو وأول قسم (جميع الأقسام) */
.hero + section::before,
.about-section::before,
.vision-mission-section::before,
.services-section::before,
.projects-section::before,
.media-section::before,
.testimonials-section::before,
.partners-section::before,
.news-section::before,
.contact-section::before {
display: none !important;
background: none !important;
height: 0 !important;
overflow: hidden !important;
}
.about-content {
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
/* العنوان الرئيسي */
.about-header {
text-align: center;
margin-bottom: 5rem;
opacity: 0;
transform: translateY(-50px);
animation: fadeInDown 1s ease-out forwards;
}
.about-header.animated {
opacity: 1;
transform: translateY(0);
}
.about-section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1.5rem;
background: linear-gradient(135deg, rgba(95, 179, 142, 0.1) 0%, rgba(31, 107, 79, 0.1) 100%);
border: 2px solid rgba(95, 179, 142, 0.2);
border-radius: 50px;
color: var(--primary-color);
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 1.5rem;
box-shadow: 0 4px 15px rgba(95, 179, 142, 0.1);
transition: var(--transition);
}
.about-section-badge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(95, 179, 142, 0.2);
border-color: rgba(95, 179, 142, 0.4);
}
.about-section-badge i {
font-size: 1.1rem;
}
/* العنوان الرئيسي */
.about-main-title {
font-size: 4.5rem;
font-weight: 900;
color: var(--text-primary, rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95));
margin: 0;
line-height: 1.1;
position: relative;
display: inline-block;
animation: titleSlideIn 1.2s ease-out 0.3s both;
}
@keyframes titleSlideIn {
0% {
opacity: 0;
transform: translateY(-30px) scale(0.9);
}
50% {
transform: translateY(5px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.title-highlight {
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
display: inline-block;
animation: highlightPulse 3s ease-in-out infinite;
}
@keyframes highlightPulse {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.2);
}
}
.title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
right: 0;
width: 0;
height: 4px;
background: var(--gradient-1);
border-radius: 2px;
opacity: 0.3;
animation: underlineExpand 1s ease-out 0.8s forwards;
}
@keyframes underlineExpand {
to {
width: 100%;
}
}
/* المحتوى الرئيسي */
.about-main-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 6rem;
align-items: start;
position: relative;
}
.about-main-content .about-image-wrapper {
align-self: start;
margin-top: -40px; /* رفع البطاقة لأعلى */
}
/* المحتوى النصي */
.about-text-content {
padding: 0;
margin: 0;
order: 1;
position: relative;
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.about-text-content.animated {
opacity: 1 !important;
transform: translateX(0) !important;
}
/* fallback: إذا تعطّل JavaScript، أظهر المحتوى دائماً */
html:not(.js-enabled) .about-text-content,
html:not(.js-enabled) .about-image-wrapper,
html:not(.js-enabled) .about-description,
html:not(.js-enabled) .about-subtitle-wrapper,
html:not(.js-enabled) .about-cta-wrapper,
html:not(.js-enabled) .about-stats .stat-item,
html:not(.js-enabled) .about-features-grid .feature-card {
opacity: 1 !important;
transform: none !important;
visibility: visible !important;
}
/* على سطح المكتب: إظهار المحتوى إذا كان مرئي بالفعل */
@media (min-width: 769px) {
.about-section:not(:has(.about-text-content.animated)) .about-text-content {
/* سيتم تفعيله عبر JavaScript */
}
}
.about-subtitle-wrapper {
margin-bottom: 2rem;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out 0.2s, transform 0.8s ease-out 0.2s;
}
.about-subtitle-wrapper.animated {
opacity: 1;
transform: translateY(0);
}
.about-subtitle {
font-size: 2rem;
font-weight: 800;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
margin-bottom: 0.75rem;
line-height: 1.3;
position: relative;
display: inline-block;
}
.about-subtitle::before {
content: '';
position: absolute;
right: -15px;
top: 50%;
transform: translateY(-50%);
width: 8px;
height: 8px;
background: var(--primary-color);
border-radius: 50%;
animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
0%, 100% {
transform: translateY(-50%) scale(1);
opacity: 1;
}
50% {
transform: translateY(-50%) scale(1.5);
opacity: 0.5;
}
}
.about-title-underline {
width: 0;
height: 4px;
background: var(--gradient-1);
border-radius: 2px;
margin-top: 0.5rem;
transition: width 1s ease-out 0.5s;
}
.about-subtitle-wrapper.animated .about-title-underline {
width: 80px;
}
.about-description {
font-size: 1.15rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.75);
line-height: 2;
margin-bottom: 3rem;
text-align: justify;
position: relative;
padding-right: 1.5rem;
border-right: 3px solid rgba(95, 179, 142, 0.2);
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out 0.4s, transform 0.8s ease-out 0.4s;
}
.about-description.animated {
opacity: 1;
transform: translateY(0);
}
.about-description::before {
content: '';
position: absolute;
right: 0;
top: 0;
width: 3px;
height: 0;
background: var(--gradient-1);
transition: height 1s ease-out 0.6s;
}
.about-description.animated::before {
height: 100%;
}
/* المدير التنفيذي */
.executive-director-signature {
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(95, 179, 142, 0.2);
display: flex;
align-items: center;
gap: 1rem;
flex-direction: row-reverse;
animation: fadeInUp 0.8s ease-out;
}
.executive-director-image-wrapper {
flex-shrink: 0;
position: relative;
}
.executive-director-image {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(95, 179, 142, 0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.executive-director-image:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(95, 179, 142, 0.4);
border-color: rgba(95, 179, 142, 0.5);
}
.executive-director-info {
flex: 1;
}
.executive-director-label {
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.7);
font-size: 0.9rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.executive-director-name {
color: var(--primary-dark);
font-size: 1.2rem;
font-weight: 700;
}
@media (max-width: 768px) {
.executive-director-signature {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.executive-director-image {
width: 70px;
height: 70px;
}
.executive-director-name {
font-size: 1.1rem;
}
}
/* الإحصائيات */
.about-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-bottom: 3rem;
padding: 2rem 0;
}
.stat-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: linear-gradient(135deg, rgba(95, 179, 142, 0.08) 0%, rgba(31, 107, 79, 0.05) 100%);
border: 2px solid rgba(95, 179, 142, 0.15);
border-radius: 16px;
transition: var(--transition);
opacity: 0;
transform: translateY(30px) scale(0.9);
transition: opacity 0.6s ease-out, transform 0.6s ease-out, all 0.3s ease;
min-width: 0;
flex: 1;
}
.stat-item.animated {
opacity: 1;
transform: translateY(0) scale(1);
}
.stat-item:nth-child(1) { transition-delay: 0.1s; }
.stat-item:nth-child(2) { transition-delay: 0.2s; }
.stat-item:nth-child(3) { transition-delay: 0.3s; }
.stat-item:hover {
transform: translateY(-8px) scale(1.03);
border-color: rgba(95, 179, 142, 0.3);
box-shadow: 0 12px 35px rgba(95, 179, 142, 0.2);
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 100%;
background: linear-gradient(135deg, rgba(95, 179, 142, 0.1) 0%, transparent 100%);
border-radius: 16px;
transition: width 0.5s ease;
z-index: 0;
}
.stat-item:hover::before {
width: 100%;
}
.stat-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-1);
border-radius: 14px;
color: var(--icon-color, white);
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(95, 179, 142, 0.3);
position: relative;
z-index: 1;
transition: var(--transition);
}
.stat-icon i {
color: var(--icon-color, white);
}
.stat-item:hover .stat-icon {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 6px 20px rgba(95, 179, 142, 0.4);
}
.stat-icon::before {
content: '';
position: absolute;
inset: -5px;
border-radius: 14px;
background: var(--gradient-1);
opacity: 0;
filter: blur(10px);
transition: opacity 0.3s ease;
z-index: -1;
}
.stat-item:hover .stat-icon::before {
opacity: 0.5;
}
.stat-content {
flex: 1;
position: relative;
z-index: 1;
min-width: 0;
width: 100%;
}
.stat-number {
font-size: 2.5rem;
font-weight: 900;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
line-height: 1.2;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
display: block;
word-break: break-word;
}
.stat-label {
font-size: 1.1rem;
font-weight: 600;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.8);
line-height: 1.5;
word-wrap: break-word;
white-space: normal;
display: block;
width: 100%;
}
.stat-number.counting {
animation: numberPop 0.5s ease-out;
}
@keyframes numberPop {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
/* قائمة المميزات - Grid */
/* قسم أهدافنا */
.about-features-section {
margin-top: 3rem;
margin-bottom: 3rem;
position: relative;
}
.about-features-header {
margin-bottom: 1.5rem;
text-align: right;
position: relative;
}
.about-features-title {
font-size: 1.25rem;
font-weight: 600;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.85);
margin-bottom: 0.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(95, 179, 142, 0.1);
border-radius: 8px;
border-right: 3px solid var(--primary-color);
transition: all 0.3s ease;
}
.about-features-title:hover {
background: rgba(95, 179, 142, 0.15);
transform: translateX(-5px);
}
.about-features-title i {
color: var(--primary-color);
font-size: 1rem;
}
.about-features-description {
font-size: 0.9rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.6);
line-height: 1.5;
margin-top: 0.5rem;
text-align: right;
}
.about-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-bottom: 3rem;
}
.feature-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1.25rem;
padding: 1.75rem;
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), calc(var(--card-bg-opacity, 0.1) * 6));
border: 2px solid rgba(95, 179, 142, 0.15);
border-radius: 18px;
transition: var(--transition);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px) rotateX(10deg);
transition: opacity 0.6s ease-out, transform 0.6s ease-out, all 0.3s ease;
perspective: 1000px;
}
.feature-card.animated {
opacity: 1;
transform: translateY(0) rotateX(0);
}
.feature-card:nth-child(1) { transition-delay: 0.1s; }
.feature-card:nth-child(2) { transition-delay: 0.2s; }
.feature-card:nth-child(3) { transition-delay: 0.3s; }
.feature-card:nth-child(4) { transition-delay: 0.4s; }
.feature-card::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 0;
background: var(--gradient-1);
transition: height 0.5s ease;
z-index: 1;
}
.feature-card::after {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(95, 179, 142, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
z-index: 0;
}
.feature-card:hover {
transform: translateY(-8px) translateX(-8px) scale(1.02);
border-color: rgba(95, 179, 142, 0.3);
box-shadow: 0 15px 40px rgba(95, 179, 142, 0.2);
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), calc(var(--card-bg-opacity, 0.1) * 9));
}
.feature-card:hover::before {
height: 100%;
}
.feature-card:hover::after {
opacity: 1;
}
.feature-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-1);
border-radius: 12px;
color: var(--icon-color, white);
font-size: 1.25rem;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(95, 179, 142, 0.3);
transition: var(--transition);
position: relative;
z-index: 2;
}
.feature-icon i {
color: var(--icon-color, white);
}
.feature-icon::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 12px;
background: var(--gradient-1);
opacity: 0;
filter: blur(8px);
transition: opacity 0.3s ease;
z-index: -1;
}
.feature-card:hover .feature-icon {
transform: scale(1.15) rotate(10deg);
box-shadow: 0 6px 20px rgba(95, 179, 142, 0.5);
}
.feature-card:hover .feature-icon::before {
opacity: 0.6;
}
.feature-content {
flex: 1;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.feature-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--card-title-color, rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95));
margin-bottom: 0.5rem;
text-align: center;
width: 100%;
}
.feature-text {
font-size: 0.95rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.7);
line-height: 1.6;
margin: 0;
text-align: center;
width: 100%;
}
/* زر الدعوة للإجراء */
.about-cta-wrapper {
margin-top: 2rem;
opacity: 0;
transform: translateY(20px);
transition: opacity 0.8s ease-out 0.8s, transform 0.8s ease-out 0.8s;
}
.about-cta-wrapper.animated {
opacity: 1;
transform: translateY(0);
}
.about-cta-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 3rem;
background: var(--gradient-1);
color: var(--text-primary, white);
text-decoration: none;
border-radius: 16px;
font-weight: 700;
font-size: 1.1rem;
box-shadow: 0 6px 25px rgba(95, 179, 142, 0.35);
transition: var(--transition);
position: relative;
overflow: hidden;
animation: ctaPulse 3s ease-in-out infinite;
}
@keyframes ctaPulse {
0%, 100% {
box-shadow: 0 6px 25px rgba(95, 179, 142, 0.35);
}
50% {
box-shadow: 0 6px 35px rgba(95, 179, 142, 0.5);
}
}
.cta-shine {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left 0.6s ease;
z-index: 1;
}
.about-cta-btn:hover .cta-shine {
left: 100%;
}
.about-cta-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: 16px;
padding: 2px;
background: var(--gradient-1);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
}
.about-cta-btn:hover::before {
opacity: 1;
}
.about-cta-btn:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 15px 45px rgba(95, 179, 142, 0.5);
gap: 1.25rem;
animation: none;
}
.cta-text {
position: relative;
z-index: 2;
transition: var(--transition);
}
.about-cta-btn:hover .cta-text {
transform: translateX(-3px);
}
.cta-icon {
position: relative;
z-index: 2;
transition: var(--transition);
}
.about-cta-btn:hover .cta-icon {
transform: translateX(-8px) rotate(-15deg);
}
/* الصورة */
.about-image-wrapper {
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
opacity: 0;
transform: translateX(50px) scale(0.9);
transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out 0.5s;
order: 2;
margin-top: -40px; /* رفع البطاقة لأعلى */
}
.about-image-wrapper.animated {
opacity: 1 !important;
transform: translateX(0) scale(1) !important;
}
/* على سطح المكتب: ضمان ظهور العناصر */
@media (min-width: 769px) {
.about-section .about-text-content.animated,
.about-section .about-image-wrapper.animated,
.about-section .about-description.animated,
.about-section .about-subtitle-wrapper.animated,
.about-section .about-cta-wrapper.animated {
opacity: 1 !important;
visibility: visible !important;
}
}
.about-image-container {
position: relative;
width: 100%;
max-width: 450px; /* تصغير من 580px إلى 450px */
height: auto;
min-height: 400px; /* تصغير من 500px إلى 400px */
}
.image-frame {
position: relative;
width: 100%;
height: auto;
min-height: 400px; /* تصغير من 500px إلى 400px */
border-radius: 35px;
overflow: hidden;
box-shadow:
0 25px 70px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 0 0 1px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
transition: var(--transition);
z-index: 2;
animation: imageFloat 6s ease-in-out infinite;
}
@keyframes imageFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(1deg);
}
}
.about-image-container:hover .image-frame {
transform: translateY(-20px) scale(1.03) rotate(-1deg);
box-shadow:
0 40px 100px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.4),
0 0 0 1px rgba(255, 255, 255, 0.2),
0 0 60px rgba(95, 179, 142, 0.3);
animation: none;
}
.about-image {
width: 100%;
height: auto;
min-height: 400px; /* تصغير من 500px إلى 400px */
object-fit: cover;
display: block;
transition: var(--transition);
}
.about-image-container:hover .about-image {
transform: scale(1.08);
}
.image-overlay-gradient {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
180deg,
transparent 0%,
rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1) 50%,
rgba(var(--primary-dark-rgb, 15, 61, 46), 0.4) 100%
);
pointer-events: none;
z-index: 1;
}
/* زخارف الصورة */
.image-decoration {
position: absolute;
border-radius: 50%;
background: var(--gradient-1);
opacity: 0.1;
z-index: 1;
animation: float 6s ease-in-out infinite;
}
.image-decoration-1 {
width: 120px;
height: 120px;
top: -30px;
right: -30px;
animation-delay: 0s;
}
.image-decoration-2 {
width: 80px;
height: 80px;
bottom: 100px;
left: -20px;
animation-delay: 2s;
}
.image-decoration-3 {
width: 60px;
height: 60px;
bottom: -20px;
right: 50px;
animation-delay: 4s;
}
/* بطاقة الإنجاز */
.achievement-card {
position: absolute;
bottom: 2.5rem;
left: 2.5rem;
right: 2.5rem;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(20px);
border: 2px solid rgba(95, 179, 142, 0.3);
border-radius: 20px;
padding: 1.5rem 2rem;
display: flex;
align-items: center;
gap: 1.25rem;
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.5);
transition: var(--transition);
z-index: 3;
opacity: 0;
transform: translateY(30px) scale(0.9);
transition: opacity 0.8s ease-out 0.7s, transform 0.8s ease-out 0.7s, all 0.3s ease;
}
.achievement-card.animated {
opacity: 1;
transform: translateY(0) scale(1);
}
.achievement-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.6),
0 0 40px rgba(95, 179, 142, 0.4);
border-color: rgba(95, 179, 142, 0.6);
}
.achievement-icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-1);
border-radius: 18px;
color: var(--text-primary, white);
font-size: 2rem;
box-shadow: 0 6px 20px rgba(95, 179, 142, 0.4);
flex-shrink: 0;
}
.achievement-content {
flex: 1;
}
.achievement-number {
font-size: 2.5rem;
font-weight: 900;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
line-height: 1;
margin-bottom: 0.25rem;
}
.achievement-label {
font-size: 1rem;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.7);
font-weight: 700;
}
.about-image-placeholder {
width: 100%;
max-width: 580px;
height: 650px;
background: linear-gradient(135deg, rgba(var(--primary-dark-rgb, 15, 61, 46), 0.05) 0%, rgba(31, 107, 79, 0.08) 100%);
border: 3px dashed rgba(95, 179, 142, 0.3);
border-radius: 35px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.5);
position: relative;
overflow: hidden;
}
.about-image-placeholder::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg, transparent, rgba(95, 179, 142, 0.05), transparent);
animation: shimmer 3s infinite;
}
.placeholder-icon {
font-size: 5rem;
margin-bottom: 1.5rem;
color: rgba(95, 179, 142, 0.4);
position: relative;
z-index: 1;
}
.about-image-placeholder p {
font-size: 1.2rem;
margin: 0;
font-weight: 600;
position: relative;
z-index: 1;
}
.about-placeholder,
.news-placeholder {
text-align: center;
padding: 4rem 2rem;
color: var(--text-secondary);
}
.about-placeholder i,
.news-placeholder i {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.3;
}
/* عناوين الأقسام العامة */
.section-header {
text-align: center;
margin-bottom: 4rem;
}
.section-badge {
display: inline-block;
padding: 0.5rem 1.25rem;
background: rgba(95, 179, 142, 0.2);
border: 1px solid rgba(95, 179, 142, 0.3);
border-radius: 50px;
color: var(--primary-color);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
line-height: 1.3;
color: var(--text-primary, white) !important;
}
.section-title i {
color: var(--icon-color, var(--primary-color)) !important;
font-size: 2.2rem;
margin-left: 0.75rem;
transition: all 0.3s ease;
}
.section-title:hover i {
transform: scale(1.1) rotate(5deg);
color: var(--icon-color, var(--primary-dark)) !important;
}
.section-title .word {
display: inline-block;
position: relative;
padding: 0.5rem 1rem;
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
background: linear-gradient(135deg, rgba(95, 179, 142, 0.1) 0%, rgba(31, 107, 79, 0.1) 100%);
backdrop-filter: blur(10px);
border: 2px solid transparent;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.section-title .word-1 {
color: var(--text-primary, var(--primary-color));
border-color: rgba(var(--primary-color-rgb, 95, 179, 142), 0.3);
background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 95, 179, 142), 0.15) 0%, rgba(var(--primary-dark-rgb, 31, 107, 79), 0.1) 100%);
}
.section-title .word-2 {
color: var(--text-primary, var(--primary-dark));
border-color: rgba(var(--primary-dark-rgb, 31, 107, 79), 0.3);
background: linear-gradient(135deg, rgba(var(--primary-dark-rgb, 31, 107, 79), 0.15) 0%, rgba(var(--primary-color-rgb, 95, 179, 142), 0.1) 100%);
}
.section-title .word-3 {
color: var(--text-primary, var(--secondary-color)) !important;
border-color: rgba(var(--secondary-color-rgb, 168, 220, 195), 0.3);
background: linear-gradient(135deg, rgba(var(--secondary-color-rgb, 168, 220, 195), 0.15) 0%, rgba(var(--primary-color-rgb, 95, 179, 142), 0.1) 100%);
}
.section-title .word-4 {
color: var(--text-primary, var(--accent-color)) !important;
border-color: rgba(var(--primary-color-rgb, 95, 179, 142), 0.3);
background: linear-gradient(135deg, rgba(var(--primary-color-rgb, 95, 179, 142), 0.15) 0%, rgba(var(--secondary-color-rgb, 168, 220, 195), 0.1) 100%);
}
.section-title:hover .word {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 8px 25px rgba(95, 179, 142, 0.3);
}
.section-title:hover .word-1 {
border-color: rgba(95, 179, 142, 0.5);
box-shadow: 0 8px 25px rgba(95, 179, 142, 0.4);
}
.section-title:hover .word-2 {
border-color: rgba(31, 107, 79, 0.5);
box-shadow: 0 8px 25px rgba(31, 107, 79, 0.4);
}
.section-title:hover .word-3 {
border-color: rgba(168, 220, 195, 0.5);
box-shadow: 0 8px 25px rgba(168, 220, 195, 0.4);
}
.section-title:hover .word-4 {
border-color: rgba(95, 179, 142, 0.5);
box-shadow: 0 8px 25px rgba(95, 179, 142, 0.4);
}
.section-title .word::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 12px;
padding: 2px;
background: linear-gradient(135deg, var(--primary-color), var(--primary-dark), var(--secondary-color));
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
.section-title:hover .word::before {
opacity: 0.3;
}
/* تحسين العناوين على الشاشات الصغيرة */
@media (max-width: 768px) {
.section-title {
font-size: 2rem;
gap: 0.75rem;
}
.section-title .word {
padding: 0.4rem 0.8rem;
font-size: 1.8rem;
}
}
@media (max-width: 480px) {
.section-title {
font-size: 1.75rem;
gap: 0.5rem;
}
.section-title .word {
padding: 0.35rem 0.7rem;
font-size: 1.6rem;
}
}
.section-description {
font-size: 1.1rem;
color: var(--text-secondary);
}
/* ألوان كل قسم (تحكم مستقل من لوحة التحكم) - أولوية عالية */
.about-section,
.vision-mission-section,
.services-section,
.projects-section,
.media-section,
.testimonials-section,
.partners-section,
.news-section {
background-color: var(--sec-bg, #fff) !important;
}
.about-section .section-title,
.vision-mission-section .section-title,
.services-section .section-title,
.services-section .services-section-title,
.projects-section .section-title,
.media-section .section-title,
.testimonials-section .section-title,
.partners-section .section-title,
.news-section .section-title,
.contact-section .section-title {
color: var(--sec-title, #5FB38E) !important;
}
.about-section .section-title i,
.vision-mission-section .section-title i,
.services-section .section-title i,
.services-section .services-section-title i,
.projects-section .section-title i,
.media-section .section-title i,
.testimonials-section .section-title i,
.partners-section .section-title i,
.news-section .section-title i,
.contact-section .section-title i {
color: var(--sec-icon, #5FB38E) !important;
}
/* عناوين الأقسام التي تستخدم gradient - نطبق لون القسم */
.about-section .about-section-title {
color: var(--sec-title, #5FB38E) !important;
-webkit-text-fill-color: var(--sec-title, #5FB38E) !important;
background: none !important;
background-clip: unset !important;
}
.about-section .about-section-title::after {
background: var(--sec-title, #5FB38E) !important;
}
.vision-mission-section .vision-mission-title,
.vision-mission-section .vision-mission-title * {
color: var(--sec-title, #5FB38E) !important;
-webkit-text-fill-color: var(--sec-title, #5FB38E) !important;
}
.vision-mission-section .vision-mission-title .word,
.vision-mission-section .vision-mission-title .word-1,
.vision-mission-section .vision-mission-title .word-2,
.vision-mission-section .vision-mission-title .word-3,
.vision-mission-section .vision-mission-title .word-4 {
color: var(--sec-title, #5FB38E) !important;
}
.services-section .services-section-title,
.services-section .services-section-title *,
.services-section .section-title,
.services-section .section-title * {
color: var(--sec-title, #5FB38E) !important;
-webkit-text-fill-color: var(--sec-title, #5FB38E) !important;
}
.services-section .services-section-title i,
.services-section .section-title i {
color: var(--sec-icon, #5FB38E) !important;
}
.about-section .section-description,
.vision-mission-section .section-description,
.services-section .section-description,
.projects-section .section-description,
.media-section .section-description,
.testimonials-section .section-description,
.partners-section .section-description,
.news-section .section-description,
.contact-section .section-description {
color: var(--sec-text, #0F3D2E) !important;
}
.about-section .about-description,
.about-section .stat-content,
.about-section .executive-director-name,
.about-section .about-features-title,
.vision-mission-section .vision-card h3,
.vision-mission-section .vision-card p,
.vision-mission-section .mission-card h3,
.vision-mission-section .mission-card p,
.services-section .service-card h3,
.services-section .service-card p,
.projects-section .project-card .project-title,
.projects-section .project-card p,
.media-section .section-description,
.testimonials-section .testimonial-card p,
.partners-section .partner-name,
.news-section .news-card h3,
.news-section .news-card p {
color: var(--sec-text, #0F3D2E);
}
.about-section .about-features-title,
.about-section .about-features-title i,
.services-section .service-card h3,
.projects-section .project-card .project-title,
.testimonials-section .testimonial-card h4,
.news-section .news-card h3 {
color: var(--sec-card-title, #5FB38E) !important;
}
.about-section .stat-item,
.vision-mission-section .vision-card,
.vision-mission-section .mission-card,
.services-section .service-card,
.projects-section .project-card,
.testimonials-section .testimonial-card,
.partners-section .partner-card,
.news-section .news-card {
background-color: var(--sec-card-bg, rgba(255,255,255,0.9)) !important;
}
/* لون الأيقونة + الدائرة التي تحتضن الأيقونة + عنوان البطاقة (تحت الأيقونة) */
.about-section .stat-icon,
.about-section .stat-icon::before {
background: var(--sec-icon, #5FB38E) !important;
}
.about-section .stat-icon i {
color: #fff !important;
}
.about-section .feature-icon,
.about-section .feature-icon::before {
background: var(--sec-icon, #5FB38E) !important;
}
.about-section .feature-icon i {
color: #fff !important;
}
.vision-mission-section .vision-icon-wrapper,
.vision-mission-section .mission-icon-wrapper {
background: var(--sec-icon, #5FB38E) !important;
}
.vision-mission-section .vision-icon-wrapper i,
.vision-mission-section .mission-icon-wrapper i {
color: #fff !important;
}
.services-section .icon-background {
background: var(--sec-icon, #5FB38E) !important;
}
.services-section .service-icon-wrapper i {
color: #fff !important;
}
.services-section .service-title {
color: var(--sec-card-title, #5FB38E) !important;
}
.projects-section .project-card .project-title {
color: var(--sec-card-title, #5FB38E) !important;
}
.testimonials-section .testimonial-card h4 {
color: var(--sec-card-title, #5FB38E) !important;
}
.news-section .news-card h3 {
color: var(--sec-card-title, #5FB38E) !important;
}
/* إزالة البطاقات من عنوان قسم الرؤية والرسالة - لون من إعدادات القسم */
.vision-mission-section .vision-mission-title {
display: block;
text-align: center;
color: var(--sec-title, #5FB38E) !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--sec-title, #5FB38E) !important;
background-clip: unset !important;
}
.vision-mission-section .vision-mission-title,
.vision-mission-section .vision-mission-title * {
color: var(--sec-title, #5FB38E) !important;
}
.vision-mission-section .vision-mission-title .word {
display: inline;
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
border: none;
box-shadow: none;
transform: none;
color: var(--sec-title, #5FB38E) !important;
}
.vision-mission-section .vision-mission-title .word-1,
.vision-mission-section .vision-mission-title .word-2,
.vision-mission-section .vision-mission-title .word-3,
.vision-mission-section .vision-mission-title .word-4 {
color: var(--sec-title, #5FB38E) !important;
border: none;
background: none;
}
.vision-mission-section .vision-mission-title:hover .word {
transform: none;
box-shadow: none;
}
.vision-mission-section .vision-mission-title .word::before {
display: none;
}
.vision-mission-section .vision-mission-title i {
margin-left: 0.75rem;
color: var(--icon-color, var(--text-primary, white)) !important;
}
/* تنسيق عنوان قسم الخدمات */
.services-section .services-section-title {
display: block;
text-align: center;
color: var(--text-primary, white) !important;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--text-primary, white) !important;
background-clip: unset !important;
position: relative;
padding-bottom: 1.5rem;
margin-bottom: 1rem;
}
.services-section .services-section-title,
.services-section .services-section-title * {
color: var(--sec-title, #5FB38E) !important;
}
.services-section .services-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--sec-title, #5FB38E);
border-radius: 2px;
box-shadow: 0 2px 10px rgba(95, 179, 142, 0.4);
}
.services-section .services-section-title .word {
display: inline;
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
border: none;
box-shadow: none;
transform: none;
}
.services-section .services-section-title .word {
color: var(--sec-title, #5FB38E) !important;
}
.services-section .services-section-title .word-1,
.services-section .services-section-title .word-2,
.services-section .services-section-title .word-3,
.services-section .services-section-title .word-4 {
color: var(--sec-title, #5FB38E) !important;
border: none;
background: none;
}
.services-section .services-section-title:hover .word {
transform: none;
box-shadow: none;
}
.services-section .services-section-title .word::before {
display: none;
}
.services-section .services-section-title i {
margin-left: 0.75rem;
color: var(--sec-icon, #5FB38E) !important;
}
/* إزالة البطاقات من عنوان قسم من نحن وإضافة خط احترافي */
.about-section .about-section-title {
display: block;
text-align: center;
color: var(--text-primary, white);
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
position: relative;
padding-bottom: 1.5rem;
margin-bottom: 1rem;
}
.about-section .about-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-1);
border-radius: 2px;
box-shadow: 0 2px 10px rgba(95, 179, 142, 0.4);
}
.about-section .about-section-title .word {
display: inline;
padding: 0;
border-radius: 0;
background: none;
backdrop-filter: none;
border: none;
box-shadow: none;
transform: none;
}
.about-section .about-section-title .word-1,
.about-section .about-section-title .word-2,
.about-section .about-section-title .word-3,
.about-section .about-section-title .word-4 {
color: inherit;
border: none;
background: none;
}
.about-section .about-section-title:hover .word {
transform: none;
box-shadow: none;
}
.about-section .about-section-title .word::before {
display: none;
}
/* تطبيق ألوان الأقسام من الإعدادات (أولوية أعلى) */
.about-section .about-section-title,
.about-section .about-section-title .word,
.about-section .about-section-title .word-1,
.about-section .about-section-title .word-2,
.about-section .about-section-title .word-3,
.about-section .about-section-title .word-4 {
color: var(--sec-title, #5FB38E) !important;
-webkit-text-fill-color: var(--sec-title, #5FB38E) !important;
background: none !important;
background-clip: unset !important;
}
.about-section .about-section-title::after {
background: var(--sec-title, #5FB38E) !important;
}
/* قسم الأخبار */
/* طبقة التعتيم للخلفية في الأقسام */
.section-background-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
z-index: 0;
transition: opacity 0.3s ease;
}
/* ضمان ظهور المحتوى فوق طبقة التعتيم */
.about-section .container,
.vision-mission-section .container,
.services-section .container,
.projects-section .container,
.media-section .container,
.testimonials-section .container,
.partners-section .container,
.news-section .container,
.banner-section .container,
.staff-section .container {
position: relative;
z-index: 2;
}
/* قسم الرؤية والرسالة */
.vision-mission-section {
padding: 8rem 0;
padding-bottom: 4rem; /* إضافة padding-bottom لإنشاء مساحة للفاصل */
margin-bottom: 0;
background:
radial-gradient(ellipse at top, rgba(95, 179, 142, 0.05) 0%, transparent 50%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
}
/* خلفية متحركة */
.vision-mission-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(95, 179, 142, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(31, 107, 79, 0.15) 0%, transparent 50%);
animation: backgroundMove 20s ease-in-out infinite;
z-index: 0;
}
/* تم نقل الخلفية المتحركة إلى ::before فقط */
/* ::after الآن مستخدم للفاصل الأبيض */
.vision-mission-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem; /* تصغير من 4rem إلى 2.5rem */
max-width: 1200px; /* تصغير من 1400px إلى 1200px */
margin: 0 auto;
position: relative;
z-index: 1;
}
.vision-card,
.mission-card {
position: relative;
padding: 2rem 1.75rem; /* تصغير من 3.5rem 3rem إلى 2rem 1.75rem */
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), var(--card-bg-opacity, 0.08));
backdrop-filter: blur(20px);
border-radius: 25px; /* تصغير من 30px إلى 25px */
border: 2px solid rgba(95, 179, 142, 0.2);
box-shadow:
0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.15),
0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 0 0 1px rgba(95, 179, 142, 0.1);
transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
overflow: hidden;
opacity: 0;
transform: translateY(50px);
will-change: transform, opacity;
}
.vision-card {
animation: card3DEntry 1s ease-out forwards;
animation-delay: 0.1s;
}
.mission-card {
animation: card3DEntry 1s ease-out forwards;
animation-delay: 0.3s;
}
@keyframes card3DEntry {
from {
opacity: 0;
transform: translateY(80px) rotateX(15deg) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) rotateX(0deg) scale(1);
}
}
/* تأثير shimmer - معطل على الموبايل */
.vision-card::before,
.mission-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
z-index: 0;
will-change: transform;
}
/* تأثير gradient متحرك */
.vision-card::after,
.mission-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(95, 179, 142, 0.1) 0%,
transparent 50%,
rgba(31, 107, 79, 0.1) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
border-radius: 30px;
}
.vision-card:hover::after,
.mission-card:hover::after {
opacity: 1;
}
.vision-card:hover,
.mission-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow:
0 30px 80px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 50px rgba(95, 179, 142, 0.3);
border-color: rgba(95, 179, 142, 0.5);
}
/* تأثير particles */
.vision-card .particles,
.mission-card .particles {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(95, 179, 142, 0.6);
border-radius: 50%;
animation: particleFloat 8s infinite ease-in-out;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 30%; animation-delay: 1s; }
.particle:nth-child(3) { left: 50%; animation-delay: 2s; }
.particle:nth-child(4) { left: 70%; animation-delay: 3s; }
.particle:nth-child(5) { left: 90%; animation-delay: 4s; }
/* تأثير shimmer - معطل على الموبايل */
.vision-card::before,
.mission-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 3s infinite;
z-index: 0;
will-change: transform;
}
/* تأثير gradient متحرك */
.vision-card::after,
.mission-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(95, 179, 142, 0.1) 0%,
transparent 50%,
rgba(31, 107, 79, 0.1) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
border-radius: 30px;
}
.vision-card:hover::after,
.mission-card:hover::after {
opacity: 1;
}
.vision-card:hover,
.mission-card:hover {
transform: translateY(-15px) scale(1.03);
box-shadow:
0 30px 80px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 50px rgba(95, 179, 142, 0.3);
border-color: rgba(95, 179, 142, 0.5);
}
/* إزالة تأثيرات particles - لم تعد مستخدمة */
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(95, 179, 142, 0.6);
border-radius: 50%;
animation: particleFloat 8s infinite ease-in-out;
}
.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 30%; animation-delay: 1s; }
.particle:nth-child(3) { left: 50%; animation-delay: 2s; }
.particle:nth-child(4) { left: 70%; animation-delay: 3s; }
.particle:nth-child(5) { left: 90%; animation-delay: 4s; }
.vision-icon-wrapper,
.mission-icon-wrapper {
position: relative;
width: 90px; /* تصغير من 120px إلى 90px */
height: 90px; /* تصغير من 120px إلى 90px */
margin: 0 auto 1.25rem; /* تصغير من 2rem إلى 1.25rem */
display: flex;
align-items: center;
justify-content: center;
background: var(--gradient-1);
border-radius: 50%;
box-shadow:
0 10px 30px rgba(95, 179, 142, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.2),
0 0 40px rgba(95, 179, 142, 0.3);
z-index: 2;
transition: transform 0.4s ease, box-shadow 0.4s ease;
animation: iconPulse 3s ease-in-out infinite;
will-change: transform;
}
.vision-item:hover .vision-icon-wrapper,
.mission-item:hover .mission-icon-wrapper {
transform: scale(1.05);
box-shadow:
0 15px 40px rgba(95, 179, 142, 0.6),
inset 0 0 30px rgba(255, 255, 255, 0.3),
0 0 60px rgba(95, 179, 142, 0.5);
}
/* حلقة متحركة حول الأيقونة - معطلة على الموبايل */
.vision-icon-wrapper::before,
.mission-icon-wrapper::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px solid rgba(95, 179, 142, 0.4);
border-radius: 50%;
animation: ringRotate 4s linear infinite;
z-index: -1;
will-change: transform;
}
.vision-icon-wrapper::after,
.mission-icon-wrapper::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
right: -20px;
bottom: -20px;
border: 2px solid rgba(95, 179, 142, 0.2);
border-radius: 50%;
animation: ringRotate 5s linear infinite reverse;
z-index: -2;
will-change: transform;
}
.vision-icon-wrapper i,
.mission-icon-wrapper i {
font-size: 2rem; /* تصغير من 2.8rem إلى 2rem */
color: var(--text-primary, white);
z-index: 3;
position: relative;
animation: iconFloat 4s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
transition: transform 0.4s ease;
will-change: transform;
}
.mission-icon-wrapper i {
animation-delay: 0.5s;
}
.vision-card:hover .vision-icon-wrapper i,
.mission-card:hover .mission-icon-wrapper i {
transform: scale(1.15);
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}
.icon-glow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.6) 0%,
rgba(95, 179, 142, 0.3) 40%,
transparent 70%
);
border-radius: 50%;
animation: glowPulse 3s ease-in-out infinite;
z-index: 1;
filter: blur(10px);
will-change: transform, opacity;
}
.vision-card:hover .icon-glow,
.mission-card:hover .icon-glow {
width: 180%;
height: 180%;
animation: glowPulse 2s ease-in-out infinite;
}
.vision-title,
.mission-title {
font-size: 1.75rem; /* تصغير من 2.5rem إلى 1.75rem */
font-weight: 700;
color: var(--sec-card-title, var(--card-title-color, var(--text-primary, white)));
text-align: center;
margin-bottom: 1rem; /* تصغير من 1.5rem إلى 1rem */
position: relative;
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: var(--sec-card-title, var(--card-title-color, var(--text-primary, white)));
background-clip: unset;
z-index: 2;
animation: titleShimmer 3s ease-in-out infinite;
text-shadow: 0 0 30px rgba(95, 179, 142, 0.3);
transition: all 0.6s ease;
}
.vision-item:hover .vision-title,
.mission-item:hover .mission-title {
transform: scale(1.05);
text-shadow: 0 0 30px rgba(95, 179, 142, 0.4);
}
/* خط تحت العنوان */
.vision-title::after,
.mission-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background: var(--gradient-1);
border-radius: 2px;
transition: width 0.6s ease;
}
.vision-card:hover .vision-title::after,
.mission-card:hover .mission-title::after {
width: 80px;
}
.vision-content,
.mission-content {
text-align: center;
line-height: 1.9;
position: relative;
z-index: 2;
transition: all 0.6s ease;
}
.vision-content p,
.mission-content p {
font-size: 1rem; /* تصغير من 1.2rem إلى 1rem */
color: rgba(255, 255, 255, 0.95);
margin: 0;
white-space: pre-line;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.6s ease;
animation: textFadeIn 1s ease-out 0.5s both;
}
.vision-card:hover .vision-content p,
.mission-card:hover .mission-content p {
color: var(--sec-hover-text, rgba(255, 255, 255, 1)) !important;
text-shadow: 0 4px 20px rgba(95, 179, 142, 0.3);
transform: translateY(-5px);
}
.card-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 6px;
background: var(--gradient-1);
border-radius: 0 0 30px 30px;
opacity: 0;
transition: all 0.6s ease;
box-shadow: 0 -5px 20px rgba(95, 179, 142, 0.4);
transform: scaleX(0);
transform-origin: center;
}
.vision-card:hover .card-decoration,
.mission-card:hover .card-decoration {
opacity: 1;
transform: scaleX(1);
}
/* زوايا متوهجة */
.vision-card .corner-glow,
.mission-card .corner-glow {
position: absolute;
width: 100px;
height: 100px;
background: radial-gradient(circle, rgba(95, 179, 142, 0.3) 0%, transparent 70%);
border-radius: 50%;
filter: blur(20px);
opacity: 0;
transition: opacity 0.6s ease;
}
.vision-card .corner-glow:nth-child(1),
.mission-card .corner-glow:nth-child(1) {
top: -50px;
left: -50px;
}
.vision-card .corner-glow:nth-child(2),
.mission-card .corner-glow:nth-child(2) {
bottom: -50px;
right: -50px;
}
.vision-card:hover .corner-glow,
.mission-card:hover .corner-glow {
opacity: 1;
animation: cornerPulse 2s ease-in-out infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
@keyframes cornerPulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Animations */
@keyframes card3DEntry {
from {
opacity: 0;
transform: translateY(80px) rotateX(15deg) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) rotateX(0deg) scale(1);
}
}
@keyframes shimmer {
0% {
transform: translateX(-100%) translateY(-100%) rotate(45deg);
}
100% {
transform: translateX(100%) translateY(100%) rotate(45deg);
}
}
@keyframes iconFloat {
0%, 100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(5deg);
}
50% {
transform: translateY(-15px) rotate(0deg);
}
75% {
transform: translateY(-10px) rotate(-5deg);
}
}
@keyframes iconPulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes iconGlow {
0%, 100% {
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
}
50% {
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}
}
@keyframes glowPulse {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
@keyframes glowRotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes ringRotate {
0% {
transform: rotate(0deg);
opacity: 0.6;
}
50% {
opacity: 0.3;
}
100% {
transform: rotate(360deg);
opacity: 0.6;
}
}
@keyframes titleShimmer {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
@keyframes textFadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes particleFloat {
0% {
transform: translateY(100vh) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) translateX(50px);
opacity: 0;
}
}
@keyframes backgroundMove {
0%, 100% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(50px, 50px) scale(1.1);
}
}
@keyframes patternMove {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100px, 100px);
}
}
@keyframes cornerPulse {
0%, 100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.2);
opacity: 0.8;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.vision-mission-section {
padding: 4rem 0;
padding-bottom: 2rem; /* تقليل padding-bottom للشاشات الصغيرة */
margin-bottom: 0;
}
/* إزالة الخلفيات المتحركة على الموبايل */
.vision-mission-section::before {
display: none;
}
.vision-mission-wrapper {
grid-template-columns: 1fr;
gap: 2rem; /* تصغير من 2.5rem إلى 2rem */
}
.vision-item,
.mission-item {
padding: 1.5rem 0;
}
.vision-item:hover,
.mission-item:hover {
transform: translateY(-5px) !important;
}
/* تبسيط أيقونات الحلقات */
.vision-icon-wrapper::before,
.vision-icon-wrapper::after,
.mission-icon-wrapper::before,
.mission-icon-wrapper::after {
display: none;
}
/* تبسيط icon glow */
.icon-glow {
animation: glowPulse 4s ease-in-out infinite;
filter: blur(8px);
}
/* تبسيط icon animation */
.vision-icon-wrapper i,
.mission-icon-wrapper i {
animation: iconFloat 5s ease-in-out infinite;
}
.vision-icon-wrapper,
.mission-icon-wrapper {
width: 75px; /* تصغير من 90px إلى 75px */
height: 75px; /* تصغير من 90px إلى 75px */
margin-bottom: 1rem; /* تصغير من 1.5rem إلى 1rem */
}
.vision-icon-wrapper::before,
.vision-icon-wrapper::after,
.mission-icon-wrapper::before,
.mission-icon-wrapper::after {
display: none;
}
.vision-icon-wrapper i,
.mission-icon-wrapper i {
font-size: 1.75rem; /* تصغير من 2.2rem إلى 1.75rem */
}
.vision-title,
.mission-title {
font-size: 1.5rem; /* تصغير من 1.9rem إلى 1.5rem */
}
.vision-content p,
.mission-content p {
font-size: 0.95rem; /* تصغير من 1.05rem إلى 0.95rem */
}
.particles {
display: none;
}
.corner-glow {
display: none;
}
}
/* فاصل بين الأقسام */
.section-divider {
position: relative;
padding: 4rem 0;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
overflow: hidden;
background: linear-gradient(
180deg,
rgba(95, 179, 142, 0.08) 0%,
rgba(31, 107, 79, 0.12) 50%,
rgba(31, 107, 79, 0.08) 100%
);
margin: 2rem 0;
border-top: 1px solid rgba(95, 179, 142, 0.2);
border-bottom: 1px solid rgba(31, 107, 79, 0.2);
}
.divider-line {
flex: 1;
height: 3px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(95, 179, 142, 0.4) 20%,
rgba(95, 179, 142, 0.7) 50%,
rgba(31, 107, 79, 0.7) 50%,
rgba(31, 107, 79, 0.4) 80%,
transparent 100%
);
position: relative;
animation: dividerFlow 3s ease-in-out infinite;
border-radius: 2px;
box-shadow: 0 2px 10px rgba(95, 179, 142, 0.2);
}
.divider-line::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent 0%,
rgba(95, 179, 142, 0.5) 50%,
transparent 100%
);
animation: dividerShine 2s ease-in-out infinite;
}
.divider-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(95, 179, 142, 0.2) 0%, rgba(31, 107, 79, 0.2) 100%);
backdrop-filter: blur(10px);
border: 2px solid rgba(95, 179, 142, 0.5);
border-radius: 50%;
color: rgba(95, 179, 142, 0.9);
font-size: 1.5rem;
box-shadow:
0 0 25px rgba(95, 179, 142, 0.4),
inset 0 0 20px rgba(95, 179, 142, 0.15),
0 0 0 4px rgba(31, 107, 79, 0.1);
position: relative;
z-index: 2;
animation: dividerIconFloat 3s ease-in-out infinite;
transition: all 0.4s ease;
}
.divider-icon:hover {
transform: scale(1.15) rotate(360deg);
box-shadow:
0 0 30px rgba(95, 179, 142, 0.5),
inset 0 0 30px rgba(95, 179, 142, 0.2);
border-color: rgba(95, 179, 142, 0.6);
}
.divider-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.3) 0%,
transparent 70%
);
border-radius: 50%;
animation: dividerGlow 2s ease-in-out infinite;
z-index: -1;
}
@keyframes dividerFlow {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
@keyframes dividerShine {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
@keyframes dividerIconFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes dividerGlow {
0%, 100% {
opacity: 0.5;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Responsive للفاصل */
@media (max-width: 768px) {
.section-divider {
padding: 3rem 0;
gap: 1.5rem;
background: linear-gradient(
180deg,
rgba(95, 179, 142, 0.06) 0%,
rgba(31, 107, 79, 0.08) 50%,
rgba(31, 107, 79, 0.06) 100%
);
margin: 1.5rem 0;
}
.divider-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.divider-icon::before {
width: 60px;
height: 60px;
}
.services-section {
background: transparent;
}
}
/* قسم خدماتنا */
.services-section {
padding: 8rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
margin-top: 0; /* إزالة margin-top لإرجاع المسافة الطبيعية */
background:
radial-gradient(ellipse at bottom, rgba(31, 107, 79, 0.05) 0%, transparent 50%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين قسم الرؤية والرسالة وقسم الخدمات */
.services-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.services-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(95, 179, 142, 0.1) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(31, 107, 79, 0.1) 0%, transparent 50%);
animation: backgroundMove 25s ease-in-out infinite;
z-index: 0;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 2rem;
}
.service-card {
position: relative;
padding: 3.5rem 2.5rem;
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), var(--card-bg-opacity, 0.1));
backdrop-filter: blur(20px);
border-radius: 30px;
border: none;
box-shadow:
0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2),
0 0 0 1px rgba(255, 255, 255, 0.15);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(60px) scale(0.95);
animation: serviceCardEntry 0.8s ease-out forwards;
transform-style: preserve-3d;
cursor: pointer;
min-height: 380px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* إطار متحرك مستمر على حدود البطاقة */
.service-card::before {
content: '';
position: absolute;
top: -3px;
left: -3px;
right: -3px;
bottom: -3px;
border-radius: 32px;
background: linear-gradient(
45deg,
rgba(95, 179, 142, 1),
rgba(31, 107, 79, 1),
rgba(168, 220, 195, 1),
rgba(95, 179, 142, 1),
rgba(31, 107, 79, 1),
rgba(168, 220, 195, 1),
rgba(95, 179, 142, 1)
);
background-size: 400% 400%;
animation: borderRotate 4s linear infinite;
z-index: -1;
pointer-events: none;
opacity: 1;
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
padding: 3px;
}
/* طبقة داخلية لإخفاء الخلفية المتدرجة */
.service-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 30px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
z-index: -2;
pointer-events: none;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.2s; }
.service-card:nth-child(3) { animation-delay: 0.3s; }
.service-card:nth-child(4) { animation-delay: 0.4s; }
.service-card:nth-child(5) { animation-delay: 0.5s; }
.service-card:nth-child(6) { animation-delay: 0.6s; }
/* تأثير shimmer - استخدام service-hover-effect بدلاً من ::before */
.service-hover-effect {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.08) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 4s infinite;
z-index: 0;
}
/* تأثير gradient متحرك عند hover */
.service-card:hover::after {
background: linear-gradient(
135deg,
rgba(95, 179, 142, 0.15) 0%,
transparent 50%,
rgba(31, 107, 79, 0.15) 100%
);
opacity: 1;
}
.service-card:hover {
transform: translateY(-15px) scale(1.05) rotateY(5deg);
box-shadow:
0 30px 80px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 50px rgba(95, 179, 142, 0.4),
0 0 80px rgba(95, 179, 142, 0.2);
border-color: rgba(95, 179, 142, 0.5);
}
.service-icon-wrapper {
position: relative;
width: 100px;
height: 100px;
min-height: 100px;
max-height: 100px;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
flex-shrink: 0;
}
.icon-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-1);
border-radius: 50%;
box-shadow:
0 10px 30px rgba(95, 179, 142, 0.4),
inset 0 0 20px rgba(255, 255, 255, 0.2),
0 0 40px rgba(95, 179, 142, 0.3);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
animation: iconPulse 2.5s ease-in-out infinite;
}
.icon-glow-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.5) 0%,
rgba(95, 179, 142, 0.2) 40%,
transparent 70%
);
border-radius: 50%;
animation: glowPulse 2s ease-in-out infinite, glowRotate 5s linear infinite;
z-index: -1;
filter: blur(15px);
}
.service-card:hover .icon-background {
transform: scale(1.2) rotateY(360deg);
box-shadow:
0 15px 40px rgba(95, 179, 142, 0.6),
inset 0 0 30px rgba(255, 255, 255, 0.3),
0 0 60px rgba(95, 179, 142, 0.5);
}
.service-card:hover .icon-glow-effect {
width: 200%;
height: 200%;
animation: glowPulse 1s ease-in-out infinite, glowRotate 3s linear infinite;
}
.service-icon-wrapper i {
font-size: 2.5rem;
line-height: 1;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--icon-color, white);
z-index: 3;
position: relative;
animation: iconFloat 3s ease-in-out infinite;
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
transition: all 0.6s ease;
flex-shrink: 0;
}
.service-card:hover .service-icon-wrapper i {
transform: scale(1.2) rotate(360deg);
filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}
.service-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--sec-card-title, var(--card-title-color, white)) !important;
text-align: center;
margin-bottom: 1rem;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
position: relative;
z-index: 2;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--sec-card-title, var(--card-title-color, white)) !important;
background-clip: unset !important;
transition: all 0.6s ease;
}
.service-card:hover .service-title {
transform: scale(1.1);
}
.service-description {
font-size: 1.05rem;
color: rgba(255, 255, 255, 0.9);
text-align: center;
line-height: 1.8;
margin: 0;
position: relative;
z-index: 2;
transition: all 0.6s ease;
}
.service-card:hover .service-description {
color: var(--sec-hover-text, rgba(255, 255, 255, 1)) !important;
transform: translateY(-3px);
}
.service-decoration {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 5px;
background: var(--gradient-1);
border-radius: 0 0 25px 25px;
opacity: 0;
transition: all 0.6s ease;
box-shadow: 0 -5px 20px rgba(95, 179, 142, 0.4);
transform: scaleX(0);
transform-origin: center;
}
.service-card:hover .service-decoration {
opacity: 1;
transform: scaleX(1);
}
.service-hover-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(circle, rgba(95, 179, 142, 0.2) 0%, transparent 70%);
border-radius: 50%;
transition: all 0.6s ease;
z-index: 0;
}
.service-card:hover .service-hover-effect {
width: 200%;
height: 200%;
animation: hoverPulse 2s ease-in-out infinite;
}
/* Animations */
@keyframes serviceCardEntry {
from {
opacity: 0;
transform: translateY(60px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes hoverPulse {
0%, 100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1.1);
}
}
@keyframes borderRotate {
0% {
background-position: 0% 0%;
}
100% {
background-position: 400% 0%;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.services-section {
padding: 4rem 0;
padding-top: 2rem; /* إضافة padding-top للشاشات الصغيرة */
margin-top: 0; /* إزالة margin-top لإرجاع المسافة الطبيعية */
}
.services-section::before {
display: none;
}
/* الفاصل الأبيض للشاشات الصغيرة */
.services-section::after {
top: -20px; /* وضع الفاصل في المنتصف بين القسمين للشاشات الصغيرة */
height: 50px; /* تقليل ارتفاع الفاصل للشاشات الصغيرة */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 30%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 70%,
transparent 100%
);
}
/* الفاصل الأبيض للشاشات الصغيرة - الأقسام الأخرى */
.projects-section::after,
.testimonials-section::after,
.media-section::after,
.news-section::after,
.contact-section::after {
top: -20px; /* وضع الفاصل في المنتصف بين القسمين للشاشات الصغيرة */
height: 50px; /* تقليل ارتفاع الفاصل للشاشات الصغيرة */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 30%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 70%,
transparent 100%
);
}
.projects-section,
.testimonials-section,
.media-section,
.news-section,
.contact-section {
padding-top: 2rem; /* إضافة padding-top للشاشات الصغيرة */
padding-bottom: 2rem; /* إضافة padding-bottom للشاشات الصغيرة */
}
.services-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.service-card {
padding: 2.5rem 2rem;
}
.service-icon-wrapper {
width: 80px;
height: 80px;
min-height: 80px;
max-height: 80px;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.service-icon-wrapper i {
font-size: 2rem;
line-height: 1;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.service-title {
font-size: 1.15rem;
line-height: 1.3;
}
.service-description {
font-size: 1rem;
}
}
/* قسم شركاؤنا */
.partners-section {
padding: 8rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
margin-top: 0; /* إزالة margin-top لإرجاع المسافة الطبيعية */
background:
radial-gradient(ellipse at center, rgba(31, 107, 79, 0.05) 0%, transparent 50%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين قسم الخدمات وقسم شركاؤنا */
.partners-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.partner-card {
position: relative;
height: 150px;
background: #ffffff;
backdrop-filter: none;
border-radius: 20px;
border: 2px solid rgba(95, 179, 142, 0.2);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(40px) scale(0.95);
animation: partnerCardEntry 0.6s ease-out forwards;
will-change: transform, opacity;
}
.partner-card:nth-child(1) { animation-delay: 0.1s; }
.partner-card:nth-child(2) { animation-delay: 0.2s; }
.partner-card:nth-child(3) { animation-delay: 0.3s; }
.partner-card:nth-child(4) { animation-delay: 0.4s; }
.partner-card:nth-child(5) { animation-delay: 0.5s; }
.partner-card:nth-child(6) { animation-delay: 0.6s; }
.partner-card:nth-child(7) { animation-delay: 0.7s; }
.partner-card:nth-child(8) { animation-delay: 0.8s; }
.partner-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-decoration: none;
transition: all 0.5s ease;
}
.partner-logo {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
filter: none;
transition: all 0.5s ease;
opacity: 1;
}
.partner-card:hover .partner-logo {
filter: none;
opacity: 1;
transform: scale(1.1);
}
.partner-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.6);
text-align: center;
}
.partner-placeholder i {
font-size: 2.5rem;
color: rgba(95, 179, 142, 0.5);
}
.partner-placeholder span {
font-size: 1rem;
font-weight: 600;
}
.partner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(95, 179, 142, 0.1) 0%,
transparent 50%,
rgba(31, 107, 79, 0.1) 100%
);
opacity: 0;
transition: opacity 0.5s ease;
border-radius: 20px;
z-index: 0;
}
.partner-card:hover .partner-overlay {
opacity: 1;
}
.partner-card:hover {
transform: translateY(-10px) scale(1.05);
box-shadow:
0 20px 50px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 40px rgba(95, 179, 142, 0.3);
border-color: rgba(95, 179, 142, 0.5);
}
@keyframes partnerCardEntry {
from {
opacity: 0;
transform: translateY(40px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive Design */
@media (max-width: 768px) {
.partners-section {
padding: 4rem 0;
padding-top: 2rem; /* إضافة padding-top للشاشات الصغيرة */
margin-top: 0;
background: transparent;
}
/* الفاصل الأبيض للشاشات الصغيرة */
.partners-section::after {
top: -20px; /* وضع الفاصل في المنتصف بين القسمين للشاشات الصغيرة */
height: 50px; /* تقليل ارتفاع الفاصل للشاشات الصغيرة */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 30%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 70%,
transparent 100%
);
}
.partners-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.partner-card {
height: 120px;
padding: 1.5rem;
backdrop-filter: none;
background: #ffffff;
}
.partner-logo {
max-width: 90%;
max-height: 90%;
}
}
.news-section {
padding: 6rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
padding-bottom: 4rem; /* إضافة padding-bottom لإنشاء مساحة للفاصل */
margin-top: 0;
background: transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين الأقسام */
.news-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 2rem;
}
.news-card {
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), var(--card-bg-opacity, 0.05));
border: 1px solid rgba(var(--card-bg-color-rgb, 255, 255, 255), calc(var(--card-bg-opacity, 0.05) * 2));
border-radius: 20px;
overflow: hidden;
transition: var(--transition);
cursor: pointer;
}
.news-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-glow);
border-color: rgba(95, 179, 142, 0.5);
}
.news-card-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.news-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.news-card:hover .news-card-image img {
transform: scale(1.1);
}
.news-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}
.news-card-content {
padding: 1.5rem;
}
.news-card-date {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-secondary);
font-size: 0.875rem;
margin-bottom: 1rem;
}
.news-card-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--sec-card-title, var(--card-title-color, var(--text-primary)));
}
.news-card-excerpt {
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 1rem;
}
.news-card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.news-card-link:hover {
gap: 1rem;
color: var(--text-primary);
}
/* قسم اتصل بنا */
.contact-section {
padding: 6rem 0;
padding-top: 4rem;
margin-top: 0;
background: var(--sec-bg, #FFFFFF);
color: var(--sec-text, #0F3D2E);
position: relative;
overflow: visible;
z-index: 1;
}
/* فاصل أبيض جميل بين الأقسام */
.contact-section .section-title,
.contact-section .section-badge {
color: var(--sec-title, #5FB38E) !important;
}
.contact-section .section-title i {
color: var(--sec-icon, #5FB38E) !important;
}
.contact-section .section-description {
color: var(--sec-text, #0F3D2E) !important;
}
.contact-section::after {
content: '';
position: absolute;
top: -40px;
left: 0;
right: 0;
height: 80px;
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2;
pointer-events: none;
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.contact-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: var(--sec-card-bg, rgba(255, 255, 255, 0.05));
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 16px;
transition: var(--transition);
}
.contact-item:hover {
background: var(--sec-card-bg, rgba(255, 255, 255, 0.08));
transform: translateY(-5px);
border-color: rgba(0, 0, 0, 0.12);
}
.contact-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: var(--sec-icon, var(--gradient-1));
border-radius: 12px;
font-size: 1.5rem;
color: #fff;
}
.contact-details h4 {
margin-bottom: 0.5rem;
color: var(--sec-card-title, var(--sec-title, inherit));
}
.contact-details a {
color: var(--sec-text, inherit);
text-decoration: none;
transition: var(--transition);
}
.contact-details a:hover {
color: var(--sec-hover-text, var(--primary-color));
}
/* ألوان محتوى الصفحات المستقلة (صفحة محتوى، الهيئة، السياسات، الموظفين) */
.page-content.page-main-content,
.staff-section,
.board-members-section,
.policies-section {
background-color: var(--page-content-bg, #FFFFFF) !important;
color: var(--page-content-text, #0F3D2E);
}
.page-content.page-main-content .page-title-main,
.page-content.page-main-content h1,
.staff-section .section-title,
.staff-section .section-badge,
.staff-section .staff-name,
.staff-section .staff-position,
.board-members-section .section-title,
.board-members-section .section-badge,
.board-members-section h3,
.policies-section .section-title,
.policies-section .section-badge,
.policies-section h3,
.policies-section h4,
.policies-section .policy-item h4,
.policies-section .policy-category h3 {
color: var(--page-content-title, var(--primary-color, #5FB38E)) !important;
}
.page-content .page-wrapper {
background: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.page-content.page-main-content .page-content-text,
.page-content .page-content-text,
.staff-section .section-description,
.staff-section .empty-state p,
.board-members-section .section-description,
.board-members-section p,
.policies-section .section-description,
.policies-section .policy-item p,
.policies-section p {
color: var(--page-content-text, #0F3D2E) !important;
}
/* التذييل - إزالة الخط الفاصل وإلصاقه بآخر قسم */
.footer {
padding: 4rem 0 0;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.95);
border-top: none !important;
margin-top: 0 !important;
}
.footer::before,
.footer::after {
display: none !important;
}
.footer-main {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
padding-bottom: 3rem;
margin-bottom: 0; /* إزالة margin-bottom لتقليل المسافة */
/* إزالة border-bottom - سيتم استخدام border-top في footer-bottom فقط */
}
.footer-column {
display: flex;
flex-direction: column;
}
/* معلومات الجمعية */
.footer-brand {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.footer-logo {
width: 60px;
height: 60px;
border-radius: 12px;
object-fit: cover;
border: 2px solid rgba(95, 179, 142, 0.3);
}
.footer-logo-icon {
width: 60px;
height: 60px;
border-radius: 12px;
background: var(--gradient-1);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary, #FFFFFF);
font-size: 1.5rem;
border: 2px solid rgba(95, 179, 142, 0.3);
}
.footer-brand-text {
flex: 1;
}
.footer-brand-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--footer-title-color, var(--text-primary, #FFFFFF));
margin-bottom: 0.5rem;
}
.footer-brand-slogan {
font-size: 0.95rem;
color: var(--footer-text-secondary-color, rgba(255, 255, 255, 0.8));
margin: 0;
}
.footer-description {
color: var(--footer-text-secondary-color, rgba(255, 255, 255, 0.7));
line-height: 1.8;
font-size: 0.95rem;
margin: 0;
}
/* عناوين الأعمدة */
.footer-column-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--footer-title-color, var(--text-primary, #FFFFFF));
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.footer-title-line {
width: 4px;
height: 24px;
background: var(--gradient-1);
border-radius: 2px;
display: inline-block;
}
/* روابط سريعة */
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: var(--footer-link-color, rgba(255, 255, 255, 0.8));
text-decoration: none;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
font-size: 0.95rem;
}
.footer-links a i {
color: var(--footer-icon-color, var(--primary-color));
font-size: 0.5rem;
}
.footer-links a:hover {
color: var(--footer-link-hover-color, var(--text-primary, #FFFFFF));
transform: translateX(-5px);
}
/* معلومات التواصل */
.footer-contact {
list-style: none;
padding: 0;
margin: 0;
}
.footer-contact li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
color: var(--footer-text-secondary-color, rgba(255, 255, 255, 0.8));
font-size: 0.95rem;
}
.footer-contact i {
color: var(--footer-icon-color, var(--primary-color));
font-size: 1.1rem;
width: 20px;
text-align: center;
}
.footer-contact a {
color: var(--footer-link-color, rgba(255, 255, 255, 0.8));
text-decoration: none;
transition: var(--transition);
}
.footer-contact a:hover {
color: var(--footer-link-hover-color, var(--text-primary, #FFFFFF));
}
/* أيقونات التواصل الاجتماعي في الفوتر */
.footer-social {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 1.5rem;
align-items: center;
}
.footer-social-link {
position: relative;
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.3);
border-radius: 50%;
color: var(--footer-icon-color, var(--primary-color));
font-size: 1.1rem;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
z-index: 1;
}
.footer-social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
width: 100%;
height: 100%;
border-radius: 50%;
background: var(--gradient-1);
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
z-index: -1;
}
.footer-social-link:hover::before {
transform: translate(-50%, -50%) scale(1);
}
.footer-social-link:hover {
transform: translateY(-5px) scale(1.1);
border-color: var(--footer-icon-color, var(--primary-color));
box-shadow: 0 8px 25px rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.4);
color: var(--footer-link-hover-color, var(--text-primary, #FFFFFF));
}
.footer-social-link i {
position: relative;
z-index: 2;
transition: transform 0.4s ease;
}
.footer-social-link:hover i {
transform: scale(1.15) rotate(360deg);
}
/* ساعات العمل */
.footer-working-hours {
display: flex;
flex-direction: column;
gap: 1rem;
}
.working-hours-item {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.2);
border-radius: 12px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
align-items: flex-end;
transition: var(--transition);
gap: 0.5rem;
}
.working-hours-item:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.3);
transform: translateY(-2px);
}
.working-days {
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.95rem;
text-align: right;
width: 100%;
line-height: 1.4;
}
.working-time {
color: var(--footer-icon-color, var(--primary-color));
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
text-align: right;
width: 100%;
line-height: 1.4;
}
/* إذا كان هناك فقط working-time بدون working-days (للتوافق مع النظام القديم) */
.working-hours-item:has(.working-time:only-child) {
align-items: center;
text-align: center;
}
.working-hours-item:has(.working-time:only-child) .working-time {
text-align: center;
}
/* الشريط السفلي */
.footer-bottom {
padding: 1.5rem 0;
border-top: none !important;
}
.footer-bottom-content {
display: flex;
justify-content: center; /* تغيير من space-between إلى center */
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
position: relative; /* لإضافة زر scroll-to-top في الزاوية */
}
.footer-scroll-top {
position: absolute; /* نقل الزر إلى الزاوية */
left: 0; /* في اليسار (RTL) */
top: 50%;
transform: translateY(-50%);
}
.scroll-to-top-btn {
width: 45px;
height: 45px;
border-radius: 12px;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.95);
border: 2px solid rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.4);
color: var(--footer-link-hover-color, var(--text-primary, #FFFFFF));
font-size: 1.1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.scroll-to-top-btn:hover {
transform: translateY(-3px);
border-color: var(--footer-icon-color, var(--primary-color));
box-shadow: 0 6px 20px rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.4);
}
/* Responsive: القوائم المنسدلة على الموبايل */
@media (max-width: 768px) {
.nav-item-dropdown {
width: 100%;
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.05);
margin-top: 0;
border-radius: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav-item-dropdown.active .dropdown-menu {
max-height: 500px;
}
.dropdown-item {
padding-right: 2.5rem;
}
}
.footer-copyright {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
text-align: center;
}
.footer-copyright p {
margin: 0;
line-height: 1.8;
}
.copyright-text {
color: var(--footer-text-secondary-color, rgba(255, 255, 255, 0.85));
font-size: 1rem;
font-weight: 500;
}
.copyright-text .site-name {
color: var(--footer-icon-color, var(--primary-color));
font-weight: 700;
}
.developer-credit {
color: var(--footer-text-secondary-color, rgba(255, 255, 255, 0.7));
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.developer-link {
color: var(--footer-icon-color, var(--primary-color));
text-decoration: none;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
position: relative;
padding: 0.25rem 0.5rem;
border-radius: 8px;
}
.developer-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.1);
border-radius: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
.developer-link:hover::before {
opacity: 1;
}
.developer-link i {
font-size: 1rem;
color: var(--footer-icon-color, var(--primary-color));
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.developer-link:hover {
color: var(--footer-link-hover-color, #FFFFFF);
transform: translateY(-2px);
}
.developer-link:hover i {
transform: scale(1.2) rotate(5deg);
}
.developer-link span {
position: relative;
z-index: 1;
}
/* صورة الرخصة في الفوتر */
.footer-license {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.license-image-wrapper {
display: inline-block;
cursor: pointer;
transition: transform 0.3s ease;
}
.license-image-wrapper:hover {
transform: scale(1.05);
}
.license-thumbnail {
max-width: 150px;
max-height: 150px;
border-radius: 12px;
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
object-fit: contain;
background: rgba(255, 255, 255, 0.05);
padding: 0.5rem;
transition: all 0.3s ease;
}
.license-thumbnail:hover {
border-color: var(--primary-color);
box-shadow: 0 6px 25px rgba(95, 179, 142, 0.4);
}
/* Modal لعرض صورة الرخصة */
.license-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
animation: fadeIn 0.3s ease;
}
.license-modal.show {
display: flex;
align-items: center;
justify-content: center;
}
.license-modal-content {
position: relative;
margin: 2% auto;
max-width: 90%;
max-height: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
animation: zoomIn 0.3s ease;
}
.license-modal-close {
position: absolute;
top: -50px;
left: 0;
color: #fff;
font-size: 3rem;
font-weight: bold;
cursor: pointer;
z-index: 10001;
transition: transform 0.3s ease;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
}
.license-modal-close:hover {
transform: rotate(90deg);
background: rgba(255, 255, 255, 0.2);
}
.license-modal-image {
max-width: 100%;
max-height: 80vh;
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
object-fit: contain;
background: rgba(255, 255, 255, 0.05);
padding: 1rem;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes zoomIn {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
/* Responsive */
@media (max-width: 768px) {
.license-thumbnail {
max-width: 120px;
max-height: 120px;
}
.license-modal-close {
top: -40px;
font-size: 2.5rem;
width: 40px;
height: 40px;
}
.license-modal-content h3 {
font-size: 1.2rem;
}
}
/* الأزرار المتحركة */
.floating-button {
position: fixed;
z-index: 9999;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
opacity: 0;
transform: translateY(100px) scale(0.8);
animation: floatingButtonEntry 0.6s ease-out forwards;
will-change: transform, opacity;
}
.floating-button.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.floating-button i {
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.floating-button:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}
.floating-button:hover i {
transform: scale(1.2);
}
.floating-whatsapp {
left: 2rem;
bottom: 2rem;
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
color: var(--text-primary, #FFFFFF);
animation-delay: 0.2s;
}
.floating-whatsapp:hover {
background: linear-gradient(135deg, #128C7E 0%, #25D366 100%);
box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}
.floating-donate {
left: 2rem;
bottom: 7rem;
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
color: var(--text-primary, #FFFFFF);
animation-delay: 0.4s;
}
.floating-donate:hover {
background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
box-shadow: 0 6px 30px rgba(239, 68, 68, 0.5);
}
.floating-button-text {
white-space: nowrap;
font-size: 1rem;
}
@keyframes floatingButtonEntry {
from {
opacity: 0;
transform: translateY(100px) scale(0.8);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive للأزرار المتحركة */
@media (max-width: 768px) {
.floating-button {
padding: 0.875rem 1.25rem;
font-size: 0.9rem;
left: 1rem;
}
.floating-whatsapp {
bottom: 1.5rem;
}
.floating-donate {
bottom: 6rem;
}
.floating-button-text {
display: none;
}
.floating-button {
width: 60px;
height: 60px;
border-radius: 50%;
padding: 0;
justify-content: center;
align-items: center;
}
.floating-button i {
font-size: 1.75rem;
}
}
/* تحسينات الاستجابة */
@media (max-width: 768px) {
/* إظهار زر القائمة للجوال */
.mobile-nav-toggle {
display: flex !important;
}
/* بطاقة اللوقو على الجوال - في المنتصف */
.logo-card-wrapper {
top: 0.5rem;
right: 50%;
transform: translateX(50%);
z-index: 999; /* تقليل z-index قليلاً لتجنب التداخل مع القائمة */
}
.logo-card {
/* إزالة القيود الثابتة - سيتم تحديد الحجم ديناميكياً من JavaScript */
border-radius: 20px;
padding: 0 !important; /* إزالة padding لضمان أن البطاقة بنفس حجم اللوقو */
box-sizing: border-box;
overflow: hidden;
}
.logo-card-image {
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.logo-card-icon {
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
box-sizing: border-box;
}
.logo-card-icon img {
max-width: 100% !important;
max-height: 100% !important;
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
}
.logo-card-icon i {
max-width: 100%;
max-height: 100%;
}
/* إخفاء الشريط الأبيض على الجوال */
.navbar {
display: none !important;
}
/* زر القائمة (الثلاث خطوط) - منفصل على اليمين للجوال */
.mobile-nav-toggle {
position: fixed;
top: 1rem;
right: 1rem;
display: flex;
flex-direction: column;
gap: 5px;
cursor: pointer;
z-index: 1001;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
padding: 0.75rem;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1);
width: 50px;
height: 50px;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.mobile-nav-toggle span {
width: 25px;
height: 3px;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.9);
border-radius: 2px;
transition: var(--transition);
display: block;
}
.mobile-nav-toggle:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
}
/* تأثير زر القائمة عند التفعيل */
.mobile-nav-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(8px, 8px);
}
.mobile-nav-toggle.active span:nth-child(2) {
opacity: 0;
}
.mobile-nav-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(7px, -7px);
}
/* إخفاء زر القائمة القديم على الجوال */
.nav-toggle {
display: none !important;
}
/* إخفاء قائمة الديسكتوب على الجوال */
.desktop-menu-wrapper {
display: none !important;
}
/* القائمة المنسدلة للجوال - مخفية بشكل افتراضي */
.nav-menu-wrapper.mobile-menu-wrapper {
display: none !important;
position: fixed !important;
top: 5rem !important;
right: 1rem !important;
left: 1rem !important;
width: calc(100% - 2rem) !important;
background: #FFFFFF !important;
backdrop-filter: blur(30px) !important;
border: 1px solid rgba(var(--primary-dark-rgb, 15, 61, 46), 0.1) !important;
border-radius: 20px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important;
flex-direction: column !important;
padding: 1.5rem !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(-10px) !important;
z-index: 1000 !important;
max-height: calc(100vh - 7rem) !important;
overflow-y: auto !important;
transition: all 0.3s ease !important;
}
/* إظهار القائمة فقط عند الضغط على زر القائمة */
body.menu-open .nav-menu-wrapper.mobile-menu-wrapper,
body.menu-open .mobile-menu-wrapper,
.nav-menu-wrapper.mobile-menu-wrapper.active,
.mobile-menu-wrapper.active {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
}
.nav-menu {
flex-direction: column;
width: 100%;
position: static;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
opacity: 1;
visibility: visible;
transform: none;
}
.nav-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-link {
width: 100%;
text-align: center;
padding: 0.8rem 1.5rem;
}
.nav-item-dropdown {
width: 100%;
}
/* إخفاء المنطقة الانتقالية على الموبايل */
.nav-item-dropdown::before {
display: none;
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.05);
margin-top: 0;
border-radius: 0;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
pointer-events: auto;
display: block !important;
}
.nav-item-dropdown.active .dropdown-menu {
max-height: 1000px;
padding: 0.5rem 0;
}
.dropdown-item {
padding-right: 2.5rem;
padding-left: 1.5rem;
display: block;
width: 100%;
}
/* تحسين مظهر القائمة المنسدلة على الموبايل */
.nav-item-dropdown.active .dropdown-toggle i {
transform: rotate(180deg);
}
/* تحسين الشريط العلوي للجوال */
.navbar {
top: 0.5rem;
width: calc(100% - 1rem);
padding: 1rem 1.5rem;
border-radius: 20px;
}
.navbar .container {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* الشعار في المنتصف على الجوال */
.nav-brand {
order: 2;
margin: 0 auto;
flex: 0 0 auto;
}
/* زر القائمة على اليمين */
.nav-toggle {
display: flex;
order: 1;
margin-right: 0;
}
/* القائمة على اليسار */
/* استثناء قائمة الجوال من هذه القواعد */
.nav-menu-wrapper:not(.mobile-menu-wrapper) {
order: 3;
position: absolute;
top: 100%;
right: 0;
left: 0;
background: #FFFFFF;
border-radius: 20px;
margin-top: 0.5rem;
padding: 1rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;
opacity: 0;
visibility: hidden;
}
.navbar.active .nav-menu-wrapper:not(.mobile-menu-wrapper) {
max-height: 80vh;
opacity: 1;
visibility: visible;
overflow-y: auto;
}
/* إخفاء زر تسجيل المستفيدين من الشريط العلوي على الموبايل */
.nav-register-btn {
display: none !important;
}
/* إظهار زر تسجيل المستفيدين في القائمة المنسدلة على الموبايل فقط */
.nav-menu-mobile-register {
width: 100%;
margin-top: 0.5rem;
display: block !important;
}
.nav-mobile-divider {
display: block !important;
}
.nav-mobile-register-item {
width: 100%;
list-style: none;
}
.nav-mobile-register-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
color: var(--text-primary, #FFFFFF);
text-decoration: none;
border-radius: 12px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s ease;
width: 100%;
}
.nav-mobile-register-btn:hover {
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 1);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.3);
}
.nav-mobile-register-btn i {
font-size: 0.9rem;
}
.nav-mobile-divider {
display: block !important;
margin: 1rem 0;
}
.hero {
padding-top: 12rem;
}
.hero .container {
grid-template-columns: 1fr;
text-align: center;
display: flex;
flex-direction: column;
}
.hero-image {
order: 1;
height: 300px;
margin-bottom: 2rem;
}
.hero-content {
order: 2;
}
.hero-title {
font-size: 2.5rem;
}
.hero-social-links {
gap: 0.75rem;
margin-top: 1.5rem;
}
.social-link {
width: 45px;
height: 45px;
font-size: 1.1rem;
}
.about-section {
padding: 4rem 0;
}
.about-header {
margin-bottom: 3rem;
}
.about-main-title {
font-size: 3rem;
}
.about-main-content {
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: stretch;
}
.about-text-content {
order: 2 !important;
margin-top: 2rem !important;
padding-top: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.about-image-wrapper {
order: 1 !important;
margin-bottom: 2rem !important;
padding-bottom: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.about-subtitle {
font-size: 1.75rem;
}
.about-description {
font-size: 1rem;
padding-right: 0;
padding-top: 0;
margin-top: 0;
border-right: none;
border-bottom: 3px solid rgba(95, 179, 142, 0.2);
padding-bottom: 1.5rem;
margin-bottom: 2rem;
}
.about-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-item {
padding: 1.5rem;
gap: 1rem;
}
.stat-number {
font-size: 2rem;
}
.stat-label {
font-size: 1rem;
}
.stat-number {
font-size: 1.75rem;
}
.about-features-grid {
grid-template-columns: 1fr;
gap: 1.25rem;
margin-bottom: 2rem;
}
.about-features-section {
margin-top: 2rem;
margin-bottom: 2rem;
}
.about-features-header {
margin-bottom: 1rem;
}
.about-features-title {
font-size: 1.1rem;
padding: 0.4rem 0.75rem;
}
.about-features-title i {
font-size: 0.9rem;
}
.about-features-description {
font-size: 0.85rem;
}
.feature-card {
padding: 1.5rem;
}
.about-image-wrapper {
margin-bottom: 2.5rem;
margin-top: 0; /* إزالة margin-top السالب لمنع التداخل مع النص */
padding-bottom: 0;
}
.about-image-container {
max-width: 100%;
height: auto;
min-height: 300px; /* تصغير من 350px إلى 300px */
margin-bottom: 0;
}
.image-frame {
height: auto;
min-height: 300px; /* تصغير من 350px إلى 300px */
}
.about-image {
height: auto;
min-height: 300px; /* تصغير من 350px إلى 300px */
}
.image-decoration {
display: none;
}
.achievement-card {
bottom: 1.5rem;
left: 1.5rem;
right: 1.5rem;
padding: 1.25rem 1.5rem;
}
.about-text-content {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative !important;
z-index: 1 !important;
/* إزالة تأثيرات الحركة على الموبايل */
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.about-text-content.animated {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.about-subtitle-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
.about-subtitle-wrapper.animated {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.about-description {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
position: relative !important;
top: 0 !important;
padding-top: 0 !important;
margin-top: 0 !important;
overflow: visible !important;
height: auto !important;
max-height: none !important;
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
}
.about-description.animated {
opacity: 1 !important;
transform: none !important;
transition: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
.about-description::before {
display: none !important;
height: 0 !important;
width: 0 !important;
}
/* ضمان ظهور جميع الأسطر */
.about-description p,
.about-description div,
.about-description span,
.about-description br {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
}
.about-description br {
display: block !important;
content: "" !important;
margin: 0 !important;
padding: 0 !important;
}
.about-cta-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
}
.about-cta-wrapper.animated {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.about-image-wrapper {
opacity: 1 !important;
transform: none !important;
transition: none !important;
will-change: auto !important;
position: relative !important;
z-index: 2 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin-top: 0 !important;
margin-bottom: 2.5rem !important;
}
.about-image-wrapper.animated {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
/* منع أي تأثيرات scroll على قسم من نحن */
.about-section {
position: static !important;
transform: none !important;
will-change: auto !important;
overflow: visible !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
}
.about-main-content {
position: relative !important;
transform: none !important;
will-change: auto !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
align-items: stretch !important;
}
.about-main-content .about-image-wrapper {
align-self: stretch !important;
margin-top: 0 !important;
margin-bottom: 2rem !important;
order: 1 !important;
position: relative !important;
z-index: 1 !important;
}
.about-main-content .about-text-content {
order: 2 !important;
margin-top: 0 !important;
position: relative !important;
z-index: 1 !important;
}
.about-content {
position: relative !important;
transform: none !important;
will-change: auto !important;
top: 0 !important;
}
/* منع أي تأثيرات sticky أو fixed أو parallax */
.about-text-content {
position: relative !important;
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
transform: translateY(0) translateX(0) !important;
will-change: auto !important;
z-index: 1 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.about-description,
.about-subtitle-wrapper,
.about-cta-wrapper {
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: translateY(0) translateX(0) !important;
will-change: auto !important;
}
.about-image-wrapper {
position: relative !important;
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
transform: translateY(0) translateX(0) !important;
will-change: auto !important;
z-index: 1 !important;
margin-top: 0 !important;
margin-bottom: 2rem !important;
order: 1 !important;
overflow: visible !important;
}
.about-text-content {
position: relative !important;
top: 0 !important;
bottom: auto !important;
left: 0 !important;
right: 0 !important;
transform: translateY(0) translateX(0) !important;
will-change: auto !important;
z-index: 1 !important;
margin-top: 0 !important;
padding-top: 0 !important;
order: 2 !important;
overflow: visible !important;
}
/* منع أي ارتفاع للمحتوى النصي فوق الصورة */
.about-text-content * {
position: relative !important;
top: auto !important;
bottom: auto !important;
transform: translateY(0) translateX(0) !important;
}
/* ضمان عدم تداخل الصورة والنص */
.about-image-container,
.about-image,
.image-frame {
position: relative !important;
top: 0 !important;
transform: translateY(0) translateX(0) !important;
will-change: auto !important;
}
.about-description {
margin-top: 0 !important;
padding-top: 0 !important;
}
.achievement-icon {
width: 60px;
height: 60px;
font-size: 1.75rem;
}
.achievement-number {
font-size: 2rem;
}
.about-cta-btn {
width: 100%;
justify-content: center;
padding: 1.1rem 2.5rem;
}
.news-grid {
grid-template-columns: 1fr;
}
.footer-main {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-bottom-content {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.footer-copyright {
align-items: center;
text-align: center;
}
.footer-scroll-top {
order: -1;
align-self: center;
}
}
/* زر موقع الجمعية في الفوتر - خلفية من خلفية الفوتر */
.footer-location-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.875rem 1.75rem;
margin-top: 1.5rem;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.95);
color: var(--footer-link-hover-color, var(--text-primary, white));
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
border: 2px solid rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.4);
}
.footer-location-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.25),
transparent
);
transition: left 0.6s ease;
}
.footer-location-btn:hover::before {
left: 100%;
}
.footer-location-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 8px 25px rgba(0, 0, 0, 0.3),
0 0 20px rgba(var(--footer-icon-color-rgb, 95, 179, 142), 0.3);
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.98);
border-color: var(--footer-icon-color, var(--primary-color));
}
.footer-location-btn i:first-child {
font-size: 1.2rem;
transition: transform 0.4s ease;
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}
.footer-location-btn:hover i:first-child {
transform: scale(1.2) rotate(-10deg);
}
.footer-location-btn i:last-child {
font-size: 0.85rem;
opacity: 0.8;
transition: all 0.4s ease;
}
.footer-location-btn:hover i:last-child {
opacity: 1;
transform: translateX(3px);
}
.footer-location-btn span {
font-weight: 600;
letter-spacing: 0.5px;
transition: all 0.4s ease;
}
.footer-location-btn:hover span {
letter-spacing: 1px;
}
/* Responsive لزر موقع الجمعية */
@media (max-width: 768px) {
.footer-location-btn {
width: 100%;
justify-content: center;
padding: 1rem 2rem;
font-size: 0.95rem;
}
}
/* قسم مشاريعنا */
.projects-section {
padding: 8rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
padding-bottom: 4rem; /* إضافة padding-bottom لإنشاء مساحة للفاصل */
margin-top: 0;
background:
radial-gradient(ellipse at top, rgba(31, 107, 79, 0.08) 0%, transparent 50%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين الأقسام */
.projects-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.projects-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(95, 179, 142, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(31, 107, 79, 0.12) 0%, transparent 50%);
animation: backgroundMove 30s ease-in-out infinite;
z-index: 0;
}
.projects-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 2rem;
}
.project-card {
position: relative;
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), var(--card-bg-opacity, 0.1));
backdrop-filter: blur(20px);
border-radius: 30px;
border: 2px solid rgba(95, 179, 142, 0.25);
box-shadow:
0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2),
0 0 0 1px rgba(255, 255, 255, 0.15),
inset 0 0 0 1px rgba(95, 179, 142, 0.15);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(60px) scale(0.95);
animation: projectCardEntry 0.8s ease-out forwards;
transform-style: preserve-3d;
cursor: pointer;
}
.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5) { animation-delay: 0.5s; }
.project-card:nth-child(6) { animation-delay: 0.6s; }
.project-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.1) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 5s infinite;
z-index: 0;
}
.project-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(95, 179, 142, 0.15) 0%,
transparent 50%,
rgba(31, 107, 79, 0.15) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 0;
border-radius: 30px;
}
.project-card:hover::after {
opacity: 1;
}
.project-card:hover {
transform: translateY(-20px) scale(1.03);
box-shadow:
0 35px 90px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.3),
0 0 0 1px rgba(255, 255, 255, 0.25),
inset 0 0 0 1px rgba(95, 179, 142, 0.4),
0 0 60px rgba(95, 179, 142, 0.5),
0 0 100px rgba(95, 179, 142, 0.2);
border-color: rgba(95, 179, 142, 0.6);
}
.project-image-wrapper {
position: relative;
width: 100%;
height: 280px;
overflow: hidden;
border-radius: 30px 30px 0 0;
}
.project-image {
width: 100%;
height: 100%;
object-fit: cover;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: high-quality;
-ms-interpolation-mode: nearest-neighbor;
}
/* إزالة تأثير التكبير عند hover */
.project-card:hover .project-image {
transform: none;
}
.project-image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.3) 100%
);
opacity: 0;
transition: opacity 0.6s ease;
z-index: 1;
}
.project-card:hover .project-image-overlay {
opacity: 1;
}
.project-content {
padding: 2.5rem;
position: relative;
z-index: 2;
}
.project-name {
font-size: 1.85rem;
font-weight: 700;
color: var(--sec-card-title, var(--card-title-color, var(--text-primary, white))) !important;
margin-bottom: 1rem;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--sec-card-title, var(--card-title-color, var(--text-primary, white))) !important;
background-clip: unset !important;
transition: all 0.6s ease;
line-height: 1.4;
}
.project-card:hover .project-name {
transform: scale(1.05);
}
.project-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.9;
margin-bottom: 2rem;
transition: all 0.6s ease;
}
.project-card:hover .project-description {
color: rgba(255, 255, 255, 0.95);
}
.project-donate-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--sec-button, var(--gradient-1));
color: #fff;
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow:
0 8px 25px rgba(95, 179, 142, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
}
.project-donate-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transition: left 0.6s ease;
}
.project-donate-btn:hover::before {
left: 100%;
}
.project-donate-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 12px 35px rgba(95, 179, 142, 0.6),
inset 0 0 0 1px rgba(255, 255, 255, 0.3);
background: var(--sec-button, var(--gradient-1));
filter: brightness(0.92);
}
.project-donate-btn i {
font-size: 1.1rem;
transition: transform 0.4s ease;
}
.project-donate-btn:hover i {
transform: scale(1.2) rotate(-10deg);
}
/* زر التفاصيل للمشاريع */
.project-details-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
color: var(--text-primary, white);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
font-size: 1.05rem;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.project-details-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.2),
transparent
);
transition: left 0.5s ease;
}
.project-details-btn:hover::before {
left: 100%;
}
.project-details-btn:hover {
transform: translateY(-3px) scale(1.05);
box-shadow:
0 12px 35px rgba(95, 179, 142, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(95, 179, 142, 0.5);
}
.project-details-btn i {
font-size: 1.1rem;
transition: transform 0.4s ease;
}
.project-details-btn:hover i {
transform: scale(1.2) rotate(-10deg);
}
.project-decoration {
position: absolute;
top: 0;
right: 0;
width: 150px;
height: 150px;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.2) 0%,
transparent 70%
);
border-radius: 0 30px 0 100%;
z-index: 0;
opacity: 0;
transition: opacity 0.6s ease;
}
.project-card:hover .project-decoration {
opacity: 1;
}
.project-hover-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.3) 0%,
transparent 70%
);
border-radius: 50%;
transition: all 0.8s ease;
z-index: 0;
}
.project-card:hover .project-hover-effect {
width: 400px;
height: 400px;
opacity: 0.5;
}
@keyframes projectCardEntry {
from {
opacity: 0;
transform: translateY(60px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive للمشاريع */
@media (max-width: 768px) {
.projects-section {
padding: 5rem 0;
}
.projects-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
.project-card {
border-radius: 25px;
}
.project-image-wrapper {
height: 220px;
border-radius: 25px 25px 0 0;
}
.project-content {
padding: 2rem 1.5rem;
}
.project-name {
font-size: 1.5rem;
}
.project-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.project-donate-btn {
padding: 0.875rem 1.75rem;
font-size: 1rem;
width: 100%;
justify-content: center;
}
}
/* تحسينات إضافية لقسم الخدمات */
@media (max-width: 768px) {
.services-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
.service-card {
padding: 2.5rem 2rem;
min-height: auto;
border-radius: 25px;
}
.service-icon-wrapper {
width: 80px;
height: 80px;
min-height: 80px;
max-height: 80px;
margin-bottom: 1.5rem;
flex-shrink: 0;
}
.service-icon-wrapper i {
font-size: 2rem;
line-height: 1;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.service-title {
font-size: 1.1rem;
line-height: 1.3;
}
.service-description {
font-size: 1rem;
}
}
/* قسم ماذا قالوا عنا */
.testimonials-section {
padding: 8rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
padding-bottom: 4rem; /* إضافة padding-bottom لإنشاء مساحة للفاصل */
margin-top: 0;
background:
radial-gradient(ellipse at center, rgba(31, 107, 79, 0.06) 0%, transparent 70%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين الأقسام */
.testimonials-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.testimonials-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 50% 50%, rgba(95, 179, 142, 0.08) 0%, transparent 60%);
animation: backgroundMove 35s ease-in-out infinite;
z-index: 0;
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
max-width: 1400px;
margin: 0 auto;
position: relative;
z-index: 1;
padding: 0 2rem;
}
.testimonial-card {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 25px;
border: 2px solid rgba(95, 179, 142, 0.25);
box-shadow:
0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.15),
0 0 0 1px rgba(255, 255, 255, 0.15),
inset 0 0 0 1px rgba(95, 179, 142, 0.15);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(60px) scale(0.95);
animation: testimonialCardEntry 0.8s ease-out forwards;
transform-style: preserve-3d;
padding: 2.5rem;
}
.testimonial-card:nth-child(1) { animation-delay: 0.1s; }
.testimonial-card:nth-child(2) { animation-delay: 0.2s; }
.testimonial-card:nth-child(3) { animation-delay: 0.3s; }
.testimonial-card:nth-child(4) { animation-delay: 0.4s; }
.testimonial-card::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
45deg,
transparent 30%,
rgba(255, 255, 255, 0.08) 50%,
transparent 70%
);
transform: rotate(45deg);
animation: shimmer 6s infinite;
z-index: 0;
}
.testimonial-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 30px 80px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.2),
inset 0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 50px rgba(95, 179, 142, 0.4);
border-color: rgba(95, 179, 142, 0.5);
}
.testimonial-content {
position: relative;
z-index: 2;
margin-bottom: 2rem;
}
.testimonial-quote-icon {
position: absolute;
top: -10px;
right: -10px;
width: 60px;
height: 60px;
background: var(--gradient-1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.2;
z-index: 0;
}
.testimonial-quote-icon i {
font-size: 1.5rem;
color: var(--text-primary, white);
}
.testimonial-text {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.9;
margin: 0;
position: relative;
z-index: 1;
font-style: italic;
transition: all 0.6s ease;
}
.testimonial-card:hover .testimonial-text {
color: rgba(255, 255, 255, 1);
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
position: relative;
z-index: 2;
padding-top: 1.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.testimonial-image-wrapper {
flex-shrink: 0;
width: 70px;
height: 70px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(95, 179, 142, 0.3);
transition: all 0.6s ease;
}
.testimonial-card:hover .testimonial-image-wrapper {
border-color: rgba(95, 179, 142, 0.6);
transform: scale(1.1);
}
.testimonial-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.testimonial-card:hover .testimonial-image {
transform: scale(1.1);
}
.testimonial-default-icon {
width: 100%;
height: 100%;
background: var(--gradient-1);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.6s ease;
}
.testimonial-default-icon i {
font-size: 2rem;
color: var(--text-primary, white);
opacity: 0.8;
}
.testimonial-card:hover .testimonial-default-icon {
opacity: 1;
transform: scale(1.1);
}
.testimonial-author-info {
flex: 1;
}
.testimonial-name {
font-size: 1.2rem;
font-weight: 700;
color: var(--sec-card-title, #ffffff) !important;
margin: 0;
transition: all 0.6s ease;
}
.testimonial-card .testimonial-name,
.testimonial-author .testimonial-name,
.testimonial-author-info .testimonial-name {
color: var(--sec-card-title, #ffffff) !important;
}
.testimonial-card:hover .testimonial-name {
transform: scale(1.05);
color: var(--sec-card-title, #ffffff) !important;
}
.testimonial-decoration {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--gradient-1);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.6s ease;
z-index: 1;
}
.testimonial-card:hover .testimonial-decoration {
transform: scaleX(1);
}
.testimonial-hover-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
background: radial-gradient(
circle,
rgba(95, 179, 142, 0.2) 0%,
transparent 70%
);
border-radius: 50%;
transition: all 0.8s ease;
z-index: 0;
}
.testimonial-card:hover .testimonial-hover-effect {
width: 300px;
height: 300px;
opacity: 0.6;
}
@keyframes testimonialCardEntry {
from {
opacity: 0;
transform: translateY(60px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive للشهادات */
@media (max-width: 768px) {
.testimonials-section {
padding: 5rem 0;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
.testimonial-card {
padding: 2rem 1.5rem;
border-radius: 20px;
}
.testimonial-text {
font-size: 1rem;
}
.testimonial-image-wrapper {
width: 60px;
height: 60px;
}
.testimonial-name {
font-size: 1.1rem;
}
}
/* المركز الإعلامي */
.media-section {
padding: 8rem 0;
padding-top: 4rem; /* إضافة padding-top لإنشاء مساحة للفاصل */
padding-bottom: 4rem; /* إضافة padding-bottom لإنشاء مساحة للفاصل */
margin-top: 0;
background:
radial-gradient(ellipse at center, rgba(31, 107, 79, 0.05) 0%, transparent 70%),
transparent;
position: relative;
overflow: visible; /* تغيير إلى visible للسماح بالفاصل */
z-index: 1;
}
/* فاصل أبيض جميل بين الأقسام */
.media-section::after {
content: '';
position: absolute;
top: -40px; /* وضع الفاصل في المنتصف بين القسمين */
left: 0;
right: 0;
height: 80px; /* ارتفاع الفاصل الأبيض */
background: linear-gradient(
180deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 20%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.12) 80%,
transparent 100%
);
z-index: 2; /* أعلى من الخلفية */
pointer-events: none;
}
.media-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 30%, rgba(95, 179, 142, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(31, 107, 79, 0.08) 0%, transparent 50%);
animation: backgroundMove 40s ease-in-out infinite;
z-index: 0;
}
.media-subtitle {
font-size: 1.75rem;
font-weight: 700;
color: var(--text-primary, white);
margin-bottom: 2rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: var(--gradient-1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.media-videos-section {
margin-bottom: 5rem;
position: relative;
z-index: 1;
}
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.video-card {
position: relative;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(20px);
border-radius: 20px;
border: 2px solid rgba(95, 179, 142, 0.25);
box-shadow:
0 15px 50px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.15),
0 0 0 1px rgba(255, 255, 255, 0.15);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;
opacity: 0;
transform: translateY(60px) scale(0.95);
animation: videoCardEntry 0.8s ease-out forwards;
}
.video-card:nth-child(1) { animation-delay: 0.1s; }
.video-card:nth-child(2) { animation-delay: 0.2s; }
.video-card:nth-child(3) { animation-delay: 0.3s; }
.video-card:nth-child(4) { animation-delay: 0.4s; }
.video-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow:
0 25px 70px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.25),
0 0 0 1px rgba(255, 255, 255, 0.2),
0 0 40px rgba(95, 179, 142, 0.4);
border-color: rgba(95, 179, 142, 0.5);
}
.video-thumbnail-wrapper {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.video-thumbnail {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.video-card:hover .video-thumbnail {
transform: scale(1.1);
}
.video-play-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70px;
height: 70px;
background: rgba(255, 0, 0, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.4s ease;
z-index: 2;
}
.video-play-overlay i {
font-size: 1.5rem;
color: var(--text-primary, white);
margin-left: 3px;
}
.video-card:hover .video-play-overlay {
transform: translate(-50%, -50%) scale(1.2);
background: rgba(255, 0, 0, 1);
box-shadow: 0 0 30px rgba(255, 0, 0, 0.6);
}
.video-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
}
.video-title {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-primary, white);
margin: 0;
padding: 1.5rem;
text-align: center;
transition: all 0.6s ease;
}
.video-card:hover .video-title {
color: var(--primary-color);
}
.media-slider-section {
position: relative;
z-index: 1;
}
.slides-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.slides-wrapper {
display: flex;
overflow: hidden;
border-radius: 25px;
box-shadow: 0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2);
}
.slide-item {
min-width: 100%;
position: relative;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.slide-link {
display: block;
width: 100%;
height: 100%;
}
.slide-image {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.slide-video-wrapper {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
}
.slide-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide-video-wrapper iframe {
width: 100%;
height: 100%;
border: none;
pointer-events: none;
}
.slide-video-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.3) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.slide-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
padding: 3rem 2rem 2rem;
color: var(--text-primary, white);
}
.slide-title {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-primary, white);
}
.slide-description {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
margin: 0;
line-height: 1.6;
}
.slide-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
background: rgba(var(--card-bg-color-rgb, 255, 255, 255), calc(var(--card-bg-opacity, 0.1) * 9));
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--primary-color);
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.slide-nav:hover {
background: white;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.slide-prev {
right: 1rem;
}
.slide-next {
left: 1rem;
}
.slide-indicators {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-top: 2rem;
position: relative;
z-index: 10;
}
.slide-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
}
.slide-indicator.active {
background: var(--primary-color);
border-color: var(--primary-color);
transform: scale(1.3);
}
.slide-indicator:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
@keyframes videoCardEntry {
from {
opacity: 0;
transform: translateY(60px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Responsive للمركز الإعلامي */
@media (max-width: 768px) {
.media-section {
padding: 5rem 0;
}
.videos-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 0 1rem;
}
.video-thumbnail-wrapper {
height: 180px;
}
.slide-image {
height: 300px;
}
.slide-content {
padding: 2rem 1.5rem 1.5rem;
}
.slide-title {
font-size: 1.4rem;
}
.slide-description {
font-size: 1rem;
}
.slide-nav {
width: 40px;
height: 40px;
font-size: 1rem;
}
.slide-prev {
right: 0.5rem;
}
.slide-next {
left: 0.5rem;
}
}
/* أقسام البانر */
.banner-section {
padding: 4rem 0;
position: relative;
overflow: hidden;
background: transparent;
}
.banner-wrapper {
position: relative;
border-radius: 25px;
overflow: hidden;
box-shadow:
0 20px 60px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.2),
0 0 0 1px rgba(255, 255, 255, 0.1);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner-wrapper:hover {
transform: translateY(-5px);
box-shadow:
0 30px 80px rgba(var(--primary-dark-rgb, 15, 61, 46), 0.3),
0 0 0 1px rgba(255, 255, 255, 0.15),
0 0 50px rgba(95, 179, 142, 0.3);
}
.banner-link {
display: block;
text-decoration: none;
color: inherit;
transition: all 0.6s ease;
}
.banner-content {
position: relative;
width: 100%;
}
.banner-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem;
font-weight: 700;
color: var(--text-primary, white);
text-align: center;
z-index: 3;
margin: 0;
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.5),
0 0 30px rgba(0, 0, 0, 0.3);
padding: 1rem 2rem;
border-radius: 15px;
backdrop-filter: blur(10px);
background-color: rgba(0, 0, 0, 0.3);
transition: all 0.6s ease;
}
/* إخفاء العنوان إذا كان فارغاً */
.banner-title:empty {
display: none;
}
.banner-wrapper:hover .banner-title {
transform: translate(-50%, -50%) scale(1.05);
text-shadow:
0 4px 20px rgba(0, 0, 0, 0.7),
0 0 40px rgba(95, 179, 142, 0.5);
}
.banner-image-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.banner-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: high-quality;
-ms-interpolation-mode: nearest-neighbor;
}
/* إزالة تأثير التكبير عند hover */
.banner-wrapper:hover .banner-image {
transform: none;
}
.banner-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2) 0%,
rgba(0, 0, 0, 0.4) 100%
);
z-index: 2;
transition: all 0.6s ease;
}
.banner-wrapper:hover .banner-overlay {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.3) 0%,
rgba(0, 0, 0, 0.5) 100%
);
}
/* خلفية بيضاء لأقسام البانر (مثل قسم من نحن) */
.banner-section-white {
background: #FFFFFF;
position: relative;
}
.banner-background-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 50%, rgba(95, 179, 142, 0.05) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(31, 107, 79, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 20%, rgba(168, 220, 195, 0.05) 0%, transparent 50%);
pointer-events: none;
z-index: 1;
}
.banner-section-white .banner-title {
color: var(--primary-dark);
text-shadow: none;
}
.banner-section-white .banner-wrapper {
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.1),
0 0 0 1px rgba(95, 179, 142, 0.2);
}
.banner-section-white .banner-wrapper:hover {
box-shadow:
0 30px 80px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(95, 179, 142, 0.3),
0 0 50px rgba(95, 179, 142, 0.2);
}
/* خلفية الموقع العامة لأقسام البانر */
.banner-section-site {
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.95);
background-attachment: fixed;
background-size: cover;
position: relative;
}
.banner-section-site .banner-title {
color: var(--text-primary);
text-shadow:
0 2px 10px rgba(0, 0, 0, 0.5),
0 0 20px rgba(95, 179, 142, 0.3);
}
/* Responsive لأقسام البانر */
@media (max-width: 768px) {
.banner-section {
padding: 3rem 0;
}
.banner-image-container {
height: 250px;
}
.banner-title {
font-size: 1.75rem;
padding: 0.75rem 1.5rem;
}
}
/* Animations for entrance effects */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Feature Cards Animation (أهدافنا) */
.about-features-grid .feature-card.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.about-features-grid .feature-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Vision & Mission Cards Animation */
.vision-mission-wrapper .vision-card.animate-on-scroll,
.vision-mission-wrapper .mission-card.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.vision-mission-wrapper .vision-card.animate-on-scroll.animated,
.vision-mission-wrapper .mission-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Services Cards Animation */
.services-grid .service-card.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.services-grid .service-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Projects Cards Animation */
.projects-grid .project-card.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.projects-grid .project-card.animate-on-scroll.animated {
opacity: 1;
transform: translateY(0);
}
/* Mobile optimizations */
@media (max-width: 768px) {
.about-features-grid .feature-card.animate-on-scroll,
.services-grid .service-card.animate-on-scroll,
.projects-grid .project-card.animate-on-scroll {
transition-duration: 0.5s;
}
.vision-mission-wrapper .vision-card.animate-on-scroll,
.vision-mission-wrapper .mission-card.animate-on-scroll {
transition-duration: 0.6s;
}
/* Reduce animation distance on mobile */
.about-features-grid .feature-card.animate-on-scroll,
.services-grid .service-card.animate-on-scroll,
.projects-grid .project-card.animate-on-scroll,
.vision-mission-wrapper .vision-card.animate-on-scroll,
.vision-mission-wrapper .mission-card.animate-on-scroll {
transform: translateY(20px);
}
}
/* ============================================
قوالب الهيرو الجديدة
============================================ */
/* قالب الفيديو الكامل */
.hero-template-video {
padding-top: 0;
}
.hero-template-video .hero-video-fullscreen {
z-index: -1;
width: 100% !important;
height: 100% !important;
min-width: 100%;
min-height: 100%;
max-width: none;
max-height: none;
object-fit: cover;
object-position: center;
/* إزالة أي filters قد تسبب الضبابية */
filter: none !important;
-webkit-filter: none !important;
/* تحسين الوضوح - استخدام الإعدادات الافتراضية */
image-rendering: auto;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;
/* تسريع العرض بدون تأثير على الجودة */
transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* تحسين جودة الفيديو على الشاشات عالية الدقة */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero-template-video .hero-video-fullscreen {
/* استخدام الإعدادات الافتراضية للوضوح */
image-rendering: auto;
-webkit-font-smoothing: subpixel-antialiased;
filter: none !important;
-webkit-filter: none !important;
}
}
.hero-template-video .hero-content-center {
text-align: center;
width: 100%;
max-width: 800px;
margin: 0 auto;
}
/* نص اسم الموقع في قالب الفيديو */
.hero-video-title-wrapper {
position: absolute;
bottom: 80px;
right: 0;
left: 0;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
padding: 0 2rem;
pointer-events: none;
}
.hero-video-title {
font-family: 'Cairo', sans-serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--hero-title-color, #ffffff);
text-align: center;
margin: 0;
padding: 1rem 2rem;
background: rgba(var(--primary-dark-rgb, 15, 61, 46), 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.1);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
line-height: 1.4;
letter-spacing: 0.5px;
max-width: 90%;
word-wrap: break-word;
animation: fadeInUp 0.8s ease-out;
}
/* نص بدون خلفية */
.hero-video-title.no-background {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
padding: 0.5rem 1rem !important;
box-shadow: none !important;
}
/* التأكد من إزالة الخلفية */
.hero-template-video .hero-video-title.no-background {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
padding: 0.5rem 1rem !important;
box-shadow: none !important;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-video-placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.98) !important;
color: var(--text-primary, white);
z-index: 0;
}
.hero-video-placeholder i {
font-size: 4rem;
margin-bottom: 1rem;
opacity: 0.7;
}
.hero-video-placeholder p {
font-size: 1.2rem;
opacity: 0.8;
}
/* قالب السلايدر */
.hero-template-slider {
padding-top: 0;
}
.hero-slider-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.hero-slider {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.hero-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1s ease-in-out;
z-index: 1;
}
.hero-slide.active {
opacity: 1;
z-index: 2;
}
.hero-slide-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--footer-bg-color-rgb, 15, 61, 46), 0.4) !important;
z-index: 1;
}
.hero-slide-content {
position: absolute;
bottom: 20%;
right: 10%;
left: 10%;
z-index: 2;
color: var(--text-primary, white);
text-align: right;
animation: slideContentFadeIn 1s ease-in-out;
}
.hero-slide-title {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 1rem;
color: var(--hero-title-color, #ffffff);
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-slide-description {
font-size: 1.2rem;
line-height: 1.6;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
@keyframes slideContentFadeIn {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* أزرار التنقل للسلايدر */
.hero-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.3);
color: var(--text-primary, white);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.hero-slider-nav:hover {
background: rgba(255, 255, 255, 0.3);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-50%) scale(1.1);
}
.hero-slider-prev {
right: 20px;
}
.hero-slider-next {
left: 20px;
}
.hero-slider-nav i {
font-size: 1.2rem;
}
/* المؤشرات */
.hero-slider-indicators {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.hero-slider-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.hero-slider-indicator:hover {
background: rgba(255, 255, 255, 0.6);
transform: scale(1.2);
}
.hero-slider-indicator.active {
background: white;
border-color: white;
width: 30px;
border-radius: 6px;
}
/* نص اسم الموقع في قالب الفيديو - الجوال */
@media (max-width: 768px) {
.hero-video-title-wrapper {
bottom: 40px;
padding: 0 1rem;
}
.hero-video-title {
font-size: 1.5rem;
padding: 0.75rem 1.5rem;
max-width: 95%;
}
.hero-video-title.no-background {
padding: 0.25rem 0.5rem !important;
}
.hero-video-contact-wrapper {
bottom: 10px;
padding: 0 1rem;
}
.hero-video-contact-button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
}
/* تحسينات للجوال */
@media (max-width: 768px) {
.hero-slide-content {
bottom: 15%;
right: 5%;
left: 5%;
}
.hero-slide-title {
font-size: 1.8rem;
}
.hero-slide-description {
font-size: 1rem;
}
.hero-slider-nav {
width: 40px;
height: 40px;
}
.hero-slider-prev {
right: 10px;
}
.hero-slider-next {
left: 10px;
}
.hero-slider-indicators {
bottom: 20px;
}
.hero-template-video .hero-content-center {
padding: 0 1rem;
}
.hero-video-title.no-background {
padding: 0.25rem 0.5rem !important;
}
.hero-video-contact-wrapper {
bottom: 10px;
padding: 0 1rem;
}
.hero-video-contact-button {
padding: 0.75rem 1.5rem;
font-size: 1rem;
}
}
/* تنسيق عناوين الصفحات المستقلة */
.page-title-main {
color: var(--text-primary) !important;
}
.page-content-text {
color: var(--text-secondary) !important;
}
.page-content-text h1,
.page-content-text h2,
.page-content-text h3,
.page-content-text h4,
.page-content-text h5,
.page-content-text h6 {
color: var(--text-primary) !important;
}
.page-content-text p,
.page-content-text div,
.page-content-text span,
.page-content-text li,
.page-content-text a {
color: var(--text-secondary) !important;
}
.page-content-text a:hover {
color: var(--primary-color) !important;
}