h1 {
    text-align: center;
    font-size: 25px;
}

h2 {
    text-align: center;
    font-size: 25px;
    
}

.grid-container {
    display: grid;
    place-items: center;
    height: 50vh;
}

.centered-img4 {
max-width: 50%;
height: auto;
}

.store-buttons-container {
    display: grid;
    grid-template-columns: repeat(
        auto-fit, minmax(150px,200px));
        gap: 16px;
        justify-content: center;
        align-items: center;
        padding: 20px;
}

.store-btn img {
    width: 100%;
    height: auto;
    transition: transform 0.2s ease;
}

.store-btn img:hover {
    transform: scale(1.03);
}

.main-header {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    padding: 15px 30px;
    background-color: null;
    box-shadow: 0 2px 5px rgba(0, 0, 0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.nav-tabs {
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    gap: 24px;
}

.nav-link {
    text-decoration: none;
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 500;
}

.nav-link:hover {
    color: black;
    border-bottom: 2px solid black;
    padding-bottom: 4px;
}

html {
    scroll-behavior: smooth;
}

.header-section {
    justify-items: center;
    animation: fadeInDown-5fe196f6 0.6 ease-out;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 8px 25px #3250a333;
    margin-bottom: 1.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    box-sizing: border-box;
    font-family: Tajawal,sans-serif;
    margin: 0;
}

div {
    display: block;
    unicode-bidi: isolate;
}

.route-content-wrapper, .route-content-wrapper>div {
    opacity: 1 !important;
    visibility: visible !important;
}

body {
    direction: rtl;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    transition: .3s ease;
}

body {
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-family: var(--bs-body-font-family);
    font-size: var(--bs-body-font-size);
    font-weight: var(--bs-body-font-weight);
    line-height: var(--bs-body-line-height);
    margin: 0;
    text-align: var(--bs-body-text-align);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: Tajawal,Open Sans,sans-serif;
}

body {
    color: #444;
    font-family: Tajawal,sans-serif;
}

style attribute {
    --nav-height: 105px
}


:root {
    --swiper-navigation-size: 44px
}

:root {
    --swiper-theme-color: #007aff;
}

:root {
    --bs-carousel-indicator-active-bg: #fff;
    --bs-carousel-caption-color: #fff;
    --bs-carousel-control-icon-filter: ;
}

:root {
        --bs-btn-close-filter: ;
}

:root {
        --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
}

:root {
        --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    --bs-primary-rgb: 13, 110, 253;
    --bs-secondary-rgb: 108, 117, 125;
    --bs-success-rgb: 25, 135, 84;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning-rgb: 255, 193, 7;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark-rgb: 33, 37, 41;
    --bs-primary-text-emphasis: #052c65;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #0a3622;
    --bs-info-text-emphasis: #055160;
    --bs-warning-text-emphasis: #664d03;
    --bs-danger-text-emphasis: #58151c;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-info-bg-subtle: #cff4fc;
    --bs-warning-bg-subtle: #fff3cd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-light-bg-subtle: #fcfcfd;
    --bs-dark-bg-subtle: #ced4da;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #a3cfbb;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --bs-dark-border-subtle: #adb5bd;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;
    --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, hsla(0, 0%, 100%, .15), hsla(0, 0%, 100%, 0));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #212529;
    --bs-body-color-rgb: 33, 37, 41;
    --bs-body-bg: #fff;
    --bs-body-bg-rgb: 255, 255, 255;
    --bs-emphasis-color: #000;
    --bs-emphasis-color-rgb: 0, 0, 0;
    --bs-secondary-color: rgba(33, 37, 41, .75);
    --bs-secondary-color-rgb: 33, 37, 41;
    --bs-secondary-bg: #e9ecef;
    --bs-secondary-bg-rgb: 233, 236, 239;
    --bs-tertiary-color: rgba(33, 37, 41, .5);
    --bs-tertiary-color-rgb: 33, 37, 41;
    --bs-tertiary-bg: #f8f9fa;
    --bs-tertiary-bg-rgb: 248, 249, 250;
    --bs-heading-color: inherit;
    --bs-link-color: #0d6efd;
    --bs-link-color-rgb: 13, 110, 253;
    --bs-link-decoration: underline;
    --bs-link-hover-color: #0a58ca;
    --bs-link-hover-color-rgb: 10, 88, 202;
    --bs-code-color: #d63384;
    --bs-highlight-color: #212529;
    --bs-highlight-bg: #fff3cd;
    --bs-border-width: 1px;
    --bs-border-style: solid;
    --bs-border-color: #dee2e6;
    --bs-border-color-translucent: rgba(0, 0, 0, .175);
    --bs-border-radius: .375rem;
    --bs-border-radius-sm: .25rem;
    --bs-border-radius-lg: .5rem;
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-xxl: 2rem;
    --bs-border-radius-2xl: var(--bs-border-radius-xxl);
    --bs-border-radius-pill: 50rem;
    --bs-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
    --bs-box-shadow-sm: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, .175);
    --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, .075);
    --bs-focus-ring-width: .25rem;
    --bs-focus-ring-opacity: .25;
    --bs-focus-ring-color: rgba(13, 110, 253, .25);
    --bs-form-valid-color: #198754;
    --bs-form-valid-border-color: #198754;
    --bs-form-invalid-color: #dc3545;
    --bs-form-invalid-border-color: #dc3545;
}

