/* Arabic Font */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

body {
    direction: rtl;
    text-align: right;
    font-family: 'Tajawal', "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.nav-menu a,
#intro .btn-get-started,
.section-header h2 {
    font-family: 'Tajawal', "Montserrat", sans-serif !important;
}

/* Header & Nav */
#header #logo {
    float: right;
}

#header #logo h1 a {
    border-left: none;
    padding-left: 0;
    border-right: 4px solid #3CBCAE;
    border-right: 4px solid #3CBCAE;
    padding-right: 10px;
}

#header {
    padding: 30px 30px;
    /* Restoring original padding which might have been lost or needs reinforcement */
}

#header.header-scrolled {
    padding: 20px 30px;
}

#nav-menu-container {
    float: left;
}

.nav-menu>li {
    float: right;
    /* Reversing the float for RTL menu items */
    margin-left: 0;
    margin-right: 10px;
}

.nav-menu ul {
    left: auto;
    right: 0;
}

.nav-menu ul ul {
    left: auto;
    right: 100%;
}

.sf-arrows .sf-with-ul {
    padding-right: 0;
    padding-left: 30px;
}

.sf-arrows .sf-with-ul:after {
    right: auto;
    left: 15px;
    content: "\f104";
    /* Left arrow for RTL */
}

.sf-arrows ul .sf-with-ul:after {
    content: "\f104";
}

/* Mobile Nav */
#mobile-nav {
    left: auto;
    right: -260px;
}

body.mobile-nav-active #mobile-nav {
    left: auto;
    right: 0;
}

#mobile-nav-toggle {
    right: auto;
    left: 20px;
}

#mobile-nav ul li a {
    padding: 10px 15px 10px 22px;
}

#mobile-nav ul li li {
    padding-left: 0;
    padding-right: 30px;
}

#mobile-nav ul .menu-has-children i {
    right: auto;
    left: 0;
}

/* Section Header */
.section-header p {
    text-align: center;
    /* Keep centered if original was centered */
}

/* About Section */
.paraghead,
.paraghead-last {
    padding: 0 20px 0 0;
}

.paraghead-last {
    padding: 0 20px 20px 20px;
}

.list li {
    direction: rtl;
    text-align: right;
}

.list.ml-5 {
    margin-left: 0 !important;
    margin-right: 3rem !important;
    /* Approximation of ml-5 */
}

/* Floating Elements in Rows */
/* Bootstrap 4 handles flex rows well with RTL if direction is set on body? 
   Actually standard Bootstrap 4 doesn't support RTL natively out of the box without an RTL build.
   We have to override text alignments and potentially some margins.
*/

/* About Section RTL padding fixes */
#about .about-col .title,
#about .about-col .h6subtitle {
    padding-left: 20px;
    padding-right: 20px;
}

#about .about-col ul {
    padding-right: 40px;
    /* Increased from 20px to standard default */
    padding-left: 0;
}

.text-left {
    text-align: right !important;
}

.text-right {
    text-align: left !important;
}

.float-left {
    float: right !important;
}

.float-right {
    float: left !important;
}

.pull-left {
    float: right !important;
}

.pull-right {
    float: left !important;
}

/* Why Choose Us - Overrides if strictly positioned */
/* Intro Section */
#intro p {
    width: 80%;
    /* Centered text remains centered usually */
}

/* Contact Form */
.contact-info .contact-phone,
.contact-info .contact-email {
    text-align: right;
    border-right: none !important;
    border-left: none !important;
    /* Or center if they are centered */
}

/* Footer */
.footer-links ul li {
    padding-left: 0;
    padding-right: 0;
}

.footer-links ul li i {
    padding-right: 0;
    padding-left: 5px;
    content: "\f104";
    /* Arrow left */
    transform: rotate(180deg);
    /* Or just rotate the existing one */
    display: inline-block;
}

/* Back to top */
.back-to-top {
    bottom: 116px;
    right: auto;
    left: 50px;
}

@media (max-width: 991px) {
    html[dir="rtl"] .back-to-top {
        bottom: 96px !important;
        left: 30px !important;
        right: auto !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .back-to-top {
        bottom: 74px !important;
        left: 16px !important;
        right: auto !important;
    }
}

/* Blog/WhatsApp Banner */
.whatsapp-cta-banner {
    flex-direction: row;
}

.box {
    text-align: right;
}

/* Fix for icons if they needed flipping? usually unwanted for generic icons */

/* Services Section RTL */
#services .icon {
    float: right;
}

