@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
html,body{
    direction: rtl;
    font-family: "Cairo", sans-serif !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
#services .title,
footer,
nav{
    font-family: "Cairo", sans-serif !important;
}
.nav-item {
    font-size: 17px;
    letter-spacing: 0;
}
.image-and-text.text-align-right {
    text-align: left;
}
.form-control{
    text-align: right;
}
.footer-row:nth-child(2) {
    padding-left: inherit;
    padding-right: var(--padding);
}
section#realisations {
    direction: ltr;
}
.image-and-text.text-align-right .image-and-text__text>:is(p, em):last-child::after {
    right: inherit;
    left: 0;
}
#cursor{
    left: 0;
}
a.button span.material-symbols-outlined:not(.padded) {
    margin-right: inherit;
    margin-left: -0.4rem;
    transform: scale(-1);
}
@media (min-width: 1200px){
    h4#slogan {
        text-align: center;
    }
    #services .image-and-text__text {
        padding-left: inherit;
        padding-right: var(--padding-inline-double);
    }
    #services h2 {
        padding-right: inherit;
        padding-left: var(--padding-inline);
    }
    .services-images__image:first-child {
        padding-left: inherit;
        padding-right: 20%;
    }
    .services-images__image:nth-child(2){
        right: 0;
        left: inherit;
    }
    .icons-and-image .image-wrapper {
        margin-right: inherit;
        margin-left: var(--padding-inline);
    }
    .image-and-text.inverted {
        padding-left: inherit;
        padding-right: var(--padding-inline);
    }
    #services~#services-grid li h3.card__text {
        font-size: 20px;
        letter-spacing: 1px;
    }
}
@media (min-width: 1025px)
{
    .image-and-text.centered.inverted .image-and-text__text {
        padding-left: inherit;
        padding-right: var(--padding-inline-half);
    }
    .image-and-text.centered:not(.inverted) .image-and-text__text {
        padding-right: inherit;
        padding-left: var(--padding-inline-half);
    }
}
@media (min-width: 830px)
{
    #hero:not(.padding-top) #hero-bg {
        margin-left: var(--padding-inline);
        margin-right: var(--padding-inline);
        /* margin-right: calc(var(--padding-inline)* 3); */
    }
    #hero h1{
        display: none;
    }
    
}