/* =========================================================
   CoBAC Arabic / RTL Global Styles
   ========================================================= */

/* ---------------------------------------------------------
   1. Global RTL direction
   --------------------------------------------------------- */

html[dir="rtl"] {
    direction: rtl;
}

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


/* ---------------------------------------------------------
   2. Text alignment helpers
   --------------------------------------------------------- */

html[dir="rtl"] .text-left {
    text-align: right !important;
}

html[dir="rtl"] .text-right {
    text-align: left !important;
}

html[dir="rtl"] .text-center {
    text-align: center !important;
}


/* ---------------------------------------------------------
   3. Floats
   --------------------------------------------------------- */

html[dir="rtl"] .pull-left {
    float: right !important;
}

html[dir="rtl"] .pull-right {
    float: left !important;
}


/* ---------------------------------------------------------
   4. Bootstrap-style columns
   --------------------------------------------------------- */

html[dir="rtl"] .row {
    direction: rtl;
}


/* ---------------------------------------------------------
   5. Navigation
   --------------------------------------------------------- */

html[dir="rtl"] nav,
html[dir="rtl"] .nav,
html[dir="rtl"] .navbar,
html[dir="rtl"] .menu {
    direction: rtl;
}

html[dir="rtl"] .navbar-nav {
    padding-right: 0;
    padding-left: 0;
}


/* ---------------------------------------------------------
   6. Lists
   --------------------------------------------------------- */

html[dir="rtl"] ul,
html[dir="rtl"] ol {
    padding-right: 20px;
    padding-left: 0;
}


/* ---------------------------------------------------------
   7. Forms
   --------------------------------------------------------- */

html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] input::placeholder,
html[dir="rtl"] textarea::placeholder {
    text-align: right;
}


/* ---------------------------------------------------------
   8. Buttons
   --------------------------------------------------------- */

html[dir="rtl"] button,
html[dir="rtl"] .button {
    direction: rtl;
}


/* ---------------------------------------------------------
   9. Images
   --------------------------------------------------------- */

html[dir="rtl"] img {
    direction: rtl;
}


/* ---------------------------------------------------------
   10. Common content blocks
   --------------------------------------------------------- */

html[dir="rtl"] .content,
html[dir="rtl"] .txt,
html[dir="rtl"] .desc {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------
   11. Headings
   --------------------------------------------------------- */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    direction: rtl;
}


/* ---------------------------------------------------------
   12. Tables
   --------------------------------------------------------- */

html[dir="rtl"] table {
    direction: rtl;
}

html[dir="rtl"] th,
html[dir="rtl"] td {
    text-align: right;
}


/* ---------------------------------------------------------
   13. Breadcrumbs
   --------------------------------------------------------- */

html[dir="rtl"] .breadcrumb {
    direction: rtl;
}

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


/* ---------------------------------------------------------
   14. Bootstrap dropdowns
   --------------------------------------------------------- */

html[dir="rtl"] .dropdown-menu {
    right: 0;
    left: auto;
    text-align: right;
}


/* ---------------------------------------------------------
   15. Bootstrap pagination
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   16. Common icon/text combinations
   --------------------------------------------------------- */

html[dir="rtl"] .icon-item,
html[dir="rtl"] .item {
    direction: rtl;
}


/* ---------------------------------------------------------
   17. Flexbox
   --------------------------------------------------------- */

html[dir="rtl"] .flex,
html[dir="rtl"] .d-flex {
    direction: rtl;
}


/* ---------------------------------------------------------
   18. Section content
   --------------------------------------------------------- */

html[dir="rtl"] section {
    direction: rtl;
}


/* ---------------------------------------------------------
   19. Main page content
   --------------------------------------------------------- */

html[dir="rtl"] main {
    direction: rtl;
}


/* ---------------------------------------------------------
   20. CoBAC specific sections
   --------------------------------------------------------- */

html[dir="rtl"] .intro {
    direction: rtl;
}

html[dir="rtl"] .intro .left {
    text-align: right;
}

html[dir="rtl"] .specs {
    direction: rtl;
}

html[dir="rtl"] .features {
    direction: rtl;
}

html[dir="rtl"] .workspaces {
    direction: rtl;
}

html[dir="rtl"] .testimonials {
    direction: rtl;
}


