/* أنماط CSS العامة */
        /* تأكد من أن هذه المتغيرات موجودة في كل الصفحات */
:root {
    --primary-color: #1a4b8c;
    --secondary-color: #e63946;
    --accent-color: #2a9d8f;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    --text-color: #333;
    --body-bg: #f5f7fa;
    --card-bg: #c7cdd6;
    --border-color: #dee2e6;
	--success-color: #27ae60;
	--warning-color: #f39c12;
	--danger-color: #e74c3c;

 /* التدرجات */
  --gradient-primary: linear-gradient(135deg, #3498db, #2c3e50);
  --gradient-success: linear-gradient(135deg, #27ae60, #2ecc71);
  
  /* الظلال */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
  --shadow-lg: 0 8px 16px rgba(0,0,0,0.2);
  
  /* الزوايا */
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
  
  /* المسافات */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* الخطوط */
  --font-family-primary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-family-arabic: 'Amiri', 'Lateef', 'Noto Sans Arabic', serif !important;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  
  /* التحريك */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
}

[dir=rtl] .backgrounds::before {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.95) 100%);
}
[dir=ltr] .backgrounds::before {
  background: linear-gradient(270deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.95) 100%);
}
[dark=on] .backgrounds::before {
  background: rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] {
    --primary-color: #2c5aa0;
    --secondary-color: #f0545f;
    --accent-color: #3bb5a8;
    --light-color: #1a1a1a;
    --dark-color: #f8f9fa;
	--gray-color: #6c757d;
    --text-color: #f0f0f0;
    --body-bg: #121224;
    --card-bg: #16213e;
    --border-color: #2d3748;
}

	/* إعادة تعيين أساسي */
