/* Ensure no double scrollbars from Swiper if using overflow:hidden on body for mobile menu */
html.swiper-scrollbar-vertical, html.swiper-scrollbar-horizontal {
    overflow: hidden; /* Or adjust as needed */
}
/* ===================================================
   PROJECT DETAIL PAGE STYLES - (project-detail-style.css)
   =================================================== */

:root {
    --clr-black-true-rgb: 0, 0, 0;
    --clr-theme-primary-rgb: 238, 238, 238; 
    --clr-background-secondary-rgb: 34, 34, 34;
    --clr-theme-accent-rgb: 197, 164, 126; /* Ensure this is defined or inherited */
}

body {
    background-color: var(--clr-background-primary);
}

.section-spacing {
    padding: 80px 0;
}
.section-spacing-top {
    padding-top: 80px;
}
.text-center {
    text-align: center;
}

/* --- Project Hero Slider Section --- */
.project-hero-slider-section {
    width: 100%;
    background-color: var(--clr-black-true); 
    position: relative;
    padding-top: 80px; 
    padding-bottom: 30px; 
}

.project-gallery-complex { 
    max-width: 1100px; 
    margin: 0 auto;
    position: relative; 
}

/* --- Main Project Images Slider --- */
.project-images-slider {
    width: 100%; 
    aspect-ratio: 16 / 9; 
    max-height: calc(80vh - 100px); 
    min-height: 300px; 
    overflow: hidden; 
    border-radius: 6px; 
    margin-bottom: 15px; 
    background-color: var(--clr-background-secondary); 
}

.project-images-slider .swiper-slide img {
    display: block; width: 100%; height: 100%;
    object-fit: contain; 
    object-position: center center;
}

/* --- Swiper Navigation (Main Slider) --- */
.main-slider-nav-arrow {
    position: absolute; 
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background-color: transparent; 
    border: 1px solid rgba(var(--clr-theme-primary-rgb), 0.3); 
    color: var(--clr-theme-primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    z-index: 20; 
    opacity: 0.7;
}
.main-slider-nav-arrow:hover {
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true);
    border-color: var(--clr-theme-accent);
    transform: translateY(-50%) scale(1.1);
    opacity: 1;
}
.main-slider-nav-arrow::after { 
    font-size: 1.1rem; 
    font-weight: 700;
}
.main-slider-nav-prev {
    left: -60px; 
}
.main-slider-nav-next {
    right: -60px; 
}

/* Pagination (Main Slider) */
.project-main-slider-pagination {
    position: absolute;
    bottom: 10px !important; 
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important; 
    z-index: 15;
}
.project-main-slider-pagination .swiper-pagination-bullet {
    background-color: rgba(var(--clr-theme-primary-rgb), 0.4);
    opacity: 0.8;
    width: 9px; height: 9px;
    transition: background-color 0.3s ease, opacity 0.3s ease, transform 0.2s ease;
    margin: 0 4px !important; 
}
.project-main-slider-pagination .swiper-pagination-bullet-active {
    background-color: var(--clr-theme-accent);
    opacity: 1;
    transform: scale(1.15); 
}

/* --- Thumbnails Strip Slider --- */
.project-thumbs-strip-slider {
    width: 100%; 
    height: auto; 
    max-height: 100px; 
    padding: 5px 0; 
    box-sizing: border-box;
    position: relative; 
    overflow: hidden; 
}

.project-thumbs-strip-slider .swiper-wrapper {
    align-items: center; 
}

.project-thumbs-strip-slider .thumb-strip-slide {
    width: 80px !important;  
    height: 80px !important; 
    margin-right: 10px; 
    cursor: pointer;
    overflow: hidden;
    border-radius: 4px; 
    border: 2px solid transparent; 
    opacity: 0.6;
    transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    box-sizing: border-box;
    background-color: var(--clr-background-secondary); 
}
.project-thumbs-strip-slider .thumb-strip-slide:last-child {
    margin-right: 0;
}

.project-thumbs-strip-slider .thumb-strip-slide:hover {
    opacity: 0.9;
}

.project-thumbs-strip-slider .swiper-slide-thumb-active { 
    opacity: 1;
    border-color: var(--clr-theme-accent);
    box-shadow: 0 0 8px rgba(var(--clr-theme-accent-rgb), 0.5); 
}