#services .title {
    margin-left: 0;
    margin-right: 60px;
}

#services .description,
#services .services-subtitle,
#services .list,
#services p {
    margin-left: 0;
    margin-right: 60px;
    text-align: right;
}

#services .list.ml-5 {
    margin-right: 60px !important;
    /* Force alignment with title */
    padding-right: 0;
    /* Align bullets if necessary */
}

#services .description {
    margin-left: 0;
    margin-right: 60px;
}

/* Current Frenzy Hawk RTL pass */
html[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] #header .container-fluid,
html[dir="rtl"] #header .container {
    direction: rtl;
}

html[dir="rtl"] #header #logo {
    float: right !important;
}

html[dir="rtl"] #nav-menu-container {
    float: left !important;
}

html[dir="rtl"] .nav-menu > li {
    float: right;
}

html[dir="rtl"] #mobile-nav-toggle {
    left: 20px;
    right: auto;
}

html[dir="rtl"] #intro-container .content {
    direction: rtl;
}

html[dir="rtl"] .hero-layout {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .hero-copy {
    margin-left: 0;
    margin-right: 0;
    text-align: right;
}

html[dir="rtl"] #intro h1,
html[dir="rtl"] #intro p {
    margin-left: 0;
    margin-right: 0;
    text-align: right;
}

html[dir="rtl"] #intro h1 {
    font-family: 'Tajawal', "Montserrat", sans-serif !important;
    font-weight: 800;
    line-height: 1.2;
    text-transform: none;
}

html[dir="rtl"] .intro-btns {
    align-items: flex-start;
    justify-content: flex-start;
}

html[dir="rtl"] .intro-btns .ml-lg-3 {
    margin-left: 0 !important;
    margin-right: 1rem !important;
}

html[dir="rtl"] .signal-node {
    border-left-color: rgba(255, 255, 255, 0.24);
    border-left-width: 1px;
    border-right-color: rgba(60, 188, 174, 0.9);
    border-right-width: 2px;
    direction: rtl;
    font-family: 'Tajawal', "Open Sans", sans-serif;
    line-height: 1.25;
    white-space: normal;
}

html[dir="rtl"] .signal-core {
    direction: rtl;
    font-family: 'Tajawal', "Open Sans", sans-serif;
}

html[dir="rtl"] .signal-node strong {
    font-size: 10.5px;
    line-height: 1.25;
}

html[dir="rtl"] .section-header,
html[dir="rtl"] .section-header h2,
html[dir="rtl"] #services-header,
html[dir="rtl"] #who-serve-header,
html[dir="rtl"] #resources-header,
html[dir="rtl"] #about-intro {
    text-align: center !important;
}

html[dir="rtl"] #services-grid .about-col .p-4,
html[dir="rtl"] #who-serve-grid .about-col .p-4,
html[dir="rtl"] #service-details,
html[dir="rtl"] #segment-content,
html[dir="rtl"] #about-mission {
    text-align: right !important;
}

html[dir="rtl"] #services-grid .cta-btn,
html[dir="rtl"] #who-serve-grid .cta-btn,
html[dir="rtl"] #segment-content .cta-btn,
html[dir="rtl"] #service-details .cta-btn {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .contact-info .contact-phone,
html[dir="rtl"] .contact-info .contact-email {
    text-align: center !important;
}

html[dir="rtl"] #contact .form-control,
html[dir="rtl"] #contact textarea,
html[dir="rtl"] #contact select,
html[dir="rtl"] .careers-page .form-control,
html[dir="rtl"] .careers-page textarea,
html[dir="rtl"] .careers-page select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .careers-hero-copy,
html[dir="rtl"] .careers-section-heading,
html[dir="rtl"] .job-info,
html[dir="rtl"] .job-description-panel,
html[dir="rtl"] .job-apply-panel {
    text-align: right;
}

html[dir="rtl"] .job-apply-panel .text-link-button {
    text-align: center;
}

html[dir="rtl"] .footer-links ul {
    padding-right: 0;
}