* {
	margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Amiri, droid, Arial, Helvetica, Tahoma, Geneva, Verdana, sans-serif, 'Segoe UI';
	}

	/* تطبيق المتغيرات على العناصر */
	body {
			/* font-family: droid !important; */
		font-family: 'Amiri', 'Lateef', serif !important;;
		direction: rtl;
		font-size: 15px;
		background-color: var(--body-bg);
			/* color: var(--text-color); */
		line-height: 1.3;
		transition: background-color 0.3s ease, color 0.3s ease;
		}
		
		.container {
			/* background: url("assets/images/bg.jpg") no-repeat center center / cover; */
			
			display: flex;
			flex-direction: column;
			min-height: 100vh;
			max-width: 1500px;
			font-family: droid, Arial, Helvetica, sans-serif;
			font-size: 16px;
			/* font-size-adjust: 0.7; */
			font-size-adjust:inherit;
            margin: 0 auto;
            padding: 5px;
			/* padding: 5px 8px; */
			
        }
		
			/* أنماط الرأس */
        .header- {
            
			display: flex;
            justify-content: space-between;
            /* align-items: center; */
			text-align: center;
            /* padding: 1rem 1rem; */
			/* background-color: var(--primary-color); */
			background: linear-gradient(135deg, #1a2a6c, #004e92);
			color: white;
            border-bottom: 5px solid #ecbe08;
            /* margin-bottom: 10px; */
			/* margin-bottom: 30px; */
			box-shadow: var(--box-shadow);
			/* font:neosans, sans-serif; */
        }
		
		.header {
            
			
			/* background-color: var(--primary-color); */
			background: linear-gradient(135deg, #1a2a6c, #004e92);
			color: white;
            
        }
		
		.grid-container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }

		.content-area,
		.page-content,
		.card,
		.service-card,
		.news-card,
		.program-card,
		.vision-box,
		.mission-box {
			background-color: var(--card-bg);
			transition: background-color 0.3s ease;
		}

		/* التأكد من أن الوضع الليلي يعمل مع النظامين */
		body.dark-mode {
			background-color: var(--body-bg);
			color: var(--text-color);
		}

		[data-theme="dark"] body.dark-mode {
			background-color: var(--body-bg);
			color: var(--text-color);
		}
		
		.details p.dark-mode {
		  padding: 1rem;
		  margin: 0;
		  background-color: #151133;
		}
		
		 [data-theme="dark"] .details p.dark-mode {
		  padding: 1rem;
		  margin: 0;
		  background-color: #151133;
		}



		/* body { */
			/* font-family: 'Segoe UI', Almarai, Tahoma, Geneva, Verdana, sans-serif; */
			/* background-color: */
			/* background-image: linear-gradient(to right, #d1bd04, #0000ff); */
			/* var(--body-bg, #b1b2ba); */
			/* color: var(--text-color); */
			/* line-height: 1.6; */
			/* transition: var(--transition); */
		/* } */
		      
        
		ul:nth-of-type(1) {
			list-style-position: inside;
			padding: 0;
			border-left: solid 2px blue;
		}

		ul:nth-of-type(2) {
			list-style-position: outside;
			padding: 0;
			border-left: solid 2px blue;
		}

        container.dark-mode {
			background-color: var(--body-bg);
			color: var(--text-color);
		}
        
        .logo h1 {
            color: #FFFFFF;
            margin-bottom: 0.5px;
			font-size: 1.8rem;
        }
		.logo img {
			background-color:#f0f0ea;
			max-width: 100%;
			height: auto;
			max-height: 100px;
			margin-bottom: 5px;
}
        
        .logo p {
            color: #FFFFFF;
            font-size: 1rem;
			opacity: 1.9;
        }
        
        .dark-mode .logo p {
            color: #ccc;
        }
        
        .header-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .theme-toggle {
            background: none;
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            cursor: pointer;
            /* display: flex; */
            /* align-items: center; */
            /* justify-content: center; */
            transition: all 0.3s ease;
        }
        
        .theme-toggle:hover {
            background: #1e3a6b;
            transform: scale(1.05);
			
        }
        
        .language-switcher select {
            padding: 0.5rem;
            border-radius: var(--border-radius);
            border: none;
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
			cursor: pointer;
        }
        
        .dark-mode .language-switcher select {
            background: #2d3748;
            color: #f0f0f0;
            border-color: #4a5568;
        }
		
		.SAU-main-header {
			border-bottom: 5px solid #32b2d0;
		}
		.SAU-top-header {
			border-bottom: 1px solid #ddd;
			padding: 12px 0;
			/*margin-bottom: 11px;*/
		}
		.SAU-top-header a {
			color: #0c6277;
			margin: 0 11px 0 0;
			font-size: 14px;
		}

		.lang {
			background: #0c6277;
			color: #fff !important;
			padding: 3px 6px;
			border-radius: 5px;
			font-family: verdana !important;
			font-size: 12px !important;
			float: left;
			margin: 0 15px 0 0 !important;
		}
		
		[data-theme="dark"] .SAU-main-header1 {
            background: #1a2a6c;
            color: white;
            padding: 0.3rem;
            margin-bottom: 5px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
		
		[data-theme="dark"] .SAU-logo a {
            
            color: white;
            
        }

		.SAU-top-header a:hover {
			color: #0c6277;
		}

		.SAU-top-header a i {
			font-size: 15px;
		}		
		.SAU-top-header a i {
			margin-left: 0;
		}

		.SAU-top-header a.help {
			color: #cfcfcf;
		}
		.SAU-menu-header {
			min-height:103px;
		}

		.SAU-logo a {
			font-family: Amiri, droid, Arial, Helvetica, sans-serif;
			color: #030bfc;
			font-size: calc(1rem + 1.5vw);/* font-size: 25px; */
			display: block;
		}
		.SAU-logo a span {
			display: inline-block;
			vertical-align: middle;
		}
		.SAU-logo a .SAU-logo-img {
			background: url(./images/logo/logo1.png) no-repeat center right transparent;
			height: 95px;
			width: 109px;
			background-size:100%;
		}
		.SAU-logo a .text {
			height: 63px;
			line-height: 59px;
		}
		.SAU-logo a .text {
			border-right: 1px solid #010340;
			padding-right: 14px;
			margin-right: 14px;
			font-size: calc(1.375rem + 0.5vw);
		}
	
		.SAU-logo h1 {
			font-family: Amiri, droid, Arial, Helvetica, sans-serif;
			color: #ecd57a;
			font-size: calc(1.375rem + 1.5vw);
			display: block;
		}

		.SAU-main-nav .inline-menu {
			margin-top: 37px;
		}

		.SAU-main-nav ul {
			float:left;
		}

		.SAU-main-nav ul li {
			font-family: droid;
			font-size: 17px;
			margin: 0 6px;
			border-bottom: 2px solid transparent;
		}
		.SAU-main-nav .inline-menu li:hover, .SAU-main-nav .inline-menu li:hover:active {
			border-color: #32b2d0;
		}

		.SAU-main-nav ul .new-user {
			border: 0;
		}
		.SAU-main-nav ul .new-user a {
			color: #fff;
			border: 0;
			background-color: #f9cc3e;
			border-radius: 5px;
			border-bottom: 2px solid #f6b61e;
			box-shadow: inset 0 -3px #f6b61e;
			position: relative;
			padding: 6px 20px;
			display: inline-block;
			line-height: 27px;
		}

		.level-header span a{
			display:block;  
			line-height:25px; 
			text-decoration:none; 
			text-align: right; 
			color:#010340; 
			margin:0 8px 0 0;
			padding:8px 10px 8px 8px;
			font-weight:normal !important;
			background:none;
		}

		.SAU-main-menu .first-level-ul .first-level-li > a span {
			display: block;
			padding: 0 12px;
			font-size:12px;
			border-left: 1px solid #b3b3b4;
		}

		.SAU-main-menu .first-level-ul .first-level-li:last-of-type  span{
			border:0 !important;
		}
        
		h2 {font-family:inherit;font-size: 1.5rem;font-weight:500;line-height:1.1;color:inherit;text-align: center; text-decoration:overline underline blue;}
			/* أنماط المحتوى الرئيسي */
        .main-content {
			/* display: flex;
			flex:1; */
            /* gap: 5px; */
			/*Added lately*/
			/* background: white; */
            padding: 5px;
			margin-bottom: 5px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            
        }
        
		
			/* ===== SIDEBAR - القائمة الجانبية ===== */
		.sidebar- {
            /*  flex: 0 0 250px; */
            background: #F0E68C;
            /* border-radius: 10px; */
            /* box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); */
			width: 220px;
			font-size: 16px;
			font-size-adjust: 0.53;
			/* height: 100vh; */
			/* transition: var(--transition); */
            /* position:fixed; */
			/* overflow-y: auto; */
			/* z-index: 1000; */
			position: sticky;
			top: 20px; /* المسافة من الأعلى */
			height: fit-content;
			max-height: calc(100vh - 40px); /* ارتفاع الشاشة ناقص هامش */
			overflow-y: auto; /* إمكانية التمرير إذا المحتوى طويل */
        }
        
		sidebar.dark-mode  {
			background:#62614F;
			color: rgba(255, 255, 255, 0.5);
		}
        
		sidebar-nav.dark-mode  {
			background:#62614F;
			color: rgba(255, 255, 255, 0.5);
		}
		
		.sidebar-nav ul {
            list-style: none;
			padding: 1rem 0;
			/* border-style:inset; */
        }
        
		.sidebar-nav li {
            margin-bottom: 2px;
			border-bottom:dotted #535357;
        }
        
		.nav-link {
			display: flex;
			align-items: center;
			padding: 0.8rem 1.5rem;
			color: var(--text-color);
			text-decoration: none;
			transition: var(--transition);
			border-right: 3px solid transparent;
		}

        .sidebar-nav a {
            display: flex;
            align-items: center;
            padding: 8px 20px;
            color: #09090a;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .dark-mode .sidebar-nav a {
            color: #f0f0f0;
        }
        
        .sidebar-nav a:hover, .sidebar-nav a.active {
            background: #0a0c93cc;
            color: white;
        }
        
        .sidebar-nav i {
            margin-left: 10px;
            width: 20px;
            text-align: center;
        }
		
		.nav-link:hover, .nav-link.active {
			background-color: rgba(26, 75, 140, 0.1);
			border-right-color: var(--primary-color);
			color: var(--primary-color);
		}

		.nav-link i {
			margin-left: 0.5rem;
			width: 20px;
			text-align: center;
		}

			/* زر القائمة للموبايل */
        .mobile-menu-btn- {
            display: none;
            position: fixed;
            top: 15px;
            right: 15px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 5px;
            padding: 10px 15px;
            font-size: 1.2rem;
            z-index: 999;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        }
		
		
			/* ===== CONTENT AREA - منطقة المحتوى ===== */    
        .content-area {
			/* background-color: #f0ecda; */
			background: linear-gradient(to right, #8d8fba 10%, #ebebeb 85%,#f5c36e  10%);
			opacity: 1.5;
            flex:1 0 0;
            /* background: white; */
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 5px;
			border-style:outset;
			border-color: #333;
        }
        
        .dark-mode .content-area {
            background: #16213e;
        }
		
		.page-content {
			background: linear-gradient(to top, #ccccff 0%, #ffffff 100%); 
			border-radius: var(--border-radius);
			padding: 2rem;
			box-shadow: var(--box-shadow);
			min-height: 500px;
		}


		.indexpage-content {
			position: relative;
			/* background-image: url("assets/images/bg.jpg"); */
			background: linear-gradient(to right, #f6f799 10%, #FFFFFF  20%, #8d8fba  100%);
			opacity: 1.5;
			border-radius: var(--border-radius);
			padding: 0.3rem;
			margin: 1px;
			box-shadow: var(--box-shadow);
			/* min-height: 500px; */
		}
		
		.dark-mode .indexpage-content {
            background: #16213e;
        }
		
		.dark-mode .admission-dates {
            width: 100%;
			border-collapse: collapse;
			margin: 2rem 0;
			background: #16213e;
			border-radius: var(--border-radius);
			overflow: hidden;
			box-shadow: var(--box-shadow);
        }
		
		.dark-mode .admission-dates tr:hover {
			background-color: #5e6369;
		}
		
		

			/* .indexpage-content::before {
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: white; 
			opacity: 1.2; 
			z-index: -1; 
} */
        
        .page-content h1 {
            color: #2c5aa0;
            margin-bottom: 20px;
            font-size: 2rem;
            border-bottom: 2px solid #eaeaea;
            padding-bottom: 10px;
			font-family:inherit;
        }
        
        .dark-mode .page-content h1 {
            border-bottom-color: #2d3748;
        }
        
		.dark-mode .page-content h2 {
			color: #9597f2;
            border-bottom-color: #2d3748;
        }
		
        .page-content h2 {
            color: #111;
            margin: 25px 0 15px;
            font-size: 1.5rem;
			font-family: inherit;
        }
        
        .page-content p {
            margin-bottom: 15px;
            line-height: 1.8;
        }
        
		.page-section {
			background-color: lightblue;
			padding: 20px;
			border: 1px solid navy;
			border-radius: var(--border-radius);
			margin-bottom: 1rem;
		}
			
		.button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            transition: var(--transition);
            font-family: inherit;
        }

        .button:hover {
            background-color: #8a672c;
		}
		
		.cta-button {
			display: inline-block;
			background-color: var(--secondary-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			margin-top: 1rem;
			transition: var(--transition);
		}

		.cta-button:hover {
			background-color: #c1121f;
		}
		
		    /* أنماط الأقسام الجديدة */
		.hero-section {
			position: relative;
			margin: 2rem 0;
		}

		.hero-image {
			width: 100%;
			/* height: 550px; */
			/* object-fit: cover; */
			border-radius: var(--border-radius);
		}
		
		.hero-img {
			width: 100%;
			height: 150px;
			text-align:center;
			
			/* object-fit: cover; */
			border-radius: var(--border-radius);
		}
		.dark-mode .hero-image {
            background: #1a1a2e;
        }

		.hero-text {
			position: absolute;
			top: 50%;
			right: 2rem;
			transform: translateY(-50%);
			/* background: rgba(255, 255, 255, 0.9); */
			padding: 2rem;
			border-radius: var(--border-radius);
			max-width: 500px;
		}
		.about-hero {
			display: flex;
			align-items: center;
			/* gap: 30px; */
			margin: 5px 0;
			padding: 15px;
			/* background: #f8f9fa; */
			border-radius: 5px;
			border-right: 2px solid #2c5aa0;
		}
        
        .dark-mode .about-hero {
            background: #1a1a2e;
        }
        
        .about-hero img {
            width: 100%;
			display: block; /* Ensure block-level behavior */
			margin-left: 50px;
			margin-right: 50px;
            /* height: 750px; */
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        
        .about-text {
            flex: 1;
			background:#d9dbde;
			padding: 5px;
        }
        
		 .dark-mode .about-text {
           background: #2d3748;
        }
        .achievements-list {
            list-style: square inside;
            margin: 20px 0;
        }
        
        .achievements-list li {
            padding: 10px 0;
            /* padding-right: 30px; */
            /* position: relative; */
            /* border-bottom: 1px dashed #eaeaea; */
        }
		
		ol {
            padding: 10px;
            padding-right: 30px;
           /*  position: block; */
            border-bottom: 1px dashed #eaeaea;
        }
        
        .dark-mode .achievements-list li {
            border-bottom-color: #2d3748;
        }
        
        .achievements-list li:before {
            content: "✓";
            color: #2c5aa0;
            font-weight: bold;
            position: absolute;
            right: 0;
        }
        
        .leadership-section {
            margin: 40px 0;
        }
      
			/* ===== CARDS - بطاقات المحتوى ===== */
        .cards {
            display: flex;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin: 2rem 0;
			text-align: center;
        }
		.indexcards {
            display: flex;
            /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */
            gap: 20px;
            margin: 1rem 0;
        }
		
		.cards-stats {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 40px;
            margin: 2rem 0;
        }
        
        .card {
            background: #c7d7f0 !important;
            border-radius: 10px;
            /* padding: 5px; */
			padding: 25px;
            text-align: center;
			font-size: 15px;
            /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); */
			box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
			border-top: 4px solid var(--primary-color);
        }
        
        .dark-mode #card1.card {
            
			border-style:inset;
			border-style:50px dotted yellow;
			background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }
		
		[data-theme="dark"] .card {
			background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) !important;
		}
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .leader-img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 15px;
            border: 3px solid #2c5aa0;
        }
        
        .card h3 {
            color: #2c5aa0;
            margin-bottom: 5px;
        }
        
        .card p {
            margin-bottom: 10px;
            font-size: 1.0rem;
        }
		
		.card i {
            font-size: 1.5rem;
            color: #1a2a6c;
            margin-bottom: 15px;
        }
		
			/* صفحة البرامج الأكاديمية */
		.programs-filter {
			margin: 2rem 0;
		}

		.filter-options {
			display: flex;
			gap: 0.5rem;
			flex-wrap: wrap;
			margin-top: 1rem;
		}

		.filter-btn {
			background: #e9ecef;
			border: none;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: var(--transition);
		}

		.filter-btn.active {
			background: var(--primary-color);
			color: white;
		}

		.programs-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 1.5rem;
			margin: 2rem 0;
		}

		.program-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border-left: 4px solid var(--accent-color);
			border-bottom: 4px solid var(--accent-color);
		}

		.program-details {
			display: flex;
			justify-content: space-between;
			margin: 1rem 0;
			font-size: 0.9rem;
			color: #666;
		}

		.program-link {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.6rem 1.2rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			transition: var(--transition);
		}

		.program-link:hover {
			background: #153a6d;
		}
        
        /* أنماط الأقسام المضافة */
		/* ===== ACCREDITATIONS - الاعتمادات ===== */
        /* .accreditations-section { */
            /* margin: 3rem 0; */
			/* padding: 2rem; */
			/* background: linear-gradient(135deg, #f8f9fa 50%, #e9ecef 50%); */
			/* border-radius: 15px; */
			/* border-right: 5px solid #2c5aa0; */
        /* } */
        
        .dark-mode .accreditations-section {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        }
        
        .accreditations-grid {
             display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1.5rem;
			margin-top: 0.5rem;
			padding: 1px;
			background: linear-gradient(to right, #f7d551 50%, #FFFFFF 51%, #031b8a 100%);
        }
        
        .accreditation-item {
            background: white;
            padding: 1.5rem;
            border-radius: 10px;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .dark-mode .accreditation-item {
            background: #1a1a2e;
        }
        
        .accreditation-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }
        
        .accreditation-icon {
            font-size: 2.5rem;
            color: #2c5aa0;
            margin-bottom: 1rem;
        }
        
        .accreditation-item h3 {
            color: #2c5aa0;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .accreditation-item p {
            color: #666;
            line-height: 1.6;
        }
        
        .dark-mode .accreditation-item p {
            color: #ccc;
        }
			/* ===== STATS SECTION - قسم الإحصائيات ===== */
        .stats-section {
            margin: 10px 0;
            padding: 5px;
            background: linear-gradient(135deg, #2c5aa0 0%, #1e3a6b 100%);
            color: white;
            border-radius: 15px;
            text-align: center;
			 
        }
		
		.dark-mode .stats-section{
			border-style:inset;
			border-left: 2px solid white;
		}
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin-top: 10px;
			
        }
        
        .stat-item {
            padding: 5px;
			background: #A4968E;
        }
        
        .stat-number {
			/* display: block; */
            font-size: 2.8rem;
            font-weight: bold;
            margin-bottom: 10px;
            color: #ff8000;
			
			
        }
        
        .stat-label {
            font-size: 1.1rem;
            opacity: 0.9;
			
        }
		
		[data-theme="dark"] .stat-label {
			color: #bddbf9;
            font-size: 0.9rem;
		}
        
			/* ===== VISION & MISSION - الرؤية والرسالة ===== */
        .vision-mission-section {
            margin: 5px 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr));
            gap: 10px;
			padding: 5px;
			border-left: 2px solid #2c5aa0;
        }
		
		.vision-mission-section1 {
            margin: 5px 0;
            display: flex;
			flex-direction: column;
            /* grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr)); */
            gap: 10px;
			padding: 5px;
			border-left: 2px solid #2c5aa0;
        }
        
        .vision-box, .mission-box {
            background: white;
            padding: 25px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            border-top: 4px solid #2c5aa0;
        }
        
        .dark-mode .vision-box, .dark-mode .mission-box {
            background: #16213e;
        }
        
        .vision-box h3, .mission-box h3 {
            color: #2c5aa0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .vision-box h3 i, .mission-box h3 i {
            margin-left: 10px;
        }
			/* ===== PARTNERS - الشركاء ===== */
        .partners-section {
            margin: 40px 0;
        }
        
        .partners-logos {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        
        .partner-logo {
            width: 120px;
            height: 80px;
            background: white;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 10px;
            transition: transform 0.3s ease;
        }
        
        .dark-mode .partner-logo {
            background: #1a1a2e;
        }
        
        .partner-logo:hover {
            transform: scale(1.05);
        }
        
        .partner-logo img {
            max-width: 100%;
            max-height: 100%;
            filter: grayscale(100%);
            transition: filter 0.3s ease;
        }
        
        .partner-logo:hover img {
            filter: grayscale(0%);
        }
		
		/* صفحة البرامج الأكاديمية */
/* .programs-filter { */
    /* margin: 2rem 0; */
/* } */

/* .filter-options { */
    /* display: flex; */
    /* gap: 1rem; */
    /* flex-wrap: wrap; */
    /* margin-top: 1rem; */
/* } */

		.filter-btn {
			background: #e9ecef;
			border: none;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: var(--transition);
		}

		.filter-btn.active {
			background: var(--primary-color);
			color: white;
		}

		.programs-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 1.5rem;
			margin: 2rem 0;
		}

		.program-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border-left: 4px solid var(--accent-color);
		}

		.program-details {
			display: flex;
			justify-content: space-between;
			margin: 1rem 0;
			font-size: 0.9rem;
			color: #666;
		}

		.program-link {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.6rem 1.2rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			transition: var(--transition);
		}

		.program-link:hover {
			background: #153a6d;
		}

		.features-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1rem;
			margin-top: 2rem;
		}

		.feature {
			display: grid;
			text-align: center;
			padding: 2rem;
		}

		.feature i {
			font-size: 2.5rem;
			color: var(--primary-color);
			margin-bottom: 1rem;
		}
				
				/* ===== SERVICES - الخدمات الإلكترونية ===== */
		.services-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
			gap: 2rem;
			margin: 2rem 0;
		}

		.service-card {
			background: white;
			padding: 2rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			text-align: center;
		}

		.service-icon {
			font-size: 3rem;
			color: var(--primary-color);
			margin-bottom: 1rem;
		}

		.service-features {
			text-align: right;
			margin: 1.5rem 0;
		}

		.service-features ul {
			list-style: none;
		}

		.service-features li {
			padding: 0.5rem 0;
			border-bottom: 1px solid #eee;
		}

		.service-link {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			transition: var(--transition);
		}

		.service-link:hover {
			background: #153a6d;
		}

		/* ===== NEWS - الأخبار ===== */
		.news-grid {
			display: grid;
			/* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
			gap: 1rem;
			margin: 1rem 0;
			padding: 10px 10px;
			border: 2px solid #6495ED;
			background: linear-gradient(to right, #f7d551 40%, #FFFFFF  50%, #031b8a  100%); 
		}

		 .dark-mode .news-grid .academic {
			
			border-style:inset;
			border-left-style: 2px solid white;
			border-right-style: hidden;
			border-top-style:hidden;
			border-bottom-style:2px solid white;
			 
		}

		.dark-mode .news-grid .events {
			
			border-style:inset;
			border-left-style: 2px solid white;
			border-right-style: hidden;
			border-top-style:hidden;
			border-bottom-style:2px solid white;
			 
		}
		.news-card {
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			overflow: hidden;
			transition: var(--transition);
			padding: 5px 5px;
		}

		.news-card:hover {
			transform: translateY(-5px);
		}

		.news-image img {
			width: 100%;
			height: 200px;
			object-fit: cover;
		}

		.news-content {
			padding: 1.5rem;
		}

		.news-date {
			color: #666;
			font-size: 0.9rem;
		}

		.events-list {
			border: 2px solid #2F4F4F;
			margin: 2rem 0;
		}

		.event-item {
			display: flex;
			align-items: center;
			gap: 1.5rem;
			background: linear-gradient(to right, #f7d551 5%, #FFFFFF  51%, #031b8a  120%);
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			margin-bottom: 1rem;
		}

		.event-date {
			text-align: center;
			background: var(--primary-color);
			color: white;
			padding: 1rem;
			border-radius: var(--border-radius);
			min-width: 80px;
		}

		.day {
			display: block;
			font-size: 1.5rem;
			font-weight: bold;
		}

		.month {
			font-size: 0.9rem;
		}

		.event-register {
			background: var(--accent-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			transition: var(--transition);
		}

		.event-register:hover {
			background: #21867a;
		}

		.read-more {
			color:  #1e90ff;
			text-decoration: none;
			font-weight: bold;
			display: inline-block;
			margin-top: 1rem;
		}
		.btnread-more {
			color:  white;
			text-decoration: none;
			font-weight: bold;
			display: inline-block;
			margin-top: 1rem;
		}

		.btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

		/* ===== ADMISSION - القبول والتسجيل ===== */
		.admission-steps {
			margin: 2rem 0;
		}

		.steps-timeline {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			background: linear-gradient(to right, #f7d551 50%, #FFFFFF  50%, #031b8a  50%);
			gap: 0.5rem;
			margin-top: 2rem;
		}

		.step {
			text-align: center;
			padding: 1.5rem;
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			position: relative;
		}

		.step-number {
			width: 40px;
			height: 40px;
			background: var(--primary-color);
			color: white;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 1rem;
			font-weight: bold;
		}

		.requirements {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			background: linear-gradient(to right, #f7d551 51%, #FFFFFF  50%, #97acf7  50%);
			gap: 0.5rem;
			margin: 2rem 0;
		}

		.requirement-card {
			background: white;
			padding: 0.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			border-left: 4px solid var(--accent-color);
		}

		.requirement-card ul {
			list-style: none;
			margin-top: 1rem;
		}

		.requirement-card li {
			padding: 0.5rem 0;
			border-bottom: 1px solid #1014f2;
		}

		.admission-dates {
			width: 100%;
			border-collapse: collapse;
			margin: 2rem 0;
			background: white;
			border-radius: var(--border-radius);
			overflow: hidden;
			box-shadow: var(--box-shadow);
		}

		.admission-dates th,
		.admission-dates td {
			padding: 1rem;
			text-align: right;
			border-bottom: 1px solid #eee;
		}

		.admission-dates th {
			background-color: var(--primary-color);
			color: white;
		}

		.admission-dates tr:hover {
			background-color: #f8f9fa;
		}



		/* صفحة الكليات */
		.colleges-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			background: linear-gradient(to right, #f7d551 50%, #FFFFFF  50%, #031b8a  50%);
			gap: 1rem;
			margin: 1rem 0;
		}
		.college-stats{
			
			background: #D3D4E3;
			border: 2px dashed blue;
			
		}

		.college-card {
			background: white;
			padding: 2rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			text-align: center;
			transition: var(--transition);
			font-family:'Segoe UI', Almarai, Tahoma, Geneva, Verdana, sans-serif;
		}

		.college-card:hover {
			transform: translateY(-5px);
		}

		.college-icon {
			font-size: 3rem;
			color: var(--primary-color);
			margin-bottom: 1rem;
		}

		.college-programs {
			margin: 1.5rem 0;
			text-align: right;
		}

		.college-programs ul {
			list-style: none;
			margin-top: 1rem;
		}

		.college-programs li {
			padding: 0.5rem 0;
			border-bottom: 1px solid #eee;
		}

		.college-link {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			margin-top: 1rem;
			transition: var(--transition);
		}

		.college-link:hover {
			background: #153a6d;
		}

		.stats-cards {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
			gap: 0.5rem;
			margin-top: 2rem;
		}
		.dark-mode .stat-card  {
			border:2px solid white;
		}

		.stat-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			text-align: center;
			font-family:'Segoe UI', Almarai, Tahoma, Geneva, Verdana, sans-serif !important;
		}

		.stat-card h3 {
			font-size: 2rem;
			color: var(--primary-color);
			margin-bottom: 0.5rem;
		}

		/* ===== RESEARCH - البحث العلمي ===== */
		.research-stats {
			text-align: center;
			margin: 2rem 0;
		}

		.centers-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 2rem;
			margin: 2rem 0;
		}

		.center-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
		}

		.center-projects {
			margin-top: 1rem;
		}

		.center-projects ul {
			list-style: none;
			margin-top: 0.5rem;
		}

		.center-projects li {
			padding: 0.3rem 0;
			border-bottom: 1px solid #eee;
		}

		/* ===== CONTACT - تواصل معنا ===== */
		.contact-methods {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 3rem;
			margin: 2rem 0;
		}

		.contact-details {
			margin-top: 2rem;
		}

		.contact-item {
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			margin-bottom: 2rem;
		}

		.contact-item i {
			font-size: 1.5rem;
			color: var(--primary-color);
			margin-top: 0.5rem;
		}

		.faq-list {
			margin: 2rem 0;
		}

		.faq-item {
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			margin-bottom: 1rem;
			overflow: hidden;
		}

		.faq-question {
			width: 100%;
			background: none;
			border: none;
			padding: 1.5rem;
			text-align: right;
			font-size: 1.1rem;
			cursor: pointer;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.faq-question:after {
			content: "+";
			font-size: 1.5rem;
		}

		.faq-question.active:after {
			content: "-";
		}

		.faq-answer {
			padding: 0 1.5rem;
			max-height: 0;
			overflow: hidden;
			transition: max-height 0.3s ease;
		}

		.faq-answer.active {
			padding: 0 1.5rem 1.5rem;
			max-height: 500px;
		}
		/* @media (min-width: 1200px)- { 
			.container {
			width: 1170px;
		  }
			
		}*/

		@media (min-width: 992px) {
		  .container {
			width: 970px;
		  }
		}

		@media (min-width: 768px) {
		  .container {
			width: 100%;
		  }
  
			.vision-mission-section {
				margin: 10px 0;
				/* display: grid; */
				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
				gap: 5px;
				padding:5px;
				border-left: 2px solid #2c5aa0;
			}
  
		}

		@media screen and (max-width: 580px) {
			.contact-methods {
				display: grid;
				/* grid-template-columns: 0.5fr auto; */
				grid-template-rows: 1fr 1fr;
				row-gap: 16px;
			}
			.about-hero .card {
				/* display: flex; */
				align-items: center;
				gap: 10px;
				margin: 15px 0;
				padding: 5px;
				background: #f8f9fa;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}

			.hero-img {
				width: 100%;
				display: grid;
				align-items: center;
				gap: 30px;
				margin: 15px 0;
				padding: 5px;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}	

			/* .card { */
				/* display: flex; */
				/* align-items: center; */
				/* gap: 30px; */
				/* margin: 15px 0; */
				/* padding: 5px; */
				/* background: #f8f9fa; */
				/* border-radius: 5px; */
				/* border-right: 2px solid #2c5aa0; */
			/* } */

			.vision-mission-section {
				margin: 10px 0;
				display: block;
				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
				gap: 5px;
				padding:5px;
				border-left: 2px solid #2c5aa0;
			}	
		
			.cards {
				/* display: flex; */
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 20px;
				margin: 2rem 0;
			}	
		
			.SAU-logo h1 {
				font-family: droid, Arial, Helvetica, sans-serif;
				color: #02066e;
				font-size: calc(1.375rem + 1.5vw);
				display: block;
			}
		
			.feature {
				text-align: center;
				padding: 0 1rem 0;
			}
		
			.indexcards {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				gap: 20px;
				margin: 1rem 0;
			
			}
			.footer-social {
				/*! display: flex; */
				gap: 10px;
				margin-top: 20px;
			}
			
		}
	
	
	
			/* التوجه الأفقي للهواتف */
        @media (max-height: 500px) and (orientation: landscape) {
            .sidebar-header {
                padding: 15px;
                height: 60px;
            }
            
            .sidebar-nav a {
                padding: 10px 15px;
            }
            
            .mobile-menu-btn {
                top: 10px;
                right: 10px;
                padding: 8px 10px;
            }
			
			.vision-mission-section {
				margin: 10px 0;
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
				gap: 5px;
				padding:5px;
				border-left: 2px solid #2c5aa0;
			}
		
			.cards {
				display: none;
				/* <!-- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); --> */
				/* <!-- gap: 20px; --> */
				/* <!-- margin: 2rem 0; --> */
			}
			
			.about-hero {
				display: block;
				margin: 15px 0;
				padding: 5px;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}

			.hero-img {
				width: 70%;
				
				align-items: center;
				gap: 30px;
				margin: 15px 0;
				padding: 5px;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}
			
			.feature {
				text-align: center;
				padding: 0 1rem 0;
			}
        }
		
		/* الهواتف الصغيرة (أقل من 480px) */
        @media (max-width: 480px) {
            .sidebar {
                width: 85%;
                max-width: 300px;
            }
            
            .main-content {
                padding: 70px 10px 10px;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .stat-card {
                padding: 20px;
            }
			
			.cards {
				display: none;
				grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
				gap: 20px;
				margin: 2rem 0;
			}
            
            .mobile-menu-btn {
                top: 10px;
                right: 10px;
                padding: 10px 12px;
            }
			
			.vision-mission-section {
				margin: 10px 0;
				/* display: grid; */
				/* grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr)); */
				/* gap: 15px; */
				padding: 15px;
				border-left: 2px solid #2c5aa0;
			}
			
			.fooder {
				width: inherit;
				min-height: inherit;
			}
			
			.about-hero .card {
				display: grid;
				align-items: center;
				gap: 30px;
				margin: 15px 0;
				padding: 5px;
				background: #f8f9fa;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}
			
			.about-hero {
				display: block;
				margin: 15px 0;
				padding: 5px;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}

			.hero-img {
				width: 70%;
				display: block;
				
				padding: 5px;
				border-radius: 5px;
				border-right: 2px solid #2c5aa0;
			}
			
			.SAU-logo a .text {
				border-right: 1px solid #010340;
				padding-right: 14px;
				margin-right: 14px;
				font-size: calc(0.95rem + 1.9vw);
			}
        }
		
		.contact-details {
			margin-top: 2rem;
		}

		.contact-item {
			display: flex;
			align-items: flex-start;
			gap: 1rem;
			margin-bottom: 2rem;
		}

		.contact-item i {
			font-size: 1.5rem;
			color: var(--primary-color);
			margin-top: 1.5rem;
		}
		.error-message {
			background-color: #fee;
			border: 1px solid #fcc;
			color: #c33;
			padding: 12px;
			border-radius: 5px;
			margin-bottom: 15px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}

		.contact-form-container {
			display: grid;
			
			/* align-items: flex-start;*/
			gap: 1rem;
			margin-bottom: 2rem;
			
		}
		/* صفحة بوابة الطالب */
		.login-container {
			display: flex;
			grid-template-columns: 1fr 1fr;
			gap: 3rem;
			margin: 1rem 0;
		}

		.login-form {
			justify-content: center;
			align-items: center;
			min-height: 100vh; /* Full viewport height */
		   
			border: 2px solid orange;
			background: white;
			padding: 2rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
		}

		.login-info-section {
			border: 1px solid blue;
			background: white;
			padding: 0.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
		}

		.form-options {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 1rem 0;
		}

		.remember-me {
			display: flex;
			align-items: center;
			gap: 0.5rem;
		}

		.forgot-password {
			color: var(--primary-color);
			text-decoration: none;
		}

		.login-btn {
			width: 100%;
			padding: 1rem;
			font-size: 1.1rem;
		}

		.login-divider {
			text-align: center;
			margin: 1.5rem 0;
			position: relative;
		}

		.login-divider:before {
			content: "";
			position: absolute;
			top: 50%;
			right: 0;
			left: 0;
			height: 1px;
			background: #ddd;
		}

		.login-divider span {
			background: white;
			padding: 0 1rem;
			position: relative;
			z-index: 1;
		}

		.social-login {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}

		.google-login, .microsoft-login {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.5rem;
			padding: 0.8rem;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			background: var(--primary-color);
			cursor: pointer;
			transition: var(--transition);
		}

		.google-login:hover, .microsoft-login:hover {
			/* background: ##191072; */
		}

		.services-list {
			margin: 2rem 0;
		}

		.service-item {
			display: flex;
			
			align-items: flex-start;
			gap: 1rem;
			margin-bottom: 1.5rem;
		}

		.service-item i {
			font-size: 1.5rem;
			color: var(--primary-color);
			margin-top: 0.5rem;
		}

		.new-student {
			background: #e7f3ff;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			margin-top: 2rem;
		}

		.contact-btn {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			margin-top: 1rem;
		}

		/* صفحة البحث العلمي */
		/*.research-stats {
			text-align: center;
			margin: 2rem 0;
		}*/

		/*.centers-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
			gap: 2rem;
			margin: 2rem 0;
		}*/

		/*.center-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
		}*/

		.center-projects {
			margin-top: 1rem;
		}

		.center-projects ul {
			list-style: none;
			margin-top: 0.5rem;
		}

		.center-projects li {
			padding: 0.3rem 0;
			border-bottom: 1px solid #eee;
		}

		.support-options {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
			gap: 1.5rem;
			margin: 2rem 0;
		}

		.support-card {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			text-align: center;
		}

		.support-link {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.6rem 1.2rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			margin-top: 1rem;
			transition: var(--transition);
		}

		.support-link:hover {
			background: #153a6d;
		}

		.publications-list {
			margin: 2rem 0;
		}

		.publication-item {
			background: white;
			padding: 1.5rem;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
			margin-bottom: 1rem;
		}

		.authors, .journal {
			color: #666;
			font-size: 0.9rem;
			margin: 0.5rem 0;
		}

		.publication-link {
			color: var(--primary-color);
			text-decoration: none;
			font-weight: bold;
		}

		.view-all {
			display: inline-block;
			background: var(--primary-color);
			color: white;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			text-decoration: none;
			margin-top: 1rem;
		}

		.support-option {
			text-align: center;
			padding: 2rem;
			background: white;
			border-radius: var(--border-radius);
			box-shadow: var(--box-shadow);
		}

		.support-option i {
			font-size: 2.5rem;
			color: var(--primary-color);
			margin-bottom: 1rem;
		}
		/* .login-container {
			display:flex;
			
			
		}  */

		.error-message i {
			font-size: 16px;
		}

        /* أنماط التذييل */
		.footer {
			background: #2c5aa0;
			color: white;
			margin-right: 250px;
			padding: 7px 7px 7px;
			margin-top: 5px;
			border-radius: 10px 10px 0 0;
			border: 2px solid white;
		}
        
        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
            gap: 30px;
            margin-bottom: 15px;
			/* border: 2px solid yellow; */
        }
        
        .footer-section h3 {
            margin-bottom: 15px;
            font-size: 1.2rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 10px;
			font-family:inherit;
        }
        
        .footer-section ul {
            list-style: none;

        }
        
        .footer-section ul li {
            margin-bottom: 4px;
        }
        
        .footer-section a {
            color: #e0e0e0;
			
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-section a:hover {
            color: white;
            text-decoration: underline;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 0.9rem;
            opacity: 0.8;
        }
		
		/* Social-Icons */
		.social-icons {
			display:flex;
			flex-wrap:wrap;
			gap:15px;
			margin:0 0 10px;
			padding:0;
			font-size:1.2em;
		}

		.social-icons > .list-inline {
			flex-wrap:wrap;
			display:flex;
			gap:15px;
			margin:0 0 10px;
		}

		.social-icons a:hover {transform:scale(1.1);}
		.social-icons > .list-inline li {padding:0;}
		.social-icons a {display:inline-block;transition:transform 0.2s ease;}
		.social-icons li {display:inline-block;}
		.social-icons ul {list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px;}
		.social-icons {margin-top:20px;}
		
		/* أيقونات التواصل في الفوتر */
        .footer-social {
            display: flex;
			justify-content: space-between;
            gap: 10px;
            margin-top: 20px;
		}
        
        .social-icon-footer {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            transition: all 0.3s ease;
            position: relative;
            cursor: pointer;
        }
		
		.whatsapp-header { 
            background: #25D366; 
            animation: pulse 2s infinite;
        }
			
		.facebook-header { background: #3b5998; }
		.twitter-header { background: #1da1f2; }
		.instagram-header { background: #e4405f; }
		.youtube-header { background: #cd201f; }
        
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
            100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
        }
        
        /* أيقونة الواتساب العائمة */
        .whatsapp-float {
            position: fixed;
            width: 65px;
            height: 65px;
            bottom: 25px;
            left: 25px;
            background: #25D366;
            color: white;
            border-radius: 50px;
            text-align: center;
            font-size: 32px;
            box-shadow: 0 5px 15px rgba(37, 211, 102, 0.5);
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            animation: float 3s ease-in-out infinite;
        }
        
        .whatsapp-float:hover {
            transform: scale(1.1);
            box-shadow: 0 8px 25px rgba(37, 211, 102, 0.7);
            animation: none;
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        
        .whatsapp-tooltip {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .whatsapp-float:hover .whatsapp-tooltip {
            opacity: 1;
        }
        
        /* نافذة الدردشة */
        .whatsapp-chat-window {
            position: fixed;
            width: 320px;
            height: 450px;
            bottom: 100px;
            left: 25px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
            z-index: 999;
            display: none;
            flex-direction: column;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .chat-header {
            background: #075E54;
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chat-header img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }
        
        .chat-header-info h3 {
            font-size: 1rem;
            margin-bottom: 3px;
        }
        
        .chat-header-info p {
            font-size: 0.8rem;
            opacity: 0.8;
        }
        
        .chat-body {
            flex: 1;
            padding: 15px;
            background: #e5ddd5;
			color:black;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .message {
            max-width: 80%;
            padding: 10px 15px;
            border-radius: 15px;
            font-size: 0.9rem;
            line-height: 1.4;
        }
        
        .received {
            background: white;
            align-self: flex-start;
            border-top-right-radius: 5px;
        }
        
        .sent {
            background: #dcf8c6;
            align-self: flex-end;
            border-top-left-radius: 5px;
        }
        
        .chat-footer {
            padding: 10px;
            background: white;
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .chat-footer input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
        }
        
        .send-btn {
            background: #25D366;
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
			
        .social-icon-footer:hover {
            transform: translateY(-5px);
        }
        
        .social-icon-footer::after {
            content: attr(data-tooltip);
            position: absolute;
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8rem;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
        }
        
        .social-icon-footer:hover::after {
            opacity: 1;
        }
		    
        .social-icon-footer- {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
            transition: all 0.3s ease;
        }
        
        .whatsapp-footer { 
            background: #25D366; 
            animation: pulse 2s infinite;
        }
        
        .facebook-footer { background: #3b5998; }
        .twitter-footer { background: #1da1f2; }
        .instagram-footer { background: #e4405f; }
        .youtube-footer { background: #cd201f; }
		
        social-icons-container img {
			height:1.188em;width:auto;margin-right:5px;margin-bottom:0.3em;
		}
        .copyright {
            text-align: center;
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #aaa;
            font-size: 0.9rem;
            max-width: 1400px;
            margin: 0 auto;
        }
        
		/* ===== FORMS - النماذج ===== */
		.form-group {
			margin-bottom: 1rem;
			
		}

		.form-group label {
			display: block;
			margin-bottom: 0.5rem;
			font-weight: bold;
			
		}

		.form-group input, .form-group select, .form-group textarea {
			width: 100%;
			padding: 0.8rem;
			border: 1px solid #ddd;
			border-radius: var(--border-radius);
			font-family: inherit;
		}

		button {
			background-color: var(--primary-color);
			color: black;
			border: none;
			padding: 0.8rem 1.5rem;
			border-radius: var(--border-radius);
			cursor: pointer;
			transition: var(--transition);
			font-family: inherit;
		}

		button:hover {
			background-color: #153a6d;
		}

		/* ===== MODAL - النموذج المنبثق ===== */
		.modal {
			display: none;
			position: fixed;
			z-index: 1000;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
		}

		.modal-content {
			background-color: white;
			margin: 10% auto;
			padding: 2rem;
			border-radius: var(--border-radius);
			width: 90%;
			max-width: 500px;
			position: relative;
		}

		.close {
			position: absolute;
			top: 1rem;
			left: 1rem;
			font-size: 1.5rem;
			cursor: pointer;
		}

		/* ===== DARK MODE STYLES - أنماط الوضع الليلي ===== */
		[data-theme="dark"] .content-area,
		[data-theme="dark"] .page-content,
		[data-theme="dark"]	.sidebar,
		[data-theme="dark"]	.sidebar-nav,
		[data-theme="dark"]	.news-grid,
		[data-theme="dark"] .card,
		[data-theme="dark"] .college-card,
		[data-theme="dark"] .stat-card,
		[data-theme="dark"] .vision-box,
		[data-theme="dark"] .mission-box,
		[data-theme="dark"] .accreditation-item,
		[data-theme="dark"] .partner-logo,
		[data-theme="dark"] .program-card,
		[data-theme="dark"] .service-card,
		[data-theme="dark"] .news-card,
		[data-theme="dark"] .stats-section,
		[data-theme="dark"] .step,
		[data-theme="dark"] .requirement-card,
		[data-theme="dark"] .footer,
		[data-theme="dark"] .center-card {
			background: #16213e;
		}

		[data-theme="dark"] .about-hero {
			background: #1a1a2e;
		}

		[data-theme="dark"] .accreditations-section {
			background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
		}

		[data-theme="dark"] .page-content h1 {
			border-bottom-color: #2d3748;
		}

		[data-theme="dark"] .achievements-list li {
			border-bottom-color: #2d3748;
		}

		[data-theme="dark"] .accreditation-item p {
			color: #ccc;
		}
		
        /* التجاوب مع الشاشات المختلفة */  
        
		
		/* General styling for the achievements container */
		.achievements-container {
			width: 100%;
			/* max-width: 800px; */
			margin: 20px auto;
			background-color: #24282d;
			border-radius: 8px;
			box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
			padding: 20px;
			font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
			color: #ecf0f1;
			
		}

		/* Styling for individual achievement rows */
		.achievement-row {
			display: flex;
			align-items: center;
			padding: 15px;
			margin-bottom: 10px;
			background-color: #b5ae2b;
			border-radius: 5px;
			transition: background-color 0.3s ease;
		}

		.achievement-row:hover {
			background-color: #4a637d;
		}

		/* Styling for the achievement icon */
		.achievement-icon {
			width: 50px;
			height: 50px;
			margin-right: 15px;
			background-color: #7f8c8d;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24px;
			color: #fff;
			filter: grayscale(100%); /* Default grayscale for unearned */
			transition: filter 0.3s ease, background-color 0.3s ease;
		}

		/* Styling for earned achievements */
		.achievement-row.earned .achievement-icon {
			filter: grayscale(0%); /* Remove grayscale for earned */
			background-color: #27ae60; /* Green for earned */
		}

		.achievement-row.earned .achievement-title {
			color: #2ecc71; /* Green text for earned title */
		}

		/* Styling for achievement title and description */
		.achievement-details {
			flex-grow: 1;
		}

		.achievement-title {
			font-size: 1.2em;
			font-weight: bold;
			margin-bottom: 5px;
			color: #ecf0f1;
		}

		.achievement-description {
			font-family:inherit;
			font-size: 1.5em;
			color: var(--text-color);
		}

		/* Styling for the achievement progress bar */
		.achievement-progress {
			width: 150px;
			height: 10px;
			background-color: #555;
			border-radius: 5px;
			overflow: hidden;
			margin-left: 20px;
		}

		.progress-bar {
			height: 100%;
			background-color: #3498db; /* Blue for progress */
			width: 0%; /* Initial width, will be set by JavaScript or inline style */
			border-radius: 5px;
			transition: width 0.5s ease;
		}

		/* Example for an achievement with 75% progress */
		.achievement-row.progress-75 .progress-bar {
			width: 75%;
		}