/* ---------------------------------------------------------
   21. RTL horizontal direction
   --------------------------------------------------------- */

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


/* ---------------------------------------------------------
   22. Keep media elements visually correct
   --------------------------------------------------------- */

html[dir="rtl"] video {
    direction: ltr;
}


/* ---------------------------------------------------------
   23. Keep code / technical content LTR
   --------------------------------------------------------- */

html[dir="rtl"] pre,
html[dir="rtl"] code,
html[dir="rtl"] .code,
html[dir="rtl"] .ltr {
    direction: ltr;
    text-align: left;
}


/* ---------------------------------------------------------
   24. Arabic language rendering
   --------------------------------------------------------- */

html[lang="ar"] body {
    font-family: inherit;
}


/* ---------------------------------------------------------
   25. Fix common left/right spacing
   --------------------------------------------------------- */

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

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


/* ---------------------------------------------------------
   26. Prevent horizontal overflow
   --------------------------------------------------------- */

html[dir="rtl"] body {
    overflow-x: hidden;
}


/* =========================================================
   27. Content / Intro Sections - RTL
   ========================================================= */

html[dir="rtl"] .intro.rtl-section {
    direction: rtl;
}

html[dir="rtl"] .intro.rtl-section .left {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .intro.rtl-section .txt.content {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .intro.rtl-section h2 {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .intro.rtl-section h2 span {
    direction: rtl;
    text-align: right;
}

html[dir="rtl"] .intro.rtl-section .icons {
    direction: rtl;
}

html[dir="rtl"] .intro.rtl-section .icon-item {
    direction: rtl;
    text-align: right;
}


/* =========================================================
   28. RTL - Intro Section
   Image LEFT / Content RIGHT
   ========================================================= */

/*
   Arabic RTL layout:
   
   ┌──────────────────────┬──────────────────────┐
   │                      │                      │
   │        IMAGE         │       CONTENT        │
   │       LEFT SIDE      │      RIGHT SIDE      │
   │                      │                      │
   └──────────────────────┴──────────────────────┘
*/

html.rtl section.intro {
    direction: ltr;
}


/* ---------------------------------------------------------
   Intro image - LEFT
   --------------------------------------------------------- */

html.rtl section.intro .img {
    right: auto;
    left: 0;
}


/* ---------------------------------------------------------
   Intro content - RIGHT
   --------------------------------------------------------- */

html.rtl section.intro .left {
    direction: rtl;
    text-align: right;
    padding-right: 0;
    padding-left: 45px;
}


/* ---------------------------------------------------------
   Intro text - RIGHT
   --------------------------------------------------------- */

html.rtl section.intro .left .txt {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------
   Intro headings - RIGHT
   --------------------------------------------------------- */

html.rtl section.intro .left h1,
html.rtl section.intro .left h2,
html.rtl section.intro .left h3,
html.rtl section.intro .left h4,
html.rtl section.intro .left h5,
html.rtl section.intro .left h6 {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------
   Intro icons/content items - RIGHT
   --------------------------------------------------------- */

html.rtl section.intro .left .icons,
html.rtl section.intro .left .icon-item {
    direction: rtl;
    text-align: right;
}


/* ---------------------------------------------------------
   Mobile - restore normal flow
   --------------------------------------------------------- */

@media only screen and (max-width: 767px) {

    html.rtl section.intro {
        direction: rtl;
    }

    html.rtl section.intro .img {
        position: static;
        width: 100%;
    }

    html.rtl section.intro .left {
        padding: 45px 15px;
        direction: rtl;
        text-align: right;
    }

    html.rtl section.intro .left .txt {
        text-align: right;
    }
}


/* =========================================================
   29. RTL - Event Boxes / Content Sections
   ========================================================= */

html.rtl section.event-boxes {
    direction: rtl;
}

html.rtl section.event-boxes .row {
    direction: rtl;
}

html.rtl section.event-boxes .col-sm-6 {
    float: right;
}

html.rtl section.event-boxes .item-arrows {
    direction: ltr;
}

html.rtl section.event-boxes h2,
html.rtl section.event-boxes .txt {
    text-align: right;
}


/* ---------------------------------------------------------
   END RTL
   ========================================================= */