:root {
       
        --primary-gold: #FFD700; /* ذهبي رئيسي - لون الذهب الخالص */
    --light-gold: #FFFACD; /* ذهبي فاتح جداً - للمكونات الخلفية الخفيفة */
    --dark-gold: #DAA520; /* ذهبي داكن - للعناوين والنصوص البارزة */

        --text-dark: #333;
        --text-medium: #555;
        --background-light: #f8f9fa;
        --white: #ffffff;
         --black: #000000; /* إضافة متغير للون الأسود */

        --border-light: #e9ecef;
        --shadow-color: rgba(0, 0, 0, 0.08);
    }

    body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
        background-color: var(--background-light);
        color: var(--text-dark);
        line-height: 1.6;
        direction: rtl;
        text-align: right;
    }

/* --- Top Info Bar --- */
.top-info-bar {
    background-color: var(--white); /* أبيض حسب طلبك */
    color: var(--text-dark); /* نص غامق ليكون واضح على الأبيض */
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    flex-wrap: wrap;
    gap: 15px;
}

.top-info-bar span {
    display: flex;
    align-items: center;
    gap: 8px;
}

.top-info-bar a {
    color: var(--text-dark); /* روابط غامقة على الأبيض */
    text-decoration: none;
    transition: color 0.3s ease;
}

.top-info-bar a:hover {
    color: var(--primary-gold); /* ذهبي عند التحويم */
}

@media (max-width: 768px) {
    .top-info-bar .hide-on-mobile {
        display: none;
    }
}

    .navbar {
    background-color: var(--black); /* أسود حسب طلبك */
    padding: 1rem 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px var(--shadow-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

    
.navbar-toggle {
    display: none;
    font-size: 2rem;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--primary-gold); /* ذهبي للأيقونة */
    padding: 0;
    z-index: 1001;
}


    .navbar-logo {
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--primary-gold);
        
        text-decoration: none;
        flex-grow: 1;
        text-align: center;
        padding: 0 20px;
    }

.nav-links-left-container,
.nav-links-right-container {
    display: flex;
    flex-grow: 1;
    align-items: center;
    justify-content: center;
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.nav-links li {
    margin: 0 18px;
}

.nav-links li a {
    text-decoration: none;
    
    color: var(--white); /* أبيض لروابط النافبار على الخلفية السوداء */
    font-weight: bold;
    font-size: 1.05rem;
    padding: 8px 0;
    transition: color 0.3s ease, border-bottom 0.3s ease;
    white-space: nowrap;
}

.nav-links li a:hover {
    color: var(--primary-gold); /* ذهبي عند التحويم */
    border-bottom: 2px solid var(--primary-gold); /* ذهبي للخط السفلي عند التحويم */
}

  .main-content {
    min-height: 100px;
    padding: 60px 20px;
    text-align: center;
    background-color: var(--background-light);
}

.main-content h1 {
    color: var(--dark-gold); /* ذهبي داكن للعناوين الرئيسية */
    font-size: 2.8rem;
    margin-bottom: 20px;
}

.main-content p {
    font-size: 1.1rem;
    color: var(--text-dark); /* نص غامق عادي */
}
/* أضف هذا الستايل إلى ملف res/styles.css */

    .featured-highlight {
        margin-top: 40px;
        padding: 20px 30px;
        background-color: var(--primary-gold); /* استخدم الذهبي الرئيسي كخلفية ملفتة */
        color: var(--black); /* نص أسود واضح */
        border-radius: 50px; /* شكل بيضاوي أنيق */
        text-align: center;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* ظل ناعم */
        display: inline-block; /* لكي لا يأخذ عرض 100% */
        max-width: 800px; /* تحديد أقصى عرض ليبقى أنيقاً */
        margin-left: auto;
        margin-right: auto;
        animation: fadeInScale 0.8s ease-out forwards; /* إضافة حركة بسيطة */
        font-weight: bold; /* نص سميك */
        font-size: 1.25rem; /* حجم خط ملفت */
        line-height: 1.5;
        position: relative; /* لتمكين التموضع */
        overflow: hidden; /* لإخفاء أي جزء زائد */
        background: linear-gradient(90deg, var(--primary-gold) 0%, var(--dark-gold) 100%); /* تدرج ذهبي */
    }

    .featured-highlight .highlight-text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px; /* مسافة بين الأيقونة والنص */
    }

    .sparkle-icon {
        font-size: 1.8rem; /* حجم أكبر لأيقونة اللمعان */
        animation: sparkle 1.5s infinite ease-in-out; /* حركة لمعان */
        display: inline-block; /* لضمان تطبيق التحريك */
    }

    /* Keyframe Animations */
    @keyframes fadeInScale {
        from {
            opacity: 0;
            transform: scale(0.8);
        }
        to {
            opacity: 1;
            transform: scale(1);
        }
    }

    @keyframes sparkle {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.2); opacity: 0.7; }
    }


    /* Responsive adjustments */
    @media (max-width: 768px) {
        .featured-highlight {
            padding: 15px 20px;
            font-size: 1.1rem;
            border-radius: 30px;
            margin-top: 30px;
        }
        .sparkle-icon {
            font-size: 1.5rem;
        }
        .featured-highlight .highlight-text {
            flex-direction: row; /*Keep in one row if fits, or let it wrap naturally*/
            gap: 8px;
        }
    }