:root {
        --main-color: #3250a3;
    --secondary-color: #aaa;
    --color-white: #fff;
    --border-color: #f68c1f;
    --color-black: #0a0a0a;
    --color-text: #222;
    --section-padding: 10px;
}

:root {
    --main--color-art: #3250a3;
    --secondary-color-art: #f68c1f;
    --description--color-art: #aaa;
    --color-white-art: #fff;
}


@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url(
        https://fonts.gstatic.com/s/tajawal/v12/Iurf6YBj_oCad4k1l_6gHrRpiYlJ.woff2)
    format('woff2');
    unicode-range: U +0600 -06FF, U +0750 -077F,
     U +0870 -088E, U +0890 -0891, U +0897 -08E1,
      U +08E3 -08FF, U +200C -200E, U +2010 -2011,
       U +204F, U +2E41, U + FB50-FDFF,
        U + FE70-FE74, U + FE76-FEFC, U +102E0 -102FB,
         U +10E60 -10E7E, U +10EC2 -10EC4,
          U +10EFC -10EFF, U +1EE00 -1EE03, U +1EE05 -1EE1F,
           U +1EE21 -1EE22, U +1EE24, U +1EE27,
            U +1EE29 -1EE32, U +1EE34 -1EE37, U +1EE39,
             U +1EE3B, U +1EE42, U +1EE47, U +1EE49,
              U +1EE4B, U +1EE4D -1EE4F, U +1EE51 -1EE52,
               U +1EE54, U +1EE57, U +1EE59, U +1EE5B,
                U +1EE5D, U +1EE5F, U +1EE61 -1EE62,
                 U +1EE64, U +1EE67 -1EE6A, U +1EE6C -1EE72,
                  U +1EE74 -1EE77, U +1EE79 -1EE7C,
                   U +1EE7E, U +1EE80 -1EE89, U +1EE8B -1EE9B,
                    U +1EEA1 -1EEA3, U +1EEA5 -1EEA9, 
                    U +1EEAB -1EEBB, U +1EEF0 -1EEF1;
}




.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #25D366; 
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.status-dot.online {
    background-color: #25D366;
    box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.2);
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-phone-number {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    color: #25D366;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease;
    border: 1px solid #e2e8f0;
}

.jumla-card:hover .jumla-action-btn {
    background-color: #25D366; 
    color: #ffffff;
    border-color: #25D366;
}


.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-phone-number {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.phone-svg {
    transform: scaleX(-1); 
}

.phone-theme .status-dot.online {
    background-color: #007aff;
    box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.2);
}

.phone-theme .jumla-action-btn {
    color: #007aff;
}

.phone-theme:hover {
    border-color: #007aff;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.phone-theme:hover .jumla-action-btn {
    background-color: #007aff;
    color: #ffffff;
    border-color: #007aff;
}


