:root {
    --bg-dark-header: #0e0e12;
    --bg-body-dark: #000000;
    --text-white: #ffffff;
    --text-dark: #111116;
    --text-gray-muted: #6b7280;
    --accent-purple: #a855f7;
    --accent-magenta: #d946ef;
    --bg-light-neutral: #f9fafb;
    --bg-card-gray: #ffffff;
    --yellow-accent: #facc15;
    --border-light: rgba(0, 0, 0, 0.06);
    --accent: #06b6d4;

}

.theme-cardm {
    display: none;
}

.mobile-menu {
    display: none;
}

/* تنسيق الحاوية الخارجية */
.problem-code-container {
    border-radius: 10px;
    padding: 16px 20px;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--btn) transparent;
    margin: 15px 0;
    /* position: absolute; top: 10%; left: 0%; */
    background-color: var(--select-input1);
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Container & Code Reset */
.problem-code-container code.hljs {
    counter-reset: line-number;
    display: block;
    background: transparent !important;
    padding: 0 !important;
}

/* Individual line structure */
.problem-code-container .code-line {
    display: block;
    position: relative;
    padding-left: 45px;
    /* Space for numbers on left */
    white-space: pre;
}

/* Line Numbering pseudo-element */
.problem-code-container .code-line::before {
    counter-increment: line-number;
    content: counter(line-number);
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    text-align: right;
    color: rgb(119, 145, 112);
    user-select: none;
    border-right: 1px solid #3e4451;
    padding-right: 8px;
}

/* ضبط عنصر pre */
.problem-code-container pre {
    margin: 0;
    padding: 0;
    background: transparent !important;
}

/* الحاوية الأساسية التي تحمل الكود */
.problem-code-container {
    transition: all 0.3s ease;
}

/* للصورة الطولية (تنزل مع السكرول) */
.problem-code-container.enable-scroll-down {
    position: relative;
    top: 0;
}

/* للصورة المربعة (تثبت في مكانها) */
.problem-code-container.disable-scroll-down {
    position: sticky;
    top: 20px;
}

/* تحكم خاص بالـ ID للحاوية الأساسية */
#web-problem-container-0 {
    /* تنسيق خاص بالحاوية دي بالتحديد */
}


/* ألوان تظليل العناصر (Syntax Highlighting) لتماثل الصورة */
.problem-code-container .selector {
    color: #e05661;
}

/* مثل: body */
.problem-code-container .property {
    color: #56b6c2;
}

/* مثل: font-family */
.problem-code-container .value {
    color: #61afef;
}

.problem-text-container {
    border-radius: 10px;
    padding: 16px 20px;
    font-family: 'CairoBold';
    font-weight: 400;
    height: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--btn) transparent;
    position: absolute;
    top: 83%;
    left: 52%;
    /* background-color: var(--select-input1); */
    max-width: 50%;
    z-index: 2;

}

#problem-web-text {
    width: 100%;
    /* غيرناها من 10% لـ 100% */
    overflow-wrap: break-word;
    word-wrap: break-word;

}

/* للصورة الطولية (تنزل مع السكرول) */
.problem-text-container.enable-scroll-down {
    position: relative;
    top: 0;
}

/* للصورة المربعة (تثبت في مكانها) */
.problem-text-container.disable-scroll-down {
    position: sticky;
    top: 20px;
}

/* Hero Carousel Section */
.hero-carousel-section {
    background: linear-gradient(135deg, var(--select-input) 0%, var(--select-input2) 100%);
    color: var(--text);
    border-radius: 20px;
    padding: 60px 0;
    position: relative;
    width: 85%;
    margin: 10px auto;
    overflow: hidden;
}

/* مسار الشرايح وإعداد شكل الماوس */
.hero-slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
    cursor: grab;
    user-select: none;
}

.hero-slider-track:active {
    cursor: grabbing;
}

/* ضمان عرض كل شريحة بالكامل دون اختفاء المحتوى */
.slide-item {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* نقاط التنقل وتغيير المؤشر عند الوقوف عليها */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.carousel-dots .dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    cursor: pointer;
    /* تغيير شكل الماوس ليد عند الضغط */
    transition: all 0.3s ease;
}