/* --- Footer --- */
.footer {
    background-color: var(--black); /* أسود حسب طلبك */
    color: var(--white); /* أبيض للنص في الفوتر */
    padding: 30px 20px;
    text-align: center;
    font-size: 0.9rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-links li a {
    color: var(--light-gold); /* ذهبي فاتح للروابط في الفوتر */
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links li a:hover {
    color: var(--primary-gold); /* ذهبي عند التحويم */
}


    @media (max-width: 992px) {
        .navbar {
            padding: 1rem 15px;
        }

        .navbar-toggle {
            display: block;
            order: 0;
        }

        .navbar-logo {
            flex-grow: 1;
            text-align: center;
            padding: 0;
            order: 1;
        }

        @media (max-width:767px) {
            .hidden-xs {
                display: none !important
            }
        }

        @media (min-width:768px) and (max-width:991px) {
            .hidden-sm {
                display: none !important
            }
        }




        .nav-links-left-container,
        .nav-links-right-container {
            display: flex;
            flex-direction: column;
            position: absolute;

            top: 100%;
            right: 0;
            width: 100%;
            background-color: var(--black);
            box-shadow: 0 8px 16px var(--shadow-color);
            border-top: 1px solid var(--border-light);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out, opacity 0.3s ease;
            z-index: 999;
            visibility: hidden;
            opacity: 0;
        }

        .nav-links-left-container.open,
        .nav-links-right-container.open {
            max-height: 1000px;
            visibility: visible;
            opacity: 1;
        }

        .nav-links {
            
            flex-direction: column;
            width: 100%;
            text-align: center;
        }

        .nav-links li {
            margin: 10px 0;
            color:black;

        }
    }

    @media (max-width: 992px) {

        .nav-links-right-container.open,
        .nav-links-left-container.open {
            max-height: 120vh;
            /* أو حسب طول القائمة */
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            /* دعم للتمرير السلس في الهواتف */
        }
    }

    @-ms-viewport {
        width: device-width
    }

    .visible-lg,
    .visible-md,
    .visible-sm,
    .visible-xs {
        display: none !important
    }

    .visible-lg-block,
    .visible-lg-inline,
    .visible-lg-inline-block,
    .visible-md-block,
    .visible-md-inline,
    .visible-md-inline-block,
    .visible-sm-block,
    .visible-sm-inline,
    .visible-sm-inline-block,
    .visible-xs-block,
    .visible-xs-inline,
    .visible-xs-inline-block {
        display: none !important
    }

    @media (max-width:767px) {
        .visible-xs {
            display: block !important
        }

        table.visible-xs {
            display: table
        }

        tr.visible-xs {
            display: table-row !important
        }

        td.visible-xs,
        th.visible-xs {
            display: table-cell !important
        }
    }

    @media (max-width:767px) {
        .visible-xs-block {
            display: block !important
        }
    }

    @media (max-width:767px) {
        .visible-xs-inline {
            display: inline !important
        }
    }

    @media (max-width:767px) {
        .visible-xs-inline-block {
            display: inline-block !important
        }
    }

    @media (min-width:768px) and (max-width:991px) {
        .visible-sm {
            display: block !important
        }

        table.visible-sm {
            display: table
        }

        tr.visible-sm {
            display: table-row !important
        }

        td.visible-sm,
        th.visible-sm {
            display: table-cell !important
        }
    }

    @media (min-width:768px) and (max-width:991px) {
        .visible-sm-block {
            display: block !important
        }
    }

    @media (min-width:768px) and (max-width:991px) {
        .visible-sm-inline {
            display: inline !important
        }
    }

    @media (min-width:768px) and (max-width:991px) {
        .visible-sm-inline-block {
            display: inline-block !important
        }
    }
    nav a.active {
  font-weight: bold;
  color: #FFD700;
  border-bottom: 2px solid #FFD700;
}
 nav a.activee {
  font-weight: bold;
  color: black;
  background-color: white;
  border-bottom: 5px solid white;
  border-radius: 20px;
}

  /* أضف هذا الستايل إلى ملف res/styles.css الخاص بك */

    .dola-custom-ai-benefits-section {
        background-color: var(--white); /* خلفية بيضاء لتبرز المحتوى */
        padding: 80px 20px;
        text-align: center;
        border-top: 1px solid var(--border-light);
        border-bottom: 1px solid var(--border-light);
    }

    .dola-custom-ai-benefits-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .dola-custom-ai-benefits-section h2 {
        font-size: 2.8rem;
        color: var(--dark-gold); /* لون ذهبي داكن للعناوين */
        margin-bottom: 25px;
        position: relative;
        padding-bottom: 15px;
    }

    .dola-custom-ai-benefits-section h2::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background-color: var(--primary-gold); /* خط ذهبي تحت العنوان */
        border-radius: 2px;
    }

    .dola-benefits-intro {
        font-size: 1.15rem;
        color: var(--text-medium);
        max-width: 800px;
        margin: 0 auto 50px auto;
        line-height: 1.8;
    }

    .dola-benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
        justify-content: center;
        align-items: stretch;
    }

    .dola-benefit-item {
        background-color: var(--background-light); /* خلفية فاتحة للبطاقات */
        padding: 35px;
        border-radius: 12px;
        box-shadow: 0 5px 20px var(--shadow-color); /* ظل ناعم */
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        text-align: center;
        border: 1px solid transparent; /* حد شفاف للحالة العادية */
    }

    .dola-benefit-item:hover {
        transform: translateY(-8px); /* تأثير رفع عند التحويم */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* ظل أقوى */
        border-color: var(--primary-gold); /* حد ذهبي عند التحويم */
    }

    .dola-benefit-icon {
        font-size: 3.5rem;
        color: var(--primary-gold); /* أيقونات باللون الذهبي الرئيسي */
        margin-bottom: 20px;
    }

    .dola-benefit-item h3 {
        font-size: 1.7rem;
        color: var(--dark-gold);
        margin-bottom: 15px;
        font-weight: bold;
    }

    .dola-benefit-item p {
        font-size: 1rem;
        color: var(--text-dark);
        line-height: 1.7;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 768px) {
        .dola-custom-ai-benefits-section {
            padding: 50px 15px;
        }

        .dola-custom-ai-benefits-section h2 {
            font-size: 2.2rem;
            margin-bottom: 20px;
        }

        .dola-benefits-intro {
            font-size: 1rem;
            margin-bottom: 40px;
        }

        .dola-benefits-grid {
            grid-template-columns: 1fr; /* عمود واحد على الشاشات الصغيرة */
        }

        .dola-benefit-item {
            padding: 30px 20px;
        }

        .dola-benefit-icon {
            font-size: 3rem;
        }

        .dola-benefit-item h3 {
            font-size: 1.5rem;
        }
    }
    
 /* Matrix Background Styles */
        .matrix-background {
            position: fixed; /* Fixes the canvas to the viewport */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1; /* Ensures it stays behind other content */
            background-color: #000000; /* Black background for the canvas itself */
        }

        /* Content Area for Tabs */
        .predictive-engine-content-area {
            padding: 40px 20px;
            background-color: transparent; /* خلفية شفافة للمنطقة الرئيسية */
            min-height: calc(100vh - 100px);
            position: relative; /* Needed for z-index to work if content needs to be above canvas */
            z-index: 1; /* Ensures content is above the canvas */
        }

        .predictive-engine-tab-content {
            display: none;
            animation: fadeIn 0.5s ease-out;
        }

        .predictive-engine-tab-content.active {
            display: block;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Live Stream section styles */
        .live-session-container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: rgba(10, 10, 10, 0.85); /* خلفية داكنة شبه شفافة */
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 8px 30px var(--shadow-color);
            border: 1px solid var(--border-light); /* حدود خفيفة */
            position: relative; /* Ensures it stays above the matrix background */
            z-index: 2; /* Ensures the container is above the content area (which is above matrix) */
        }

        .live-session-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .live-session-header h2 {
            font-size: 2.8rem;
            color: var(--primary-gold); /* عنوان ذهبي */
            margin-bottom: 15px;
            position: relative;
            display: inline-block;
            padding-bottom: 10px;
        }

        .live-session-header h2::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background-color: var(--primary-gold);
            border-radius: 2px;
        }

        .live-session-status {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--white); /* نص فاتح */
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 30px; /* Added spacing below status */
        }

        .live-session-status i {
            font-size: 1.5rem;
            color: #28a745; /* أخضر للحالة النشطة */
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.05); opacity: 0.8; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* Hacker Canvas and Console Styles */
        .hacker-elements-wrapper {
            display: flex;
            margin-bottom: 30px; /* Space between hacker elements and stats */
            flex-wrap: wrap; /* Allow wrapping on smaller screens */
            border: 1px solid var(--border-light);
            border-radius: 10px;
            overflow: hidden; /* Ensure content stays within bounds */
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }

        .hacker-3d-shiz, .bars-and-stuff {
            display: block;
            background-color: #000; /* Dark background for canvases */
            border-bottom: 1px solid var(--border-light); /* Separator */
        }

        .hacker-3d-shiz {
            flex-grow: 2; /* Takes 2/3 width */
            border-left: 1px solid var(--border-light); /* Separator between canvases */
        }
        .bars-and-stuff {
            flex-grow: 1; /* Takes 1/3 width */
        }

        .output-console {
            background-color: #000; /* Dark background for console */
            color: var(--primary-gold); /* Gold text for console */
            font-family: 'Lucida Console', 'Monaco', monospace;
            font-size: 0.9em;
            padding: 15px;
            overflow-y: scroll;
            white-space: pre-wrap; /* Preserve whitespace and wrap text */
            word-wrap: break-word;
            border-top: 1px solid var(--border-light);
            flex-basis: 100%; /* Takes full width below canvases */
            height: 200px; /* Default height, will be set by JS */
            position: relative; /* Needed for top property from JS, though we'll adjust */
        }
        .output-console::-webkit-scrollbar {
            width: 8px;
        }
        .output-console::-webkit-scrollbar-track {
            background: #111;
        }
        .output-console::-webkit-scrollbar-thumb {
            background: var(--dark-gold);
            border-radius: 4px;
        }
        .output-console::-webkit-scrollbar-thumb:hover {
            background: var(--primary-gold);
        }

        .output-console p {
            margin: 0;
            padding: 2px 0;
            line-height: 1.3;
        }
        .output-console span { /* For processing dots */
            color: var(--white);
        }


        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }

        .stat-card {
            background-color: rgba(30, 30, 30, 0.9); /* خلفية أغمق للبطاقات */
            border-radius: 12px;
            padding: 25px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            border: 1px solid var(--border-light);
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
            border-color: var(--primary-gold); /* حدود ذهبية عند التحويم */
        }

        .stat-card .icon {
            font-size: 2.5rem;
            color: var(--primary-gold); /* أيقونات ذهبية */
            margin-bottom: 15px;
        }

        .stat-card .value {
            font-size: 1.5rem;
            font-weight: bold;
            color: var(--white); /* قيم بيضاء */
            margin-bottom: 10px;
        }

        .stat-card .label {
            font-size: 1.1rem;
            color: var(--text-medium); /* تسميات رمادية فاتحة */
        }

        /* Specific styles for success/failure/pending */
        .stat-card.success .value, .stat-card.success .icon {
            color: #4CAF50; /* أخضر للنجاح */
        }
        .stat-card.failure .value, .stat-card.failure .icon {
            color: #F44336; /* أحمر للفشل */
        }
        .stat-card.pending .value, .stat-card.pending .icon {
            color: #FFEB3B; /* أصفر للمنتظر */
        }
        .dola-terms-paragraph {
            color: #FFEB3B; /* أصفر للمنتظر */
        }

        /* res/dola-predictive-engine-styles.css */