@media (min-width: 1200px) {
    html[dir="rtl"] .hero-layout {
        grid-template-columns: minmax(430px, 1.06fr) minmax(0, 0.94fr);
    }

    html[dir="rtl"] .hero-copy {
        grid-column: 2;
        max-width: 660px;
    }

    html[dir="rtl"] .hero-visual {
        grid-column: 1;
        grid-row: 1;
    }

    html[dir="rtl"] #intro h1 {
        font-size: 50px;
        max-width: 700px;
    }

    html[dir="rtl"] #intro p {
        max-width: 650px;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] #header .container,
    html[dir="rtl"] #header .container-fluid,
    html[dir="rtl"] #header.container-fluid {
        padding-left: 18px;
        padding-right: 20px;
    }

    html[dir="rtl"] #mobile-nav-toggle {
        left: 20px;
        right: auto;
    }

    html[dir="rtl"] #intro h1,
    html[dir="rtl"] #intro p,
    html[dir="rtl"] .hero-copy {
        text-align: right;
    }

    html[dir="rtl"] #intro h1 {
        font-size: 34px;
        line-height: 1.24;
    }

    html[dir="rtl"] .intro-btns .ml-lg-3 {
        margin-right: 0 !important;
    }
}

/* Mobile Specific Overrides to Match English Layout */
@media (max-width: 768px) {
    #header #logo {
        float: left !important;
        /* Keep logo on left like English */
    }

    #mobile-nav-toggle {
        right: 20px !important;
        /* Keep toggle on right like English */
        left: auto !important;
    }

    #mobile-nav {
        padding-top: 60px;
        /* Push content down to avoid overlap with Close button */
    }
}

/* Final RTL alignment overrides for the current design */
html[dir="rtl"] main > section:not(#intro) .section-header,
html[dir="rtl"] main > section:not(#intro) .section-header h2,
html[dir="rtl"] main > section:not(#intro) .section-header h3,
html[dir="rtl"] main > section:not(#intro) .section-header p,
html[dir="rtl"] #services-header,
html[dir="rtl"] #services-header .container,
html[dir="rtl"] #services-header h1,
html[dir="rtl"] #services-header .lead,
html[dir="rtl"] #who-serve-header,
html[dir="rtl"] #who-serve-header .container,
html[dir="rtl"] #who-serve-header h1,
html[dir="rtl"] #who-serve-header .lead,
html[dir="rtl"] #resources-header,
html[dir="rtl"] #resources-header .container,
html[dir="rtl"] #resources-header h1,
html[dir="rtl"] #resources-header .lead,
html[dir="rtl"] #about-intro,
html[dir="rtl"] #about-intro .container,
html[dir="rtl"] #about-intro h1,
html[dir="rtl"] #about-intro .lead,
html[dir="rtl"] #contact .section-header,
html[dir="rtl"] #contact .section-header h3,
html[dir="rtl"] #contact .section-header p {
    text-align: right !important;
}

html[dir="rtl"] #contact .section-header {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] #contact .section-header p {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] main > section:not(#intro) .section-header h2::after,
html[dir="rtl"] main > section:not(#intro) .section-header h3::after,
html[dir="rtl"] #contact .section-header h3::after {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] #who-we-serve .about-col,
html[dir="rtl"] #who-we-serve .about-col .title,
html[dir="rtl"] #who-we-serve .about-col .about-p,
html[dir="rtl"] #services .box,
html[dir="rtl"] #services .title,
html[dir="rtl"] #services .description,
html[dir="rtl"] #services p,
html[dir="rtl"] #ai-principles .box,
html[dir="rtl"] #ai-principles .title,
html[dir="rtl"] #ai-principles .description,
html[dir="rtl"] #blog .blog,
html[dir="rtl"] #blog .title,
html[dir="rtl"] #blog .post-title,
html[dir="rtl"] #blog .post-description,
html[dir="rtl"] #services-grid .card,
html[dir="rtl"] #services-grid .card h4,
html[dir="rtl"] #services-grid .card p,
html[dir="rtl"] #who-serve-grid .about-col,
html[dir="rtl"] #who-serve-grid .about-col .p-4,
html[dir="rtl"] #who-serve-grid .about-col h3,
html[dir="rtl"] #who-serve-grid .about-col p {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #services .icon,
html[dir="rtl"] #ai-principles .icon,
html[dir="rtl"] #services-grid .card .icon {
    align-items: center;
    justify-content: flex-start !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] #services .learn-more-link,
html[dir="rtl"] .see-more-link,
html[dir="rtl"] #services-grid .card .cta-btn,
html[dir="rtl"] #who-serve-grid .cta-btn {
    align-self: flex-start !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] #who-we-serve .see-more-link {
    margin: 0 16px 18px 16px !important;
    padding-bottom: 0 !important;
}

html[dir="rtl"] #who-we-serve .about-col {
    overflow: hidden;
}

