/* تنسيقات عامة */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "IBM Plex Sans Arabic", sans-serif;
}

body {
    direction: rtl;
    background-color: rgba(254, 254, 254, 1);
    color: #333;
    overflow-x: hidden;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

.main {
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 12%;
}

.section-container {
    background-color: #ffffff;
    border: 1px solid #00000012;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 30px;
}

.paddin-main {
    padding-right: 5%;
    padding-left: 5%;
}

.swiper-slide {
    position: unset !important;
    height: unset !important;
    display: flex !important;
    flex-direction: column !important;
}

.top-link {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #999999;
    margin-top: 20px;
    flex-wrap: wrap;
}

.nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.main-header {
    background-color: #fff;
    border-bottom: 1px solid #f0f0f0;
    position: sticky;
    top: 0;
    z-index: 1000;
    direction: rtl;
    /* لضمان الترتيب من اليمين لليسار */
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* روابط التنقل */
.nav-links {
    display: flex;
    list-style: none;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links a {
    text-decoration: none;
    color: #999999;
    font-weight: 400;
    font-size: 16px;
    transition: 0.3s;
}

.nav-links li {
    position: relative;
    padding: 0 5px;
    color: #999999;
    font-weight: 400;
    font-size: 16px;
}

.nav-links li:last-child a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-links li:last-child a svg {
    margin-top: 3px;
}

.nav-links li:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background-color: #21212133;
}

.nav-links > li > a.active {
    color: #fe6c1d;
    font-weight: 500;
    font-size: 20px;
    padding-bottom: 5px;
    border-bottom: 3px solid #fe6c1d;
}

.nav-links > li > a:hover {
    color: #fe6c1d;
    padding-bottom: 5px;
    border-bottom: 3px solid #fe6c1d;
}

/* أزرار الحساب */
.auth-group {
    display: flex;
    gap: 12px;
}

.btn-login {
    background: none;
    border: 1px solid #c4b1d7;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-loged {
    background: none;
    border: 1px solid #c4b1d7;
    padding: 8px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-register {
    background-color: #ff6b00;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
}

/* زر الموبايل (مخفي افتراضياً) */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: #333;
    border-radius: 2px;
}

.site-footer {
    background-color: #250545;
    color: #fff;
    padding-top: 120px;
    padding-bottom: 40px;
    position: relative;
    padding-right: 9%;
    padding-left: 9%;
}

/* صندوق النشرة البريدية العائم */
.newsletter-floating {
    position: absolute;
    top: -80px;
    /* يرفعه فوق الفوتر */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    background: #032867;
    /* التدرج الأزرق */
    border-radius: 25px;
    padding: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    z-index: 10;
}

.newsletter-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 30px;
}

.newsletter-text h3 {
    font-size: 24px;
    margin-bottom: 10px;
}

.newsletter-text p {
    font-size: 18px;
    color: #ede8f1;
    font-weight: 400;
}

.newsletter-form {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 5px;
    width: 450px;
}

.newsletter-form input {
    flex: 1;
    border: none;
    padding: 10px 15px;
    outline: none;
    font-family: "Cairo";
}

.newsletter-form button {
    background: #ff6b00;
    /* اللون البرتقالي المشرق */
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 10px;
    cursor: pointer;
    font-weight: bold;
}

/* شبكة الفوتر */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    text-align: right;
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #ffffff;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #ffffffb2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    transition: 0.3s;
}

.footer-col {
    position: relative;
}

.footer-col:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0%;
    right: -35%;
    /* نص المسافة بين الأعمدة */
    transform: translateX(50%);
    width: 1px;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.2);
}

.footer-col ul li a:hover {
    color: #ff6b00;
}

.footer-brand p {
    color: #ede8f1;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    margin: 20px 0;
    width: 70%;
}

.social-links {
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

.social-links a {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}

.social-links a:hover {
    background: #ff6b00;
    border-color: #ff6b00;
}

/*adds*/
.ads-banner {
    background-color: #fff;
    border-top: 1px solid #eee;
    position: relative;
}

/* السهم اللي فوق الصندوق */
.ads-toggle {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #eee;
    width: 30px;
    height: 25px;
    display: flex;
    justify-content: center;
    border-radius: 4px;
    font-size: 12px;
}

.ads-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 20px;
    gap: 20px;
    margin-bottom: 83px;
}

