/*==================================================
    RTL.CSS
    PARTIE 1/4
    DIRECTION • TYPOGRAPHIE • STRUCTURE
==================================================*/


/*==================================================
    DOCUMENT RTL
==================================================*/

html[dir="rtl"]{

    direction:rtl;

    unicode-bidi:embed;

}

html[dir="rtl"] body{

    direction:rtl;

    text-align:right;

    font-family:"Tajawal","Cairo","Noto Kufi Arabic",sans-serif;

}


/*==================================================
    ALIGNEMENT DES TEXTES
==================================================*/

html[dir="rtl"] h1,

html[dir="rtl"] h2,

html[dir="rtl"] h3,

html[dir="rtl"] h4,

html[dir="rtl"] h5,

html[dir="rtl"] h6,

html[dir="rtl"] p,

html[dir="rtl"] li,

html[dir="rtl"] label,

html[dir="rtl"] blockquote{

    text-align:right;

}


/*==================================================
    CONTAINER
==================================================*/

html[dir="rtl"] .container{

    direction:rtl;

}


/*==================================================
    FLEXBOX
==================================================*/

html[dir="rtl"] .d-flex,

html[dir="rtl"] .flex-between,

html[dir="rtl"] .flex-center{

    direction:rtl;

}


/*==================================================
    GRILLES
==================================================*/

html[dir="rtl"] .grid,

html[dir="rtl"] .services-grid,

html[dir="rtl"] .technology-grid,

html[dir="rtl"] .culture-grid,

html[dir="rtl"] .livestock-grid,

html[dir="rtl"] .statistics-grid,

html[dir="rtl"] .gallery-grid,

html[dir="rtl"] .partners-grid,

html[dir="rtl"] .testimonial-grid,

html[dir="rtl"] .news-grid,

html[dir="rtl"] .footer-grid{

    direction:rtl;

}


/*==================================================
    LISTES
==================================================*/

html[dir="rtl"] ul,

html[dir="rtl"] ol{

    padding-right:20px;

    padding-left:0;

}

html[dir="rtl"] li{

    text-align:right;

}


/*==================================================
    IMAGES
==================================================*/

html[dir="rtl"] img{

    direction:ltr;

}


/*==================================================
    TABLEAUX
==================================================*/

html[dir="rtl"] table{

    direction:rtl;

}

html[dir="rtl"] th,

html[dir="rtl"] td{

    text-align:right;

}


/*==================================================
    CITATIONS
==================================================*/

html[dir="rtl"] blockquote{

    border-right:4px solid var(--primary);

    border-left:none;

    padding-right:20px;

    padding-left:0;

}


/*==================================================
    ICÔNES
==================================================*/

html[dir="rtl"] .icon,

html[dir="rtl"] svg{

    vertical-align:middle;

}


/*==================================================
    SÉLECTION DU TEXTE
==================================================*/

html[dir="rtl"] input,

html[dir="rtl"] textarea{

    text-align:right;

    direction:rtl;

}


/*==================================================
    FIN PARTIE 1/4
==================================================*/
/*==================================================
    RTL.CSS
    PARTIE 2/4
    HEADER • NAVIGATION • HERO
==================================================*/


/*==================================================
    HEADER
==================================================*/

html[dir="rtl"] #header{

    direction:rtl;

}

html[dir="rtl"] #header .container{

    flex-direction:row-reverse;

}

html[dir="rtl"] .logo{

    flex-direction:row-reverse;

}

html[dir="rtl"] .header-right{

    flex-direction:row-reverse;

}


/*==================================================
    NAVIGATION
==================================================*/

html[dir="rtl"] nav{

    direction:rtl;

}

html[dir="rtl"] nav ul{

    flex-direction:row-reverse;

}

html[dir="rtl"] nav ul li{

    text-align:right;

}

html[dir="rtl"] nav ul li a{

    text-align:right;

}


/*==================================================
    MENU MOBILE
==================================================*/

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

    html[dir="rtl"] nav{

        right:-100%;

        left:auto;

    }

    html[dir="rtl"] nav.active{

        right:0;

        left:auto;

    }

}


/*==================================================
    SÉLECTEUR DE LANGUE
==================================================*/

html[dir="rtl"] #language{

    direction:rtl;

    text-align:right;

}


/*==================================================
    HERO
==================================================*/

