/* Define custom CSS variables for easy color management */
:root {
    --primary: #579817; /* A standard green, adjust if needed to match image exactly */
    --hover-green: #218838;
    --hero-overlay-color: rgba(0, 0, 0, 0.5); /* 50% black overlay for the hero section */
    --card-bg-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white for the "Why Choose Us" card */
    --text-color-dark: #333; /* Dark text for general content */
    --link-color: #007bff;
    /* Specific colors for pricing cards */
    --card1-gradient-start: #e0f2ff; /* Light blue */
    --card1-gradient-end: #c9e6ff;
    --card1-button: #007bff; /* Blue */
    --card1-button-hover: #0056b3;

    --card2-gradient-start: #ffe0ff; /* Light purple */
    --card2-gradient-end: #f5c9f5;
    --card2-button: #800080; /* Purple */
    --card2-button-hover: #6a006a;
    --card2-badge-bg: #e020e0; /* Bright pink/purple */

    --card3-gradient-start: #fffbe0; /* Light yellow */
    --card3-gradient-end: #f5f0c9;
    --card3-button: #ffc107; /* Yellow/Orange */
    --card3-button-hover: #e0a800;
    --card3-badge-bg: var(--primary); /* Primary green for badge */

    --card4-gradient-start: #e0ffe0; /* Light green */
    --card4-gradient-end: #c9f5c9;
    --card4-button: var(--primary); /* Primary green */
    --card4-button-hover: var(--hover-green);
    --card4-badge-bg: var(--primary); /* Primary green for badge */

    --light-gray-bg: #f8f9fa; /* Background color for the page */
    --card-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* Standard card shadow */
    --border-color: var(--primary); /* Light border color */
    /* Specific footer card colors */
    --footer-card1-bg: #fff3cd; /* Light yellow */
    --footer-card1-text: #FCD04D; /* Dark yellow */

}


body {
    margin: 0;
    font-family: "cairo", sans-serif;
    direction: rtl;
}


.justify-content-custom {
    justify-content: start !important;
    text-align: right !important;
}

.order-lg-custom-1 {
    order: 1;
}

.order-lg-custom-2 {
    order: 2;
}

/* Navbar adjustments */
.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: var(--primary) !important; /* Force brand color, adjust if your logo has a specific color */
    margin-right: auto; /* Push the brand to the right in RTL layout */
}

.nav-link {
    color: var(--text-color-dark) !important;
    font-weight: 500;
    padding-left: 1rem !important; /* Adjust padding for spacing between nav items in RTL */
    padding-right: 1rem !important;
}

/*.nav-link:hover {*/
/*    color: #ffffff !important;*/
/*}*/

/* Custom Green Button styling (for "سجل الدخول" and "تواصل" in navbar, and "ابدأ رحلتك المالية" hero button) */
.custom-btn-green {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition on hover */
}

.custom-btn-green:hover {
    background-color: var(--hover-green);
    border-color: var(--hover-green);
    color: white;
}

/* Custom Outline Button styling (for "استكشف خدماتنا" hero button) */
.custom-btn-outline {
    border-color: white;
    color: white;
    background-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; /* Smooth transition on hover */
}

.custom-btn-outline:hover {
    background-color: white;
    color: var(--primary); /* Green text on white background on hover */
    border-color: white;
}

.overlay::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 95px; /* height of fade */
    background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
}

/* Hero Section (the main background image area) */
.hero-section {
    min-height: 80vh; /* Ensures the section takes up significant vertical space */
    /*background: url('../img/main-head.jpg') no-repeat  center; !* Background image - fixed path *!*/
    background-size: cover; /* Ensures the image covers the entire section */
    display: flex; /* Use flexbox for vertical centering of content */
    align-items: center; /* Vertically centers content within the hero section */
    position: relative;

    z-index: 0; /* Ensures the overlay appears above the background image */
}

.hero-section img.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Keep proportions and cover the area */
    z-index: -1; /* Behind the content */
}

/* Overlay for the hero section, making text more readable */
.hero-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--hero-overlay-color); /* Semi-transparent black */
    z-index: 1; /* Places the overlay above the background image */
}

/* Ensure content is above the overlay */
.hero-section .container {
    position: relative;
    z-index: 2; /* Places the content above the overlay */
}

/* Text styling within the hero section */
.hero-section h1, .hero-section p {
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* Adds a subtle shadow for better readability */
}

/* "Why Choose Us" Card styling */
.why-choose-us-card {

    backdrop-filter: blur(24px); /* Apply blur to background */
    color: var(--text-color-dark);
    border-radius: 1rem; /* Rounded corners */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    max-width: 450px; /* Limits the card's maximum width */
    width: 100%; /* Ensures it's responsive on smaller screens */
    padding: 2rem !important; /* Internal padding */
    text-align: right; /* Ensures text inside the card is RTL aligned */
    opacity: 0.8; /* Initially hidden */


}

.why-choose-us-card h4 {
    color: var(--primary);
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: right !important; /* Force right alignment for the card title */
}

.why-choose-us-card .list-unstyled li {
    padding: 0.5rem 0;

    display: flex; /* Use flexbox for icon and text alignment */
    align-items: center; /* Vertically align icon and text */
    flex-direction: row-reverse; /* Put icon on the right of text for RTL */

}

.why-choose-us-card .list-unstyled li:last-child {
    border-bottom: none; /* No border for the last item */
}

.why-choose-us-card .list-unstyled i {
    color: var(--primary);
    margin-right: 0 !important; /* Remove default margin */
    margin-left: 0.75rem !important; /* Add margin to the left of the icon for RTL */
}

.why-choose-us-card h5 {
    font-weight: 600;
    color: var(--primary); /* Styling for the main text in list items */
    margin-bottom: 0.25rem; /* Small margin below heading */
}

.why-choose-us-card small {
    color: #666; /* Styling for the smaller descriptive text in list items */
    display: block; /* Ensure small text goes to a new line */
}

/* Responsive adjustments for smaller screens (e.g., mobile) */
@media (max-width: 991.98px) {
    /* Adjust breakpoint as needed, `lg` is 992px */
    .hero-section {
        min-height: auto; /* Allow height to adjust based on content */
        padding-top: 100px; /* Add padding for navbar space */
        padding-bottom: 50px;
    }

    .hero-section .row {
        flex-direction: column-reverse; /* Stack columns and put the card above the text on mobile */
    }

    .hero-section .text-end {
        text-align: center !important; /* Center align main text on mobile */
    }

    .hero-section .justify-content-end {
        justify-content: center !important; /* Center align buttons on mobile */
    }

    .why-choose-us-card {
        margin-top: 2rem; /* Add space between text and card on mobile */
        margin-bottom: 2rem;
    }
}

@media (max-width: 767.98px) {
    /* Small mobile devices */
    .hero-section h1 {
        font-size: 2.5rem; /* Adjust font size for smaller screens */
    }

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

    .why-choose-us-card .list-unstyled li {
        flex-wrap: wrap; /* Allow icon and text to wrap if necessary */
    }

    .why-choose-us-card .list-unstyled i {
        margin-bottom: 0.5rem; /* Add some space below icon if it wraps */
    }
}

.card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    height: 15rem;
}

.card-icon {
    width: 60px;
    height: 60px;
    background-color: #e6f7e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.card-icon img {
    width: 32px;
    height: 32px;
    filter: invert(57%) sepia(34%) saturate(635%) hue-rotate(85deg) brightness(97%) contrast(90%);
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.card-text {
    font-size: 1rem;
    color: #666;
}

.green-icon {
    color: var(--primary);
}

/*why choosw our company*/
.custom-section-color {
    background-color: #f6f8f4;
    padding: 80px 15px;
    border-radius: 30px;
}

.reason-box {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 40px 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.reason-box h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}

.reason-box p {
    font-size: 1.1rem;
    color: #666;
    margin: 0;
}

.right-panel {
    padding: 0 50px;
}

.right-panel h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.right-panel p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    direction: rtl
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #333;
    font-size: 1.1rem;
    justify-content: end
}

.feature-icon {
    width: 40px;
    height: 40px;
    background-color: #e6f7e9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
    flex-shrink: 0;
}

.feature-icon svg {
    color: var(--primary);
    width: 20px;
    height: 20px;
}

