:root {
     --primary-color: #0066cc;
     --secondary-color: #004c99;
     --accent-color: #00a8e8;
     --dark-bg: #1a1a2e;
     --light-bg: #f8f9fa;
     --text-dark: #2c3e50;
     --text-light: #6c757d;
 }

 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     color: var(--text-dark);
     line-height: 1.7;
 }

 /* Top Bar */
 .top-bar {
     background: var(--dark-bg);
     color: white;
     padding: 10px 0;
     font-size: 0.9rem;
     text-align: center;
 }

 .top-bar strong {
     color: var(--accent-color);
 }

 /* Navigation */
 .navbar {
     background: white !important;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     padding: 1rem 0;
 }

 .navbar-brand {
     font-weight: 700;
     font-size: 1.5rem;
     color: var(--primary-color) !important;
 }

 /* Hero Section */
 .hero-section {
     background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
     color: white;
     padding: 120px 0 100px;
     position: relative;
     overflow: hidden;
 }

 .hero-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)" /></svg>');
     opacity: 0.3;
 }

 .hero-section .container {
     position: relative;
     z-index: 1;
 }

 .hero-section h1 {
     font-size: 3.5rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
     line-height: 1.2;
 }

 .hero-section p.lead {
     font-size: 1.3rem;
     margin-bottom: 2rem;
     opacity: 0.95;
 }

 .btn-hero {
     padding: 15px 40px;
     font-size: 1.1rem;
     border-radius: 50px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     transition: all 0.3s ease;
 }

 .btn-primary-custom {
     background: white;
     color: var(--primary-color);
     border: none;
 }

 .btn-primary-custom:hover {
     background: var(--light-bg);
     transform: translateY(-2px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 }

 .btn-outline-custom {
     background: transparent;
     color: white;
     border: 2px solid white;
 }

 .btn-outline-custom:hover {
     background: white;
     color: var(--primary-color);
     transform: translateY(-2px);
 }

 /* Section Styling */
 .content-section {
     padding: 80px 0;
 }

 .content-section.bg-light {
     background: var(--light-bg);
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 2rem;
     color: var(--text-dark);
     position: relative;
     padding-bottom: 15px;
 }

 .section-title::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 80px;
     height: 4px;
     background: var(--accent-color);
 }

 .section-title.text-center::after {
     left: 50%;
     transform: translateX(-50%);
 }

 .subsection-title {
     font-size: 1.8rem;
     font-weight: 600;
     color: var(--primary-color);
     margin-top: 3rem;
     margin-bottom: 1.5rem;
 }

 /* Feature Cards */
 .feature-card {
     background: white;
     border-radius: 15px;
     padding: 2.5rem;
     margin-bottom: 2rem;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     height: 100%;
 }

 .feature-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
 }

 .feature-card h3 {
     color: var(--primary-color);
     font-weight: 600;
     margin-bottom: 1rem;
     font-size: 1.5rem;
 }

 .feature-card .icon {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 1.5rem;
 }

 .feature-card .icon i {
     font-size: 2rem;
     color: white;
 }

 /* Stats Section */
 .stats-section {
     background: var(--dark-bg);
     color: white;
     padding: 60px 0;
     background-color: #004c99;
 }

 .stat-item {
     text-align: center;
     padding: 20px;
 }

 .stat-number {
     font-size: 3rem;
     font-weight: 700;
     color: var(--accent-color);
     margin-bottom: 0.5rem;
 }

 .stat-label {
     font-size: 1.1rem;
     opacity: 0.9;
 }

 /* Comparison Table */
 .comparison-table {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
     margin-top: 2rem;
 }

 .comparison-table th {
     background: var(--primary-color);
     color: white;
     padding: 1.5rem;
     font-weight: 600;
 }

 .comparison-table td {
     padding: 1.5rem;
     border-bottom: 1px solid #e9ecef;
 }

 .comparison-table tr:last-child td {
     border-bottom: none;
 }

 .comparison-table .text-success {
     color: #28a745 !important;
 }

 .comparison-table .text-danger {
     color: #dc3545 !important;
 }

 /* CTA Section */
 .cta-section {
     background: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
     color: white;
     padding: 100px 0;
     text-align: center;
 }

 .cta-section h2 {
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 1.5rem;
 }

 .cta-section p {
     font-size: 1.2rem;
     margin-bottom: 2.5rem;
     opacity: 0.95;
 }

 /* Footer */
 .footer {
     background: var(--dark-bg);
     color: white;
     padding: 60px 0 30px;
 }

 .footer h5 {
     color: var(--accent-color);
     margin-bottom: 1.5rem;
     font-weight: 600;
 }

 .footer p {
     opacity: 0.8;
     line-height: 1.8;
 }

 .footer-bottom {
     margin-top: 3rem;
     padding-top: 2rem;
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     text-align: center;
     opacity: 0.7;
 }

 /* Responsive Design */
 @media (max-width: 768px) {
     .hero-section h1 {
         font-size: 2.5rem;
     }

     .hero-section p.lead {
         font-size: 1.1rem;
     }

     .section-title {
         font-size: 2rem;
     }

     .stat-number {
         font-size: 2.5rem;
     }
 }

 /* List Styling */
 .content-list {
     list-style: none;
     padding-left: 0;
 }

 .content-list li {
     padding-left: 2rem;
     position: relative;
     margin-bottom: 1rem;
 }

 .content-list li::before {
     content: '✓';
     position: absolute;
     left: 0;
     color: var(--accent-color);
     font-weight: bold;
     font-size: 1.2rem;
 }

 #backToTop {
     position: fixed;
     bottom: 30px;
     right: 30px;
     background: var(--primary-blue, #007bff);
     color: white;
     border: none;
     border-radius: 50%;
     width: 45px;
     height: 45px;
     font-size: 1.4rem;
     cursor: pointer;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
     display: none;
     /* 🔹 يختفي افتراضيًا */
     z-index: 9999;
     transition: all 0.3s ease;
 }

 #backToTop:hover {
     background: #0056b3;
     transform: translateY(-4px);
 }

 .hero-section {
     position: relative;
     background-image: url('../image/images1.jpg');
     /* 🔹 ضع هنا مسار الصورة */
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
     /* تأثير parallax بسيط */
     min-height: 100vh;
     color: white;
     overflow: hidden;
 }

 .hero-section .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 20, 50, 0.6);
     /* 🔹 طبقة شفافة زرقاء داكنة */
     z-index: 1;
 }

 .hero-section .container {
     position: relative;
     z-index: 2;
 }

 .btn-primary-custom {
     background-color: var(--primary-blue, #007bff);
     color: #fff;
     border: none;
     padding: 0.7rem 1.5rem;
     border-radius: 30px;
     transition: all 0.3s ease;
 }

 .btn-primary-custom:hover {
     background-color: #0056b3;
     transform: translateY(-3px);
 }

 .btn-outline-custom {
     background-color: transparent;
     border: 2px solid #fff;
     color: #fff;
     padding: 0.7rem 1.5rem;
     border-radius: 30px;
     transition: all 0.3s ease;
 }

 .btn-outline-custom:hover {
     background-color: #fff;
     color: var(--primary-blue, #007bff);
     transform: translateY(-3px);
 }