html[dir="rtl"] .hero{

    direction:rtl;

}

html[dir="rtl"] .hero-content{

    text-align:right;

    margin-right:0;

    margin-left:auto;

}

html[dir="rtl"] .hero-content h1,

html[dir="rtl"] .hero-content h2,

html[dir="rtl"] .hero-content p{

    text-align:right;

}


/*==================================================
    HERO BUTTONS
==================================================*/

html[dir="rtl"] .hero-buttons{

    flex-direction:row-reverse;

    justify-content:flex-start;

}


/*==================================================
    HERO CARDS
==================================================*/

html[dir="rtl"] .hero-card{

    flex-direction:row-reverse;

}

html[dir="rtl"] .hero-card .card{

    text-align:right;

}


/*==================================================
    SCROLL INDICATOR
==================================================*/

html[dir="rtl"] .scroll-down{

    right:50%;

    left:auto;

    transform:translateX(50%);

}


/*==================================================
    BOUTONS
==================================================*/

html[dir="rtl"] .btn,

html[dir="rtl"] .btn-primary,

html[dir="rtl"] .btn-secondary,

html[dir="rtl"] .btn-outline{

    flex-direction:row-reverse;

}

html[dir="rtl"] .btn i,

html[dir="rtl"] .btn svg,

html[dir="rtl"] .btn-primary i,

html[dir="rtl"] .btn-secondary i,

html[dir="rtl"] .btn-outline i{

    margin-left:8px;

    margin-right:0;

}


/*==================================================
    FIL D'ARIANE (BREADCRUMB)
==================================================*/

html[dir="rtl"] .breadcrumb{

    flex-direction:row-reverse;

}

html[dir="rtl"] .breadcrumb li::before{

    margin-left:8px;

    margin-right:0;

}


/*==================================================
    FIN PARTIE 2/4
==================================================*/
/*==================================================
    RTL.CSS
    PARTIE 3/4
    SECTIONS • FORMULAIRES • FOOTER
==================================================*/


/*==================================================
    ABOUT
==================================================*/

html[dir="rtl"] .about-content{

    direction:rtl;

}

html[dir="rtl"] .about-text{

    text-align:right;

}

html[dir="rtl"] .about-image{

    text-align:left;

}


/*==================================================
    CARTES
==================================================*/

html[dir="rtl"] .service-card,

html[dir="rtl"] .technology-card,

html[dir="rtl"] .culture-card,

html[dir="rtl"] .livestock-card,

html[dir="rtl"] .news-card,

html[dir="rtl"] .testimonial-card,

html[dir="rtl"] .partner-card,

html[dir="rtl"] .stat-card{

    text-align:right;

}


/*==================================================
    GALERIE
==================================================*/

html[dir="rtl"] .gallery-item{

    direction:rtl;

}

html[dir="rtl"] .gallery-overlay{

    direction:rtl;

}


/*==================================================
    FAQ
==================================================*/

html[dir="rtl"] .faq-item{

    text-align:right;

}

html[dir="rtl"] .faq-item h3{

    text-align:right;

}

html[dir="rtl"] .faq-item p{

    text-align:right;

}


/*==================================================
    FORMULAIRES
==================================================*/

html[dir="rtl"] form{

    direction:rtl;

}

html[dir="rtl"] .form-group{

    text-align:right;

}

html[dir="rtl"] label{

    display:block;

    text-align:right;

}

html[dir="rtl"] input,

html[dir="rtl"] textarea,

html[dir="rtl"] select{

    text-align:right;

    direction:rtl;

}

html[dir="rtl"] input::placeholder,

html[dir="rtl"] textarea::placeholder{

    text-align:right;

}

html[dir="rtl"] input[type="email"],

html[dir="rtl"] input[type="url"],

html[dir="rtl"] input[type="tel"]{

    direction:ltr;

    text-align:left;

}

html[dir="rtl"] button[type="submit"]{

    float:right;

}


/*==================================================
    TABLEAUX
==================================================*/

html[dir="rtl"] table{

    direction:rtl;

}

html[dir="rtl"] th,

html[dir="rtl"] td{

    text-align:right;

}

html[dir="rtl"] th:first-child,

html[dir="rtl"] td:first-child{

    border-right:none;

}


/*==================================================
    NEWSLETTER
==================================================*/