.btn-custom {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

.btn-custom:hover {
    background-color: var(--primary);
    color: #fff;
}

.btn-custom svg {
    margin-right: 10px;
    transform: rotate(180deg);
}

@media (max-width: 991.98px) {
    .container-fluid.custom-section {
        background: #f6f8f4;
    }

    .right-panel, .left-panel {
        padding: 30px;
    }

    .right-panel h1, .right-panel p {
        text-align: center;
    }

    .feature-item {
        justify-content: center;
    }

    .reason-box {
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .container-fluid.custom-section {
        padding: 40px 0;
    }

    .reason-box h2 {
        font-size: 1.8rem;
    }

    .reason-box p {
        font-size: 1rem;
    }

    .right-panel {
        padding: 20px;
    }

    .right-panel h1 {
        font-size: 1.8rem;
    }

    .right-panel p {
        font-size: 1rem;
    }
}

/*انجازاتنا بالرقام*/
.achievements-section {
    background: #101425; /* Dark gradient background */
    padding: 80px 0;
    color: #fff;
    border-radius: 20px;
    margin: 50px auto; /* Center the section and add vertical margin */
    max-width: 1320px; /* Limit max width for better presentation */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.achievements-section h1 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.achievements-section p.lead {
    font-size: 1.15rem;
    opacity: 0.8;
    margin-bottom: 50px;
}

.achievement-card {
    background-color: rgba(255, 255, 255, 0.08); /* Slightly transparent white for cards */
    border: none;
    border-radius: 15px;
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.achievement-card:hover {
    transform: translateY(-8px);
    background-color: #101425;
}

.achievement-icon {
    width: 40px;
    height: 40px;
    background-color: #101425; /* Slightly lighter background for icon circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.achievement-icon svg {
    color: #fff; /* Green color for icons */
    width: 20px;
    height: 38px;
}

.achievement-card h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}

.achievement-card p {
    font-size: 1rem;
    color: #fff;
    margin: 0;
}

/*.squarer {*/
/*    margin: 29px 51px !important;*/
/*}*/
@media (max-width: 991.98px) {
    .achievements-section {
        padding: 60px 20px;
        margin: 30px auto;
    }

    .achievements-section h1 {
        font-size: 2.2rem;
    }

    .achievements-section p.lead {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .achievement-card {
        padding: 25px;
    }

    .achievement-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 20px;
    }

    .achievement-icon svg {
        width: 32px;
        height: 32px;
    }

    .achievement-card h2 {
        font-size: 2rem;
    }
}

@media (max-width: 767.98px) {
    .achievements-section {
        padding: 40px 15px;
        border-radius: 15px;
    }

    .achievements-section h1 {
        font-size: 1.8rem;
    }

    .achievement-card {
        margin-bottom: 20px; /* Add margin between stacked cards */
    }

    .achievement-icon {
        width: 50px;
        height: 50px;
    }

    .achievement-icon svg {
        width: 28px;
        height: 28px;
    }

    .achievement-card h2 {
        font-size: 1.8rem;
    }

    .achievement-card p {
        font-size: 0.9rem;
    }
}

/*انجازاتنا بالرقام*/


/*about*/
.section-padding {
    padding: 80px 0;
}

.container {
    max-width: 1300px;
}

/* Breadcrumbs */


/* About Us Section */
.about-section {
    background-color: #f8f9fa;
}

.about-section h2.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 10px;
}

.about-section h3.section-subtitle {
    font-size: 2rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

.about-section p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    text-align: justify;
}

.about-section .about-image-container {
    border-radius: 15px;
    overflow: hidden;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);*/
}

.about-section .about-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Values Section */
.values-section {
    background-color: #fff;
    padding: 60px 0;
}

.values-section h2.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.values-section p.section-subtitle {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 50px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.value-card {
    background-color: #fff; /* White background */
    border: 1px solid #dfe4ea; /* Light border */
    border-radius: 10px;
    padding: 20px 25px;
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: right; /* RTL text alignment */
    height: 100%;
}

.value-icon {
    width: 50px;
    height: 50px;
    background-color: var(--primary); /* Solid green circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 20px;
}

.value-icon svg {
    color: #fff; /* White icon */
    width: 24px;
    height: 24px;
}

.value-card h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
}

.value-card p {
    font-size: 0.9rem;
    color: #555;
    margin: 0;
}

/* FAQ Section */
.faq-section {
    background-color: #f8f9fa;
    padding: 60px 0;
}

.faq-section h2.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}

.accordion-item {
    border: none;
    border-bottom: 1px solid #eee; /* Light border between items */
    margin-bottom: 10px; /* Space between accordion items */
    border-radius: 10px;
    overflow: hidden; /* For rounded corners effect */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    text-align: right;
}

.accordion-button {
    background-color: #fff;
    color: #333;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 18px 25px;
    border: none;
    text-align: right; /* Align text to right for RTL */
    box-shadow: none !important; /* Remove default focus shadow */
    display: block;
}

.accordion-button:not(.collapsed) {
    color: var(--primary); /* Green color when active */
    background-color: #f6f8f4; /* Light green background when active */
}

.accordion-button::after {
    margin-left: auto; /* Push icon to the left in RTL */
    margin-right: 0;
    transform: rotate(0deg); /* Default state */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M8 12.5a.5.5 0 0 0 .5-.5V7.495a.5.5 0 0 0-1 0V12a.5.5 0 0 0 .5.5z'/%3e%3cpath fill-rule='evenodd' d='M8 3.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z'/%3e%3c/svg%3e"); /* Custom plus icon */
    width: 1.5rem;
    height: 1.5rem;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2328a745'%3e%3cpath fill-rule='evenodd' d='M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z'/%3e%3c/svg%3e"); /* Custom minus icon */
    transform: rotate(0deg); /* Keep straight */
}

.accordion-body {
    padding: 15px 25px;
    background-color: #fff;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .section-padding {
        padding: 60px 0;
    }

    .about-section .about-image-container {
        margin-top: 30px;
    }

    .values-section .value-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 40px 0;
    }

    .about-section h2.section-title,
    .about-section h3.section-subtitle,
    .faq-section h2.section-title {
        text-align: center;
    }

    .about-section p {
        text-align: right; /* Adjust text alignment for smaller screens */
    }

    .values-section p.section-subtitle {
        margin-bottom: 30px;
    }

    .accordion-button {
        font-size: 1rem;
        padding: 15px 20px;
    }

    .accordion-body {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}


/*contact us*/

/* Breadcrumbs */
.breadcrumbs {
    padding: 20px 0;
    background-color: #fff; /* Match body background */
    text-align: center;
}

.breadcrumbs a {
    color: var(--primary); /* Green link color */
    text-decoration: none;
    font-size: 0.95rem;
}

.breadcrumbs span {
    color: #6c757d;
    font-size: 0.95rem;
}

/* Contact Section Header */
.contact-header {
    margin-bottom: 50px;
    text-align: center;
}

.contact-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.contact-header p {
    font-size: 1.1rem;
    color: #666;
}

/* Contact Details & Form Section */
.contact-content-section {
    background-color: #f8f9fa;
    padding-bottom: 80px; /* Adjust padding for visual balance */
}

.contact-details-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    margin-bottom: 25px; /* Spacing between cards */
    display: flex; /* For icon and text alignment */
    align-items: flex-start; /* Align icon to top of text */
    text-align: right; /* Ensure text aligns right in RTL */
    transition: transform 0.2s ease;
}

.contact-details-card:hover {
    transform: translateY(-3px);
}

.contact-details-card .icon-wrapper {
    width: 50px;
    height: 50px;
    background-color: #e6f7e9; /* Light green for icon circle */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevent shrinking */
    margin-left: 20px; /* Space between icon and text in RTL */
}

.contact-details-card .icon-wrapper svg,
.contact-details-card .icon-wrapper i {
    color: var(--primary); /* Green color for icons */
    font-size: 1.4rem;
}

.contact-details-card .details {
    flex-grow: 1;
}

.contact-details-card .details h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.contact-details-card .details p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Contact Form */
.contact-form-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 51px;
}

.contact-form-card h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 30px;
    text-align: right; /* Align title to right in RTL */
}

.contact-form-card .form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #ddd;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: right; /* Ensure input text aligns right */
}

.contact-form-card .form-control::placeholder { /* For placeholder text */
    color: #999;
}

.contact-form-card textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

.contact-form-card .btn-submit {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%; /* Full width button */
    transition: background-color 0.3s ease;
}

.contact-form-card .btn-submit:hover {
    background-color: var(--primary);
}