/* Specific styles for the DOLA Predictive Engine page */
.dola-predictive-engine-page {
    padding: 40px 25px; /* Increased horizontal padding */
    max-width: 1100px; /* Slightly wider for better content flow */
    margin: 25px auto; /* Increased top/bottom margin */
    background-color: var(--white);
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger, softer shadow */
    direction: rtl;
    text-align: right;
    overflow: hidden; /* To contain potential absolute elements */
    position: relative;
}

/* Background patterns/elements for visual interest */
.dola-predictive-engine-page::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--light-gold) 10%, transparent 70%);
    opacity: 0.3;
    border-radius: 50%;
    z-index: 0;
}

.dola-predictive-engine-page::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-gold) 10%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}


/* Section Titles */
.dola-predictive-engine-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3.2em; /* Larger title */
    text-align: center;
    margin-bottom: 40px; /* More space below title */
    position: relative;
    padding-bottom: 20px;
    font-weight: 800; /* Bolder title */
    letter-spacing: 1px; /* Slightly spaced letters */
    z-index: 1; /* Ensure text is above pseudo-elements */
}

.dola-predictive-engine-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100px; /* Wider underline */
    height: 6px; /* Thicker underline */
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Sub-section Titles */
.dola-predictive-engine-page .dola-subsection-title {
    color: var(--text-dark);
    font-size: 2.4em; /* Slightly larger */
    margin-top: 50px; /* More space above */
    margin-bottom: 30px; /* More space below */
    padding-right: 20px; /* More padding */
    border-right: 6px solid var(--primary-gold); /* Thicker border */
    line-height: 1.4;
    font-weight: 700; /* Bolder */
    position: relative;
    z-index: 1;
}

/* Introduction Text */
.dola-predictive-engine-page .dola-intro-text,
.dola-predictive-engine-page .dola-section-description {
    font-size: 1.2em; /* Slightly larger font */
    line-height: 1.9; /* Improved line spacing */
    color: var(--text-medium);
    margin-bottom: 35px;
}

/* Horizontal Dividers */
.dola-section-divider {
    border-bottom: 2px dashed var(--border-light); /* Thicker dashed line */
    margin: 60px 0; /* More spacing */
}

/* Feature Lists */
.dola-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid; /* Use grid for better layout on larger screens */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive grid */
    gap: 25px; /* Gap between grid items */
}

.dola-feature-list li {
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    border-right: 6px solid var(--dark-gold); /* Thicker right border */
    padding: 25px; /* More padding */
    border-radius: 10px; /* More rounded corners */
    display: flex;
    align-items: flex-start;
    gap: 25px; /* More gap between icon and text */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s;
    position: relative;
    overflow: hidden; /* For potential internal effects */
    z-index: 1;
}

.dola-feature-list li:hover {
    transform: translateY(-8px) scale(1.02); /* More pronounced hover effect */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); /* Stronger shadow on hover */
    background-color: var(--white); /* White background on hover */
    border-color: var(--primary-gold); /* Gold border on hover */
}

.dola-feature-icon {
    font-size: 2.2em; /* Larger icons */
    color: var(--primary-gold);
    flex-shrink: 0;
    margin-top: 2px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Slight shadow for icons */
}

.dola-feature-list li strong {
    color: var(--dark-gold);
    font-size: 1.2em; /* Larger strong text */
    margin-bottom: 8px;
    display: block;
}

/* Accuracy Card */
.dola-accuracy-card {
    background: linear-gradient(45deg, var(--light-gold), var(--primary-gold) 80%); /* Gradient background */
    border: none; /* No direct border, gradient acts as border */
    padding: 35px; /* More padding */
    border-radius: 12px; /* More rounded */
    text-align: center;
    font-size: 1.3em; /* Larger font */
    line-height: 1.7;
    color: var(--text-dark);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); /* Clearer shadow */
    position: relative;
    overflow: hidden;
}

.dola-accuracy-card::before {
    content: '🎯'; /* Emoji icon */
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 3em;
    opacity: 0.2;
    z-index: 0;
}

.dola-accuracy-card p {
    z-index: 1;
    position: relative;
}

.dola-accuracy-card .highlight-accuracy {
    color: var(--black); /* Black for strong contrast */
    font-weight: 900; /* Extra bold */
    font-size: 1.5em; /* Even larger */
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); /* White shadow for readability */
}

/* FAQ Answer */
.dola-faq-answer {
    background-color: var(--background-light);
    padding: 30px; /* More padding */
    border-radius: 12px; /* More rounded */
    border-right: 6px solid var(--primary-gold); /* Thicker border on right for consistency */
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Subtle shadow */
}

.dola-faq-answer p {
    font-size: 1.15em; /* Slightly larger */
    line-height: 1.8;
    color: var(--text-medium);
}

.dola-faq-answer strong {
    color: var(--dark-gold);
}

/* Conclusion Section */
.dola-conclusion-section {
    text-align: center;
    margin-top: 70px; /* More margin */
    padding: 40px; /* More padding */
    background: linear-gradient(135deg, var(--light-gold), var(--primary-gold), var(--dark-gold)); /* Multi-stop gradient */
    border-radius: 18px; /* Even more rounded */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25); /* Deeper, more prominent shadow */
    position: relative;
    overflow: hidden;
    color: var(--black); /* Default text color in conclusion */
}

.dola-conclusion-section::before {
    content: '✨';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 4em;
    opacity: 0.3;
}
.dola-conclusion-section::after {
    content: '🚀';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 4em;
    opacity: 0.3;
}


.dola-conclusion-text {
    font-size: 1.6em; /* Larger */
    color: var(--black); /* Strong contrast */
    margin-bottom: 25px;
    font-weight: 800; /* Bolder */
    text-shadow: 1px 1px 4px rgba(255, 255, 255, 0.6); /* Clearer white shadow */
    z-index: 1;
    position: relative;
}