.project-thumbs-strip-slider .thumb-strip-slide img {
    display: block; width: 100%; height: 100%;
    object-fit: cover; 
    object-position: center;
}

.thumb-strip-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color: rgba(var(--clr-background-secondary-rgb), 0.7);
    color: var(--clr-theme-primary);
    border-radius: 50%;
    display: flex; 
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    z-index: 5; 
    opacity: 0; 
    visibility: hidden;
}
.project-thumbs-strip-slider:hover .thumb-strip-nav-arrow { 
    opacity: 0.8;
    visibility: visible;
}
/* Ensure nav buttons are visible if needed, JS will handle display:none/flex */
.thumb-strip-nav-arrow.swiper-button-disabled { /* Swiper adds this class when at beginning/end */
    opacity: 0.3 !important; /* Make it less prominent */
    cursor: default !important;
    /* display: none !important; /* Or hide it completely, but JS handles display now */
}


.thumb-strip-nav-arrow:hover {
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true);
}
.thumb-strip-nav-arrow::after {
    font-size: 0.8rem;
}
.thumb-strip-nav-prev {
    left: 5px;
}
.thumb-strip-nav-next {
    right: 5px;
}


/* --- Project Content Section --- */
.project-content-section {
    background-color: var(--clr-background-primary);
    color: var(--clr-theme-primary);
}

.project-main-info {
    padding-bottom: 40px;
    margin-bottom: 40px;
    border-bottom: 1px solid var(--clr-border);
}

.project-title-category {
    margin-bottom: 25px;
    text-align: left; 
}

.detail-project-title {
    font-size: 3.8rem;
    color: var(--clr-theme-primary);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 0 0 8px rgba(var(--clr-theme-accent-rgb), 0.2);
}

.detail-project-category {
    font-size: 1.5rem;
    color: var(--clr-theme-accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.project-meta-data {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px 30px;
}

.project-meta-data .meta-item {
    display: flex;
    align-items: center;
    font-size: 1.45rem;
    color: var(--clr-theme-secondary-text);
}

.project-meta-data .meta-item i {
    color: var(--clr-theme-accent);
    font-size: 1.8rem;
    margin-right: 12px;
    width: 20px; 
    text-align: center;
}
.project-meta-data .meta-item .meta-value {
    color: var(--clr-theme-primary);
    font-weight: 500;
    margin-left: 5px;
}

.project-description-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 50px;
}

.section-subtitle-detail { 
    font-size: 2.4rem;
    color: var(--clr-theme-accent);
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: capitalize; 
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(var(--clr-theme-accent-rgb), 0.2);
    display: inline-block; 
}
.text-center .section-subtitle-detail { 
    display: block;
    border-bottom: none; 
}
.text-center .section-subtitle-detail::after { 
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background-color: var(--clr-theme-accent);
    margin: 10px auto 0;
}

.project-description-main p {
    font-size: 1.6rem;
    line-height: 1.75;
    color: var(--clr-theme-secondary-text);
    margin-bottom: 20px;
}
.project-description-main p:last-child {
    margin-bottom: 0;
}

.subsection-title-detail {
    font-size: 1.9rem;
    color: var(--clr-theme-primary);
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 15px;
}

.project-sidebar-content {
    background-color: var(--clr-background-secondary);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid var(--clr-border);
}

.key-highlights-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 30px;
}
.key-highlights-list li {
    font-size: 1.5rem;
    color: var(--clr-theme-secondary-text);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start; 
}
.key-highlights-list li i {
    color: var(--clr-theme-accent);
    margin-right: 10px;
    font-size: 1.3rem;
    margin-top: 4px; 
}

.project-testimonial-quote blockquote {
    font-size: 1.55rem;
    font-style: italic;
    color: var(--clr-theme-primary);
    line-height: 1.6;
    margin: 0 0 10px 0;
    padding-left: 20px;
    border-left: 3px solid var(--clr-theme-accent);
}
.project-testimonial-quote cite {
    display: block;
    text-align: right;
    font-size: 1.3rem;
    color: var(--clr-theme-secondary-text);
    font-style: normal;
}

