:root{
    --bs-blue:#0d6efd;
    --bs-indigo:#6610f2;
    --bs-purple:#6f42c1;
    --bs-pink:#d63384;
    --bs-red:#dc3545;
    --bs-orange:#fd7e14;
    --bs-yellow:#ffc107;
    --bs-green:#198754;
    --bs-teal:#20c997;--bs-cyan:#0dcaf0;--bs-black:#000;
    --bs-white:#fff;--bs-gray:#6c757d;--bs-gray-dark:#343a40;
    --bs-gray-100:#f8f9fa;
    --bs-gray-200:#e9ecef;--bs-gray-300:#dee2e6;--bs-gray-400:#ced4da;
    --bs-gray-500:#adb5bd;
    --bs-gray-600:#6c757d;--bs-gray-700:#495057;--bs-gray-800:#343a40;
    --bs-gray-900:#212529;
    --bs-primary:#0d6efd;--bs-secondary:#6c757d;--bs-success:#198754;
    --bs-info:#0dcaf0;--bs-warning:#ffc107;--bs-danger:#dc3545;
    --bs-light:#f8f9fa;--bs-dark:#212529;--bs-primary-rgb:13,110,253;
    --bs-secondary-rgb:108,117,125;--bs-success-rgb:25,135,84;--bs-info-rgb:13,202,240;
    --bs-warning-rgb:255,193,7;--bs-danger-rgb:220,53,69;--bs-light-rgb:248,249,250;
    --bs-dark-rgb:33,37,41;--bs-white-rgb:255,255,255;--bs-black-rgb:0,0,0;
    --bs-body-color-rgb:33,37,41;--bs-body-bg-rgb:255,255,255;
    --bs-font-sans-serif:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans","Liberation Sans",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    --bs-font-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    --bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;
    --bs-body-line-height:1.5;--bs-body-color:#212529;--bs-body-bg:#fff;--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:#dee2e6;
    --bs-border-color-translucent:rgba(0, 0, 0, 0.175);--bs-border-radius:0.375rem;--bs-border-radius-sm:0.25rem;--bs-border-radius-lg:0.5rem;
    --bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:#0d6efd;
    --bs-link-hover-color:#0a58ca;
    --bs-code-color:#d63384;--bs-highlight-bg:#fff3cd
}


 /* <!------------------------------ ثاني سكشن حق الاباوت ----------------------------------------> 
 */
/* Section 2: Diagonal Features */
.features {
    padding: 60px 0; /* مسافات علوية وسفلية للقسم */
    position: relative; /* لتمكين العناصر المطلقة بداخله */
    overflow: hidden; /* إخفاء أي أجزاء تخرج خارج الإطار */
}

.features::before {
    content: ''; /* إنشاء عنصر وهمي */
    position: absolute; 
    top: -50%; /* توسيع التأثير لتغطية كامل الشاشة */
    left: -50%;
    width: 200%; /* جعل الخلفية أكبر لضمان الظهور أثناء الدوران */
    height: 200%;
    background: conic-gradient(from 0deg, transparent, rgba(0, 255, 255, 0.1), transparent); /* تأثير ضوء دائري */
    animation: rotate 20s linear infinite; /* تدوير مستمر */
    z-index: -1; /* خلف المحتوى */
}

@keyframes rotate {
    from { transform: rotate(0deg); } /* بداية الدوران */
    to { transform: rotate(360deg); } /* نهاية الدوران */
}

.features-container {
    max-width: 1240px; /* تحديد عرض المحتوى */
    margin: 0 auto; /* توسيط */
    padding: 0 20px; /* مسافة داخلية يمين ويسار */
}

.diagonal-grid {
    display: flex;
    flex-direction: column; /* ترتيب العناصر بشكل عمودي */
    gap: 60px; /* مسافة بين كل صف */
}

.feature-row {
    display: flex; /* جعل العناصر بجانب بعض */
    align-items: center; /* محاذاة عمودية */
    gap: 40px; /* مسافة بين النص والصورة */
    position: relative;
    HEIGHT: 300px;
}

.feature-row:nth-child(even) {
    flex-direction: row-reverse; /* الصفوف الزوجية تنعكس (الصورة يسار والنص يمين) */
}

.feature-content {
    flex: 1; /* يأخذ نصف المساحة */
    padding: 50px; /* مسافات داخلية */
    transform: skew(-5deg); /* انحراف بسيط للستايل */
    transition: all 0.4s ease; /* حركة ناعمة */
}

.feature-content:hover {
    transform: skew(-5deg) translateY(-10px); /* عند المرور يرتفع للأعلى */
    box-shadow: 0 30px 60px rgba(0, 255, 255, 0.2); /* ظل جميل */
}

.feature-visual {
    flex: 1; /* يأخذ نصف المساحة */
    height: 300px; /* ارتفاع الصورة */
    position: relative;
    border-radius: 20px; /* زوايا مستديرة */
    overflow: hidden; /* قص أي شيء خارج الإطار */
    background-size: cover; /* تغطي الصورة كامل المساحة بدون تشويه */
    background-position: center; /* تركيز الصورة في المنتصف */
    background-repeat: no-repeat;
    transition: all 0.4s ease; /* حركة ناعمة */
}