.dola-call-to-action {
    font-size: 2em; /* Much larger for impact */
    color: var(--black);
    font-weight: 900; /* Extra bold */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Stronger black shadow */
    z-index: 1;
    position: relative;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .dola-feature-list {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .dola-predictive-engine-page {
        padding: 30px 20px;
        margin: 15px auto;
        border-radius: 10px;
    }

    .dola-predictive-engine-page .dola-section-title {
        font-size: 2.5em;
        margin-bottom: 30px;
    }

    .dola-predictive-engine-page .dola-section-title::after {
        width: 70px;
        height: 5px;
    }

    .dola-predictive-engine-page .dola-subsection-title {
        font-size: 2em;
        padding-right: 15px;
        margin-top: 40px;
        margin-bottom: 25px;
    }

    .dola-intro-text,
    .dola-section-description {
        font-size: 1.1em;
    }

    .dola-feature-list li {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        gap: 15px;
    }

    .dola-feature-icon {
        margin-bottom: 10px;
        font-size: 2em;
    }

    .dola-accuracy-card {
        padding: 25px;
        font-size: 1.1em;
    }

    .dola-accuracy-card .highlight-accuracy {
        font-size: 1.3em;
    }

    .dola-faq-answer {
        padding: 25px;
    }

    .dola-conclusion-section {
        padding: 30px;
        margin-top: 50px;
        border-radius: 15px;
    }

    .dola-conclusion-text {
        font-size: 1.4em;
    }

    .dola-call-to-action {
        font-size: 1.8em;
    }
}

@media (max-width: 480px) {
    .dola-predictive-engine-page {
        padding: 20px 15px;
    }

    .dola-predictive-engine-page .dola-section-title {
        font-size: 2em;
    }

    .dola-predictive-engine-page .dola-subsection-title {
        font-size: 1.7em;
        padding-right: 10px;
    }

    .dola-intro-text,
    .dola-section-description,
    .dola-accuracy-card p,
    .dola-faq-answer p,
    .dola-conclusion-text,
    .dola-call-to-action {
        font-size: 1em;
    }

    .dola-accuracy-card .highlight-accuracy {
        font-size: 1.2em;
    }

    .dola-conclusion-text {
        font-size: 1.2em;
    }

    .dola-call-to-action {
        font-size: 1.5em;
    }

    .dola-predictive-engine-page::before,
    .dola-predictive-engine-page::after,
    .dola-accuracy-card::before,
    .dola-conclusion-section::before,
    .dola-conclusion-section::after {
        display: none; /* Hide decorative elements on very small screens */
    }
}
/* res/dola-features-styles.css */

/* Specific styles for the DOLA Features page */
.dola-features-page {
    padding: 40px 25px;
    max-width: 1200px; /* Wider to accommodate grid */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
}

/* Background elements for visual appeal */
.dola-features-page::before {
    content: '';
    position: absolute;
    top: -80px;
    right: -80px;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

.dola-features-page::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.15;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-features-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3.2em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-features-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 120px; /* Wider underline */
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-features-page .dola-intro-text {
    font-size: 1.25em; /* Slightly larger */
    line-height: 2; /* More line spacing for readability */
    color: var(--text-medium);
    margin-bottom: 50px; /* More space before feature cards */
    text-align: center; /* Centered introduction */
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Features Grid Container */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 3 columns on large screens */
    gap: 35px; /* More space between cards */
    margin-bottom: 60px;
}

/* Individual Feature Card */
.feature-card {
    background-color: var(--background-light);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 30px; /* More padding */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Soft shadow */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s;
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align content to the right */
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px); /* Lift up effect */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    background-color: var(--white);
    border-color: var(--primary-gold); /* Gold border on hover */
}

/* Main Icon in Feature Card */
.feature-icon-wrapper {
    background: linear-gradient(45deg, var(--primary-gold), var(--dark-gold)); /* Gold gradient background */
    border-radius: 50%;
    width: 80px; /* Larger icon circle */
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 25px; /* More space below icon */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    color: var(--white); /* White icon */
    flex-shrink: 0;
    position: absolute; /* Position to the top-left/right */
    top: 20px;
    right: 20px;
}

.feature-main-icon {
    font-size: 2.5em; /* Larger icon size */
}

/* Feature Title (e.g., 1. تقليل المخاطر) */
.feature-title {
    color: var(--dark-gold);
    font-size: 1.8em; /* Prominent title */
    margin-top: 0;
    margin-bottom: 20px; /* More space below title */
    padding-right: 15px; /* Padding for border */
    border-right: 4px solid var(--primary-gold); /* Gold accent border */
    align-self: flex-end; /* Align title to the right */
    margin-right: 100px; /* Offset for icon wrapper */
    line-height: 1.4;
}

/* Feature List (bullet points) */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0; /* Margin below list */
    width: 100%; /* Take full width */
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.05em; /* Slightly larger text */
    color: var(--text-medium);
    line-height: 1.6;
}

.feature-bullet-icon {
    color: var(--primary-gold); /* Golden checkmark */
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Result Text */
.feature-result {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--text-dark);
    background-color: var(--light-gold); /* Light golden background */
    padding: 12px 20px;
    border-radius: 8px;
    margin-top: auto; /* Push to bottom of card */
    align-self: flex-start; /* Align to the left in RTL */
    width: 100%; /* Full width */
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Final Callout Section (Item 10) */
.dola-final-callout-section {
    margin-top: 80px; /* More space above */
    padding: 50px; /* Generous padding */
    background: linear-gradient(135deg, var(--primary-gold) 0%, var(--dark-gold) 100%); /* Stronger gradient */
    border-radius: 18px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); /* Prominent shadow */
    color: var(--white); /* White text on gold background */
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dola-final-callout-section::before {
    content: '💡';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 5em;
    opacity: 0.4;
    transform: rotate(-15deg);
}

.dola-final-callout-section::after {
    content: '✅';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 5em;
    opacity: 0.4;
    transform: rotate(15deg);
}


.dola-final-callout-title {
    color: var(--white);
    font-size: 2.8em; /* Large and bold */
    margin-bottom: 30px;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    z-index: 1;
    position: relative;
}

.dola-final-callout-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Flexbox for horizontal alignment */
    justify-content: center; /* Center items */
    gap: 40px; /* Space between items */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    z-index: 1;
    position: relative;
}

.dola-final-callout-list li {
    display: flex;
    flex-direction: column; /* Icon and text stacked */
    align-items: center; /* Center content */
    font-size: 1.3em;
    font-weight: 600;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    color: var(--white);
    max-width: 250px;
    text-align: center;
}