.additional-project-gallery .section-subtitle-detail {
    margin-bottom: 40px;
}
.small-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}
.gallery-item {
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid var(--clr-border);
    height: 180px; 
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}
.gallery-item a:hover img {
    transform: scale(1.05);
    filter: brightness(0.8);
}

.project-navigation-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--clr-border);
    padding-top: 30px;
    margin-top: 50px; 
}
.project-navigation-links .nav-link {
    color: var(--clr-theme-secondary-text);
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 10px 15px;
    border-radius: 5px;
    transition: color 0.3s ease, background-color 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.project-navigation-links .nav-link i {
    margin: 0 8px; 
    font-size: 1.2rem;
}
.project-navigation-links .nav-link:hover {
    color: var(--clr-theme-accent);
    background-color: rgba(var(--clr-theme-accent-rgb), 0.08);
}
.project-navigation-links .all-projects-link i {
    font-size: 1.5rem; 
}

.reveal-on-scroll-detail {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.is-visible-detail {
    opacity: 1;
    transform: translateY(0);
}

/* --- Responsive Adjustments for Sliders --- */
@media (max-width: 991px) { 
    .project-slider-wrapper {
        flex-direction: column; 
        gap: 20px;
    }
    .project-images-slider {
        width: 100%; 
        aspect-ratio: 16 / 10; 
    }
    .project-thumbs-slider {
        width: 100%; 
        height: auto; 
        max-height: 120px; 
    }
    .project-thumbs-slider .thumb-slide {
        width: 100px !important; 
        height: 75px !important; 
        aspect-ratio: unset; 
        margin-bottom: 0; 
        margin-right: 10px; 
    }
     .detail-project-title {
        font-size: 3.2rem;
    }
    .project-description-layout {
        grid-template-columns: 1fr; 
        gap: 40px;
    }
    .project-sidebar-content {
        margin-top: 30px; 
    }
}

@media (max-width: 767px) { 
    .section-spacing { padding: 60px 0; }
    .section-spacing-top { padding-top: 60px; }
    
    .project-hero-slider-section { padding-top: 70px; }
    .project-images-slider {
        aspect-ratio: 4 / 3; /* More square-ish for mobile */
        min-height: 280px;
    }
    .main-slider-nav-prev,
    .main-slider-nav-next {
        width: 35px; height: 50px;
    }
    .main-slider-nav-prev::after,
    .main-slider-nav-next::after {
        font-size: 1.2rem;
    }
    .project-thumbs-slider {
        max-height: 100px;
    }
    .project-thumbs-slider .thumb-slide {
        width: 85px !important;
        height: 60px !important;
    }
    .detail-project-title {
        font-size: 2.8rem;
    }
    .detail-project-category {
        font-size: 1.3rem;
    }
    .project-meta-data {
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    .project-meta-data .meta-item { font-size: 1.35rem; }

    .section-subtitle-detail { font-size: 2rem; }
    .project-description-main p { font-size: 1.5rem; }
    .subsection-title-detail { font-size: 1.7rem; }
    .key-highlights-list li { font-size: 1.4rem; }
    .project-testimonial-quote blockquote { font-size: 1.45rem; }
    
    .small-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .gallery-item { height: 110px; }

    .project-navigation-links {
        flex-direction: column;
        gap: 20px;
    }
    .project-navigation-links .nav-link {
        width: 100%;
        justify-content: center; 
        padding: 12px 15px;
    }
}

/* Ensure no double scrollbars from Swiper if using overflow:hidden on body for mobile menu */
html.swiper-scrollbar-vertical, html.swiper-scrollbar-horizontal {
    overflow: hidden; /* Or adjust as needed */
}

/* --- Responsive Adjustments for Slider Complex --- */
@media (max-width: 1200px) { 
    .main-slider-nav-prev {
        left: 10px; 
    }
    .main-slider-nav-next {
        right: 10px;
    }
}

@media (max-width: 767px) { 
    .section-spacing { padding: 60px 0; }
    .section-spacing-top { padding-top: 60px; }
    
    .project-hero-slider-section { padding-top: 70px; }
    .main-slider-nav-arrow { 
        display: none;
    }
    .project-images-slider {
        aspect-ratio: 4 / 3; 
        min-height: 250px;
        border-radius: 4px;
        margin-bottom: 10px;
    }
    .project-thumbs-strip-slider {
        max-height: 85px; 
    }
    .project-thumbs-strip-slider .thumb-strip-slide {
        width: 65px !important;
        height: 65px !important;
        margin-right: 8px;
    }
    .detail-project-title { font-size: 2.8rem; }
    .detail-project-category { font-size: 1.3rem; }
    .project-meta-data { grid-template-columns: 1fr; gap: 15px; }
    .project-meta-data .meta-item { font-size: 1.35rem; }
    .section-subtitle-detail { font-size: 2rem; }
    .project-description-main p { font-size: 1.5rem; }
    .subsection-title-detail { font-size: 1.7rem; }
    .key-highlights-list li { font-size: 1.4rem; }
    .project-testimonial-quote blockquote { font-size: 1.45rem; }
    .small-gallery-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
    .gallery-item { height: 110px; }
    .project-navigation-links { flex-direction: column; gap: 20px; }
    .project-navigation-links .nav-link { width: 100%; justify-content: center; padding: 12px 15px; }
}

html.swiper-scrollbar-vertical, html.swiper-scrollbar-horizontal {
    overflow: hidden; 
}
/* --- Swiper Navigation (Main Slider) - OPTION 2: Chevron Arrows --- */
.project-slider-nav-btn {
    color: var(--clr-theme-primary);
    width: auto; /* العرض يعتمد على حجم الأيقونة والـ padding */
    height: auto;
    background-color: transparent; /* بدون خلفية */
    border: none; /* بدون حدود */
    border-radius: 0; /* ليس دائريًا */
    transition: color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
    opacity: 0.65; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    padding: 10px; /* مساحة حول الأيقونة لتسهيل النقر */
}
.project-slider-nav-btn:hover {
    color: var(--clr-theme-accent);
    transform: translateY(-50%) scale(1.15);
    opacity: 1;
}
.project-slider-nav-btn::after {
    font-family: 'swiper-icons'; /* استخدام أيقونات Swiper الافتراضية */
    font-size: 2.2rem; /* حجم أيقونة السهم أكبر وواضح */
    font-weight: bold; /* إذا أردت */
    text-shadow: 0 0 5px rgba(var(--clr-black-true-rgb), 0.5); /* ظل بسيط للأيقونة */
}
/* تحديد موقع الأزرار (يمكنك تعديل هذه القيم) */
.project-slider-nav-prev {
    left: 10px; 
}
.project-slider-nav-next {
    right: 10px; 
}

footer#contact, 
footer#contact .footer-area,
footer#contact .copyright-area {
    display: block !important; /* Ensure they are block-level elements */
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important; /* Let content determine height */
    min-height: 50px !important; /* Absolute minimum */
    overflow: visible !important;
    position: relative !important; /* Reset any problematic absolute/fixed if any */
    z-index: 900 !important; /* Ensure it's reasonably high, but below modals etc. */
    background-color: var(--clr-black-true) !important; /* Force original background */
}

footer#contact .footer-area {
    padding-top: 7rem !important;
    padding-bottom: 0 !important;
}

footer#contact .copyright-area {
    padding: 2.8rem 0 !important;
}