/* Immediate Help Section */
.immediate-help-section {
    background: linear-gradient(to right, #24292e, #363b40, #4a4f54); /* Dark gradient background */
    padding: 60px 0;
    color: #fff;
    text-align: center;
    border-radius: 15px; /* Rounded corners for this section */
    margin-top: 50px; /* Space from above content */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.immediate-help-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.immediate-help-section p {
    font-size: 1.1rem;
    opacity: 0.8;
    margin-bottom: 30px;
}

.immediate-help-section .btn-cta {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 40px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.immediate-help-section .btn-cta:hover {
    background-color: var(--primary);
}

.immediate-help-section .btn-cta i {
    margin-left: 10px; /* Space icon to the left in RTL */
    margin-right: 0;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .contact-details-card {
        margin-bottom: 20px;
    }

    .contact-form-card {
        margin-top: 30px; /* Add space between details and form on smaller screens */
    }

    .immediate-help-section {
        margin-top: 40px;
        padding: 40px 20px;
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 40px 0;
    }

    .contact-header h1 {
        font-size: 2rem;
    }

    .contact-header p {
        font-size: 1rem;
    }

    .contact-details-card {
        padding: 25px;
    }

    .contact-details-card .icon-wrapper {
        width: 45px;
        height: 45px;
        margin-left: 15px;
    }

    .contact-details-card .icon-wrapper svg,
    .contact-details-card .icon-wrapper i {
        font-size: 1.2rem;
    }

    .contact-details-card .details h5 {
        font-size: 1rem;
    }

    .contact-details-card .details p {
        font-size: 0.9rem;
    }

    .contact-form-card {
        padding: 25px;
    }

    .contact-form-card h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .contact-form-card .form-control {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .contact-form-card .btn-submit {
        font-size: 1rem;
        padding: 10px 25px;
    }

    .immediate-help-section h2 {
        font-size: 1.8rem;
    }

    .immediate-help-section p {
        font-size: 1rem;
    }

    .immediate-help-section .btn-cta {
        padding: 10px 30px;
        font-size: 0.9rem;
    }
}


/*services*/
/* Main Services Header */
.services-header {
    margin-bottom: -11px;
    text-align: center;
}

.services-header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 15px;
}

.services-header p {
    font-size: 1.1rem;
    color: #666;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Pricing Table & Features */
.pricing-section {
    padding-bottom: 80px;
}

/* Pricing Card Base */
.pricing-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    height: 100%;
    overflow: hidden; /* For header gradient */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.pricing-card-header {
    padding: 25px;
    text-align: center;
    color: #fff;
    position: relative; /* For badge positioning */
}

.pricing-card-header h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.pricing-card-header .price {
    font-size: 1.8rem;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.pricing-card-header .price-note {
    font-size: 0.9rem;
    opacity: 0.9;
}

.pricing-card-header .off-badge {
    position: absolute;
    top: 92px;
    right: 226px;
    background-color: var(--card2-badge-bg); /* Default for card 2 */
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 5px 5px;
    border-radius: 5px;
}

/* Specific Card Styles */
.card-institutional .pricing-card-header {
    background: linear-gradient(to right, var(--card1-gradient-start), var(--card1-gradient-end));
    color: var(--text-color-dark); /* Text color from image */
}

.card-institutional .pricing-card-header h3,
.card-institutional .pricing-card-header .price,
.card-institutional .pricing-card-header .price-note {
    color: var(--text-color-dark); /* Ensure text is dark */
}

.card-institutional .btn-package {
    background-color: var(--card1-button);
    color: #fff;
}

.card-institutional .btn-package:hover {
    background-color: var(--card1-button-hover);
}

.card-risk-management .pricing-card-header {
    background: linear-gradient(to right, var(--card2-gradient-start), var(--card2-gradient-end));
    color: var(--text-color-dark);
}

.card-risk-management .pricing-card-header h3,
.card-risk-management .pricing-card-header .price,
.card-risk-management .pricing-card-header .price-note {
    color: var(--text-color-dark);
}

.card-risk-management .btn-package {
    background-color: var(--card2-button);
    color: #fff;
}

.card-risk-management .btn-package:hover {
    background-color: var(--card2-button-hover);
}

.card-risk-management .off-badge {
    background-color: var(--card2-badge-bg);
}

.card-investment .pricing-card-header {
    background: linear-gradient(to right, var(--card3-gradient-start), var(--card3-gradient-end));
    color: var(--text-color-dark);
}

.card-investment .pricing-card-header h3,
.card-investment .pricing-card-header .price,
.card-investment .pricing-card-header .price-note {
    color: var(--text-color-dark);
}

.card-investment .btn-package {
    background-color: var(--card3-button);
    color: var(--text-color-dark); /* Yellow button has dark text in image */
}

.card-investment .btn-package:hover {
    background-color: var(--card3-button-hover);
}

.card-investment .off-badge {
    background-color: var(--card3-badge-bg);
}

.card-advanced-analytics .pricing-card-header {
    background: linear-gradient(to right, var(--card4-gradient-start), var(--card4-gradient-end));
    color: var(--text-color-dark);
}

.card-advanced-analytics .pricing-card-header h3,
.card-advanced-analytics .pricing-card-header .price,
.card-advanced-analytics .pricing-card-header .price-note {
    color: var(--text-color-dark);
}

.card-advanced-analytics .btn-package {
    background-color: var(--card4-button);
    color: #fff;
}

.card-advanced-analytics .btn-package:hover {
    background-color: var(--card4-button-hover);
}

.card-advanced-analytics .off-badge {
    background-color: var(--card4-badge-bg);
}

/* Pricing Card Body (Features List) */
.pricing-card-body {
    padding: 25px;
    flex-grow: 1; /* Allows body to expand and fill space */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push button to bottom */
}

.pricing-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pricing-card-body ul li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #555;
    text-align: right; /* Ensure text aligns right in RTL */
}

.pricing-card-body ul li:last-child {
    margin-bottom: 0;
}

.pricing-card-body ul li svg {
    width: 18px;
    height: 18px;
    margin-left: 10px; /* Space between icon and text in RTL */
    flex-shrink: 0;
}

.pricing-card-body ul li .check-icon {
    color: var(--primary); /* Green checkmark */
}

.pricing-card-body ul li .lock-icon {
    color: #ccc; /* Light gray lock */
}

.btn-package {
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%;
    margin-top: 25px; /* Space above button */
    transition: background-color 0.3s ease;
}

/* Global Features Section */
.global-features-section {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.global-features-section h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 20px;
    text-align: right;
}

.global-features-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.global-features-section ul li {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 15px;
    position: relative;
    padding-right: 25px; /* Space for custom bullet */
    text-align: right;
}

.global-features-section ul li::before {
    content: "\2022"; /* Unicode bullet point */
    color: var(--primary); /* Green bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    right: 0; /* Position bullet to the right */
}

.global-features-section ul li:last-child {
    margin-bottom: 0;
}


/* Responsive adjustments */
@media (max-width: 1199.98px) {
    /* Adjust for smaller desktops */
    .pricing-card-header .price {
        font-size: 1.6rem;
    }
}

@media (max-width: 991.98px) {
    /* Tablets */
    .section-padding {
        padding: 60px 0;
    }

    .services-header h1 {
        font-size: 2.2rem;
    }

    .services-header p {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .pricing-section .col-lg-3 {
        margin-bottom: 20px; /* Add space between stacked cards */
    }

    .global-features-section {
        margin-top: 20px; /* Space from pricing cards */
    }
}

@media (max-width: 767.98px) {
    /* Mobile */
    .section-padding {
        padding: 40px 0;
    }

    .services-header h1 {
        font-size: 1.8rem;
    }

    .services-header p {
        font-size: 0.95rem;
    }

    .pricing-card-header {
        padding: 20px;
    }

    .pricing-card-header h3 {
        font-size: 1.2rem;
    }

    .pricing-card-header .price {
        font-size: 1.5rem;
    }

    .pricing-card-body {
        padding: 20px;
    }

    .pricing-card-body ul li {
        font-size: 0.9rem;
    }

    .btn-package {
        font-size: 0.95rem;
        padding: 10px 15px;
    }

    .global-features-section {
        padding: 25px;
    }

    .global-features-section h2 {
        font-size: 1.6rem;
    }

    .global-features-section ul li {
        font-size: 0.95rem;
    }
}

/*<!-- Selected Service Section -->*/
.card-section {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    margin-bottom: 30px; /* Space between sections */
}

.section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
}

.section-header .icon-wrapper {
    width: 45px;
    height: 45px;
    background-color: #e6f7e9; /* Light green icon background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 15px; /* Space between icon and text in RTL */
}

.section-header .icon-wrapper i {
    color: var(--primary);
    font-size: 1.2rem;
}

.section-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 0;
    flex-grow: 1;
    text-align: right; /* Align text to right in RTL */
}

/* Selected Service Section */
.selected-service-content p {
    font-size: 1rem;
    color: #555;
    margin-bottom: 5px;
    text-align: right;
}

.selected-service-content .price {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary);
    text-align: right;
    margin-bottom: 20px;
}

.selected-service-content .btn-change-service {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
    margin: 16px;
}

.selected-service-content .btn-change-service:hover {
    background-color: var(--hover-green);
}

/* Requirements Details Section */
.requirements-details-content .file-upload-box {
    border: 2px dashed var(--border-color);
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    background-color: #fcfcfc;
    margin-bottom: 20px;
}

.requirements-details-content .file-upload-box .upload-icon {
    color: var(--primary);
    font-size: 3rem;
    margin-bottom: 15px;
}

.requirements-details-content .file-upload-box p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 10px;
}

.requirements-details-content .file-upload-box .supported-formats {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 20px;
}

.requirements-details-content .btn-upload-files {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 30px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.requirements-details-content .btn-upload-files:hover {
    background-color: var(--hover-green);
}

/* Warning Message */
.warning-message {
    background-color: #fff3cd; /* Light yellow background */
    border-radius: 8px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    color: #856404; /* Dark yellow text */
    font-size: 0.95rem;
    margin-top: 20px;
}

.warning-message i {
    color: #FCD04D;
    font-size: 1.2rem;
    margin-left: 10px; /* Space between icon and text in RTL */
}

.warning-message p {
    margin-bottom: 0;
    text-align: right;
}

/* File Upload Section */
.file-upload-section-content .form-group {
    margin-bottom: 20px;
}

.file-upload-section-content label {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 5px;
    display: block;
    text-align: right;
}

.file-upload-section-content textarea.form-control {
    min-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 12px;
    font-size: 1rem;
    text-align: right;
    resize: vertical;
}

.file-upload-section-content .input-group .form-control {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 12px;
    font-size: 1rem;
    text-align: right;
}

.file-upload-section-content .input-group .form-control::placeholder {
    color: #999;
}

.file-upload-section-content .input-group .input-group-text {
    background-color: #f0f0f0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-right: 10px; /* Space between text and input in RTL */
    padding: 12px 15px;
    font-size: 0.9rem;
    color: #666;
}

/* Navigation Buttons */
.navigation-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

.navigation-buttons .btn {
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.navigation-buttons .btn-back {
    background-color: #f0f0f0;
    color: var(--text-color-dark);
}

.navigation-buttons .btn-back:hover {
    background-color: #e0e0e0;
}

.navigation-buttons .btn-next {
    background-color: var(--primary);
    color: #fff;
}

.navigation-buttons .btn-next:hover {
    background-color: var(--hover-green);
}

.navigation-buttons .btn-next i {
    margin-left: 10px; /* Space between text and icon in RTL */
}

.navigation-buttons .btn-back i {
    margin-right: 10px; /* Space between text and icon in RTL */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 20px 0;
    }

    .card-section {
        padding: 20px;
        margin-bottom: 20px;
    }

    .section-header h2 {
        font-size: 1.3rem;
    }

    .section-header .icon-wrapper {
        width: 40px;
        height: 40px;
        margin-left: 10px;
    }

    .section-header .icon-wrapper i {
        font-size: 1rem;
    }

    .selected-service-content p,
    .selected-service-content .price {
        font-size: 0.95rem;
    }

    .selected-service-content .btn-change-service {
        padding: 8px 20px;
        font-size: 0.85rem;
    }

    .requirements-details-content .file-upload-box {
        padding: 30px 15px;
    }

    .requirements-details-content .file-upload-box .upload-icon {
        font-size: 2.5rem;
    }

    .requirements-details-content .file-upload-box p {
        font-size: 0.9rem;
    }

    .requirements-details-content .btn-upload-files {
        padding: 8px 20px;
        font-size: 0.9rem;
    }

    .warning-message {
        padding: 12px 15px;
        font-size: 0.85rem;
    }

    .warning-message i {
        font-size: 1rem;
    }

    .file-upload-section-content textarea.form-control,
    .file-upload-section-content .input-group .form-control {
        padding: 10px;
        font-size: 0.9rem;
    }

    .file-upload-section-content .input-group .input-group-text {
        padding: 10px 12px;
        font-size: 0.8rem;
    }

    .navigation-buttons .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

/*ورش العمل*/

/* Top Navigation Bar */
.top-nav {
    background-color: #fff;

}

.top-nav .nav-links .nav-item {
    margin-left: 20px; /* Space between links in RTL */
}

.top-nav .nav-links .nav-link {
    color: var(--text-color-dark);
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.top-nav .nav-links .nav-link:hover {
    background-color: #f0f0f0;
}

.top-nav .nav-links .nav-link.active {
    background-color: var(--primary);
    color: #fff;
}

.top-nav .search-box {
    position: relative;
}

.top-nav .search-box .form-control {
    border-radius: 20px;
    padding-right: 40px; /* Space for icon */
    padding-left: 163px;
    border-color: #ddd;
}

.top-nav .search-box .search-icon {
    position: absolute;
    left: 15px; /* Position to the left in RTL */
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Event Card Styles */
.event-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    height: 100%; /* Ensure cards are same height */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.event-card .card-img-top {
    width: 100%;
    height: 200px; /* Fixed height for images */
    object-fit: cover;
}

.event-card .card-body {
    padding: 20px;
    flex-grow: 1; /* Allow body to take available space */
    display: flex;
    flex-direction: column;
    text-align: right; /* Align text to right in RTL */
}

.event-card .event-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.event-card .event-meta i {
    color: var(--primary);
    margin-left: 8px; /* Space between icon and text in RTL */
}

.event-card .event-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 10px;
}

.event-card .event-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow description to grow */
}

.event-card .instructor-info {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.event-card .instructor-info i {
    color: var(--primary);
    margin-left: 8px;
}

.event-card .card-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px; /* Space between buttons */
    margin-top: auto; /* Push buttons to the bottom */
}

.event-card .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.event-card .btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
}

.event-card .btn-primary {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.event-card .btn-primary:hover {
    background-color: var(--hover-green);
}

.event-card .btn-primary i {
    margin-right: 8px; /* Space between text and icon in RTL */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Tablets */
    .top-nav .navbar-nav {
        flex-direction: column;
        align-items: flex-start; /* Align links to right */
    }

    .top-nav .nav-links .nav-item {
        margin-left: 0;
        margin-bottom: 5px;
    }

    .top-nav .search-box {
        margin-top: 15px;
    }

    .event-card {
        margin-bottom: 30px; /* Add space between stacked cards */
    }
}

@media (max-width: 767.98px) {


    .top-nav {
        padding: 10px 0;
    }

    .top-nav .search-box .form-control {
        font-size: 0.9rem;
    }

    .event-card .card-img-top {
        height: 180px;
    }

    .event-card .card-body {
        padding: 15px;
    }

    .event-card .event-title {
        font-size: 1.1rem;
    }

    .event-card .event-description {
        font-size: 0.85rem;
    }

    .event-card .btn-outline-primary,
    .event-card .btn-primary {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}


/*educational_resources*/
/* Event Card Styles */
.event-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
    height: 100%; /* Ensure cards are same height */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.event-card .card-img-top-container {
    position: relative;
    width: 100%;
    height: 200px; /* Fixed height for images */
    overflow: hidden;
}

.event-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-card .play-icon-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.event-card .play-icon-overlay:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.event-card .card-body-video {
    padding: 20px;
    flex-grow: 1; /* Allow body to take available space */
    display: flex;
    flex-direction: column;
    text-align: right; /* Align text to right in RTL */
}

.event-card .event-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between; /* To push duration to left */
    align-items: center;
}

.event-card .event-meta i {
    color: var(--primary);
    margin-left: 8px; /* Space between icon and text in RTL */
}

.event-card .event-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 10px;
}

.event-card .event-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
    flex-grow: 1; /* Allow description to grow */
}

.event-card .instructor-info {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
}

.event-card .instructor-info i {
    color: var(--primary);
    margin-left: 8px;
}

.event-card .card-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 10px; /* Space between buttons */
    margin-top: auto; /* Push buttons to the bottom */
}

