/* CSS الخاص بصفحة jobs-en (بدون الهيدر والفوتر والأساس المشترك) */

.hero-section-wrapper {
            height: 70vh;
            min-height: 600px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--brand-header-dark);
            z-index: 1;
        }
        .hero-slides-images-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }
        .hero-slide-item-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            transform: scale(1.05);
           
        }
        .hero-slide-item-image.active {
            opacity: 1;
        }
        @keyframes zoomEffect {
            0% { transform: scale(1.02); }
            100% { transform: scale(1.08); }
        }
        .hero-overlay-shadow-shield {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, 
                rgba(var(--rq-rgb-dark), 0.8) 0%, 
                rgba(var(--rq-rgb-primary), 0.4) 40%, 
                rgba(var(--rq-rgb-dark), 0.75) 100%
            );
            z-index: -1;
        }
        .about-us-badge-container {
            position: absolute;
            top: 50%; /* تموضع مثالي في المنتصف الرأسي */
            left: 11%; /* محاذاة متناسقة لليمين */
            transform: translateY(-50%); /* لضمان التوسيط الرأسي الدقيق */
            z-index: 10;
            display: inline-block;
        }
        .about-us-badge-link {
            color: var(--brand-header-white);
            text-decoration: none;
            font-size: 2.2rem; /* حجم خط بارز وأنيق يناسب الواجهة المفتوحة */
            font-weight: 800;
            letter-spacing: 0.5px;
            cursor: pointer;
            transition: var(--transition-header-fast);
            display: block; 
        }
        .about-us-reveal-up {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1.4s cubic-bezier(0.165, 0.84, 0.44, 1), 
                        transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            will-change: transform, opacity;
        }
        .about-us-active {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        @keyframes about-us-bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        .hero-bottom-curve {
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 3;
        }
        .hero-bottom-curve svg {
            width: 100%;
            height: 100px;
        }
        @media (max-width: 768px) {
    .about-us-badge-container {
                top: 50%;
                right: 6%;
                transform: translateY(-50%);
            }

    .about-us-badge-link {
                font-size: 1.6rem; /* حجم أصغر متجاوب مع الجوال */
            }
}
      :root {
            --jobs-section-primary: var(--brand-header-secondary-1);
            --jobs-section-secondary: var(--brand-header-secondary-2);
            --jobs-section-teal: var(--brand-header-teal-green);
            --jobs-section-light-teal: var(--rq-tint-eef7f5, #eef7f5);
            --jobs-section-bg-gradient: linear-gradient(135deg, var(--rq-tint-f7faf9, #f7faf9) 0%, var(--rq-tint-eaf4f2, #eaf4f2) 100%);
            --jobs-section-text-dark: #1e292b;
            --jobs-section-text-muted: #5a6e6a;
            --jobs-section-white: #ffffff;
            --jobs-section-border-color: var(--rq-tint-d1e3e0, #d1e3e0);
            --jobs-section-shadow-sm: 0 4px 15px rgba(var(--rq-rgb-primary), 0.05);
            --jobs-section-shadow-md: 0 10px 30px rgba(var(--rq-rgb-primary), 0.08);
            --jobs-section-shadow-lg: 0 20px 40px rgba(var(--rq-rgb-primary), 0.12);
            --jobs-section-transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
        }
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Tajawal', sans-serif;
        }
        .jobs-section-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            background: var(--jobs-section-white);
            border-radius: 28px;
            box-shadow: var(--jobs-section-shadow-lg);
            overflow: hidden;
            border: 1px solid var(--jobs-section-border-color);
            position: relative;
        }
        .jobs-section-wrapper::before {
            content: '';
            position: absolute;
            top: -120px;
            left: -120px;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--rq-rgb-teal), 0.15) 0%, rgba(var(--rq-rgb-primary), 0) 70%);
            pointer-events: none;
        }
        .jobs-section-wrapper::after {
            content: '';
            position: absolute;
            bottom: -100px;
            right: -100px;
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(var(--rq-rgb-secondary), 0.12) 0%, rgba(var(--rq-rgb-primary), 0) 70%);
            pointer-events: none;
        }
        .jobs-section-header {
            background: linear-gradient(135deg, var(--jobs-section-primary) 0%, var(--jobs-section-secondary) 100%);
            color: var(--jobs-section-white);
            padding: 60px 40px 50px;
            text-align: center;
            position: relative;
            z-index: 1;
        }
        .jobs-section-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(8px);
            padding: 6px 18px;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--rq-tint-d1f2eb, #d1f2eb);
            margin-bottom: 18px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .jobs-section-title {
            font-size: 2.3rem;
            font-weight: 800;
            margin-bottom: 12px;
            letter-spacing: -0.5px;
            color: var(--jobs-section-white);
        }
        .jobs-section-subtitle {
            font-size: 1.1rem;
            max-width: 650px;
            margin: 0 auto;
            color: var(--rq-tint-e2f3f0, #e2f3f0);
            font-weight: 400;
            line-height: 1.7;
        }
        .jobs-section-body {
            padding: 50px 45px;
            position: relative;
            z-index: 1;
        }
        .jobs-section-features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 20px;
            margin-bottom: 45px;
        }
        .jobs-section-feature-card {
            background: var(--jobs-section-light-teal);
            padding: 22px 20px;
            border-radius: 16px;
            border: 1px solid rgba(var(--rq-rgb-teal), 0.2);
            display: flex;
            align-items: center;
            gap: 15px;
            transition: var(--jobs-section-transition);
        }
        .jobs-section-feature-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--jobs-section-shadow-sm);
            background: var(--rq-tint-e4f2ef, #e4f2ef);
        }
        .jobs-section-feature-icon {
            width: 48px;
            height: 48px;
            background: var(--jobs-section-secondary);
            color: var(--jobs-section-white);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            flex-shrink: 0;
        }
        .jobs-section-feature-text h4 {
            font-size: 1rem;
            font-weight: 700;
            color: var(--jobs-section-primary);
            margin-bottom: 2px;
        }
        .jobs-section-feature-text p {
            font-size: 0.85rem;
            color: var(--jobs-section-text-muted);
        }
        .jobs-section-form-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--jobs-section-primary);
            margin-bottom: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding-bottom: 12px;
            border-bottom: 2px solid var(--jobs-section-light-teal);
        }
        .jobs-section-form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        .jobs-section-full-width {
            grid-column: span 2;
        }
        .jobs-section-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            position: relative;
        }
        .jobs-section-label {
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--jobs-section-primary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .jobs-section-required {
            color: #e74c3c;
            font-weight: bold;
        }
        .jobs-section-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .jobs-section-input-icon {
            position: absolute;
            right: 16px;
            color: var(--jobs-section-teal);
            font-size: 1rem;
            pointer-events: none;
            transition: var(--jobs-section-transition);
        }
        .jobs-section-control {
            width: 100%;
            padding: 14px 45px 14px 16px;
            font-size: 0.98rem;
            color: var(--jobs-section-text-dark);
            background-color: var(--rq-tint-fafcfc, #fafcfc);
            border: 1.5px solid var(--jobs-section-border-color);
            border-radius: 12px;
            outline: none;
            transition: var(--jobs-section-transition);
        }
        select.jobs-section-control {
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2525806d' viewBox='0 0 16 16'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>");
            background-repeat: no-repeat;
            background-position: left 16px center;
            cursor: pointer;
        }
        textarea.jobs-section-control {
            padding: 14px 16px;
            resize: vertical;
            min-height: 110px;
        }
        .jobs-section-control:focus {
            border-color: var(--jobs-section-teal);
            background-color: var(--jobs-section-white);
            box-shadow: 0 0 0 4px rgba(var(--rq-rgb-teal), 0.15);
        }
        .jobs-section-control:focus + .jobs-section-input-icon {
            color: var(--jobs-section-primary);
        }
        .jobs-section-file-dropzone {
            border: 2px dashed var(--jobs-section-teal);
            background-color: var(--jobs-section-light-teal);
            border-radius: 16px;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            transition: var(--jobs-section-transition);
            position: relative;
        }
        .jobs-section-file-dropzone:hover {
            background-color: var(--rq-tint-e2f3f0, #e2f3f0);
            border-color: var(--jobs-section-secondary);
        }
        .jobs-section-file-input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        .jobs-section-file-icon {
            font-size: 2.2rem;
            color: var(--jobs-section-secondary);
            margin-bottom: 10px;
        }
        .jobs-section-file-title {
            font-weight: 700;
            color: var(--jobs-section-primary);
            margin-bottom: 4px;
        }
        .jobs-section-file-hint {
            font-size: 0.82rem;
            color: var(--jobs-section-text-muted);
        }
        .jobs-section-file-name {
            margin-top: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--jobs-section-secondary);
            display: none;
            background: var(--jobs-section-white);
            padding: 6px 14px;
            border-radius: 20px;
            box-shadow: 0 2px 6px rgba(0,0,0,0.05);
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
        .jobs-section-checkbox-group {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-top: 10px;
        }
        .jobs-section-checkbox {
            width: 20px;
            height: 20px;
            accent-color: var(--jobs-section-secondary);
            cursor: pointer;
            margin-top: 2px;
        }
        .jobs-section-checkbox-label {
            font-size: 0.9rem;
            color: var(--jobs-section-text-muted);
            cursor: pointer;
            user-select: none;
        }
        .jobs-section-checkbox-label a {
            color: var(--jobs-section-secondary);
            text-decoration: underline;
            font-weight: 600;
        }
        .jobs-section-error-msg {
            color: #d9534f;
            font-size: 0.82rem;
            margin-top: 4px;
            display: none;
            font-weight: 500;
        }
        .jobs-section-has-error .jobs-section-control,
        .jobs-section-has-error .jobs-section-file-dropzone {
            border-color: #d9534f !important;
            background-color: #fff8f8 !important;
        }
        .jobs-section-has-error .jobs-section-error-msg {
            display: block;
        }
        .jobs-section-submit-btn {
            width: 100%;
            background: linear-gradient(135deg, var(--jobs-section-primary) 0%, var(--jobs-section-secondary) 100%);
            color: var(--jobs-section-white);
            border: none;
            padding: 16px 28px;
            font-size: 1.1rem;
            font-weight: 700;
            border-radius: 14px;
            cursor: pointer;
            transition: var(--jobs-section-transition);
            box-shadow: 0 8px 20px rgba(var(--rq-rgb-primary), 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 15px;
        }
        .jobs-section-submit-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 25px rgba(var(--rq-rgb-primary), 0.35);
            background: linear-gradient(135deg, var(--jobs-section-secondary) 0%, var(--jobs-section-teal) 100%);
        }
        .jobs-section-submit-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
            transform: none !important;
        }
        .jobs-section-spinner {
            width: 20px;
            height: 20px;
            border: 3px solid rgba(255,255,255,0.3);
            border-radius: 50%;
            border-top-color: #fff;
            animation: jobs-section-spin 0.8s linear infinite;
            display: none;
        }
        @keyframes jobs-section-spin {
            to { transform: rotate(360deg); }
        }
        .jobs-section-reveal-up {
            opacity: 0;
            transform: translateY(60px);
            transition: opacity 1.4s cubic-bezier(0.165, 0.84, 0.44, 1),
                        transform 1.4s cubic-bezier(0.165, 0.84, 0.44, 1);
            will-change: transform, opacity;
        }
        .jobs-section-active {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        .jobs-section-delay-1 { transition-delay: 0.1s; }
        .jobs-section-delay-2 { transition-delay: 0.22s; }
        .jobs-section-delay-3 { transition-delay: 0.34s; }
        .jobs-section-delay-4 { transition-delay: 0.46s; }
        @keyframes jobs-section-bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-10px); }
            60% { transform: translateY(-5px); }
        }
        .jobs-section-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15, 45, 39, 0.65);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            padding: 20px;
        }
        .jobs-section-modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .jobs-section-modal-card {
            background: var(--jobs-section-white);
            border-radius: 24px;
            padding: 40px;
            max-width: 500px;
            width: 100%;
            text-align: center;
            box-shadow: var(--jobs-section-shadow-lg);
            transform: scale(0.85);
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .jobs-section-modal-overlay.active .jobs-section-modal-card {
            transform: scale(1);
        }
        .jobs-section-modal-icon {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2.2rem;
            margin: 0 auto 20px;
        }
        .jobs-section-modal-icon.success {
            background: var(--rq-tint-e8f8f5, #e8f8f5);
            color: var(--brand-header-secondary-2);
        }
        .jobs-section-modal-icon.error {
            background: #fdeedd;
            color: #d9534f;
        }
        .jobs-section-modal-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--jobs-section-primary);
            margin-bottom: 10px;
        }
        .jobs-section-modal-desc {
            color: var(--jobs-section-text-muted);
            font-size: 0.95rem;
            margin-bottom: 25px;
            line-height: 1.6;
        }
        .jobs-section-modal-btn {
            background: var(--jobs-section-secondary);
            color: var(--jobs-section-white);
            border: none;
            padding: 12px 30px;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: var(--jobs-section-transition);
        }
        .jobs-section-modal-btn:hover {
            background: var(--jobs-section-primary);
        }
        .jobs-section-gas-helper {
            margin-top: 30px;
            background: var(--rq-tint-eef7f5, #eef7f5);
            border: 1px dashed var(--jobs-section-teal);
            border-radius: 14px;
            padding: 15px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
        }
        .jobs-section-gas-info {
            font-size: 0.88rem;
            color: var(--jobs-section-primary);
            font-weight: 600;
        }
        .jobs-section-gas-btn {
            background: var(--jobs-section-primary);
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }
        @media (max-width: 768px) {
            .jobs-section-header {
                padding: 40px 20px 35px;
            }

            .jobs-section-title {
                font-size: 1.75rem;
            }

            .jobs-section-body {
                padding: 30px 20px;
            }

            .jobs-section-form-grid {
                grid-template-columns: 1fr;
            }

            .jobs-section-full-width {
                grid-column: span 1;
            }

            .jobs-section-gas-helper {
                flex-direction: column;
                text-align: center;
            }
        }