.carousel-dots .dot.active {
    width: 32px;
    border-radius: 8px;
    background: var(--text-error, #c5a880);
}

.hero-banner {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    justify-content: space-around;
    align-items: center;
}

.hero-text-col {
    width: 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0 50;
}

/* محاذاة النص يمين في العربي ويسار في الإنجليزي تلقائيًا */
[lang="ar"] .hero-text-col {
    align-items: flex-start;
    text-align: right;
}

[lang="en"] .hero-text-col {
    align-items: flex-start;
    text-align: left;
}

.hero-heading {
    font-size: 3.0rem;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 20px;
}

.hero-h {
    font-size: 2.6rem;
    position: relative;
    margin-bottom: 24px;
    background: linear-gradient(90deg, var(--text-error), var(--texttran2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.hero-desc {
    font-size: 1.1rem;
    width: 50%;
    font-size: 1.25rem;
    width: 90%;
    color: var(--texttransparent, #a1a1aa);
    font-weight: 400;
    margin-bottom: 35px;
    line-height: 1.8;
}

.btn-hero-action {
    background-color: var(--icontransparent2, #c5a880);
    border-radius: 30px;
    color: var(--texttran3, #000000);
    padding: 18px 42px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 1.15rem;
    font-weight: 700;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.hero-img-col {
    position: relative;
    width: 50%;
    /* background: #c5a88083; */
    height: auto;
    margin: 0 20;
}

.hero-img-col img {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.img-preview-card {
    /* background: rgba(255, 255, 255, 0.15); */
    /* width: 560px; */
    /* height: 480px; */
    /* border-radius: 16px; */
    /* backdrop-filter: blur(8px); */
    /* border: 1px solid rgba(255, 255, 255, 0.2); */
    /* position: relative; */
}



.avatar-bubble {
    position: absolute;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);

}

/* Stat Ribbon Section */
.stat-ribbon {
    background-color: #f3f4f6;
    border-bottom: 1px solid #e5e7eb;
    padding: 24px 0;
}

.ribbon-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.ribbon-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ribbon-icon {
    font-size: 1.5rem;
}

.ribbon-text {
    font-size: 0.95rem;
    color: #374151;
}

/* Section Containers */

.section-container {
    /* padding: 80px 0; */
    /* background: darkgoldenrod; */
    display: inline-flex;
    position: relative;
    color: var(--text);
    font-family: 'Poppins', sans-serif;
    width: 92%;
    left: 131;
    height: auto;
    align-items: center;
    /* justify-content: center; */
    /* justify-items: flex-end; */
    flex-direction: column !important;
    margin: 10 0;
}

.q {
    /* background: rgb(28, 48, 228); */
    width: 100%;
    height: auto;
    margin: 10 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-main-title {
    font-size: 2.2rem;
    font-weight: 700;
    text-align: center;
    margin: 10;
    letter-spacing: -0.5px;
}

.workflow-promo-block {
    /* background: rgb(26, 190, 114); */
    display: flex;
    background: linear-gradient(135deg, var(--select-input) 0%, var(--select-input2)100%);
    border: 1px solid var(--icon1);
    border-radius: 16px;
    width: 100%;
    /* padding: 111 111; */
    height: 500;
    overflow: hidden;
    /* box-shadow: 0 4px 20px rgba(0,0,0,0.03); */
    align-items: center;
}

.workflow-img-side {
    flex: 1;
    background: var(--select-input);
    width: 50px;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 50;
    padding: 10 10;
    border-radius: 20px;
}

.workflow-img-side img {
    flex: 1;
    width: 100%;
    height: auto;
}

.workflow-text-side {
    /* background: var(--select-input); */
    flex: 1;
    padding: 50px;
}

.block-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 15px;

}

.block-desc {
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 25px;
    color: var(--texttransparent);
    font-weight: 999;

}

.btn-link-action {
    background-color: var(--icontransparent1);
    color: var(--texttran2);
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 999;
    text-decoration: none;
}


/* Slider Mockups */
/* ==================================================== */
/* 1. التنسيقات الأساسية وتوزيع الشاشة (Layout) */
/* ==================================================== */
.main-dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 0px;
    padding: 10px;
    width: 100%;
    margin: 0 auto;
}

.top-cards-menu {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    width: 100%;
    margin-bottom: 10px;
}

.content-workspace {
    display: flex;
    flex-direction: row-reverse;
    gap: 25px;
    width: 100%;
    align-items: flex-start;
}

#dynamic-content-workspace{
    width: 100%;
}

.slider-wrapper {
    width: 100%;
    background: linear-gradient(135deg, var(--select-input) 0%, var(--select-input2) 100%);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    border: 1px solid #222;
    position: relative;
}

.topdynamic-cards{
    /* width: 100%; */
    /* background: linear-gradient(135deg, var(--select-input) 0%, var(--select-input2) 100%); */
    /* border-radius: 20px; */
    /* padding: 30px; */
    display: inline-flex;
    flex-direction: row;
    /* max-height: 700; */
    /* justify-content: center; */
    /* align-items: center; */
    box-sizing: border-box;
    position: relative;
}

/* ==================================================== */
/* 2. تحويل الراديو الجانبي إلى أزرار تصفح (Tabs) */
/* ==================================================== */
.display-mode-selector {
    display: flex;
    background: var(--lightboby);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 20px;
    border: 1px solid #333;
}

.mode-tab {
    flex: 1;
    text-align: center;
    cursor: pointer;
    position: relative;
}

/* إخفاء دائرة الراديو الافتراضية تماماً */
.mode-tab input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* تصميم الزرار البديل */
.mode-tab span {
    display: block;
    padding: 10px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

/* تأثير زر الراديو النشط (البرتقالي المضيء) */
.mode-tab input[type="radio"]:checked+span {
    background: var(--icon1);
    /* اللون البرتقالي الهوية */
    color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* حاوية أزرار الزوم */
.zoom-controls {
    transform: scale(0.9);
    padding: 0;
    position: relative;
    bottom: 0;
    left: 0 !important;
    width: 50%;
    justify-content: space-around;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* background: rgba(30, 30, 30, 0.75); */
    /* background: var(--Cards); */
    /* padding: 8px 15px; */
    /* border-radius: 30px; */
    /* backdrop-filter: blur(5px); */
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    z-index: 7;
    margin: 0 auto;
}

.zoom-btn {
    background: transparent;
    border: none;
    color: #b5b5b5;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 20px;
    transition: all 0.2s ease-in-out;
}

.zoom-btn:hover {
    background: var(--icontransparent2);
    color: #fff;
}

.zoom-btn:active {
    background: transparent;
    transform: scale(0.95);
}

/* ==================================================== */
/* 3. حاويات أدوات العرض (سلايدر، عزل، فيديو، إزالة أشياء) */
/* ==================================================== */

/* [1] حاوية السلايدر (الجودة والتحويل) */

.demo-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    user-select: none;
    background: #000;
}
.demo-slider-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.image-after {
    z-index: 1;
}

.image-before {
    z-index: 2;
    width: 100% !important;
    clip-path: inset(0 50% 0 0);
    transition: none;
}

.slider-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: #ffffff;
    z-index: 10;
    cursor: ew-resize;
    transform: translateX(-50%);
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 50px;
    height: 100%;
    cursor: ew-resize;
}

.slider-line {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    transform: translateX(-50%);
    z-index: 3;
    pointer-events: none;
    background-color: var(--btn1);
    cursor: ew-resize;
    transform: translateX(-50%);
}

.slider-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* display: flex; */
    /* align-items: center; */
    /* justify-content: center; */
    color: var(--text);
    font-size: 21;
    background: var(--btn1);
    padding: 7.6 5 13 5;
    border-radius: 50px;
    pointer-events: none;
}

.slider-button span {
    background: var(--btn);
    padding: 5 10 10 10;
    border-radius: 50px;
    font-weight: bold;
}

/* [2] حاوية أداة العزل المنفصلة */
.demo-blur-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.blur-full-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* #compare-slider-removal, #slider-line-removal {
    position: absolute;
    top: 0;
    height: 100%;
}

#slider-line-removal {
    width: 2px;
    background: #fff;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
} */

/* [3] حاوية أداة إزالة الأشياء (الصور الموزعة) */
.demo-ObjectRemoval-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.demo-ObjectRemoval-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;

}

/* توزيع عناصر إزالة الأشياء بالـ absolute */
.demo-ObjectRemoval-container .i1_no {
    top: 5%;
    left: 5%;
}

.demo-ObjectRemoval-container .i1_arrows {
    top: 25%;
    left: 25%;
}

.demo-ObjectRemoval-container .i1_ObRol {
    top: 45%;
    left: 45%;
}

.demo-ObjectRemoval-container .i2_no {
    top: 10%;
    left: 65%;
}

.demo-ObjectRemoval-container .i2_arrows {
    top: 30%;
    left: 75%;
}

.demo-ObjectRemoval-container .i2_ObRol {
    top: 50%;
    left: 85%;
}


/* شريط بيانات تحويل الصيغ العلوى */
.converter-info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(30, 30, 30, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 8px 16px;
    border-radius: 8px 8px 0 0;
    margin-bottom: -4px;
    /* ليلتحم مع إطار الصورة السفلي */
    z-index: 10;
    position: relative;
}

.info-left,
.info-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* شارات الصيغ المستوحاة من الصورة الأولى */
.badge-format {
    background: #4f46e5;
    /* لون بنفسجي احترافي */
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 6px;
    text-transform: uppercase;
}

.badge-format.target-badge {
    background: #10b981;
    /* لون أخضر للصيغة الجديدة المحسنة */
}

/* نصوص الأحجام المستوحاة من الصورة الثانية */
.size-text {
    color: #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    font-family: monospace;
}

.size-text.savings {
    color: #34d399;
    /* لون مميز للحجم الصغير المحسن */
}

.converter-option-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* عشان يرمي الزرار في ناحية والكلام في ناحية */
    flex-direction: row-reverse;
    /* لو محتاج تقلب الترتيب في العربي */
    gap: 10px;
    width: 100%;
}

/* تعديل بسيط لحاوية السلايدر لتلتحم مع الشريط العلوي */
.slider-images-container {
    position: relative;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}


/* ==================================================== */
/* 4. مشغل الفيديوهات وشريط التحكم المخصص (يوتيوب ستايل) */
/* ==================================================== */
/* .video-display-box, .demo-static-container {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
} */

.demo-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}