footer#contact .footer-main-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important; /* or your original justify value */
    align-items: flex-start !important; /* or your original align value */
    width: 100% !important;
    min-height: 100px !important; /* Ensure row has some height */
    opacity: 1 !important;
    visibility: visible !important;
}

footer#contact .footer-widget-group {
    display: block !important; /* Or flex if they are flex containers themselves */
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px !important; /* Ensure columns have some height */
    /* Original column widths from style1.css should apply unless overridden here */
    /* e.g. for .col-lg-4 */
    /* flex: 0 0 33.333333% !important; */
    /* max-width: 33.333333% !important; */
}

/* Force visibility of text and links inside widgets */
footer#contact .footer__widget,
footer#contact .footer__widget *,
footer#contact .footer-contact-info *,
footer#contact .social-links *,
footer#contact .footer__links * {
    opacity: 1 !important;
    visibility: visible !important;
}
footer#contact .footer__widget-title {
    color: var(--clr-theme-accent) !important;
}
footer#contact .footer__links ul li a:hover {
    color: var(--clr-theme-accent) !important;
}
footer#contact .social-links ul li a:hover {
    background-color: var(--clr-theme-accent) !important;
    color: var(--clr-background-primary) !important;
}
footer#contact .copyright__text p,
footer#contact .copyright__text a {
    color: var(--clr-copyright-text) !important;
}
footer#contact .copyright__text a:hover {
    color: var(--clr-theme-accent) !important;
}