/* الجزء بتاع لوجو الشركة المعلنة */
.ad-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-left: 20px;
    border-left: 1px solid #eee;
}

.ad-link-btn {
    background-color: #ff6b00;
    color: white;
    font-size: 10px;
    padding: 5px 10px;
    border-radius: 4px;
    text-decoration: none;
}

/* توزيع مربعات الإعلانات */
.ad-boxes {
    display: flex;
    flex: 1;
    justify-content: space-around;
    gap: 10px;
}

.ad-box {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px;
    text-align: center;
    cursor: pointer;
}

.ad-box span {
    font-size: 11px;
    color: #555;
    margin-top: 5px;
}

/* أيقونات الجنب */
.ad-info-icons {
    color: #ccc;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* البانر الأسود */
.dark-promo-banner {
    background: #333;
    color: white;
    border-radius: 20px;
    padding: 40px;
    margin: 40px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-content {
    display: flex;
    align-items: center;
    gap: 30px;
    width: 100%;
    justify-content: space-between;
}

.promo-text h2 {
    margin: 0;
    font-size: 22px;
}

.promo-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.auth-group.mobile-only-auth {
    display: none;
}

/* هيدر البحث */
.page-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
}

.search-box {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 24px;
    border-radius: 12px;
    margin: 40px auto;
    gap: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.course-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* الزرار */
.search-btn {
    background: #ff6a1a;
    color: #fff;
    border: none;
    padding: 10px 35px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
}

/* الدروب داون */
.dropdown {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 15px;
    color: #41037e;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    border-right: 1px solid #ddd;
}

.dropdown .arrow {
    font-size: 14px;
}

/* الانبوت */
.search-box input {
    flex: 1;
    border: none;
    outline: none;
    padding: 12px;
    font-size: 14px;
    color: #333;
    border-left: 1px solid #ddd;
}

.search-box input::placeholder {
    color: #aaa;
}

.menu {
    display: none;
    position: absolute;
    background: #fff;
    list-style: none;
    padding: 10px 15px;
    margin: 0;
    top: 50px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.menu.show {
    display: block;
    z-index: 10000;
}

.badge-icon {
    height: 84px;
    width: 84px;
    background-color: #dad8fd4d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-title-branding {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-box input {
    flex: 1;
    border: none;
    padding: 10px;
    outline: none;
}

.search-submit {
    background: #ff6b00;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 10px;
    cursor: pointer;
}

.bgbigdark-promo-banner {
    background: white;
    border: 1px solid #0000001a;
    padding: 6px;
    border-radius: 10px;

    box-shadow:
        0px 2.71px 4.4px rgba(192, 192, 192, 0.0271),
        0px 6.86px 11.12px rgba(192, 192, 192, 0.0381),
        0px 14px 22.68px rgba(192, 192, 192, 0.0476),
        0px 28.84px 46.72px rgba(192, 192, 192, 0.0599),
        0px 79px 128px rgba(192, 192, 192, 0.09);

    width: 100%;
}

.bigdark-promo-banner {
    background: linear-gradient(90deg, #2f3640 0%, #3d4451 100%);
    color: white;
    border-radius: 30px;
    padding: 50px 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bigpromo-content {
    display: flex;
    align-items: end;
    gap: 30px;
    width: 100%;
    justify-content: space-between;
}

.bigpromo-text h2 {
    margin-bottom: 80px;
    font-size: 26px;
    font-weight: 700px;
    color: white;
}

.bigpromo-text p {
    font-size: 16px;
    font-weight: 400px;
    color: white;
}

.bigpromo-arrow {
    background: #fff;
    border: none;
    color: #2f3640;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
}

.bigpromo-arrow i {
    font-size: 24px;
    font-weight: 500px;
}

.img-header {
    width: 199px;
    height: auto;
}

/* ريسبونسف الموبايل */
@media (max-width: 768px) {
    .ads-container {
        flex-direction: column;
        text-align: center;
    }

    .ad-boxes {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ad-brand {
        border-left: none;
        border-bottom: 1px solid #eee;
        padding-bottom: 15px;
        width: 100%;
    }
}

/* الموبايل */
@media (max-width: 992px) {
    .newsletter-floating {
        position: relative;
        top: 0;
        width: 100%;
        transform: none;
        left: 0;
        margin-bottom: 40px;
    }

    .newsletter-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .newsletter-form {
        width: 100%;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding-top: 250px;
        /* زيادة المساحة لأن الصندوق العائم هياخد مساحة طولية أكبر */
    }

    .newsletter-content {
        flex-direction: column;
        /* العناصر تحت بعضها في الموبايل */
        text-align: center;
        gap: 20px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        /* عمود واحد فقط */
        text-align: center;
        gap: 30px;
    }

    .footer-brand {
        order: -1;
        /* جعل اللوجو والوصف يظهروا في الأول فوق الروابط */
        align-items: center;
    }

    .social-links {
        justify-content: center;
        /* توسيط أيقونات السوشيال ميديا */
    }

    .newsletter-text h3 {
        font-size: 18px;
    }

    .newsletter-form {
        flex-direction: column;
        /* المدخل والزرار تحت بعض */
        background: transparent;
        gap: 10px;
    }

    .newsletter-form input {
        border-radius: 10px;
        width: 100%;
    }

    .newsletter-form button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* --- تعديلات للشاشات الصغيرة (أقل من 768px) --- */
@media (max-width: 768px) {
    /* جعل الهيدر يوزع العناصر بشكل متساوي في الموبايل */
    .header-wrapper {
        padding: 10px 15px;
    }

    /* تحويل القائمة لـ Overlay (تظهر عند الضغط) */
    .nav-menu {
        position: fixed;
        top: 70px;
        /* حسب ارتفاع الهيدر عندك */
        right: -100%;
        /* مخفية خارج الشاشة جهة اليمين */
        width: 100%;
        height: calc(100vh - 70px);
        background-color: #fff;
        transition: 0.4s ease-in-out;
        z-index: 999;
    }

    /* إظهار المنيو عند إضافة كلاس active بالـ JS */
    .nav-menu.active {
        right: 0;
    }

    .nav-links {
        flex-direction: column;
        /* ترتيب العناصر عمودياً */
        align-items: center;
        padding-top: 20px;
        gap: 10px;
    }

    /* إخفاء أزرار الحساب في الموبايل أو وضعها داخل المنيو */

    /* إظهار زر الموبايل (الهامبرغر) */
    .mobile-menu-btn {
        display: flex;
    }

    /* تعديل الفوتر للموبايل */
    .site-footer {
        padding-right: 5%;
        padding-left: 5%;
        padding-top: 60px;
        text-align: center;
    }

    /* 1. إخفاء مجموعة الأزرار من مكانها الأصلي في الهيدر */
    .header-wrapper > .auth-group {
        display: none;
    }

    /* 2. تعديل قائمة التنقل لتستوعب الأزرار */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 40px;
        /* مسافة بين الروابط والأزرار */
        padding-top: 0;

        /* التموضع */
        position: fixed;
        top: 95px;
        /* تأكدي أنها نفس ارتفاع الهيدر */
        right: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background-color: #fff;
        transition: 0.4s ease;
        z-index: 999;
    }

    .nav-menu.active {
        right: 0;
    }

    /* 3. إظهار الأزرار داخل المنيو وتنسيقها عمودياً */
    .nav-menu .auth-group {
        display: flex;
        /* flex-direction: column; */
        width: 80%;
        /* عشان الأزرار تبان عريضة وشكلها حلو */
        gap: 15px;
    }

    .nav-menu .auth-group button {
        width: 100%;
        /* الزرار يأخذ عرض الحاوية */
        padding: 12px;
        /* تكبير الحجم للموبايل */
    }

    .logo {
        width: 200px;
        height: 66px;
    }

    .main-header.paddin-main {
        padding-right: 0px;
        padding-left: 0px;
    }

    .footer-logo svg {
        width: 290px;
        height: 100px;
    }

    .footer-brand p {
        width: 100%;
    }

    .bigpromo-content {
        display: flex;
        flex-direction: column;
    }
}

.jobfooter-tabs-floating {
    position: absolute;
    top: -200px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.arrow-toggle {
    width: 100px;
    height: 25px;
    background: #fff;
    border: 1px solid rgba(230, 230, 230, 1);
    border-bottom: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#arrow-icon {
    transition: transform 0.3s ease;
}

.jobfooter-tabs-container {
    background: #ffffff;
    padding: 5px;
    border: 1px solid rgba(230, 230, 230, 1);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    transition:
        max-height 0.35s ease,
        padding 0.3s ease;
    width: 650px;
}
.jobfooter-tabs-container img {
    width: 650px;
}
.jobfooter-active {
    background: #fff;
    border: 1.5px solid #eee;
    border-radius: 12px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 110px;
}

.jobfooter-brand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #2d2d2d;
}

.jobfooter-active button {
    background: #ff6b00;
    border: none;
    color: #fff;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.jobfooter-tab {
    background: #f5f5f5;
    border-radius: 12px;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 90px;
    cursor: pointer;
    transition: background 0.2s;
}

.jobfooter-tab:hover {
    background: #ebebeb;
}

.tab-label {
    font-size: 12px;
    color: #444;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
}

.top-link .active {
    color: #0059ff;
}

/* .site-footer {
    padding-top: 200px;
    position: relative;
} */
.bgwhite-banner {
    padding: 24px;
    background-color: white;
}

.some-padding {
    margin: 30px 0;
}

.paginationContainer {
    padding: 30px 0;
    display: flex;
    justify-content: center;
}

.paginationCustom {
    display: flex;
    align-items: center;
    gap: 2px;
}

.paginationCustom-item {
    /* width: 30px;
    height: 31px; */
    padding: 4px 10px;
    border: 2px solid #03286730;
    background: transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #15478f;
    cursor: pointer;
    text-align: center;
    transition: 0.3s;
}

.paginationCustom-item:hover {
    border-color: #03286730;
    color: #7f56d9;
}

.paginationCustom-item.active {
    background: #31025f;
    color: #fff;
    border-color: #03286730;
}

.paginationCustom-dots {
    font-size: 20px;
    color: #15478f;
    letter-spacing: 3px;
}

.bgwhitee {
    background: white;
    border: 1px solid #0000001a;
    padding: 20px;

    border-radius: 10px;
}

@media (max-width: 768px) {
    .jobfooter-tabs-floating {
        position: absolute;
        top: -68px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .arrow-toggle {
        width: 80px;
        height: 15px;
        background: #fff;
        border: 1px solid rgba(230, 230, 230, 1);
        border-bottom: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .bgwhite-banner {
        padding: 10px;
        background-color: white;
    }

    .jobfooter-tabs-container {
        background: #ffffff;
        padding: 5px;
        border: 1px solid rgba(230, 230, 230, 1);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        overflow: hidden;
        transition:
            max-height 0.35s ease,
            padding 0.3s ease;
        width: 320px;
        height: auto;
    }

    .jobfooter-tabs-container img {
        width: 320px;
    }
}

.cards-padding {
    padding: 30px 0;
}
.bgwhite-banner {
    padding: 5px;
    background-color: white;
}

.main-categories-footer .circles-grid h4 {
    color: #0f5bc3;
    font-size: 20px;
    font-weight: 600;
}

/* =========================
   SIDEBAR ICON COLORS
========================= */
.sidebar-menu a img {
    width: 24px;
    height: 24px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%)
        hue-rotate(0deg) brightness(95%) contrast(90%);
    transition: 0.3s;
}

.sidebar-menu a.active img,
.sidebar-menu a:hover img {
    filter: brightness(0) saturate(100%) invert(28%) sepia(85%) saturate(2500%)
        hue-rotate(210deg) brightness(95%) contrast(90%);
}

.sidebar-menu a.logout img {
    filter: brightness(0) saturate(100%) invert(25%) sepia(85%) saturate(3500%)
        hue-rotate(330deg) brightness(90%) contrast(90%);
}

.main-categories-footer .circles-grid span {
    color: #7c8493;
    font-size: 18px;
    font-weight: 400;
}

.top-link div:last-child {
    color: #0f5bc3;
}

.stat-card {
    text-align: center;
    border-left: 1px solid #eee;
}

.stat-card:last-child {
    border-left: none;
}

.stat-card img {
    width: 40px;
}

.stat-card h3 {
    font-size: 24px;
    font-weight: 500;
    color: #0f5bc3;
}

.stat-card p {
    color: #7c8493;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 15px;
}

.blog-card {
    /* flex:0 0 calc(100% / 7 - 12px); */
    min-width: 145px;
    background: #fefefe;
    border: 1px solid #f5f5f5f5;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease;
}

.blog-icon {
    width: 80px;
    height: 80px;
    display: flex;

    margin: 0 auto 20px;
    transition: 0.3s;
    flex-shrink: 0;

    border: 12px solid #dad8fd1c;

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-icon img {
    object-fit: contain;
}

.blog-title {
    font-size: 18px;
    font-weight: 500;
    color: #0f5bc3;
    line-height: 1.5;
    transition: 0.3s;
}

.blog-count {
    font-size: 16px;
    color: #7c8493;
    transition: 0.3s;
}

.circle {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.circle.orange {
    background: #fe721e1a;
    color: #ff6b00;
}

.course-content h1 {
    font-size: clamp(20px, 1.6vw, 24px);
    font-weight: 500;
    color: #000000;
}

.course-content p {
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 500;
    color: #00000070;
}

.stat-card:last-child {
    border-left: none;
}

@media (max-width: 768px) {
    .stat-card {
        border-left: 0;
    }

    .stat-card:nth-child(odd) {
        border-left: 1px solid #eee;
    }

    .stat-card:last-child {
        border-bottom: none;
    }
}

.podcast-categories {
    padding: 40px 0;

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

.podcast-category-card {
    background: rgba(254, 254, 254, 1);
    border: 1px solid rgba(245, 245, 245, 0.9608);
    padding: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
    transition: 0.3s;
    cursor: pointer;
    gap: 20px;
}

.podcast-category-card:hover {
    transform: translateY(-4px);
}

.podcast-category-content {
    text-align: right;
}

.podcast-category-title {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 600;
    color: rgba(15, 91, 195, 1);
}

.podcast-category-desc {
    font-size: 13px;
    line-height: 160%;
    color: rgba(124, 132, 147, 1);
    margin: 6px 0 0 0;
}

.podcast-category-count {
    font-size: 12px;
    color: rgba(124, 132, 147, 1);
}

.podcast-category-icon-wrapper {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border: 5px solid rgba(218, 216, 253, 0.11);

    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.podcast-category-icon {
    width: 40px;
    height: 40px;
    background: #1f4c8f;
    color: #fff;
    font-weight: bold;
    border-radius: 6px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-section .page-top-bar {
    margin: 30px 0 0 0;
}

@media (max-width: 768px) {
    .podcast-categories {
        padding: 40px 0;

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

    .podcast-category-card {
        background: rgba(254, 254, 254, 1);
        border: 1px solid rgba(245, 245, 245, 0.9608);
        padding: 20px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        /* justify-content: space-between; */
        transition: 0.3s;
        cursor: pointer;
        gap: 20px;
        flex-direction: column;
    }

    .podcast-category-card h3,
    .podcast-category-card p,
    .podcast-category-card .podcast-category-count {
        text-align: center;
        width: 100%;
    }
}

.jobheader-container {
    background: #fefefe;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #f5f5f5f5;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.jobheader-container .search-box {
    margin: 0;
    width: 100%;
}

/* dropdown */
.job-dropdown {
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.job-menu {
    position: absolute;
    top: 35px;
    right: 0;
    background: #fff;
    width: 130px;
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 5px 0;

    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: 0.3s;
}

.job-menu li {
    padding: 8px 10px;
    cursor: pointer;
}

.job-menu li:hover {
    background: #f3f4f6;
}

.job-dropdown.active .job-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.job-filter {
    position: relative;
    background: #fff;
    padding: 10px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 7px 6px 18.6px 0px rgba(0, 0, 0, 0.06);
    margin-top: 10px;
}

.job-filter-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* القائمة */
.job-filter-menu {
    position: absolute;
    top: 48px;
    right: 0;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    list-style: none;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: 0.3s;
    z-index: 5;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

.job-filter-menu li {
    padding: 8px;
}

.job-filter-menu li:hover {
    background: #f3f4f6;
    border-radius: 8px;
}

/* لما تفتح */
.job-filter.active .job-filter-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    border-radius: 8px;
}

/* filters */
.job-filters {
    display: flex;
    align-items: center;
    gap: 20px;
}

.job-filter {
    flex: 1;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #00000012;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.job-filter span {
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

.navbar-more-dropdown {
    position: relative;
}

.navbar-more-toggle {
    display: flex;
    align-items: center;
    gap: 20px;

    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 400;
    color: #fe6c1d;
}

.navbar-more-menu {
    position: absolute;
    top: 30px;
    right: 0;

    width: 145px;
    background: #fff;

    padding: 10px;

    border: 1px solid #0000000d;

    opacity: 0;
    visibility: hidden;

    transform: translateY(10px);

    transition: 0.3s ease;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.navbar-more-menu.navbar-more-open {
    opacity: 1;
    visibility: visible;
}

.navbar-more-toggle svg {
    transition: 0.3s;
}

.navbar-more-toggle.navbar-more-active-toggle svg {
    transform: rotate(180deg);
}

.navbar-more-menu a {
    display: block;
    padding: 5px;
    color: #999999;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    border-bottom: none !important;
    transition: 0.3s;
    white-space: nowrap;
}

/* hover */
.navbar-more-menu a:hover {
    color: #fe6c1d;
    border-bottom: none !important;
}

.navbar-more-menu a.navbar-more-active {
    color: #fe6c1d;
    border-bottom: none !important;
}
.search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.search-fields {
    display: flex;
    align-items: center;
    flex: 1;
}

@media (max-width: 768px) {
    .search-box {
        flex-direction: column;
        align-items: stretch;
    }

    .search-fields {
        width: 100%;
    }

    .search-btn {
        width: 100%;
    }

    .search-fields input {
        width: 100%;
        border: none;
        padding: 10px;
        outline: none;
    }

    .search-fields input {
        flex: 1;
        min-width: 0;
    }

    .footer-col ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-col ul li {
        width: 30.33%;
        text-align: start;
    }

    .footer-col h4 {
        text-align: start;
    }
    .search-fields input {
        width: 100%;
        border: none;
        padding: 10px;
        outline: none;
    }
    .search-fields input {
        flex: 1;
        min-width: 0;
    }
    .job-filters {
        gap: 6px;
        flex-direction: column;
        width: 100% !important;
    }

    .job-filter {
        width: 100%;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
        border-right: none;
        padding-bottom: 15px;
        gap: 20px;
    }
    .img-header {
        width: 150px;
    }
    .course-content p {
        font-size: 15px !important;
    }
}

.flex-sec {
    display: flex;
    gap: 20px;
}
.circle img {
    width: 45px !important;
    height: 45px !important;
}
@media (max-width: 768px) {
    .nav-links li::after {
        display: none;
    }

    .nav-links li {
        border-bottom: 1px solid #21212133;
    }
    .nav-links li {
        padding: 8px 0;
    }
    .page-top-bar {
        flex-direction: column-reverse;
        gap: 30px;
    }
    .blog-count {
        font-size: 14px;
    }
}
.job-filter-menu::-webkit-scrollbar {
    width: 6px;
}

.job-filter-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.job-filter-menu::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 10px;
}

.job-filter-menu::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* Google Adsense Mobile Overflow Fix */
.adsbygoogle {
    max-width: 100% !important;
    overflow: hidden !important;
}

/* SweetAlert2 Premium Custom Styling */
.swal2-popup {
    border-radius: 12px !important;
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
    padding: 2em 1.5em !important;
}

.swal2-title {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
    font-weight: 600 !important;
    color: #250545 !important;
}

.swal2-html-container {
    font-family: "IBM Plex Sans Arabic", sans-serif !important;
    color: #666 !important;
    font-size: 15px !important;
    margin-top: 10px !important;
}

/* Styled confirm button */
.swal2-confirm.btn.btn-primary {
    background-color: #ff6b00 !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(255, 107, 0, 0.2) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin: 5px !important;
    outline: none !important;
}

.swal2-confirm.btn.btn-primary:hover {
    background-color: #e05e00 !important;
    box-shadow: 0 6px 15px rgba(255, 107, 0, 0.3) !important;
}

/* Styled cancel button if any exists */
.swal2-cancel {
    border-radius: 8px !important;
    padding: 10px 30px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin: 5px !important;
}

/* ==========================================================================
   CRAWLED RICH-TEXT CONTENT RESPONSIVE AND CLEANUP OVERRIDES
   ========================================================================== */
.jobdetailslist-description,
.item_content {
    font-size: clamp(16px, 1.2vw, 20px) !important;
    line-height: 1.6 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    color: #333333 !important;
}

/* Ensure all links inside content are readable and don't break design */
.jobdetailslist-description a,
.item_content a {
    color: #0f5bc3 !important;
    text-decoration: underline !important;
    word-break: break-all !important;
}

/* Tables responsive design */
.jobdetailslist-description table,
.item_content table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 15px 0 !important;
    border-collapse: collapse !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.jobdetailslist-description th,
.jobdetailslist-description td,
.item_content th,
.item_content td {
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    text-align: right !important;
    font-size: 0.9em !important;
    vertical-align: middle !important;
    white-space: normal !important;
}

.jobdetailslist-description th,
.item_content th {
    background-color: #f7fafc !important;
    font-weight: bold !important;
}

/* Images responsive design */
.jobdetailslist-description img,
.item_content img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 15px auto !important;
}

/* Lists styling */
.jobdetailslist-description ul,
.item_content ul,
.jobdetailslist-description ol,
.item_content ol {
    margin: 15px 0 !important;
    padding-inline-start: 24px !important;
}

.jobdetailslist-description li,
.item_content li {
    margin-bottom: 8px !important;
    font-size: inherit !important;
}

/* Crawled metadata card cleanup and styling (Desktop and Mobile) */
.jobdetailslist-description .card,
.item_content .card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    padding: 24px !important;
    margin: 20px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Neutralize bootstrap grid inside the card */
.jobdetailslist-description .card .row,
.item_content .card .row {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.jobdetailslist-description .card [class*="col-"],
.item_content .card [class*="col-"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Metadata Title */
.jobdetailslist-description .card h3,
.item_content .card h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f5bc3 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    padding-bottom: 10px !important;
    font-family: inherit !important;
}

/* Rows container */
.jobdetailslist-description .meta-data,
.item_content .meta-data {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Individual Metadata Row */
.jobdetailslist-description .meta,
.item_content .meta {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    border-bottom: 1px dashed #e2e8f0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.jobdetailslist-description .meta:last-child,
.item_content .meta:last-child {
    border-bottom: none !important;
}

/* Label (.text-meta) */
.jobdetailslist-description .text-meta,
.item_content .text-meta {
    font-size: 15px !important;
    color: #718096 !important;
    font-weight: 500 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Value (.text-dark) */
.jobdetailslist-description .text-dark,
.item_content .text-dark {
    font-size: 15px !important;
    color: #2d3748 !important;
    font-weight: 600 !important;
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    text-align: right !important;
}

/* Mobile-only responsive stacking rules */
@media (max-width: 768px) {
    /* Make all elements respect the mobile viewport boundary */
    .jobdetailslist-description *,
    .item_content * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .jobdetailslist-description .card,
    .item_content .card {
        padding: 16px !important;
    }

    .jobdetailslist-description .meta,
    .item_content .meta {
        padding: 10px 0 !important;
    }

    /* Force block wrappers and containers to fit the screen */
    .jobdetailslist-description div,
    .jobdetailslist-description section,
    .jobdetailslist-description p,
    .jobdetailslist-description h1,
    .jobdetailslist-description h2,
    .jobdetailslist-description h3,
    .jobdetailslist-description h4,
    .jobdetailslist-description h5,
    .jobdetailslist-description h6,
    .item_content div,
    .item_content section,
    .item_content p,
    .item_content h1,
    .item_content h2,
    .item_content h3,
    .item_content h4,
    .item_content h5,
    .item_content h6 {
        width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}