.event-card .btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.event-card .btn-outline-primary:hover {
    background-color: var(--primary);
    color: #fff;
}

.event-card .btn-primary {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.event-card .btn-primary:hover {
    background-color: var(--hover-green);
}

.event-card .btn-primary i {
    margin-right: 8px; /* Space between text and icon in RTL */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Tablets */
    .top-nav .navbar-nav {
        flex-direction: column;
        align-items: flex-start; /* Align links to right */
    }

    .top-nav .nav-links .nav-item {
        margin-left: 0;
        margin-bottom: 5px;
    }

    .top-nav .search-box {
        margin-top: 15px;
    }

    .event-card {
        margin-bottom: 30px; /* Add space between stacked cards */
    }
}

@media (max-width: 767.98px) {

    .top-nav {
        padding: 10px 0;
    }

    .top-nav .search-box .form-control {
        font-size: 0.9rem;
    }

    .event-card .card-img-top-container {
        height: 180px;
    }

    .event-card .card-body-video {
        padding: 15px;
    }

    .event-card .event-title {
        font-size: 1.1rem;
    }

    .event-card .event-description {
        font-size: 0.85rem;
    }

    .event-card .btn-outline-primary,
    .event-card .btn-primary {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

.card-body-video {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: right;
}

.nav-links-videos {
    border-radius: 10px;
    padding: 10px;
}


/*article*/

/* Resource Card Styles */
.resource-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 25px;
    margin-bottom: 25px; /* Space between cards */
    display: flex;
    align-items: flex-start; /* Align header content to top */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.resource-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.resource-card .header-icon-wrapper {
    width: 45px;
    height: 45px;
    background-color: #e6f7e9; /* Light green background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 15px; /* Space between icon and text in RTL */
}

.resource-card .header-icon-wrapper i {
    color: var(--primary);
    font-size: 1.2rem;
}

.resource-card .content-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    text-align: right; /* Align text to right in RTL */
}

.resource-card .resource-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 10px;
}

.resource-card .resource-description {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 15px;
}

.resource-card .resource-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

.resource-card .resource-meta span {
    display: flex;
    align-items: center;
}

.resource-card .resource-meta span:last-child {
    margin-right: 0;
}

.resource-card .resource-meta i {
    color: var(--primary);
    margin-left: 8px; /* Space between icon and text in RTL */
}

.resource-card .resource-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to the right in RTL */
    gap: 10px; /* Space between buttons */
}