.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 320px; 
    margin: 0 auto;  
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-handle-name {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* ==================== FACEBOOK BLUE DESIGN ==================== */
.facebook-theme .status-dot.online {
    background-color: #1877F2;
    box-shadow: 0 0 0 4px rgba(24, 119, 242, 0.2);
}

.facebook-theme .jumla-action-btn {
    color: #1877F2;
}

.facebook-theme:hover {
    border-color: #1877F2;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.facebook-theme:hover .jumla-action-btn {
    background-color: #1877F2;
    color: #ffffff;
    border-color: #1877F2;
}


.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 320px; 
    margin: 0 auto;  
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-handle-name {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.instagram-theme .status-dot.online {
    background-color: #E1306C;
    box-shadow: 0 0 0 4px rgba(225, 48, 108, 0.2);
}

.instagram-theme .jumla-action-btn {
    color: #E1306C;
}

.instagram-theme:hover {
    border-color: #D300C5;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.instagram-theme:hover .jumla-action-btn {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff;
    border-color: transparent;
}


.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 320px; 
    margin: 0 auto;  
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-handle-name {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.gmail-theme .status-dot.online {
    background-color: #EA4335;
    box-shadow: 0 0 0 4px rgba(234, 67, 53, 0.2);
}

.gmail-theme .jumla-action-btn {
    color: #EA4335;
}

.gmail-theme:hover {
    border-color: #EA4335;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.gmail-theme:hover .jumla-action-btn {
    background-color: #EA4335;
    color: #ffffff;
    border-color: #EA4335;
}



.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 320px; 
    margin: 0 auto;  
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.jumla-handle-name {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    direction: ltr; 
    text-align: right;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.tiktok-theme .status-dot.online {
    background-color: #fe2c55;
    box-shadow: 0 0 0 4px rgba(254, 44, 85, 0.2);
}

.tiktok-theme .jumla-action-btn {
    color: #010101;
    border-color: #e2e8f0;
}

.tiktok-theme:hover {
    background: #010101;
    color: #ffffff;
    transform: translateY(-5px);
    /* Neon dual glow box shadow using TikTok brand colors */
    box-shadow: -4px -4px 12px rgba(37, 244, 238, 0.3), 4px 4px 12px rgba(254, 44, 85, 0.3);
    border-color: #25f4ee;
}

.tiktok-theme:hover .jumla-dept-title {
    color: #ffffff;
}

.tiktok-theme:hover .jumla-handle-name {
    color: #a1a1aa;
}

.tiktok-theme:hover .dept-tag {
    background: #27272a;
    color: #e4e4e7;
}

.tiktok-theme:hover .jumla-action-btn {
    background-color: #fe2c55;
    color: #ffffff;
    border-color: #fe2c55;
}


.jumla-contact-container {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-main-title {
    font-size: 28px;
    color: #1a1a1a;
    margin-bottom: 8px;
    font-weight: 800;
}

.jumla-subtitle {
    font-size: 16px;
    color: #666666;
    margin-bottom: 40px;
}

.jumla-single-grid {
    display: grid;
    grid-template-columns: 1fr;
    max-width: 360px; 
    margin: 0 auto;  
}

.jumla-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    text-decoration: none; 
    color: inherit;
    display: flex;
    flex-direction: column;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.jumla-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dept-tag {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 99px;
    background: #f1f5f9;
    color: #475569;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.jumla-dept-title {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 12px 0;
}

.jumla-address-text {
    font-size: 14px;
    color: #334155;
    line-height: 1.6;
    margin: 0 0 14px 0;
}

.jumla-work-hours {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 24px 0;
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
}

.jumla-action-btn {
    margin-top: auto; 
    background-color: #f8fafc;
    text-align: center;
    padding: 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    
    display: grid;
    grid-auto-flow: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.address-theme .status-dot.online {
    background-color: #ef4444; /* Standard alert map indicator crimson tint */
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.2);
}

.address-theme .jumla-action-btn {
    color: #ef4444;
}

.address-theme:hover {
    border-color: #ef4444;
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.address-theme:hover .jumla-action-btn {
    background-color: #ef4444;
    color: #ffffff;
    border-color: #ef4444;
}



.main-header {
  display: grid;
  grid-template-columns: auto 1fr; 
  align-items: center;              
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  direction: ltr;                   
}
.nav-logo-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;      
  text-decoration: none;
}

.nav-left-icon {
  width: 100px;                      
  height: px;                     
  object-fit: contain;              
  display: block;
  
}

.nav-tabs {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;             
  gap: 24px;                        
  direction: rtl;                  
}


.jumla-corporate-about {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 24px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl; 
    text-align: right;
}

.jumla-about-hero {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 56px auto;
}

.jumla-badge-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #007aff; 
    background-color: rgba(0, 122, 255, 0.08);
    padding: 6px 14px;
    border-radius: 99px;
    margin-bottom: 16px;
}

.jumla-main-headline {
    font-size: 36px;
    font-weight: 800;
    color: #0f172a; 
    margin: 0 0 12px 0;
    letter-spacing: -0.5px;
}

.jumla-sub-headline {
    font-size: 16px;
    line-height: 1.6;
    color: #475569; 
    margin: 0;
}

.jumla-strategic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    margin-top: 20px;
}

.jumla-profile-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    padding: 36px 28px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.01);
}

.jumla-profile-card:hover {
    transform: translateY(-6px);
    border-color: #007aff;
    box-shadow: 0 20px 25px -5px rgba(0, 122, 255, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
}

.jumla-icon-wrapper {
    width: 48px;
    height: 48px;
    background-color: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    margin-bottom: 24px;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.jumla-profile-card:hover .jumla-icon-wrapper {
    background-color: #007aff;
    color: #ffffff;
    border-color: #007aff;
}

.jumla-card-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

.jumla-card-paragraph {
    font-size: 14.5px;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}