/* Reset some common hiding properties that might be applied by mistake */
footer#contact .footer-main-row,
footer#contact .footer-widget-group,
footer#contact .footer__widget {
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    margin: 0; /* Reset margins if they are pushing content out */
    /* Add specific paddings back if needed, e.g. for .footer-widget-group */
}
footer#contact [class^="col-"] {
    padding-left: 1.5rem !important; 
    padding-right: 1.5rem !important;
}
footer#contact .footer-main-row {
    margin-left: -1.5rem !important;
    margin-right: -1.5rem !important;
}

/* ===================================================
   PROJECT DETAIL PAGE STYLES - (project-detail-style.css)
   =================================================== */

/* ... (الأنماط العامة والمتغيرات كما هي) ... */


/* --- Swiper Navigation (Main Slider) - ELEGANT CUSTOM ARROWS --- */
.main-slider-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; /* زيادة طفيفة في الحجم */
    height: 48px;
    background-color: rgba(var(--clr-background-secondary-rgb, 34, 34, 34), 0.55); /* خلفية داكنة شفافة قليلاً */
    border: 1.5px solid rgba(var(--clr-theme-primary-rgb, 238, 238, 238), 0.15); /* حد أبيض خفيف جدًا */
    color: var(--clr-theme-primary); /* لون الأيقونة الافتراضي */
    border-radius: 50%; /* دائري تمامًا */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
    z-index: 20; /* فوق السلايدر */
    opacity: 0.75; /* أكثر وضوحًا قليلاً */
    outline: none; /* إزالة أي outline افتراضي عند التركيز */
    box-shadow: 0 2px 8px rgba(var(--clr-black-true-rgb, 0, 0, 0), 0.2); /* ظل خفيف */
}

.main-slider-nav-arrow:hover {
    background-color: var(--clr-theme-accent);
    color: var(--clr-black-true); /* لون الأيقونة عند المرور */
    border-color: transparent; /* إخفاء الحد عند المرور إذا أردت، أو var(--clr-theme-accent) */
    transform: translateY(-50%) scale(1.08); /* تكبير أكثر بروزًا */
    opacity: 1;
    box-shadow: 0 4px 12px rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.3); /* توهج ذهبي أقوى */
}

/* إزالة الـ ::after الافتراضي لـ Swiper واستخدام أيقونة Font Awesome مباشرة */
.main-slider-nav-arrow::after {
    display: none; /* أهم خطوة: إخفاء السهم الافتراضي لـ Swiper */
}

/* إضافة أيقونة Font Awesome داخل الزر (ستضيفها في HTML أو يمكن إضافتها هنا إذا أردت عبر content، لكن HTML أفضل) */
/* بما أن HTML الخاص بـ Swiper يضيف الـ ::after، سنضع أيقونتنا مباشرة */
/* إذا كان HTML الخاص بـ swiper-button-next/prev لا يحتوي على أيقونة، يمكننا إضافتها بالـ ::before أو ::after الخاص بنا */

/* لتصميم الأيقونة (نفترض أنك ستضع <i class="fas fa-chevron-left"></i> داخل الزر في HTML إذا أردت تحكم كامل) */
/* لكن بما أن Swiper يولد الـ ::after، سنقوم بتعديل محتواه ليشبه أيقونة Font Awesome */
.swiper-button-prev.main-slider-nav-arrow::before, /* استخدام ::before بدلاً من ::after */
.swiper-button-next.main-slider-nav-arrow::before {
    font-family: "Font Awesome 6 Free"; /* تأكد أن هذا هو اسم عائلة الخط الصحيح لـ Font Awesome 6 */
    font-weight: 900; /* للأيقونات الصلبة (Solid) */
    font-size: 1.1rem; /* حجم الأيقونة */
    line-height: 1; /* لضمان التوسيط الرأسي الجيد */
}