/* ==================================================== */
/* 5. الكلاس العام للإخفاء وتنسيق اللوحات الجانبية والكروت */
/* ==================================================== */
.hide {
    display: none !important;
}

.tool-card {
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 10px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    gap: 10px;
    transition: all 0.3s ease;
    color: #888;
    text-decoration: none;
}

.tool-card.active,
.tool-card:hover {
    border-color: var(--btn1);
    color: var(--btn1);
    background: var(--header);
}

#dynamic-toggles-container,
.toggles-container {
    width: 30%;
    box-sizing: border-box;
}
.toggles-container {
    min-height: 380px;
    background: var(--Cards1);
    color: var(--textc);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--btn1);

    width: 100%;
}

.toggles-container h3 {
    margin-top: 0;
    font-size: 18px;
    border-bottom: 1px solid var(--btn1);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

/* تنسيق الجملة التوضيحية عند تشغيل وضع الفيديو */
.video-mode-message {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 10px;
    animation: fadeIn 0.3s ease-in-out;
}

.video-active-status {
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 12px;
    width: 100%;
}

.video-active-status span {
    display: block;
    font-size: 16px;
    font-weight: bold;
    color: var(--icon1);
    /* اللون البرتقالي الهوية الخاص ببيكسلوم */
    margin-bottom: 8px;
}

.video-active-status p {
    font-size: 13px;
    color: var(--text);
    opacity: 0.6;
    margin: 0;
}

/* حركة تظهر النص بسلاسة */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.toggle-item {
    font-size: 21;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--btn1);

}