.feature-visual:hover {
    transform: scale(1.05); /* تكبير خفيف عند المرور */
    box-shadow: 0 20px 40px rgba(224, 163, 255, 0.3); /* ظل لامع */
}

.feature-visual::before {
    content: ''; /* طبقة تأثير لون أعلى الصورة */
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0; /* تغطية كاملة */
    background: linear-gradient(45deg, rgba(224, 163, 255, 0.1), rgba(255, 105, 180, 0.1)); /* تدرج لوني ناعم */
    z-index: 1;
    backdrop-filter: blur(1px); /* ضبابية خفيفة */
    transition: all 0.4s ease;
}

.feature-visual:hover::before {
    background: linear-gradient(45deg, rgba(224, 163, 255, 0.2), rgba(255, 105, 180, 0.2)); /* ازدياد قوة اللون عند المرور */
}

.feature-row:nth-child(1) .feature-visual {
    background-image: url('../img/f1.jpg'); /* الصورة للعنصر الأول */
}

.feature-row:nth-child(2) .feature-visual {
    background-image: url('../img/f2.jpg'); /* الصورة للعنصر الثاني */
}

.feature-row:nth-child(3) .feature-visual {
    background-image: url('../img/f3.jpg'); /* الصورة للعنصر الثالث */
}

.feature-row:nth-child(4) .feature-visual {
    background-image: url('../img/f4.jpg'); /* الصورة للعنصر الرابع */
}

.feature-row:nth-child(5) .feature-visual {
    background-image: url('../img/f5.jpg'); /* الصورة للعنصر الخامس */
}

.feature-icon {
    font-size: 4rem; /* حجم الأيقونة */
    margin-bottom: 25px;
    background: linear-gradient(45deg, #ff0080, #8000ff); /* تدرج داخل النص */
    -webkit-background-clip: text; /* تطبيق التدرج على النص */
    background-clip: text;
    -webkit-text-fill-color: transparent; /* جعل النص شفاف لإظهار التدرج */
}

.feature-content h3 {
    font-size: 2.2rem; /* حجم العنوان */
    margin-bottom: 20px;
    color: #c11f52; /* لون العنوان */
}

.feature-content p {
    font-size: 1.1rem; /* حجم النص */
    color: #0d1b5a; /* لون النص */
    line-height: 1.8; /* تباعد الأسطر */
}





 /* <!------------------------------للفوتر----------------------------------------> 
 */

/* Footer styles */
#footer {
    margin-top: 60px;
    padding: 30px 0;
}
.footer-content {
    padding: 30px;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
}
.footer-links {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
    padding: 5px 10px;
}
.footer-links a:hover {
    color: white;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.copyright {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
}
.copyright a {
	color: rgba(255, 255, 255, 0.6);
	text-decoration: none;
}
/* Responsive design */
@media (max-width: 1024px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
    .footer-links {
        gap: 15px;
        flex-direction: column;
    }
    .footer-links a {
        display: block;
        text-align: center;
    }
    button[type="submit"] {
        width: 100%;
    }
    .map-container {
        height: 350px;
    }
    .logo-icon {
        width: 40px;
        height: 40px;
    }
    .logo {
        font-size: 22px;
    }



/* Footer */
 footer {
     text-align: center;
     padding: 60px 20px 40px;
     border-top: 1px solid rgba(224, 163, 255, 0.2);
     background: #0d1b5a;
     backdrop-filter: blur(20px);
}
 .footer-content {
     max-width: 1200px;
     margin: 0 auto;
}
 .footer-links {
     display: flex;
     justify-content: center;
     gap: 30px;
     margin-bottom: 30px;
     flex-wrap: wrap;
}
 .footer-links a {
     color: #cccccc;
     text-decoration: none;
     font-size: 0.9rem;
     transition: all 0.3s ease;
     position: relative;
     padding: 8px 0;
}
 .footer-links a:hover {
     color: #e0a3ff;
     text-shadow: 0 0 10px rgba(224, 163, 255, 0.5);
}
 .footer-links a::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     width: 0;
     height: 1px;
     background: linear-gradient(90deg, #e0a3ff, #ff69b4);
     transition: width 0.3s ease;
}
 .footer-links a:hover::after {
     width: 100%;
}
 .footer-copyright {
     color: #888;
     font-size: 0.9rem;
     margin-bottom: 15px;
}
 .footer-design {
     color: #666;
     font-size: 0.85rem;
     margin-top: 20px;
}
 .footer-design a {
     color: #e0a3ff;
     text-decoration: none;
     transition: all 0.3s ease;
}
 .footer-design a:hover {
     color: #ff69b4;
     text-shadow: 0 0 8px rgba(255, 105, 180, 0.5);
}
     .footer-links {
         gap: 20px;
         margin-bottom: 25px;
    }
     .footer-links a {
         font-size: 0.85rem;
    }