.swiper-button-prev.main-slider-nav-arrow::before {
    content: "\f053"; /* كود Unicode لسهم chevron-left في Font Awesome */
}

.swiper-button-next.main-slider-nav-arrow::before {
    content: "\f054"; /* كود Unicode لسهم chevron-right في Font Awesome */
}


/* تحديد موقع الأزرار (يمكنك تعديل هذه القيم) */
.main-slider-nav-prev {
    left: 25px; /* تقريبها قليلاً من الحافة */
}
.main-slider-nav-next {
    right: 25px; /* تقريبها قليلاً من الحافة */
}

/* حالة التعطيل (عندما تكون في البداية أو النهاية ولا يوجد loop) */
.main-slider-nav-arrow.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    background-color: rgba(var(--clr-background-secondary-rgb, 34, 34, 34), 0.4) !important;
    border-color: rgba(var(--clr-theme-primary-rgb, 238, 238, 238), 0.1) !important;
    color: rgba(var(--clr-theme-primary-rgb, 238, 238, 238), 0.4) !important;
    box-shadow: none !important;
    transform: translateY(-50%) scale(1) !important; /* إزالة تأثير التكبير */
}

/* --- Swiper Navigation (Main Slider) - ELEGANT CUSTOM ARROWS --- */
.main-slider-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; 
    height: 48px;
    background-color: rgba(var(--clr-background-secondary-rgb, 34, 34, 34), 0.55); 
    border: 1.5px solid rgba(var(--clr-theme-primary-rgb, 238, 238, 238), 0.15); 
    /* لا نحدد color هنا مباشرة للزر، بل للأيقونة */
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease; /* أزل color من هنا */
    z-index: 20; 
    opacity: 0.75; 
    outline: none; 
    box-shadow: 0 2px 8px rgba(var(--clr-black-true-rgb, 0, 0, 0), 0.2); 
}

.main-slider-nav-arrow:hover {
    background-color: var(--clr-theme-accent);
    border-color: transparent; 
    transform: translateY(-50%) scale(1.08); 
    opacity: 1;
    box-shadow: 0 4px 12px rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.3); 
}

/* إزالة الـ ::after الافتراضي لـ Swiper */
.main-slider-nav-arrow::after {
    display: none; 
}

/* تصميم الأيقونة وتلوينها مباشرة */
.swiper-button-prev.main-slider-nav-arrow::before,
.swiper-button-next.main-slider-nav-arrow::before {
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    font-size: 1.1rem; 
    line-height: 1; 
    color: var(--clr-theme-accent); /* <<-- اللون الذهبي الافتراضي للأيقونة مباشرة */
    transition: color 0.3s ease; /* انتقال للون الأيقونة */
}

/* تغيير لون الأيقونة عند مرور الفأرة على الزر */
.main-slider-nav-arrow:hover::before {
    color: var(--clr-black-true); /* <<-- لون الأيقونة أسود عند المرور */
    /* أو إذا أردت أبيض: */
    /* color: var(--clr-theme-primary); */
}


.swiper-button-prev.main-slider-nav-arrow::before {
    content: "\f053"; 
}

.swiper-button-next.main-slider-nav-arrow::before {
    content: "\f054"; 
}


/* تحديد موقع الأزرار */
.main-slider-nav-prev {
    left: 25px; 
}
.main-slider-nav-next {
    right: 25px; 
}

/* حالة التعطيل */
.main-slider-nav-arrow.swiper-button-disabled {
    opacity: 0.35 !important;
    cursor: default !important;
    background-color: rgba(var(--clr-background-secondary-rgb, 34, 34, 34), 0.4) !important;
    border-color: rgba(var(--clr-theme-primary-rgb, 238, 238, 238), 0.1) !important;
    box-shadow: none !important;
    transform: translateY(-50%) scale(1) !important;
}

/* لون الأيقونة في حالة التعطيل */
.main-slider-nav-arrow.swiper-button-disabled::before {
    color: rgba(var(--clr-theme-accent-rgb, 197, 164, 126), 0.4) !important; /* لون ذهبي باهت */
}