/* تنسيق الـ Checkbox الخاص بخيارات تحسين الجودة */
.toggle-item input[type="checkbox"] {
    position: relative;
    width: 45px;
    height: 24px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--lightboby);
    border-radius: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.toggle-item input[type="checkbox"]:checked {
    background: var(--icon1);
}

.toggle-item input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background: var(--text);
    transition: 0.3s;
}

.toggle-item input[type="checkbox"]:checked::before {
    left: 23px;
}

/* تنسيق الراديو العادي الداخلي (مستويات العزل فقط) */
.toggle-item input[type="radio"] {
    position: relative;
    width: 22px;
    height: 22px;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid var(--texttran);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toggle-item input[type="radio"]:checked {
    border-color: var(--icon1);
}

.toggle-item input[type="radio"]::before {
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--icon1);
    transform: scale(0);
    transition: transform 0.2s;
}

.toggle-item input[type="radio"]:checked::before {
    transform: scale(1);
}

/* 2. الاستايل الافتراضي للزرار (الـ Label) وهو مش متنشط */
.toggle-item .custom-radio-btn {
    display: block;
    padding: 10px 15 10 5;
    /* background: rgba(255, 255, 255, 0.05); */
    color: #b3b3b3;
    border-radius: 8px;
    width: 100%;
    font-size: 16;
    cursor: pointer;
    transition: all 0.3s ease;
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    background: var(--texttran);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-decoration: line-through; */
}

/* 2. الاستايل الافتراضي للزرار (الـ Label) وهو مش متنشط */
.toggle-item span {
    display: block;
    text-align: center;
    color: #b3b3b3;
    border-radius: 8px;
    width: 15%;
    /* font-size: 15;   */
    font-weight: 100;
    cursor: pointer;
    transition: all 0.3s ease;
    /* border: 1px solid rgba(255, 255, 255, 0.1); */
    background: var(--texttran);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* text-decoration: line-through; */
}