html[dir="rtl"] #services .section-header p,
html[dir="rtl"] #services .services-section p {
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 760px;
    padding-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] .careers-page .eyebrow,
html[dir="rtl"] .careers-page h1,
html[dir="rtl"] .careers-page h2,
html[dir="rtl"] .careers-page h3,
html[dir="rtl"] .careers-page p,
html[dir="rtl"] .careers-page label {
    text-align: right !important;
}

html[dir="rtl"] #who-we-serve .section-header,
html[dir="rtl"] #services .section-header,
html[dir="rtl"] #ai-principles .section-header,
html[dir="rtl"] #blog .section-header {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] #services-header .container,
html[dir="rtl"] #who-serve-header .container,
html[dir="rtl"] #resources-header .container,
html[dir="rtl"] #about-intro .container,
html[dir="rtl"] #segment-hero .container,
html[dir="rtl"] #service-hero .container {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: right !important;
}

html[dir="rtl"] #services-header h1,
html[dir="rtl"] #who-serve-header h1,
html[dir="rtl"] #resources-header h1,
html[dir="rtl"] #about-intro h1,
html[dir="rtl"] #segment-hero h1,
html[dir="rtl"] #service-hero h1,
html[dir="rtl"] #services-header .lead,
html[dir="rtl"] #who-serve-header .lead,
html[dir="rtl"] #resources-header .lead,
html[dir="rtl"] #about-intro .lead,
html[dir="rtl"] #segment-hero .lead,
html[dir="rtl"] #service-hero .lead {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] #services .box::before,
html[dir="rtl"] #ai-principles .box::before {
    left: auto !important;
    right: 0 !important;
}

html[dir="rtl"] #services .box,
html[dir="rtl"] #ai-principles .box,
html[dir="rtl"] #services-grid .card,
html[dir="rtl"] #features .card,
html[dir="rtl"] #service-details .card,
html[dir="rtl"] #who-serve-grid .about-col {
    align-items: flex-start !important;
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] #features .card h4,
html[dir="rtl"] #features .card p,
html[dir="rtl"] #service-details .card h4,
html[dir="rtl"] #service-details .card p,
html[dir="rtl"] #segment-content h3,
html[dir="rtl"] #segment-content p,
html[dir="rtl"] #segment-content li {
    direction: rtl !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] #services-grid .card .icon,
html[dir="rtl"] #features .card .icon,
html[dir="rtl"] #who-serve-grid .about-col .icon {
    margin-left: auto !important;
    margin-right: 0 !important;
}

html[dir="rtl"] .signal-node {
    justify-content: flex-start !important;
    padding-left: 10px !important;
    padding-right: 14px !important;
    text-align: right !important;
}

html[dir="rtl"] .signal-node strong {
    display: block;
    text-align: right !important;
    width: 100%;
}

html[dir="rtl"] .intro-btns {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: right !important;
}

html[dir="rtl"] .contact-info,
html[dir="rtl"] .contact-info .row,
html[dir="rtl"] #contact .form {
    direction: rtl !important;
}

html[dir="rtl"] .hero-signal-map {
    width: 620px;
}

html[dir="rtl"] .signal-node {
    min-height: 38px;
    padding: 8px 10px !important;
    width: 118px;
}

html[dir="rtl"] .signal-node strong {
    font-size: 9.5px;
}

html[dir="rtl"] .node-content,
html[dir="rtl"] .node-paid {
    right: 12% !important;
}

html[dir="rtl"] .node-reporting,
html[dir="rtl"] .node-ai-opps {
    left: 12% !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    html[dir="rtl"] .hero-signal-map {
        width: 570px;
    }

    html[dir="rtl"] .signal-node {
        width: 110px;
    }

    html[dir="rtl"] .node-content,
    html[dir="rtl"] .node-paid {
        right: 11% !important;
    }

    html[dir="rtl"] .node-reporting,
    html[dir="rtl"] .node-ai-opps {
        left: 11% !important;
    }
}