.final-bullet-icon {
    font-size: 3em; /* Larger icons */
    color: var(--light-gold); /* Light gold color for icons */
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

/* Summary Section (Conclusion) */
.dola-summary-section {
    margin-top: 80px;
    padding: 40px;
    background-color: var(--background-light);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid var(--border-light);
}

.dola-summary-text {
    font-size: 1.5em; /* Larger, impactful summary */
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.8;
}


/* Responsive Adjustments */
@media (max-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Allow 2 or 3 columns */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .dola-features-page {
        padding: 30px 20px;
        margin: 15px auto;
    }

    .dola-features-page .dola-section-title {
        font-size: 2.5em;
        margin-bottom: 30px;
    }

    .dola-features-page .dola-intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    .features-grid {
        grid-template-columns: 1fr; /* Single column on smaller screens */
        gap: 30px;
    }

    .feature-icon-wrapper {
        width: 70px;
        height: 70px;
        top: 15px;
        right: 15px;
    }

    .feature-main-icon {
        font-size: 2.2em;
    }

    .feature-title {
        font-size: 1.6em;
        margin-right: 90px; /* Adjust offset for icon */
    }

    .feature-list li {
        font-size: 1em;
    }

    .feature-result {
        font-size: 1em;
    }

    .dola-final-callout-section {
        padding: 40px;
        margin-top: 60px;
    }

    .dola-final-callout-title {
        font-size: 2.2em;
        margin-bottom: 25px;
    }

    .dola-final-callout-list {
        flex-direction: column; /* Stack items vertically */
        gap: 25px;
    }

    .dola-final-callout-list li {
        font-size: 1.1em;
        max-width: 100%; /* Take full width */
    }

    .final-bullet-icon {
        font-size: 2.5em;
        margin-bottom: 10px;
    }

    .dola-summary-section {
        padding: 30px;
        margin-top: 60px;
    }

    .dola-summary-text {
        font-size: 1.3em;
    }

    .dola-features-page::before,
    .dola-features-page::after {
        display: none; /* Hide large background elements on small screens */
    }
}

@media (max-width: 480px) {
    .dola-features-page {
        padding: 20px 15px;
    }

    .dola-features-page .dola-section-title {
        font-size: 2em;
    }

    .dola-features-page .dola-intro-text {
        font-size: 0.95em;
    }

    .feature-card {
        padding: 25px;
    }

    .feature-icon-wrapper {
        width: 60px;
        height: 60px;
        top: 10px;
        right: 10px;
    }

    .feature-main-icon {
        font-size: 2em;
    }

    .feature-title {
        font-size: 1.4em;
        margin-right: 75px;
    }

    .feature-list li {
        font-size: 0.9em;
    }

    .feature-result {
        font-size: 0.95em;
    }

    .dola-final-callout-section {
        padding: 30px;
    }

    .dola-final-callout-title {
        font-size: 1.8em;
    }

    .final-bullet-icon {
        font-size: 2em;
    }

    .dola-summary-text {
        font-size: 1.1em;
    }
}

/* res/dola-usage-styles.css */

/* Specific styles for the DOLA Usage page */
.dola-usage-page {
    padding: 40px 25px;
    max-width: 1000px; /* Optimal width for content */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
    z-index: 1; /* Ensure content is above background elements */
}

/* Background patterns */
.dola-usage-page::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.25;
    border-radius: 50%;
    z-index: 0;
}

.dola-usage-page::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-usage-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-usage-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-usage-page .dola-intro-text {
    font-size: 1.2em;
    line-height: 1.9;
    color: var(--text-medium);
    margin-bottom: 50px;
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Titles */
.usage-subsection-title {
    color: var(--text-dark);
    font-size: 2.2em;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-right: 20px;
    border-right: 5px solid var(--primary-gold);
    line-height: 1.4;
    font-weight: 700;
    display: flex; /* For icon alignment */
    align-items: center;
    gap: 15px; /* Space between icon and text */
    z-index: 1;
    position: relative;
}

.section-icon {
    color: var(--primary-gold);
    font-size: 1.1em;
    flex-shrink: 0;
}

.section-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 30px;
}

/* Session Table */
.session-table-container {
    overflow-x: auto; /* Allow horizontal scroll on small screens */
    margin-bottom: 30px;
    border: 1px solid var(--border-light);
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.session-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px; /* Minimum width to prevent squishing on small screens */
}

.session-table th,
.session-table td {
    padding: 18px 15px;
    text-align: right;
    border-bottom: 1px solid var(--border-light);
}

.session-table th {
    background-color: var(--dark-gold);
    color: var(--white);
    font-weight: bold;
    font-size: 1.1em;
    position: sticky; /* Make header sticky for scrolling table */
    top: 0;
    z-index: 2;
}

.session-table tbody tr:nth-child(even) {
    background-color: var(--background-light);
}

.session-table tbody tr:hover {
    background-color: var(--light-gold);
    cursor: pointer;
}

.session-row td {
    font-size: 1.05em;
    color: var(--text-dark);
}

.session-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 8px; /* Space from text */
    vertical-align: middle;
}