html[dir="rtl"] .newsletter-form{

    direction:rtl;

}

html[dir="rtl"] .newsletter-form input{

    text-align:right;

}

html[dir="rtl"] .newsletter-form button{

    margin-right:10px;

    margin-left:0;

}


/*==================================================
    FOOTER
==================================================*/

html[dir="rtl"] #footer{

    direction:rtl;

}

html[dir="rtl"] .footer-grid{

    direction:rtl;

}

html[dir="rtl"] .footer-column{

    text-align:right;

}

html[dir="rtl"] .footer-links{

    padding-right:0;

}

html[dir="rtl"] .footer-links li{

    text-align:right;

}

html[dir="rtl"] .social-links{

    justify-content:flex-start;

    flex-direction:row-reverse;

}

html[dir="rtl"] .copyright{

    text-align:center;

}


/*==================================================
    FIN PARTIE 3/4
==================================================*/
/*==================================================
    RTL.CSS
    PARTIE 4/4
    CORRECTIONS FINALES • ACCESSIBILITÉ • RESPONSIVE
==================================================*/


/*==================================================
    MARGES ET PADDINGS
==================================================*/

html[dir="rtl"] .ml-auto{

    margin-left:0 !important;

    margin-right:auto !important;

}

html[dir="rtl"] .mr-auto{

    margin-right:0 !important;

    margin-left:auto !important;

}

html[dir="rtl"] .text-left{

    text-align:right !important;

}

html[dir="rtl"] .text-right{

    text-align:left !important;

}


/*==================================================
    ICÔNES DIRECTIONNELLES
==================================================*/

html[dir="rtl"] .fa-arrow-right,

html[dir="rtl"] .fa-chevron-right,

html[dir="rtl"] .fa-angle-right,

html[dir="rtl"] .fa-long-arrow-alt-right,

html[dir="rtl"] .icon-arrow-right{

    transform:scaleX(-1);

}

html[dir="rtl"] .fa-arrow-left,

html[dir="rtl"] .fa-chevron-left,

html[dir="rtl"] .fa-angle-left,

html[dir="rtl"] .fa-long-arrow-alt-left,

html[dir="rtl"] .icon-arrow-left{

    transform:scaleX(-1);

}


/*==================================================
    BOUTON RETOUR EN HAUT
==================================================*/

html[dir="rtl"] #backToTop{

    left:25px;

    right:auto;

}


/*==================================================
    BORDURES
==================================================*/

html[dir="rtl"] .border-left{

    border-left:none !important;

    border-right:1px solid var(--border);

}

html[dir="rtl"] .border-right{

    border-right:none !important;

    border-left:1px solid var(--border);

}


/*==================================================
    OMBRES
==================================================*/

html[dir="rtl"] .shadow-left{

    box-shadow:-6px 0 20px rgba(0,0,0,.08);

}

html[dir="rtl"] .shadow-right{

    box-shadow:6px 0 20px rgba(0,0,0,.08);

}


/*==================================================
    SCROLLBAR
==================================================*/

html[dir="rtl"]{

    scrollbar-gutter:stable;

}


/*==================================================
    RESPONSIVE RTL
==================================================*/

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

    html[dir="rtl"] .hero-buttons{

        flex-direction:column;

    }

    html[dir="rtl"] .hero-card{

        flex-direction:column;

    }

    html[dir="rtl"] .social-links{

        justify-content:center;

    }

    html[dir="rtl"] .footer-column{

        text-align:center;

    }

}


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

    html[dir="rtl"] .hero-content{

        text-align:center;

    }

    html[dir="rtl"] .hero-content h1,

    html[dir="rtl"] .hero-content h2,

    html[dir="rtl"] .hero-content p{

        text-align:center;

    }

    html[dir="rtl"] .newsletter-form button{

        margin-right:0;

    }

}


/*==================================================
    ACCESSIBILITÉ
==================================================*/

html[dir="rtl"] *:focus-visible{

    outline:3px solid var(--primary);

    outline-offset:3px;

}


/*==================================================
    IMPRESSION
==================================================*/

@media print{

    html[dir="rtl"]{

        direction:rtl;

    }

}


/*==================================================
    OPTIMISATION
==================================================*/

html[dir="rtl"] *{

    box-sizing:border-box;

}


/*==================================================
    FIN DU FICHIER rtl.css
==================================================*/