body{
    direction:rtl;
}


/*nav*/
.bg-light .phone{
    font-size: 2.5rem;
    font-weight: 600;
    position: absolute;
    left: 0px;
    right: initial;
    padding: 0 0.9rem;
    color: #fff;
    background: #b81553;
    background: -webkit-linear-gradient(to right,  #e42466, #b81553);
    background: linear-gradient(to right, #b1053f,  #8a0a3b);
    letter-spacing: 0.2rem;
    bottom: 0;
    padding: 0;
    text-align: left !important;
}


.btn-rsv p {
    font-size: 16px;
    margin-left: initial;
}
.bg-light .phone::after {
    border-right: solid 22px transparent;
    left: 100%;
    border-left: initial;
    right: initial;

}
.top-bar .phone img {
    margin: 0px 10px;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
    margin-top: -4px;
    width: 22px;
}
.main .title h2{
    left:initial;
    right: 31rem;
}
.main .title h1{
    left:initial;
    right: 31rem;
}
.btn-rsv {
    left: 2rem;
    right:initial;
}
h4::after {
    left: initial !important;
    right: 0;
}
.background-overlay .over {
}
@font-face {
    font-family: 'Cairo';
    src: url('fonts/Cairo-Bold.woff2') format('woff2'),
        url('fonts/Cairo-Bold.woff') format('woff'),
        url('fonts/Cairo-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    
}
*{
    font-family: 'Cairo';
}
.btn-primary:hover {
    color: #fff;
    background-color: #f53179;
    border-color: #ffffff;
}
@media (max-width: 576px) { 
        .main .title h2{
        font-size: 1rem;
        top: 4rem;
        right: 8rem !important;
        left: initial !important;
    }
        .main .title h1{
        font-size: 1.4em;
        right: 7rem !important;
        left: initial !important;
        top: 5rem;
    }
    .btn-rsv {
    left: inherit;
    right:initial;
}

}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
        .main .title h2{
        font-size: 1.5rem;
        right: 17rem !important;
        left: initial !important;
    }
        .main .title h1{
        font-size: 1.8em;
        right: 17rem !important;
        left: initial !important;
    }
    .main {
    min-height: 460px;
}
}

@media (max-width: 991.98px) and (min-width: 768px){
.main .title h2 {
    font-size: 1.5rem;
    right: 21rem !important;
    top: 5rem;
}
}
@media (max-width: 991.98px) and (min-width: 768px){
.main .title h1 {
    font-size: 2.5em;
    right: 21rem !important;
    top: 5rem;
}
}
@media (max-width: 768px){
#service {
    margin-top: 0 rem;
}
#service .back-ground {
    margin-top: 0px;
}
}