[lang="ar"] .toggle-item span {
    font-size: 14;
    margin: 0 10 0 0;
}

[lang="en"] .toggle-item span {
    font-size: 11;
    margin: 0 10 0 0;
}

/* 3. السحر كله هنا: بنقول للـ CSS لو الـ toggle-item جواها input معمول عليه checked، غير استايل الـ label اللي جواه فوراً */
.toggle-item:has(input[type="radio"]:checked) .custom-radio-btn {
    color: #ffffff !important;
    /* background: color-mix(in srgb, var(--btn1) 5%, transparent) !important; */
    border-color: transparent;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    /* background: var(--btn1) !important; */
    /* -webkit-background-clip: border-box !important; */
}

/* 3. السحر كله هنا: بنقول للـ CSS لو الـ toggle-item جواها input معمول عليه checked، غير استايل الـ label اللي جواه فوراً */
.toggle-item:has(input[type="radio"]:checked) span {
    color: #2aff7c !important;
    /* background: color-mix(in srgb, var(--btn1) 5%, transparent) !important; */
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    color: #2aff7c !important;
    -webkit-text-fill-color: #2aff7c !important;
    /* background: var(--btn1) !important; */
    /* -webkit-background-clip: border-box !important; */
}

/*  */

/* Beyond Business Grid */
.business-profiles-grid {
    display: none;

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.profile-avatar-card {
    display: none;

    text-align: center;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    padding: 24px 16px;
    border-radius: 12px;
}

.avatar-circle {
    display: none;

    width: 64px;
    height: 64px;
    border-radius: 50%;
    margin: 0 auto 16px auto;
}

.avatar-circle.av1 {
    display: none;

    background: #fca5a5;
}

.avatar-circle.av2 {
    display: none;

    background: #93c5fd;
}

.avatar-circle.av3 {
    background: #86efac;
}

.avatar-circle.av4 {
    background: #fde047;
}

.avatar-circle.av5 {
    background: #c084fc;
}

.profile-avatar-card h4 {
    display: none;

    font-size: 1.05rem;
    margin-bottom: 8px;
}

.profile-avatar-card p {
    display: none;

    font-size: 0.85rem;
    color: var(--text-gray-muted);
}

/* Testimonials Grid */
.testimonials-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testimonial-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.t-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
    padding-bottom: 8px;
}

.t-handle {
    color: #9ca3af;
}

.t-body {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
}

/* As Seen On Row */
.as-seen-on {
    padding: 40px 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    text-align: center;
    display: block;
}

.as-seen-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 1.5px;
    margin-bottom: 20px;
}

.logo-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.media-logo-mock {
    font-size: 1.3rem;
    font-weight: 700;
    color: #9ca3af;
}

/* News Section with Gradient Background */
.news-section {
    background: linear-gradient(180deg, #1d4ed8 0%, #701a75 100%);
    padding: 80px 0;
}

.text-white {
    color: #ffffff;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

.news-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    color: #ffffff;
}

.news-img {
    height: 180px;
}

.news-img.n1 {
    background: #312e81;
}

.news-img.n2 {
    background: #581c87;
}

.news-img.n3 {
    background: #03414e;
}

.news-info {
    padding: 24px;
}

.news-tag {
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 12px;
}

.news-info h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    line-height: 1.4;
}

.news-info p {
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 15px;
}

.news-link {
    color: #67e8f9;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.view-all-center {
    text-align: center;
}

.btn-outline-white {
    border: 2px solid #ffffff;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    display: inline-block;
}

/* Yellow Offer Callout Box */
.sub-callout-section {
    padding: 60px 0;
    background: #ffffff;
}

.yellow-box {
    background-color: #fde047;
    border-radius: 16px;
    padding: 50px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    color: #000000;
    box-shadow: 0 10px 30px rgba(250, 204, 21, 0.2);
}