@media (max-width: 767px) {
    html[dir="rtl"] .hero-signal-map {
        width: min(360px, calc(100vw - 40px));
    }

    html[dir="rtl"] .signal-node {
        min-height: 30px;
        padding: 5px 6px !important;
        width: 86px;
    }

    html[dir="rtl"] .signal-node strong {
        font-size: 7px;
        line-height: 1.15;
    }

    html[dir="rtl"] .node-content,
    html[dir="rtl"] .node-paid {
        right: 8% !important;
    }

    html[dir="rtl"] .node-reporting,
    html[dir="rtl"] .node-ai-opps {
        left: 8% !important;
    }
}

html[dir="rtl"] #blog .blog-intro-row,
html[dir="rtl"] #blog .blog-intro-row .col-lg-8 {
    justify-content: flex-start !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
}

html[dir="rtl"] #blog .blog-subtitle {
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    text-align: right !important;
    white-space: normal !important;
}

@media (max-width: 768px) {
    html[dir="rtl"] #header #logo {
        float: right !important;
    }

    html[dir="rtl"] #mobile-nav-toggle {
        left: 20px !important;
        right: auto !important;
    }
}

/* Keep Arabic radar tags inside the radar circle. Must stay last. */
html[dir="rtl"] #intro .hero-signal-map {
    height: 560px !important;
    max-width: none !important;
    min-height: 0 !important;
    --radar-node-radius: 199px;
    width: 560px !important;
}

html[dir="rtl"] #intro .signal-ring {
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

html[dir="rtl"] #intro .ring-one {
    height: 32% !important;
    width: 32% !important;
}

html[dir="rtl"] #intro .ring-two {
    height: 54% !important;
    width: 54% !important;
}

html[dir="rtl"] #intro .ring-three {
    height: 76% !important;
    width: 76% !important;
}

html[dir="rtl"] #intro .signal-sweep {
    height: 78% !important;
    left: 11% !important;
    top: 11% !important;
    width: 78% !important;
}

html[dir="rtl"] #intro .signal-node {
    bottom: auto !important;
    justify-content: center !important;
    left: 50% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    right: auto !important;
    text-align: center !important;
    top: 50% !important;
    white-space: normal !important;
    width: 118px !important;
}

html[dir="rtl"] #intro .signal-node strong {
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

html[dir="rtl"] #intro .node-strategy {
    transform: translate(-50%, -50%) translate(0, calc(var(--radar-node-radius) * -1)) !important;
}

html[dir="rtl"] #intro .node-content {
    transform: translate(-50%, -50%) translate(calc(var(--radar-node-radius) * 0.866), calc(var(--radar-node-radius) * -0.5)) !important;
}

html[dir="rtl"] #intro .node-paid {
    transform: translate(-50%, -50%) translate(calc(var(--radar-node-radius) * 0.866), calc(var(--radar-node-radius) * 0.5)) !important;
}

html[dir="rtl"] #intro .node-web {
    transform: translate(-50%, -50%) translate(0, var(--radar-node-radius)) !important;
}

html[dir="rtl"] #intro .node-reporting {
    transform: translate(-50%, -50%) translate(calc(var(--radar-node-radius) * -0.866), calc(var(--radar-node-radius) * 0.5)) !important;
}

html[dir="rtl"] #intro .node-ai-opps {
    transform: translate(-50%, -50%) translate(calc(var(--radar-node-radius) * -0.866), calc(var(--radar-node-radius) * -0.5)) !important;
}

@media (max-width: 1199px) and (min-width: 768px) {
    html[dir="rtl"] #intro .hero-signal-map {
        height: 520px !important;
        max-width: none !important;
        --radar-node-radius: 185px;
        width: 520px !important;
    }

    html[dir="rtl"] #intro .signal-node {
        width: 110px !important;
    }

}

@media (max-width: 767px) {
    html[dir="rtl"] #intro .hero-signal-map {
        height: min(360px, calc(100vw - 40px)) !important;
        max-width: none !important;
        --radar-node-radius: min(128px, calc((100vw - 40px) * 0.355));
        width: min(360px, calc(100vw - 40px)) !important;
    }

    html[dir="rtl"] #intro .signal-node {
        min-height: 30px !important;
        padding: 5px 6px !important;
        width: 86px !important;
    }

    html[dir="rtl"] #intro .signal-node strong {
        font-size: 7px !important;
        line-height: 1.15 !important;
    }

}