.session-indicator.green { background-color: #28a745; } /* Bootstrap success green */
.session-indicator.yellow { background-color: #ffc107; } /* Bootstrap warning yellow */
.session-indicator.blue { background-color: #007bff; }  /* Bootstrap primary blue */
.session-indicator.red { background-color: #dc3545; }   /* Bootstrap danger red */


/* Bullet Lists */
.dola-bullet-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.dola-bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 1.05em;
    color: var(--text-medium);
    line-height: 1.7;
}

.bullet-gold {
    color: var(--primary-gold);
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

.bullet-red { /* For responsibility list */
    color: #dc3545; /* Bootstrap danger red */
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Nested List */
.nested-list {
    list-style: none;
    padding-right: 30px; /* Indent nested list */
    margin-top: 10px;
    margin-bottom: 10px;
}

.nested-list li {
    margin-bottom: 8px;
    font-size: 0.95em;
}

.nested-bullet {
    color: var(--dark-gold);
    font-size: 0.9em;
    flex-shrink: 0;
    margin-top: 3px;
}

/* Important Note Box */
.important-note {
    background-color: #fff3cd; /* Light warning yellow */
    border-right: 5px solid #ffc107; /* Warning yellow border */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.note-icon {
    color: #ffc107;
    font-size: 2em;
    flex-shrink: 0;
}

.important-note p {
    margin: 0;
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.6;
}

.important-note p strong {
    color: #c79100; /* Darker yellow for emphasis */
}

/* Note Text (general, outside bullet lists) */
.note-text {
    font-size: 1em;
    color: var(--text-medium);
    margin-top: 20px;
    background-color: var(--background-light);
    padding: 10px 15px;
    border-radius: 8px;
    border-right: 3px solid var(--primary-gold);
}

/* Gold Links */
.gold-link {
    color: var(--primary-gold);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.gold-link:hover {
    color: var(--dark-gold);
    text-decoration: underline;
}

/* Responsibility List */
.responsibility-list li strong {
    color: #dc3545; /* Red for emphasis on risks */
}

/* Summary Section at Bottom */
.dola-summary-section {
    margin-top: 70px;
    padding: 40px;
    background-color: var(--light-gold); /* A softer gold background */
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    text-align: center;
    border: 1px solid var(--primary-gold); /* A subtle gold border */
}

.dola-summary-text {
    font-size: 1.5em;
    color: var(--text-dark);
    font-weight: 600;
    line-height: 1.8;
    margin-bottom: 30px;
}

.call-to-action-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    color: var(--text-dark);
    font-weight: bold;
    gap: 10px;
}

.call-action-icon {
    font-size: 1.5em;
    color: var(--dark-gold);
}

.gold-link-button {
    background-color: var(--primary-gold);
    color: var(--white);
    padding: 12px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: inline-block; /* Make it behave like a button */
}

.gold-link-button:hover {
    background-color: var(--dark-gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .dola-usage-page {
        padding: 30px 15px;
    }

    .dola-usage-page .dola-section-title {
        font-size: 2.5em;
    }

    .dola-usage-page .dola-intro-text {
        font-size: 1.05em;
        margin-bottom: 30px;
    }

    .usage-subsection-title {
        font-size: 1.8em;
        padding-right: 15px;
        gap: 10px;
    }

    .section-icon {
        font-size: 1em;
    }

    .session-table-container {
        min-width: unset; /* Allow table to shrink */
        width: 100%;
    }

    .session-table th,
    .session-table td {
        padding: 15px 10px;
        font-size: 0.9em;
    }

    .session-table th {
        font-size: 1em;
    }

    .dola-bullet-list li,
    .nested-list li,
    .important-note p,
    .note-text,
    .dola-summary-text,
    .call-to-action-bottom {
        font-size: 0.95em;
    }

    .important-note {
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        text-align: center;
        padding: 15px;
    }

    .note-icon {
        margin-bottom: 10px;
    }

    .gold-link-button {
        padding: 10px 20px;
        font-size: 0.95em;
    }

    .dola-features-page::before,
    .dola-features-page::after {
        display: none; /* Hide background elements on smaller screens */
    }
}

@media (max-width: 480px) {
    .dola-usage-page .dola-section-title {
        font-size: 2em;
    }

    .usage-subsection-title {
        font-size: 1.6em;
    }

    .session-table th,
    .session-table td {
        padding: 12px 8px;
    }

    .dola-bullet-list li,
    .nested-list li,
    .important-note p,
    .note-text,
    .dola-summary-text,
    .call-to-action-bottom {
        font-size: 0.9em;
    }

    .gold-link-button {
        padding: 8px 18px;
        font-size: 0.9em;
    }
}
/* res/dola-pricing-styles.css */

/* Specific styles for the DOLA Pricing page */
.dola-pricing-page {
    padding: 40px 25px;
    max-width: 1300px; /* Wider to accommodate more cards per row */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Background patterns */
.dola-pricing-page::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

.dola-pricing-page::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.15;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-pricing-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3.2em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-pricing-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 120px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-pricing-page .dola-intro-text {
    font-size: 1.25em;
    line-height: 2;
    color: var(--text-medium);
    margin-bottom: 60px; /* More space before price categories */
    text-align: center;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* Pricing Category Section */
.pricing-category {
    margin-bottom: 70px; /* Space between categories */
}

.category-title {
    color: var(--text-dark);
    font-size: 2.5em; /* Larger category titles */
    text-align: center;
    margin-bottom: 25px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-color: var(--background-light);
    padding: 15px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-right: 6px solid var(--primary-gold); /* Accent border */
    border-left: 6px solid var(--primary-gold); /* Accent border */
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.category-icon {
    color: var(--primary-gold);
    font-size: 1.1em;
}

.category-description {
    font-size: 1.1em;
    color: var(--text-medium);
    text-align: center;
    margin-bottom: 40px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Flexible 3-4 columns */
    gap: 30px; /* Space between cards */
    justify-content: center;
}

/* Price Card */
.price-card {
    background-color: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
    overflow: hidden;
}

.price-card:hover {
    transform: translateY(-12px); /* Lift effect */
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25); /* Stronger shadow on hover */
    border-color: var(--primary-gold);
}

/* Featured Card (e.g., popular, best value) */
.price-card.featured-card {
    border: 3px solid var(--primary-gold); /* Prominent gold border */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); /* Stronger initial shadow */
    background: linear-gradient(145deg, var(--white) 60%, var(--light-gold)); /* Subtle gradient */
}

.price-card.best-value {
    background: linear-gradient(145deg, var(--light-gold) 10%, var(--primary-gold) 100%); /* Stronger gradient for best value */
    color: var(--white); /* White text for best value card */
}
.price-card.best-value .card-header .ticket-name,
.price-card.best-value .card-header .ticket-duration,
.price-card.best-value .card-body .ticket-price,
.price-card.best-value .card-body .currency {
    color: var(--white);
}
.price-card.best-value .features-list li {
    color: var(--white); /* White text for list items */
}
.price-card.best-value .features-list .gold-check {
    color: var(--white); /* White checkmarks */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Badge for popular/featured */
.ticket-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: var(--dark-gold);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9em;
    font-weight: bold;
    transform: rotate(5deg); /* Slight rotation */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.ticket-badge.featured-badge {
    background-color: var(--primary-gold); /* Brighter gold for featured badge */
    transform: rotate(-5deg);
}

/* Card Header */
.card-header {
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px dashed var(--border-light);
    margin-bottom: 20px;
}

.ticket-name {
    font-size: 2.2em; /* Larger ticket name */
    color: var(--dark-gold);
    margin-bottom: 8px;
    font-weight: 800;
}

.ticket-duration {
    font-size: 1.1em;
    color: var(--text-medium);
}

/* Card Body */
.ticket-price {
    font-size: 3.5em; /* Very large price */
    color: var(--primary-gold);
    font-weight: 900;
    margin-bottom: 25px;
    line-height: 1;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.currency {
    font-size: 0.6em; /* Smaller currency text */
    vertical-align: super;
    font-weight: normal;
    color: var(--text-dark);
}
.price-card.best-value .currency {
    color: var(--white);
}

.features-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    width: 100%;
}

.features-list li {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align features right */
    gap: 10px;
    margin-bottom: 10px;
    font-size: 1em;
    color: var(--text-medium);
}

.features-list li span { /* For words like 'جزئي', 'موسع', 'كامل', 'مميز', 'حصري', 'VIP' */
    font-weight: bold;
    color: var(--dark-gold);
}
.price-card.best-value .features-list li span {
    color: var(--black); /* Strong contrast for bolded words */
}

.gold-check {
    color: var(--primary-gold);
    font-size: 1.2em;
}

.gray-check {
    color: var(--border-light); /* Lighter color for non-included features */
    font-size: 1.2em;
}

/* Buy Button */
.buy-button {
    background-color: var(--primary-gold);
    color: var(--white);
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    width: 90%;
    margin-top: auto; /* Push button to bottom */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.buy-button:hover {
    background-color: var(--dark-gold);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Special Offer Section */
.special-offer-section {
    margin-top: 80px;
    padding: 60px;
    background: linear-gradient(160deg, var(--primary-gold) 0%, var(--dark-gold) 100%); /* Strong gradient */
    border-radius: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    color: var(--white);
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.special-offer-section::before {
    content: '🎉'; /* Confetti icon */
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 4em;
    opacity: 0.3;
}
.special-offer-section::after {
    content: '🎁'; /* Gift icon */
    position: absolute;
    bottom: 15px;
    right: 15px;
    font-size: 4em;
    opacity: 0.3;
}

.special-offer-title {
    font-size: 3em;
    font-weight: 900;
    margin-bottom: 25px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
    z-index: 1;
}

.offer-icon {
    font-size: 1.1em;
    color: var(--light-gold);
}

.special-offer-description {
    font-size: 1.3em;
    line-height: 1.8;
    margin-bottom: 40px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.contact-button {
    background-color: var(--white);
    color: var(--dark-gold);
    padding: 18px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 1.4em;
    font-weight: bold;
    display: inline-flex; /* For icon alignment */
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}

.contact-button:hover {
    background-color: var(--light-gold);
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.contact-motto {
    font-size: 1.1em;
    margin-top: 30px;
    font-style: italic;
    color: var(--light-gold);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
}


/* Responsive Adjustments */
@media (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Allow shrinking */
    }
}

@media (max-width: 992px) {
    .dola-pricing-page .dola-section-title {
        font-size: 2.8em;
    }

    .category-title {
        font-size: 2em;
    }

    .category-description {
        font-size: 1em;
    }

    .pricing-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Possibly 2 columns */
    }

    .ticket-name {
        font-size: 2em;
    }

    .ticket-price {
        font-size: 3em;
    }

    .special-offer-title {
        font-size: 2.5em;
    }

    .special-offer-description {
        font-size: 1.1em;
    }

    .contact-button {
        padding: 15px 30px;
        font-size: 1.2em;
    }
}

@media (max-width: 768px) {
    .dola-pricing-page {
        padding: 30px 15px;
    }

    .dola-pricing-page .dola-section-title {
        font-size: 2.2em;
    }

    .dola-pricing-page .dola-intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    .category-title {
        font-size: 1.8em;
        flex-direction: column; /* Stack icon and text */
        gap: 5px;
        padding: 10px 20px;
    }

    .category-icon {
        font-size: 1em;
        margin-bottom: 5px;
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }

    .ticket-name {
        font-size: 2em;
    }

    .ticket-price {
        font-size: 3.2em;
    }

    .buy-button {
        padding: 12px 25px;
        font-size: 1em;
    }

    .special-offer-section {
        padding: 40px;
    }

    .special-offer-title {
        font-size: 2em;
        flex-direction: column;
        gap: 10px;
    }

    .offer-icon {
        font-size: 1em;
    }

    .special-offer-description {
        font-size: 1em;
    }

    .contact-button {
        padding: 12px 25px;
        font-size: 1.1em;
    }

    .contact-motto {
        font-size: 0.9em;
    }

    .dola-pricing-page::before,
    .dola-pricing-page::after,
    .special-offer-section::before,
    .special-offer-section::after {
        display: none; /* Hide decorative elements on very small screens */
    }
}

@media (max-width: 480px) {
    .dola-pricing-page .dola-section-title {
        font-size: 1.8em;
    }

    .category-title {
        font-size: 1.6em;
    }

    .ticket-name {
        font-size: 1.8em;
    }

    .ticket-price {
        font-size: 2.8em;
    }
}
/* res/dola-terms-styles.css */

/* Specific styles for the DOLA Terms and Conditions page */
.dola-terms-page {
    padding: 40px 25px;
    max-width: 900px; /* Optimal width for readability of long text */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Background patterns */
.dola-terms-page::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.25;
    border-radius: 50%;
    z-index: 0;
}

.dola-terms-page::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-terms-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-terms-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-terms-page .dola-intro-text {
    font-size: 1.2em;
    line-height: 1.9;
    color: var(--text-medium);
    margin-bottom: 50px;
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Titles */
.terms-subsection-title {
    color: var(--text-dark);
    font-size: 2em;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-right: 20px;
    border-right: 5px solid var(--primary-gold);
    line-height: 1.4;
    font-weight: 700;
    display: flex; /* For icon alignment */
    align-items: center;
    gap: 15px; /* Space between icon and text */
    z-index: 1;
    position: relative;
}

.section-icon {
    color: var(--primary-gold);
    font-size: 1.1em;
    flex-shrink: 0;
}

/* Terms List */
.terms-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.terms-list li {
    
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.8;
}
.terms-list li a{
  display: inline;
}

.gold-check {
    color: var(--primary-gold);
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

.red-check { /* For disclaimers, warnings */
    color: #dc3545; /* Bootstrap danger red */
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Important Note Boxes (for disclaimers/limits) */
.important-note {
    background-color: var(--background-light);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.important-note.red-border {
    border-right: 6px solid #dc3545; /* Red border for warnings */
    background-color: #ffeaea; /* Light red background */
}

.important-note.blue-border {
    border-right: 6px solid #007bff; /* Blue border for important info/limits */
    background-color: #e0f2ff; /* Light blue background */
}

.important-note .note-icon {
    font-size: 2.5em; /* Larger icons for emphasis */
    flex-shrink: 0;
}

.important-note.red-border .note-icon {
    color: #dc3545;
}
.important-note.blue-border .note-icon {
    color: #007bff;
}

.important-note p {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-dark);
    line-height: 1.7;
}

.important-note p strong {
    font-weight: bold;
    color: var(--dark-gold); /* Gold for general strong text */
}

.important-note.red-border p strong {
    color: #a71d2a; /* Darker red for warnings */
}
.important-note.blue-border p strong {
    color: #0056b3; /* Darker blue for limits */
}


/* Gold Links within text */
.gold-link {
    color: var(--primary-gold);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.gold-link:hover {
    color: var(--dark-gold);
    text-decoration: underline;
}

/* Closing Statement */
.dola-closing-statement {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-dark);
    text-align: center;
    margin-top: 60px;
    padding: 25px;
    background-color: var(--light-gold);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .dola-terms-page {
        padding: 30px 15px;
    }

    .dola-terms-page .dola-section-title {
        font-size: 2.5em;
        margin-bottom: 30px;
    }

    .dola-terms-page .dola-intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    .terms-subsection-title {
        font-size: 1.8em;
        padding-right: 15px;
        gap: 10px;
    }

    .section-icon {
        font-size: 1em;
    }

    .terms-list li {
        font-size: 1em;
        gap: 10px;
        margin-bottom: 10px;
    }
    .terms-list li a {
        display: inline;
    }

    .gold-check, .red-check {
        font-size: 1.1em;
        margin-top: 3px;
    }

    .important-note {
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .important-note .note-icon {
        margin-bottom: 15px;
        font-size: 2em;
    }

    .important-note p {
        font-size: 1em;
    }

    .dola-closing-statement {
        font-size: 1.1em;
        padding: 20px;
        margin-top: 40px;
    }

    .dola-terms-page::before,
    .dola-terms-page::after {
        display: none; /* Hide background elements on smaller screens */
    }
}

@media (max-width: 480px) {
    .dola-terms-page .dola-section-title {
        font-size: 2em;
    }

    .terms-subsection-title {
        font-size: 1.6em;
    }

    .terms-list li {
        font-size: 0.95em;
    }

    .important-note p {
        font-size: 0.95em;
    }

    .dola-closing-statement {
        font-size: 1em;
    }
}

/* res/dola-privacy-styles.css */

/* Specific styles for the DOLA Privacy Policy page */
.dola-privacy-page {
    padding: 40px 25px;
    max-width: 900px; /* Optimal width for readability of long text */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Background patterns */
.dola-privacy-page::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.25;
    border-radius: 50%;
    z-index: 0;
}

.dola-privacy-page::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-privacy-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-privacy-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-privacy-page .dola-intro-text {
    font-size: 1.2em;
    line-height: 1.9;
    color: var(--text-medium);
    margin-bottom: 50px;
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Titles */
.privacy-subsection-title {
    color: var(--text-dark);
    font-size: 2em;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-right: 20px;
    border-right: 5px solid var(--primary-gold);
    line-height: 1.4;
    font-weight: 700;
    display: flex; /* For icon alignment */
    align-items: center;
    gap: 15px; /* Space between icon and text */
    z-index: 1;
    position: relative;
}

.section-icon {
    color: var(--primary-gold);
    font-size: 1.1em;
    flex-shrink: 0;
}

.section-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 30px;
}

/* Privacy Lists (General and Nested) */
.privacy-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.privacy-list li {
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.8;
}

.privacy-list li strong {
    color: var(--dark-gold); /* Emphasize bold text in lists */
}

.gold-icon { /* Main bullet icon for categories */
    color: var(--primary-gold);
    font-size: 1.3em;
    flex-shrink: 0;
    margin-top: 5px;
}

.bullet-gold { /* For generic bullet points */
    color: var(--primary-gold);
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

.nested-bullet { /* For nested list items */
    color: var(--dark-gold);
    font-size: 0.9em;
    flex-shrink: 0;
    margin-top: 3px;
}

.privacy-list ul { /* Styling for nested ULs */
    list-style: none;
    padding-right: 30px;
    margin-top: 10px;
    margin-bottom: 0;
}

.privacy-list ul li {
    font-size: 0.95em;
    margin-bottom: 8px;
    color: var(--text-medium);
}

/* Important Note Box (for security warning) */
.important-note {
    background-color: #fff3cd; /* Light warning yellow */
    border-right: 5px solid #ffc107; /* Warning yellow border */
    padding: 20px;
    border-radius: 8px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-top: 40px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.important-note .note-icon {
    color: #ffc107;
    font-size: 2em;
    flex-shrink: 0;
}

.important-note p {
    margin: 0;
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.6;
}

.important-note p strong {
    color: #c79100; /* Darker yellow for emphasis */
}

/* Gold Links within text */
.gold-link {
    color: var(--primary-gold);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    display: inline; /* Ensure it behaves like inline text */
    margin: 0; 
    padding: 0;
}

.gold-link:hover {
    color: var(--dark-gold);
    text-decoration: underline;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .dola-privacy-page {
        padding: 30px 15px;
    }

    .dola-privacy-page .dola-section-title {
        font-size: 2.5em;
        margin-bottom: 30px;
    }

    .dola-privacy-page .dola-intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    .privacy-subsection-title {
        font-size: 1.8em;
        padding-right: 15px;
        gap: 10px;
    }

    .section-icon {
        font-size: 1em;
    }

    .privacy-list li {
        font-size: 1em;
        gap: 10px;
        margin-bottom: 10px;
    }
    .privacy-list ul {
        padding-right: 20px;
    }
    .privacy-list ul li {
        font-size: 0.9em;
    }

    .gold-icon, .bullet-gold {
        font-size: 1.1em;
        margin-top: 3px;
    }

    .important-note {
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .important-note .note-icon {
        margin-bottom: 15px;
        font-size: 2em;
    }

    .important-note p {
        font-size: 1em;
    }

    .dola-privacy-page::before,
    .dola-privacy-page::after {
        display: none; /* Hide background elements on smaller screens */
    }
}

@media (max-width: 480px) {
    .dola-privacy-page .dola-section-title {
        font-size: 2em;
    }

    .privacy-subsection-title {
        font-size: 1.6em;
    }

    .privacy-list li {
        font-size: 0.95em;
    }

    .important-note p {
        font-size: 0.95em;
    }
}
/* res/dola-refund-styles.css */

/* Specific styles for the DOLA Refund Policy page */
.dola-refund-page {
    padding: 40px 25px;
    max-width: 900px; /* Optimal width for readability of long text */
    margin: 25px auto;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    direction: rtl;
    text-align: right;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* Background patterns */
.dola-refund-page::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--light-gold) 15%, transparent 70%);
    opacity: 0.25;
    border-radius: 50%;
    z-index: 0;
}

.dola-refund-page::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, var(--primary-gold) 15%, transparent 70%);
    opacity: 0.2;
    border-radius: 50%;
    z-index: 0;
}

/* Page Title */
.dola-refund-page .dola-section-title {
    color: var(--dark-gold);
    font-size: 3em;
    text-align: center;
    margin-bottom: 40px;
    position: relative;
    padding-bottom: 20px;
    font-weight: 800;
    letter-spacing: 1px;
    z-index: 1;
}

.dola-refund-page .dola-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    width: 100px;
    height: 6px;
    background-color: var(--primary-gold);
    border-radius: 3px;
}

/* Introduction Text */
.dola-refund-page .dola-intro-text {
    font-size: 1.2em;
    line-height: 1.9;
    color: var(--text-medium);
    margin-bottom: 50px;
    text-align: center;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
}

/* Section Titles */
.refund-subsection-title {
    color: var(--text-dark);
    font-size: 2em;
    margin-top: 50px;
    margin-bottom: 25px;
    padding-right: 20px;
    border-right: 5px solid var(--primary-gold);
    line-height: 1.4;
    font-weight: 700;
    display: flex; /* For icon alignment */
    align-items: center;
    gap: 15px; /* Space between icon and text */
    z-index: 1;
    position: relative;
}

.section-icon {
    color: var(--primary-gold);
    font-size: 1.1em;
    flex-shrink: 0;
}

.section-description {
    font-size: 1.1em;
    line-height: 1.8;
    color: var(--text-medium);
    margin-bottom: 30px;
}

/* Refund Lists (General and Nested) */
.refund-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.refund-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 1.05em;
    color: var(--text-dark);
    line-height: 1.8;
}

.refund-list li strong {
    color: var(--dark-gold); /* Emphasize bold text in lists */
}

.gold-check { /* Main bullet icon for categories */
    color: var(--primary-gold);
    font-size: 1.3em;
    flex-shrink: 0;
    margin-top: 5px;
}

.bullet-gold { /* For generic bullet points */
    color: var(--primary-gold);
    font-size: 1.2em;
    flex-shrink: 0;
    margin-top: 5px;
}

.nested-bullet { /* For nested list items */
    color: var(--dark-gold);
    font-size: 0.9em;
    flex-shrink: 0;
    margin-top: 3px;
}

.refund-list ul { /* Styling for nested ULs */
    list-style: none;
    padding-right: 30px;
    margin-top: 10px;
    margin-bottom: 0;
}

.refund-list ul li {
    font-size: 0.95em;
    margin-bottom: 8px;
    color: var(--text-medium);
}

/* Important Note Boxes (for disclaimers/limits) */
.important-note {
    background-color: var(--background-light);
    border-radius: 8px;
    padding: 25px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.important-note.red-border {
    border-right: 6px solid #dc3545; /* Red border for warnings */
    background-color: #ffeaea; /* Light red background */
}

.important-note.blue-border {
    border-right: 6px solid #007bff; /* Blue border for important info/limits */
    background-color: #e0f2ff; /* Light blue background */
}

.important-note .note-icon {
    font-size: 2.5em; /* Larger icons for emphasis */
    flex-shrink: 0;
}

.important-note.red-border .note-icon {
    color: #dc3545;
}
.important-note.blue-border .note-icon {
    color: #007bff;
}

.important-note p {
    margin: 0;
    font-size: 1.1em;
    color: var(--text-dark);
    line-height: 1.7;
}

.important-note p strong {
    font-weight: bold;
    color: var(--dark-gold); /* Gold for general strong text */
}

.important-note.red-border p strong {
    color: #a71d2a; /* Darker red for warnings */
}
.important-note.blue-border p strong {
    color: #0056b3; /* Darker blue for limits */
}


/* Gold Links within text */
.gold-link {
    color: var(--primary-gold);
    font-weight: bold;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
    display: inline; /* Ensure it behaves like inline text */
    margin: 0; 
    padding: 0;
}

.gold-link:hover {
    color: var(--dark-gold);
    text-decoration: underline;
}

/* Closing Statement */
.dola-closing-statement {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--text-dark);
    text-align: center;
    margin-top: 60px;
    padding: 25px;
    background-color: var(--light-gold);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .dola-refund-page {
        padding: 30px 15px;
    }

    .dola-refund-page .dola-section-title {
        font-size: 2.5em;
        margin-bottom: 30px;
    }

    .dola-refund-page .dola-intro-text {
        font-size: 1.1em;
        margin-bottom: 40px;
    }

    .refund-subsection-title {
        font-size: 1.8em;
        padding-right: 15px;
        gap: 10px;
    }

    .section-icon {
        font-size: 1em;
    }

    .refund-list li {
        font-size: 1em;
        gap: 10px;
        margin-bottom: 10px;
    }
    .refund-list ul {
        padding-right: 20px;
    }
    .refund-list ul li {
        font-size: 0.9em;

    }
    .refund-list ul li a{
            display: inline; /* Ensure it behaves like inline text */

    }

    .gold-check, .bullet-gold {
        font-size: 1.1em;
        margin-top: 3px;
    }

    .important-note {
        flex-direction: column; /* Stack icon and text */
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .important-note .note-icon {
        margin-bottom: 15px;
        font-size: 2em;
    }

    .important-note p {
        font-size: 1em;
    }

    .dola-closing-statement {
        font-size: 1.1em;
        padding: 20px;
        margin-top: 40px;
    }

    .dola-refund-page::before,
    .dola-refund-page::after {
        display: none; /* Hide background elements on smaller screens */
    }
}

@media (max-width: 480px) {
    .dola-refund-page .dola-section-title {
        font-size: 2em;
    }

    .refund-subsection-title {
        font-size: 1.6em;
    }

    .refund-list li {
        font-size: 0.95em;
    }

    .important-note p {
        font-size: 0.95em;
    }
}