.resource-card .btn-download,
.resource-card .btn-read {
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.resource-card .btn-download {
    background-color: var(--primary);
    color: #fff;
    border: none;
}

.resource-card .btn-download:hover {
    background-color: var(--hover-green);
}

.resource-card .btn-download i {
    margin-left: 8px; /* Space between text and icon in RTL */
}

.resource-card .btn-read {
    background-color: #f0f0f0; /* Light gray background */
    color: var(--text-color-dark);
    border: none;
}

.resource-card .btn-read:hover {
    background-color: #e0e0e0;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 20px 0;
    }

    .resource-card {
        padding: 20px;
        margin-bottom: 20px;
        flex-direction: column; /* Stack icon and content on small screens */
        align-items: center; /* Center content when stacked */
    }

    .resource-card .header-icon-wrapper {
        margin-left: 0; /* Remove left margin when stacked */
        margin-bottom: 15px; /* Add bottom margin */
    }

    .resource-card .content-wrapper {
        text-align: center; /* Center text when stacked */
    }

    .resource-card .resource-meta {
        justify-content: center; /* Center meta items when stacked */
        flex-direction: column; /* Stack meta items vertically */
        align-items: center;
    }

    .resource-card .resource-meta span {
        margin-right: 0; /* Remove horizontal spacing */
        margin-bottom: 5px; /* Add vertical spacing */
    }

    .resource-card .resource-actions {
        flex-direction: column; /* Stack buttons vertically */
        align-items: center; /* Center buttons when stacked */
    }

    .resource-card .btn-download,
    .resource-card .btn-read {
        width: 100%; /* Make buttons full width when stacked */
        max-width: 250px; /* Limit max width for stacked buttons */
    }
}


/*books*/

/* Download Card Styles */
.download-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 25px;
    margin-bottom: 25px; /* Space between cards */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: flex-end; /* Align content to the right */
    text-align: right; /* Ensure text is right-aligned */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%; /* Ensure cards are same height */
}

.download-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.download-card .header-content {
    display: flex;
    align-items: flex-start; /* Align icon to top of text */
    width: 100%;
    margin-bottom: 15px;
}

.download-card .header-icon-wrapper {
    width: 35px;
    height: 35px;
    background-color: #e6f7e9; /* Light green background */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-left: 15px; /* Space between icon and text in RTL */
}

.download-card .header-icon-wrapper i {
    color: var(--primary);
    font-size: 1rem;
}

.download-card .text-content {
    flex-grow: 1;
}

.download-card .book-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 5px;
}

.download-card .book-subtitle {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0;
}

.download-card .meta-info {
    width: 100%; /* Full width for meta info */
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color); /* Separator line */
}

.download-card .meta-info p {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.download-card .meta-info p:last-child {
    margin-bottom: 0;
}

.download-card .meta-info i {
    color: var(--primary);
    margin-left: 10px; /* Space between icon and text in RTL */
    font-size: 1rem;
}

.download-card .btn-download {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 25px;
    font-size: 1rem;
    font-weight: 600;
    width: 100%; /* Full width button */
    margin-top: 25px; /* Space above button */
    transition: background-color 0.3s ease;
}

.download-card .btn-download:hover {
    background-color: var(--hover-green);
}

.download-card .btn-download i {
    margin-left: 10px; /* Space between text and icon in RTL */
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Tablets */
    .download-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    /* Mobile */
    body {
        padding: 20px 0;
    }

    .download-card {
        padding: 20px;
    }

    .download-card .book-title {
        font-size: 1.1rem;
    }

    .download-card .book-subtitle {
        font-size: 0.9rem;
    }

    .download-card .meta-info p {
        font-size: 0.85rem;
    }

    .download-card .btn-download {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}


/*out team*/

/* Statistics Section */
.stats-section {
    padding-bottom: 50px;
}

.stat-card {
    background-color: #ebebeb3d;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.stat-card h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}

.stat-card p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 0;
}

/* Team Intro Section */
.team-intro-section {
    padding: 50px 0;
    text-align: center;
}

.team-intro-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 20px;
}

.team-intro-section p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

/* Team Member Card Styles */
.team-member-card {
    background-color: #F7F8F9;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 25px;
    margin-bottom: 30px; /* Space between cards */
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.team-member-card .member-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: right; /* Align text to right in RTL */
}

.team-member-card .member-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-left: 15px; /* Space between avatar and text in RTL */
    border: 2px solid #eee;
}

.team-member-card .member-info {
    flex-grow: 1;
}

.team-member-card .member-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 5px;
}

.team-member-card .member-info p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0;
}

.team-member-card .member-details p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 10px;
    text-align: right;
    line-height: 1.6;
}

.team-member-card .member-details p:last-of-type {
    margin-bottom: 20px; /* Space before social icons */
}

.team-member-card .member-details i {
    color: var(--primary);
    margin-left: 8px; /* Space between icon and text in RTL */
}

.team-member-card .social-links {
    display: flex;
    justify-content: flex-end; /* Align icons to the right in RTL */
    margin-top: auto; /* Push social links to bottom */
}

