@font-face {
    font-family: "cairo-regular";
    src: url(../fonts/Cairo-Regular.ttf);
}

/* global */
body {
    font-family: "cairo-regular";
}

header .sub .custom-btn {
    float: left;
}

.custom-btn img {
    margin-right: 15px;
}

img {
    transform: scale(-1, 1);
}

.title-x-subtitle p {
    width: 400px;
}

/* navbar */
#navbar .navbar .navbar-nav {
    margin-left: 0;
    margin-right: 168px;
}

#navbar .navbar-brand img {
    transform: scale(1);
}

#navbar .navbar .navbar-nav li {
    margin-right: 0;
    margin-left: 70px;
}
#navbar .navbar .navbar-nav li:last-child {
    font-family: "archia-regular";
  }

/* header */
header {
    background-position: 105% 6%, -50% top, -5% bottom;
}
header .header-title h1 {
    line-height: 110px;
    font-size: 80px;
}

/* about */
#about-us {
    background-position: 160% top;
}
#about-us .about-us-details h2 {
	font-size: 64px;
	line-height: 85px;
	width: 100%;
}

/* vision */
#our-vision {
    background-position: 94% 3%;
}
#our-vision .vision-details h3 {
    font-size: 50px;
}

/* principles */
#our-principles .principle-content .principle-box p {
    font-size: 18px;
    line-height: 27px;
}

/* services */
#our-services {
    background-position: -7% 0, 107% 60%;
}
#our-services .title-x-subtitle p {
    width: 340px;
}

/* footer */
footer .overlay {
    background-position: 102% 25%, 39% bottom;
}
footer .overlay .footer-title span {
    margin-right: 0;
    margin-left: 50px;
}

footer .overlay .contact .info ul li img {
    transform: scale(1);
    direction: rtl;
}

@media (max-width: 1200px) {
    #navbar .navbar .navbar-nav {
      margin-right: auto;
    }
    header .header-title h1 {
        line-height: 100px;
        font-size: 70px;
    }
    #about-us .about-us-details h2 {
        font-size: 54px;
        line-height: 75px;
    }
    #our-vision .vision-details h3 {
        line-height: 40px;
      }
}

@media (max-width: 767px) {
    header {
        background-position: -5% 3%, 50% top, -5% bottom;
    }
    header .header-title h1 {
        font-size: 60px;
        line-height: 80px;
    }
    header .sub .custom-btn {
        float: right;
    }
    #about-us .about-us-details h2 {
        font-size: 45px;
        line-height: 62px;
    }
    .title-x-subtitle p {
        text-align: right;
    }
}

@media (max-width: 567px) {
    #about-us .about-us-details h2 {
        width: 90%;
    }
    header .header-title h1 {
        font-size: 45px;
        line-height: 60px;
    }
    .title-x-subtitle p {
        width: 100%;
    }
    #about-us .about-us-details h2 {
        font-size: 34px;
        line-height: 50px;
    }
    #our-vision .vision-details h3 {
        font-size: 35px;
    }
    footer .overlay .footer-title span {
        margin-left: 0;
    }
}

@media (max-width: 450px) {
    header {
    background-position: -50% 3%, -5% top, -28% bottom
    }
    header .header-title h1 {
        font-size: 36px;
        line-height: 53px;
    }
    #our-services {
        background-position: -50% 170px, 107% 60%;
    }
}