.gift-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.yellow-box h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.yellow-box p {
    font-size: 1rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

.sub-form-row {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    gap: 10px;
}

.sub-form-row input {
    flex: 1;
    border: none;
    padding: 14px 20px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.btn-sub-action {
    background: #000000;
    color: #ffffff;
    border: none;
    padding: 0 28px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* =========================================================
   Why Choose Us Section
   ========================================================= */
.why-us-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--select-input, #1e232a) 0%, var(--select-input2, #0f1115) 100%);
    color: var(--text, #ffffff);
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    align-items: center;
}

.why-us-section .section-header,
.contact-section .section-header {
    text-align: center !important;
    max-width: 750px;
    margin: 0 auto 50px auto;
}

.why-us-section .section-header h2,
.contact-section .section-header h2 {
    text-align: center !important;
    font-size: 2.3rem;
    font-weight: 800;
    color: var(--text, #ffffff);
    margin-bottom: 15px;
}

.why-us-section .section-header p,
.contact-section .section-header p {
    text-align: center !important;
    font-size: 1.05rem;
    color: var(--texttransparent, #9ca3af);
    line-height: 1.7;
}

/* Grid Design */
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: start;
    width: 90%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* تجبر العناصر تترص 4 في كل صف */
    gap: 24px;
}

/* Feature Card */
.feature-card {
    background: var(--Cards1, #1a1d24);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px 40px;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--icon, #c5a880);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    font-size: 2.2rem;
    color: var(--icon, #c5a880);
    background: rgba(197, 168, 128, 0.1);
    width: 55px;
    height: 55px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text, #ffffff);
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 0.95rem;
    color: var(--texttransparent, #9ca3af);
    line-height: 1.7;
    margin: 0;
}



/* Dark Footer Layout */
.footer-dark {
    color: #9ca3af;
    padding: 80px 0 30px 0;
    position: relative;
    color: var(--text);
    font-size: 16;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: 40px;
    padding: 60 0 0 0;
    width: 90%;
    border-top: 1px solid var(--btn);

}

.footer-brand-col {
    /* background: rgba(255, 217, 0, 0.493); */
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-brand-col .logo {
    /* color: var(--text); */
    margin-bottom: 20px;
    font-size: 3.5rem;
    position: relative;
    left: -14;
    display: flex;
    justify-items: flex-end;
    justify-content: center;
    align-items: center;
    direction: ltr !important;
}

footer .header-logo {
    width: 20%;
    height: auto;
    object-fit: contain;
    border-radius: 10%;
    width: 70;
    left: 20;
    margin: 0 10;
    position: relative;
    transition: opacity 0.4s ease;
}


.footer-brand-col .logo .logo-text {
    margin: 0 20;
    text-align: center;
}

.brand-subtext {
    /* font-size: 1.0rem; */
    line-height: 1.6;
    font-weight: 100;
    width: 95%;
}

.footer-links-col h5 {
    /* color: #ffffff; */
    /* font-size: 1rem; */
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-links-col a {
    color: var(--texttransparent);
    opacity: 0.7;
    text-decoration: none;
    display: block;
    /* font-size: 0.9rem; */
    margin-bottom: 12px;
    position: relative;
}

.footer-links-col a:hover,
.footer-links-col a:active {
    color: var(--icon);
    left: 8px;

}

.footer-copyright-bar {
    background: var(--Cards1);
    /* border-top: 1px solid rgba(255, 255, 255, 0.06); */
    padding: 20 0;
    text-align: center;
    font-size: 0.85rem;
    top: 31;
    position: relative;
    display: flex;
    align-items: center;
    justify-items: center;
}

footer .buttom_footer {
    display: flex;
    position: relative;
    top: 29;
    flex-direction: row;
    /* إجبار النصوص تفضل بالعرض مش بالطول */
    flex-wrap: wrap;
    /* لو الشاشة صغيرة جداً يلموا جوه المساحة بمرونة */
    justify-content: left;
    /* التمركز في منتصف الشاشة */
    align-items: center;
    gap: 5px;
    /* مسافة صغيرة رايقة بين الكلمة والتانية */
    height: auto;
    /* يظبط ارتفاعه تلقائي حسب السطر */
    width: 100%;
    max-width: 100%;
    padding: 20px 5px;
    box-sizing: border-box;
    background-color: var(--Cards1);
}

html[lang="ar"] footer .buttom_footer {
    justify-content: right;
    direction: rtl;
}

.t1_1,
.t1_2,
.t1_3,
.t2,
footer .buttom_footer a,
footer .buttom_footer .t1 {
    display: inline-block !important;
    cursor: default;
    /* معاملة الكلمات كقطع بجانب بعضها */
    /* position: relative !important; */
    /* left: 0 !important; */
    /* إلغاء الترحيل القديم اللي كان بيبوظ الأبعاد */
    /* right: 0 !important; */
    /* white-space: nowrap !important; */
    /* يمنع الكلمة الواحدة تنكسر نصين */
    /* font-size: 1rem; */
    /* حجم خط مناسب جداً ومقروء للموبايل */
    /* margin: 0 50 !important; */
    /* width: auto !important; */
    /* العرض على قد الكلمة بالظبط */
}


html[lang="en"] footer .buttom_footer .t1 {
    margin: 0 110 !important;
}

html[lang="ar"] footer .buttom_footer .t1 {
    margin: 0 100 !important;
}

.t1_2,
.t1_3,
footer .buttom_footer a {
    color: var(--icon1);
    cursor: pointer;
}

.t1_3 {
    color: var(--icon);
    cursor: default;
}

/*  */

footer .social-menu {
    /* background: rgba(206, 135, 42, 0.791); */
    position: relative;
    width: 100%;
    height: 70;
    /* transform: translate(-50%, -50%); */
}

footer .social-menu ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-content: space-between;
    align-items: end;
    justify-content: center;
}

footer .social-menu ul p {
    display: none;
    position: absolute;
    top: -10%;
    width: 100%;
    text-align: center !important;
    /* background: #1479de; */
    /* transform: translate(-50%, -50%); */
    z-index: 1000;
    color: var(--text);
    font-size: 25px;
    font-weight: bolder;

}

footer .social-menu ul li {
    list-style: none;
    margin: 0 10px;
}

footer .social-menu ion-icon {
    color: var(--btn1);
    font-size: 21;
    line-height: 1.5;
}

footer .social-menu ul li a {
    position: relative;
    display: block;
    width: 50px;
    height: 40px;
    border-radius: 30%;
    /* background-color: var(--text); */
    background: transparent;
    text-align: center;
    transition: .6s;
    /* box-shadow: 0 5px 4px rgba(0, 0, 0, .5); */
}

footer .social-menu ul li a:hover {
    transform: translate(0, -10%);
}


/*  */


/* ==========================================================================
   iPad & Tablet Media Query (شاشات الآيباد والتابلت فقط)
   بدون تغيير الألوان أو الخلفيات أو الخصائص الأساسية - تصغير أحجام فقط
   ========================================================================== */

@media (min-width: 700px) and (max-width: 1120px) {


    .sidebar {
        display: none;
    }

    /* ضبط الحاوية الأساسية لتناسب عرض الآيباد */
    .container {
        max-width: 960px;
        padding: 0 20px;
    }

    /* إلغاء الـ Left الثابت الكبير الذي يسبب خروج الأقسام عن الشاشة */
    .container,
    .hero-carousel-section,
    .section-container,
    .main-dashboard-layout {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        padding: 15px !important;
        margin: 10px 0 !important;
        box-sizing: border-box;
    }

    /* إلغاء الـ ترحيل بالـ بكسل المكسور في اللغتين للموبايل */
    [lang="ar"] .hero-carousel-section,
    [lang="ar"] .hero-text-col,
    [lang="ar"] .hero-img-col {
        /* right: 0 !important; */
        /* left: 0 !important; */
    }

    /* قسم الهيرو (البانر الرئيسي) */
    .hero-banner {
        min-height: auto;
        padding: 20px;
        gap: 20px;
    }

    .hero-text-col {
        right: 0 !important;
        /* إلغاء الإزاحة الثابتة الكبيرة */
        width: 50% !important;
    }

    .hero-heading {
        font-size: 2.5rem;
        /* تصغير حجم الخط ليناسب الآيباد */
        margin-bottom: 15px;
    }

    .hero-desc {
        width: 100%;
        font-size: 1.0rem;
        margin-bottom: 20px;
    }

    .hero-img-col {
        /* left: 0 !important; */
        /* إلغاء الإزاحة الثابتة الكبيرة */
        /* max-width: 50%; */
    }

    .hero-img-col img {
        height: auto;
        /* ترك الارتفاع يتناسب تلقائياً مع العرض الجديد */
    }

    /* تصغير العناصر التفاعلية العائمة إن وجدت */
    .main-av {
        width: 70px;
        height: 70px;
        font-size: 1.8rem;
    }

    /* أقسام المحتوى والميزات */
    .section-main-title {
        font-size: 1.8rem;
    }

    .workflow-promo-block {
        height: auto;
        /* جعل الارتفاع مرن لتفادي حشر النص */
        padding: 30px 20px;
    }

    .workflow-img-side {
        margin: 0 20px;
    }

    .workflow-text-side {
        padding: 20px;
    }

    .block-title {
        font-size: 1.4rem;
    }

    /* منطقة لوحة التحكم (التحسين ومقارنة الصور) */
    .content-workspace {
        flex-direction: column-reverse !important;
        /* ترتيب عمودي ذكي للآيباد ليصبح المقارن تحت والخيارات فوق أو العكس حسب الانسيابية */
        gap: 20px;
    }

    .toggles-container {
        width: 100% !important;
        /* جعل صندوق الخيارات يأخذ العرض كاملاً فوق أو تحت السلايدر */
        height: auto !important;
        /* إلغاء الارتفاع الثابت الكبيرة 720px */
    }


    .demo-video {
        object-fit: fill !important;
    }

    /* ==================================================== */
    /* 2. حاوية التحكم العايمة (The Floating Bar) */
    /* ==================================================== */
    .video-controls {
        bottom: 20px;
        left: 50%;
        width: 100%;
        padding: 8px 18px;
    }

    /* ستايل الأزرار الموحد داخل المشغل */
    .video-controls button {
        font-size: 18 !important;
        padding: 10 25 !important;
    }

    /* تنسيق عرض التوقيت الرقمي */
    .time-display {
        font-size: 18 !important;
    }

    /* زر الـ Play/Pause */
    .play-btn {
        /* font-size: 1 !important; */
        padding: 0;
        width: 55 !important;
        height: 35 !important;
        /* background: red !important; */
    }


    /* تصغير أحجام الكروت والأيقونات العلوية */
    .top-cards-menu {
        gap: 10px;
        flex-wrap: wrap;
        /* السماح للكروت بالالتفاف إذا ضاق العرض */
    }

    .tool-card {
        padding: 8px 16px;
        gap: 8px;
    }

    .tool-card i,
    .tool-card ion-icon {
        font-size: 20px !important;
        /* تصغير حجم الأيقونات */
    }

    .tool-card span {
        font-size: 10px;
    }

    /* الفوتر (Footer) */
    .footer-grid {
        grid-template-columns: 1.5fr repeat(2, 1fr);
        /* تحويل التوزيع ليناسب شاشة الآيباد العريضة بدلاً من 5 أعمدة مضغوطة */
        gap: 25px;
        padding-top: 40px;
    }

    .footer-brand-col .logo {
        font-size: 26px;
    }


    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footer-brand-col {
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-brand-col .logo .logo-text {
        font-size: 3.0rem !important;
        text-align: center !important;

    }

    .brand-subtext {
        font-size: 1.0rem !important;
        line-height: 1.2;
        width: 50%;
        text-align: center !important;
        margin-bottom: 0px;
    }

    /* ==========================================================================
       تعديل نصوص حقوق الفوتر (Texts) لتكون بالعرض وجنب بعضها في الموبايل
       ========================================================================== */
    footer .buttom_footer {
        display: flex !important;
        flex-direction: row !important;
        /* إجبار النصوص تفضل بالعرض مش بالطول */
        flex-wrap: wrap !important;
        /* لو الشاشة صغيرة جداً يلموا جوه المساحة بمرونة */
        justify-content: center !important;
        /* التمركز في منتصف الشاشة */
        align-items: center !important;
        gap: 5px !important;
        /* مسافة صغيرة رايقة بين الكلمة والتانية */
        height: auto !important;
        /* يظبط ارتفاعه تلقائي حسب السطر */
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 5px !important;
        box-sizing: border-box;
        /* background: rgb(77, 182, 17) !important; */
    }

    html[lang="ar"] footer .buttom_footer {
        justify-content: center !important;
    }

    .t1_1,
    .t1_2,
    .t1_3,
    .t2,
    footer .buttom_footer a,
    footer .buttom_footer .t1 {
        display: inline-block !important;
        /* معاملة الكلمات كقطع بجانب بعضها */
        position: relative !important;
        left: 0 !important;
        /* إلغاء الترحيل القديم اللي كان بيبوظ الأبعاد */
        right: 0 !important;
        white-space: nowrap !important;
        /* يمنع الكلمة الواحدة تنكسر نصين */
        font-size: 1.5rem !important;
        /* حجم خط مناسب جداً ومقروء للموبايل */
        margin: 0 !important;
        width: auto !important;
        /* العرض على قد الكلمة بالظبط */

    }

    html[lang="en"] footer .buttom_footer .t1 {
        margin: 0 !important;
    }

    html[lang="ar"] footer .buttom_footer .t1 {
        margin: 0 font-family: 'CairoBold', sans-serif;
        ;
    }



}

/* ==========================================================================
   تنسيقات الشاشات الصغيرة والموبايل (من 100 بكسل إلى 452 بكسل)
   ========================================================================== */