.team-member-card .social-links .btn-social {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f0f0f0;
    color: var(--text-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-left: 10px; /* Space between icons in RTL */
    transition: background-color 0.3s ease, color 0.3s ease;
}

.team-member-card .social-links .btn-social:hover {
    background-color: var(--primary);
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    /* Tablets */
    .stat-card {
        margin-bottom: 20px;
    }

    .team-member-card {
        margin-bottom: 25px;
    }
}

@media (max-width: 767.98px) {
    /* Mobile */
    .page-header {
        padding: 30px 0 20px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .page-header .breadcrumbs {
        font-size: 0.85rem;
    }

    .stats-section {
        padding-bottom: 30px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-card h2 {
        font-size: 2rem;
    }

    .stat-card p {
        font-size: 1rem;
    }

    .team-intro-section {
        padding: 30px 0;
    }

    .team-intro-section h2 {
        font-size: 1.8rem;
    }

    .team-intro-section p {
        font-size: 1rem;
    }

    .team-member-card {
        padding: 20px;
        margin-bottom: 20px;
    }

    .team-member-card .member-avatar {
        width: 60px;
        height: 60px;
        margin-left: 10px;
    }

    .team-member-card .member-info h3 {
        font-size: 1.1rem;
    }

    .team-member-card .member-info p {
        font-size: 0.85rem;
    }

    .team-member-card .member-details p {
        font-size: 0.9rem;
    }

    .team-member-card .social-links .btn-social {
        width: 35px;
        height: 35px;
        font-size: 1rem;
        margin-left: 8px;
    }
}

/*privacy*/

/* Main Content Section - Now a single card for multiple sub-sections */
.main-policy-card { /* Renamed from .content-card to clarify its purpose */
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    margin-bottom: 30px; /* Space between sections */
}

/* Styling for sub-section headers within the main policy card */
.main-policy-card .sub-section-header { /* New class for internal headers */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-top: 20px; /* Space above each sub-section header */
    margin-bottom: 20px;
    padding-bottom: 15px;
    text-align: right; /* Align to right in RTL */
}

.main-policy-card .sub-section-header:first-child {
    margin-top: 0; /* No top margin for the very first header */
}


.content-list {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin-bottom: 20px;
}

.content-list li {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
    position: relative;
    padding-right: 20px; /* Space for custom bullet */
    text-align: right; /* Align text to right in RTL */
}

.content-list li::before {
    content: "\2022"; /* Unicode bullet point */
    color: var(--primary); /* Green bullet */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
    position: absolute;
    right: 0; /* Position bullet to the right */
    top: 0; /* Align with text top */
}

.content-list li:last-child {
    margin-bottom: 0;
}

/* FAQ Section */
.faq-section {
    background-color: #f8f9fa; /* Match body background */
    border-radius: 15px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: var(--card-shadow);
}

.faq-section .faq-question {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    text-align: right;
}

.faq-section .contact-info {
    display: flex;
    justify-content: space-between; /* Space out items */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.faq-section .contact-item {
    font-size: 0.95rem;
    color: #666;
    text-align: right;
    margin-bottom: 10px; /* Space between items when wrapped */
}

.faq-section .contact-item:last-child {
    margin-bottom: 0;
}

.faq-section .contact-item strong {
    color: var(--text-color-dark);
    margin-left: 5px; /* Space between label and value in RTL */
}

/* Data Protection Officer Section */
.dpo-section {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    text-align: center;
}

.dpo-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 20px;
}

.dpo-section p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}

.dpo-section .btn-dpo {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.dpo-section .btn-dpo:hover {
    background-color: var(--hover-green);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 20px 0;
    }

    .main-policy-card, /* Adjusted */
    .faq-section,
    .dpo-section {
        padding: 20px;
        margin-bottom: 20px;
    }

    .main-policy-card .sub-section-header { /* Adjusted */
        font-size: 1.3rem;
        margin-top: 15px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .content-list li {
        font-size: 0.9rem;
        padding-right: 15px;
    }

    .faq-section .faq-question {
        font-size: 1.1rem;
    }

    .faq-section .contact-info {
        flex-direction: column; /* Stack contact info vertically */
        align-items: flex-end; /* Align to right */
    }

    .faq-section .contact-item {
        margin-bottom: 5px;
    }

    .dpo-section h2 {
        font-size: 1.3rem;
    }

    .dpo-section p {
        font-size: 0.9rem;
    }

    .dpo-section .btn-dpo {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}


/*terms */
/* Footer Cards Section */
.footer-cards-section .row {
    margin-bottom: 30px; /* Space below the row of cards */
}

.footer-card {
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 25px;
    height: 100%; /* Ensure cards are same height */
    text-align: right; /* Align text to right in RTL */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push content apart if needed */
    border: 1px solid rgba(0, 0, 0, 0.05); /* Added subtle border for distinctness */
}

.footer-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.footer-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Specific footer card styles */
.footer-card.card-legal {
    background-color: var(--footer-card1-bg);
    color: black;
}

.footer-card.card-updates {
    background-color: var(--footer-card1-bg);
    color: black;
}

.footer-card.card-important-note {
    background-color: var(--footer-card1-bg);
    color: black;
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 20px 0;
    }

    .main-policy-content,
    .footer-cards-section .row {
        padding: 20px;
        margin-bottom: 20px;
    }

    .policy-section-header {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    .policy-list li {
        font-size: 0.9rem;
        padding-right: 25px;
    }

    .footer-card {
        padding: 20px;
        margin-bottom: 20px; /* Space between stacked footer cards */
    }

    .footer-card h3 {
        font-size: 1.1rem;
    }

    .footer-card p {
        font-size: 0.85rem;
    }
}


/*login*/
.login-card {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 40px;
    max-width: 450px; /* Max width for the login form */
    width: 100%;
    text-align: center; /* Center content inside the card */
    margin: auto;
}

.login-card .logo {
    width: 80px; /* Size of the logo */
    height: 80px;
    margin-bottom: 25px;
    /* Optional: Add a real logo image instead of placeholder */
    /* background-image: url('path/to/your/logo.png'); */
    /* background-size: contain; */
    /* background-repeat: no-repeat; */
    /* background-position: center; */
}

.login-card h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 25px;
}

.login-card .form-control {
    border-radius: 8px;
    padding: 12px 15px;
    border: 1px solid #54dd85;
    margin-bottom: 15px;
    font-size: 1rem;
    text-align: right; /* Align input text to right in RTL */
}

.login-card .form-control::placeholder {
    color: #999;
}

.login-card .forgot-password {
    display: block;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.login-card .forgot-password a {
    color: var(--link-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.login-card .forgot-password a:hover {
    color: var(--primary);
}

.login-card .btn-login {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%; /* Full width button */
    transition: background-color 0.3s ease;
}

.login-card .btn-login:hover {
    background-color: var(--hover-green);
}

.login-card .signup-link {
    margin-top: 25px;
    font-size: 1rem;
    color: #666;
}

.login-card .signup-link a {
    color: var(--primary); /* Use primary color for sign-up link */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.login-card .signup-link a:hover {
    color: var(--hover-green);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .login-card {
        padding: 30px;
        border-radius: 10px;
    }

    .login-card h2 {
        font-size: 1.8rem;
    }

    .login-card .form-control {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .login-card .btn-login {
        padding: 10px 20px;
        font-size: 1rem;
    }

    .login-card .forgot-password,
    .login-card .signup-link {
        font-size: 0.9rem;
    }
}

.text-align-custom {
    text-align: right;
}

.justify-service-custom {
    justify-content: space-between !important;
    flex-direction: row !important;
}

.border-9 {
    border-radius: 9px;
}

.immediate-help-section {
    position: relative;
    z-index: 1;
}

.immediate-help-section::before {
    content: "";
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0 */
    background: rgba(79, 105, 96, 0.45); /* brownish transparent */
    z-index: 0;
    border-radius: inherit; /* keep rounded corners if any */
}

.immediate-help-section .container,
.immediate-help-section .container-inner {
    position: relative;
    z-index: 1; /* ensures text appears above overlay */
}

.fle-rev {
    flex-direction: row-reverse;
}

.brdr-o {
    border-radius: 0 !important;
    background-color: #f8f9fa !important;
}


@media (max-width: 767.98px) {
    .p-c-phone {
        padding-top: 0;
        padding-bottom: 17px;

    }
}

/* Common flex behavior */
.responsive-feature-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}

/* Small screens: stack vertically */
@media (max-width: 576px) {
    .responsive-feature-item {
        flex-direction: column;
        text-align: center;
    }

    .responsive-feature-item img {
        margin-top: 10px;
    }

    /* RTL Support */
    html[dir="rtl"] .responsive-feature-item {
        flex-direction: column;
    }

    html[dir="rtl"] .responsive-feature-item .me-3 {
        margin-left: 1rem;
        margin-right: 0;
    }

    .pricing-card-header .off-badge {
        top: 81px;
        right: 282px;
    }

}

#navbarNav {
    flex-direction: row-reverse;
}

/* ==============================
   RTL Top Nav (Educational Videos)
   ============================== */
.top-nav.rtl {
    padding: 10px 0;
}

.top-nav.rtl #navbarNav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.top-nav.rtl .search-box {
    position: relative;
    min-width: 260px;
    max-width: 380px;
}

.top-nav.rtl .search-box .form-control {
    height: 42px;
    border-radius: 12px;
    padding-left: 40px; /* space for icon on left in RTL */
    border: 1px solid #e1e6ef;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.top-nav.rtl .search-box .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
}

.top-nav.rtl .nav-links {
    display: flex;
    align-items: center;
}

.top-nav.rtl .nav-links .nav-item {
    margin-right: 16px;
}

.top-nav.rtl .nav-links .nav-item:last-child {
    margin-right: 0;
}

.top-nav.rtl .nav-links .nav-link {
    color: var(--text-color-dark);
    font-weight: 600;
    border-radius: 8px;
    padding: 8px 12px;
    transition: background-color .2s ease, color .2s ease;
}

.top-nav.rtl .nav-links .nav-link:hover,
.top-nav.rtl .nav-links .nav-link.active {
    background-color: var(--primary);
    color: #fff;
}

/* Responsive (RTL) */
@media (max-width: 991.98px) {
    .top-nav.rtl #navbarNav {
        flex-direction: column !important; /* override row-reverse */
        align-items: stretch;
        gap: 12px;
    }

    .top-nav.rtl .search-box {
        width: 100%;
        margin: 8px 0 0 0;
    }

    .top-nav.rtl .nav-links {
        flex-direction: column;
        align-items: flex-end;
    }

    .top-nav.rtl .nav-links .nav-item {
        margin: 0 0 6px 0;
    }
}

/* Phone-specific tweaks (≤ 768px) */
@media (max-width: 767.98px) {
    /* First top nav (search + topics) */
    .top-nav.rtl .navbar-toggler {
        border: none;
    }
    .section-padding {
        padding:  20px !important;
    }

    .top-nav.rtl .search-box {
        max-width: 100% !important;
    }

    .top-nav.rtl .search-box .form-control {
        height: 44px;
        padding-left: 40px;
    }

    .top-nav.rtl .search-box .search-icon {
        left: 12px;
        right: auto;
    }

    /* Make topics horizontally scrollable chips */
    .top-nav.rtl .nav-links {
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        gap: 8px;
        padding-right: initial;
    }

    .top-nav.rtl .nav-links::-webkit-scrollbar {
        display: none;
    }

    .top-nav.rtl .nav-links .nav-item {
        flex: 0 0 auto;
        margin: 0;
    }

    .top-nav.rtl .nav-links .nav-link {
        padding: 8px 14px;
        border-radius: 999px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        background-color: #f3f5f8;
        white-space: nowrap;
    }

    .top-nav.rtl .nav-links .nav-link.active {
        background-color: var(--primary);
        color: #fff;
        box-shadow: 0 4px 12px rgba(87, 152, 23, 0.25);
    }

    .top-nav.rtl .search-box {
        margin-bottom: 6px;
    }

    /* Second nav (three tabs) */
    .top-nav-center .nav-links-videos {
        row-gap: 10px;
        margin-top: 8px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        gap: 8px;
    }

    .top-nav-center .nav-links-videos .nav-item {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
        height: auto !important;
    }

    .top-nav-center .nav-links-videos .nav-link {
        display: block;
        width: 100%;
        text-align: center;
        padding: 12px 14px !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }
}
/* FAQ Section */
.faq-section {
    background-color: #fff; /* White background for this section */
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    margin-bottom: 30px; /* Space before the next section */
}
.faq-section .faq-question {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 15px;
    text-align: center; /* Centered as per image */
}
.faq-section .faq-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center; /* Centered as per image */
}
.faq-section .contact-info-grid {
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    flex-wrap: wrap; /* Allow wrapping on small screens */
    margin-bottom: 20px;
}
.faq-section .contact-item {
    flex: 1 1 30%; /* Allow items to take about 30% width */
    min-width: 180px; /* Minimum width before wrapping */
    font-size: 0.95rem;
    color: #666;
    text-align: center; /* Centered as per image */
    margin-bottom: 15px; /* Space between items when wrapped */
}
.faq-section .contact-item:last-child {
    margin-bottom: 0;
}
.faq-section .contact-item strong {
    display: block; /* Make label appear above value */
    color: var(--text-color-dark);
    font-size: 1.1rem;
    margin-bottom: 5px;
}

/* Data Protection Officer Section */
.dpo-section {
    background-color: #fff; /* White background for this section */
    border-radius: 15px;
    box-shadow: var(--card-shadow);
    padding: 30px;
    text-align: center;
}
.dpo-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-color-dark);
    margin-bottom: 20px;
}
.dpo-section p {
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 25px;
}
.dpo-section .btn-dpo {
    background-color: var(--primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    transition: background-color 0.3s ease;
}
.dpo-section .btn-dpo:hover {
    background-color: var(--hover-green);
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    body {
        padding: 20px 0;
    }
    .faq-section,
    .dpo-section {
        padding: 20px;
        margin-bottom: 20px;
    }
    .faq-section .faq-question {
        font-size: 1.3rem;
    }
    .faq-section .faq-description {
        font-size: 0.9rem;
    }
    .faq-section .contact-info-grid {
        flex-direction: column; /* Stack contact info vertically */
        align-items: center; /* Center stacked items */
    }
    .faq-section .contact-item {
        width: 100%; /* Full width when stacked */
        max-width: 250px; /* Limit max width for readability */
        margin-bottom: 10px;
    }
    .faq-section .contact-item strong {
        font-size: 1rem;
    }
    .dpo-section h2 {
        font-size: 1.3rem;
    }
    .dpo-section p {
        font-size: 0.9rem;
    }
    .dpo-section .btn-dpo {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}
/* FAQ Section */
.faq-section {
    background-color: #f8f9fa;
    padding: 60px 0;
}
.faq-section h2.section-title {
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
}
.accordion-item {
    border: none;
    border-bottom: 1px solid #eee; /* Light border between items */
    margin-bottom: 10px; /* Space between accordion items */
    border-radius: 10px;
    overflow: hidden; /* For rounded corners effect */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    text-align: left;
}
.accordion-button {
    background-color: #fff;
    color: #333;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 18px 25px;
    border: none;
    text-align: left; /* Align text to right for RTL */
    box-shadow: none !important; /* Remove default focus shadow */
    display: block;
}
.accordion-button:not(.collapsed) {
    color:  var(--primary); /* Green color when active */
    background-color: #f6f8f4; /* Light green background when active */
}
.accordion-button::after {
    margin-right: auto; /* Push icon to the left in RTL */
    margin-left: 0;
    transform: rotate(0deg); /* Default state */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333'%3e%3cpath fill-rule='evenodd' d='M8 12.5a.5.5 0 0 0 .5-.5V7.495a.5.5 0 0 0-1 0V12a.5.5 0 0 0 .5.5z'/%3e%3cpath fill-rule='evenodd' d='M8 3.5a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0V4a.5.5 0 0 0-.5-.5z'/%3e%3c/svg%3e"); /* Custom plus icon */
    width: 1.5rem;
    height: 1.5rem;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2328a745'%3e%3cpath fill-rule='evenodd' d='M0 8a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5A.5.5 0 0 1 0 8z'/%3e%3c/svg%3e"); /* Custom minus icon */
    transform: rotate(0deg); /* Keep straight */
}
.accordion-body {
    padding: 15px 25px;
    background-color: #fff;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .section-padding {
        padding: 60px 0;
    }
    .about-section .about-image-container {
        margin-top: 30px;
    }
    .values-section .value-card {
        margin-bottom: 20px;
    }
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 40px 0;
    }
    .about-section h2.section-title,
    .about-section h3.section-subtitle,
    .faq-section h2.section-title {
        text-align: center;
    }
    .about-section p {
        text-align: left; /* Adjust text alignment for smaller screens */
    }
    .values-section p.section-subtitle {
        margin-bottom: 30px;
    }
    .accordion-button {
        font-size: 1rem;
        padding: 15px 20px;
    }
    .accordion-body {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}


/* RTL: categories right, search left */
.top-nav .navbar-collapse { flex-direction: row !important; }
/* Override Bootstrap logical auto margins */
.top-nav .nav-links { margin-right: 0 !important; margin-left: auto !important; }
.top-nav .search-box { margin-right: auto !important; margin-left: 0 !important; }

/* RTL: Capitalize category nav text */
.top-nav .nav-links .nav-link { text-transform: capitalize; }







/*featue*/

 .pricing-section {
     background-color: #f8fafc;
     padding: 4rem 0;
 }

.pricing-table-wrapper {
    background: white;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.pricing-table {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pricing-row {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
}

.pricing-row:last-child {
    border-bottom: none;
}

.header-row {
    color: white;
}

.feature-row:nth-child(even) {
    background-color: #f9fafb;
}

.feature-cell {
    flex: 0 0 250px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    font-weight: 600;
    border-left: 1px solid #e5e7eb;
    background: white;
    color: #000000;
}

.features-header {
    background: white;
    color: #000000;
    font-size: 1.2rem;
    font-weight: bold;
    justify-content: center;
}

.package-cell {
    flex: 1;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e5e7eb;
    text-align: center;
    margin: 0 1px;  /* Add 1px margin on left and right */
}

.package-header {
    width: 100%;
}

.package-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* First package column specific styling */
.header-row .package-cell:nth-child(2) .package-title {
    color: #29AF83;
}

.price-info {
    margin-bottom: 1.5rem;
}

.original-price {
    display: block;
    color: #000000;
    text-decoration: line-through;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.current-price-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.current-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #65CF72; /* Updated to green */
}

.discount-badge {
    background-color: #65CF72; /* Updated to match the green */
    color: white;
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-weight: 600;
}

.btn-package {
    background: white;
    color: #667eea;
    border: none;
    border-radius: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}


.header-row .package-cell:nth-child(2) .btn-package {
    background: #29AF83;
    color: white;
}

.header-row .package-cell:nth-child(2) .btn-package:hover {
    background: #238a6b;
    color: white;
}

/* Second package column: name + button background */
.header-row .package-cell:nth-child(3) .package-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #E1B600;
}
.header-row .package-cell:nth-child(3) .btn-package {
    background: #E1B600;
    color: white;
}
.header-row .package-cell:nth-child(3) .btn-package:hover {
    background: #c49a00;
    color: white;
}

/* Third package column: name + button background */
.header-row .package-cell:nth-child(4) .package-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #A224D7;
}
.header-row .package-cell:nth-child(4) .btn-package {
    background: #A224D7;
    color: white;
}
.header-row .package-cell:nth-child(4) .btn-package:hover {
    background: #8a1db9;
    color: white;
}

/* Fourth package column: name + button background */
.header-row .package-cell:nth-child(5) .package-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1A75DC;
}
.header-row .package-cell:nth-child(5) .btn-package {
    background: #1A75DC;
    color: white;
}
.header-row .package-cell:nth-child(5) .btn-package:hover {
    background: #1560b5;
    color: white;
}

.btn-package:hover {
    background: #f3f4f6;
    color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.feature-name {
    color: #374151;
    font-weight: 500;
}

.feature-status {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-status.available svg {
    filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.3));
}

.feature-status.unavailable svg {
    filter: drop-shadow(0 2px 4px rgba(107, 114, 128, 0.3));
}

/* Responsive Design */
@media (max-width: 768px) {
    .pricing-table {
        overflow-x: auto;
    }

    .pricing-row {
        min-width: 800px;
    }

    .feature-cell {
        flex: 0 0 200px;
    }

    .package-title {
        font-size: 1.1rem;
    }

    .current-price {
        font-size: 1.3rem;
    }
}

/* Package Column Colors - Apply to entire columns */

/* Blue Package Column */
.header-row .package-cell:nth-child(2) {
    background: linear-gradient(135deg, #e0f2fe, #b3e5fc);
}
.feature-row .package-cell:nth-child(2) {
    background: linear-gradient(135deg, #e0f2fe, #b3e5fc);

}

/* Purple Package Column */
.header-row .package-cell:nth-child(3) {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);

}
.feature-row .package-cell:nth-child(3) {
    background: linear-gradient(135deg, #f3e8ff, #e9d5ff);

}

/* Orange Package Column */
.header-row .package-cell:nth-child(4) {
    background: linear-gradient(135deg, #fef3c7, #fde68a);

}
.feature-row .package-cell:nth-child(4) {
    background: linear-gradient(135deg, #fef3c7, #fde68a);

}

/* Green Package Column */
.header-row .package-cell:nth-child(5) {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);

}
.feature-row .package-cell:nth-child(5) {
    background: linear-gradient(135deg, #d1fae5, #a7f3d0);

}

/* Additional Package Columns (if more than 4) */
.header-row .package-cell:nth-child(6) {
    background: linear-gradient(135deg, #fee2e2, #fecaca);

}
.feature-row .package-cell:nth-child(6) {
    background: linear-gradient(135deg, #fee2e2, #fecaca);

}

.header-row .package-cell:nth-child(7) {
    background: linear-gradient(135deg, #cffafe, #a5f3fc);

}
.feature-row .package-cell:nth-child(7) {
    background: linear-gradient(135deg, #cffafe, #a5f3fc);

}

/* Override feature-row alternating colors for package columns */
.feature-row:nth-child(even) .package-cell:nth-child(2) {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}
.feature-row:nth-child(even) .package-cell:nth-child(3) {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
}
.feature-row:nth-child(even) .package-cell:nth-child(4) {
    background: linear-gradient(135deg, #fef3c7, #fed7aa);
}
.feature-row:nth-child(even) .package-cell:nth-child(5) {
    background: linear-gradient(135deg, #d1fae5, #bbf7d0);
}
.feature-row:nth-child(even) .package-cell:nth-child(6) {
    background: linear-gradient(135deg, #fee2e2, #fed7d7);
}
.feature-row:nth-child(even) .package-cell:nth-child(7) {
    background: linear-gradient(135deg, #cffafe, #b2f5ea);
}



/*.card-certificatio*/


.card-certification {
    background-color: #F7F8F9;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-certification:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.card-header-cer {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.title-text {
    flex-grow: 1;
}

.certification-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.subtitle {
    font-size: 0.875rem;
    color: #777;
}

.content-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1.5rem;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item-certificate {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #444;
}

.feature-item-certificate .icon {
    color: #28a745;
    margin: 0 0.75rem;
    font-size: 1.2rem;
}

/* RTL-specific styles */
body[dir="rtl"] {
    font-family: 'Inter', sans-serif; /* You might want to use an RTL-friendly font */
    direction: rtl;
    text-align: right;
}
body[dir="rtl"] .icon-circle {
    margin-left: 1rem;
    margin-right: 0;
}
body[dir="rtl"] .feature-item-certificate .icon {
    margin-left: 0.75rem;
    margin-right: 0;
}
body[dir="rtl"] .card-header-cer {
    flex-direction: row-reverse;
}

/* Colors for different cards */
.card-green .icon-circle { background-color: #27ae60; }
.card-green .icon-circle svg path { fill: #fff; }

.card-blue .icon-circle { background-color: #3498db; }
.card-blue .icon-circle svg path { fill: #fff; }

.card-red .icon-circle { background-color: #e74c3c; }
.card-red .icon-circle svg path { fill: #fff; }

.card-purple .icon-circle { background-color: #9b59b6; }
.card-purple .icon-circle svg path { fill: #fff; }

/* Icon SVG adjustments */
.icon-circle svg {
    width: 24px;
    height: 24px;
}

.img-certificate{
    margin: 11px;
    width: 4rem;

    padding: 15px;
    border-radius: 12px;
}



/*العضويات*/


.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.section-subtitle {
    text-align: center;
    font-size: 1rem;
    color: #777;
    margin-bottom: 3rem;
}

.partnership-card {
    background-color: #F7F8F9;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.partnership-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.card-heading {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-direction: column;
    text-align: center;
}

.icon-container {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 1.5rem;
    background-color: #e8f5e9;
    margin-bottom: 1rem;
}

/* Specific icon colors */
.icon-bank svg path { fill: #8BC34A; }
.icon-commerce svg path { fill: #8BC34A; }
.icon-document svg path { fill: #8BC34A; }

.title-group {
    flex-grow: 1;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.25rem;
}

.card-subtitle {
    font-size: 0.875rem;
    color: #777;
}

.card-description {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 1.5rem;
    text-align: center;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 1rem;
    color: #444;
}

.feature-icon-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #e8f5e9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 8px;
}

.feature-icon-circle svg path {
    fill: #4CAF50;
}

/* RTL-specific styles */
body[dir="rtl"] {
    font-family: 'Inter', sans-serif;
    direction: rtl;
    text-align: right;
}

body[dir="rtl"] .icon-container {
    margin-left: 0;
    margin-right: 0;
}

body[dir="rtl"] .feature-item {
    flex-direction: row-reverse;
    text-align: right;
}
body[dir="rtl"] .feature-icon-circle {
    margin-left: 0.75rem;
    margin-right: 0;
}
body[dir="rtl"] .card-heading {
    flex-direction: column;
    text-align: center;
}