/* Fonts
----------------------------------------------------------------------------------------------------*/
@font-face {
    font-family: 'Akarius';
    src: url('../fonts/Akarius.woff2') format('woff2'),
        url('../fonts/Akarius.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('../fonts/DroidArabicKufi-Bold.woff2') format('woff2'),
        url('../fonts/DroidArabicKufi-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Droid Arabic Kufi';
    src: url('../fonts/DroidArabicKufi.woff2') format('woff2'),
        url('../fonts/DroidArabicKufi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html {scroll-behavior: smooth;}
body{ top:0px !important; font-size: 16px; color: #161616; direction: rtl; text-align: right; line-height: 1.8; font-family: "Droid Arabic Kufi", serif;}
*:focus{outline: none!important}
a{color: #fff;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;-ms-transition: all 0.3s;transition: all 0.3s;}
a:hover, a:focus{color: #fff; text-decoration: none;}
img{max-width: 100%;}
h1, h2, h3, h4{font-weight: bold;}
svg{fill: currentColor;}
.element-hover:hover{z-index:2; transform: translate(0px, -2px)}

/* custom scrollbar */
/* width */
::-webkit-scrollbar {width: 10px;}

/* Track */
::-webkit-scrollbar-thumb:hover {background-image: linear-gradient(to bottom, #f2f1f1, #f2f1f1, #f2f1f1, #f2f1f1, #F5F5F5); box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5); border-radius: 3px;}

/* Handle */
::-webkit-scrollbar-track {background: #aef0f0; box-shadow: inset 0 0 5px; -webkit-box-shadow: inset 0 0 5px; background-color: #F5F5F5;}

/* Handle on hover */
::-webkit-scrollbar-thumb {background-image: linear-gradient(261.46deg, #4c0404 100%, rgba(19, 119, 111, 0) 103.56%)}

/* carousel-indicators-bullets */
.carousel-indicators-bullets{position: static; margin-top: 3rem; padding: 0;}
.carousel-indicators-bullets.carousel-indicators li{border: 1px solid #4c0404; width: 10px; height: 10px; border-radius: 100%; overflow: hidden;}
.carousel-indicators-bullets.carousel-indicators .active{background-color: #4c0404;}
.carousel-indicators--rooms{position: static;justify-content: start; margin: 0; padding: 0;}
.carousel-indicators--rooms li{text-indent: initial;width: 100px;height: inherit;margin-right: 0;}

/* section-sub-title */
.section-sub-title{font-size: 20px; color:  #161616;}
.section-title{font-size: 36px;}
.section-intro-text{max-width: 500px; margin: auto; margin-bottom: 3rem;}

/* BTN */
.btn{border: none;}
.btn-primary{ background-color: #4c0404;}
.btn-primary:hover{ background-color: #4c0404; }

/* header */
#header{position: absolute; width: 98%; z-index: 99; background: linear-gradient(to top, #f3f2f5, #d3d2d2);border-radius:10px;padding: 5px;margin: 10px;}
#header .wrapper{padding: 1rem 2rem;}
#header nav a{font-size: 16px; font-weight: bold; margin-left: 1.3rem; color: #4c0404;}
#header .logo img{width: 80px; border-radius: 10%}
#header .navbar-nav{padding: 0;}
.navbar-light .navbar-brand { width: 200px; }

/* home-slider */
#home-slider{position: relative}
#home-slider .carousel-caption{ top: 42%; left: 0; right: 0; text-align: right;}
#home-slider .carousel-caption h2{ font-size: 3rem;}
#home-slider .carousel-indicators li{ Width:98px;}

/* about */
section.about{padding: 2rem; scroll-margin-top: 3rem;}
section.about .about__content{padding-right: 5%; padding-left: 5%; background: #4c0404 ; color: #fff; border-radius: 10px;}
section.about .about__intro{background-color: #f2f1f1; padding: 2.5rem; line-height: 2.5rem; margin-top: 1rem;margin-left: -120px;padding-left: 120px; border-radius: 10px;}
section.about .about__intro__title{ color:  #161616; font-size: 28px; margin-bottom: 2rem; }
/* section.about .about__intro__title:after{background-color: #4c0404; content: ""; position:absolute; height: 5px; right: 20px; top:100px; width:200px; z-index: 1;} */
section.about .three-boxes{padding: 3rem;}
section.about .three-boxes h3{font-size: 24px; font-weight: bold;}

/* warranty */
section.warranty{ padding: 3rem 0; scroll-margin-top: 3rem}
section.warranty .warranty__img{webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;margin:0 auto;overflow:hidden;}
section.warranty .warranty__content{ background-color: #4c0404; color: #fff; padding: 3rem; margin-top: 5rem; margin-right: -91px; border-radius: 10px;}
section.warranty .warranty__content h3{color: #4c0404; font-size: 18px;}
section.warranty .warranty__content h2{font-size: 36px;}
section.warranty .warranty__numbers{ display: flex; width: 100%; justify-content: space-around; text-align: center; margin: 3rem 0; background: #4c0404  ; color: #fff; padding: 3rem 0; font-family: 'Akarius'; border-radius: 10px;}
section.warranty .warranty__numbers .warranty__numbers__number{ font-size: 96px; line-height: 1; }
section.warranty .warranty__numbers .warranty__numbers__text{ margin-bottom: 10%; font-size: 24px; color: #fff; font-family: "Droid Arabic Kufi", serif;}

/* projects */
section.projects{scroll-margin-top: 3rem}
section.projects .section-sub-title{font-size: 20px; color:  #161616;}
section.projects .section-title{font-size: 36px;}
section.projects .section-intro-text{max-width: 500px; margin: auto; margin-bottom: 3rem;}
section.projects #projects-slider .projects__item{overflow: hidden; border-radius: 10px;}
section.projects #projects-slider .wrapper{margin: 2rem;background-color: rgb(0 0 0 / 42%);color: #fff;padding: 3rem 6rem;height: 300px;border-radius: 10px;}
.read-more{padding: 4px 10px; border: 1px solid #fff; border-radius: 3px; color: #fff; display: inline-block;}
.read-more:hover{color: #fff;}
section.projects .project__content{ padding: 10%; background: #4c0404  ; color: #fff; border-radius: 10px;}
section.projects .project__content h2{font-size: 2.2rem; padding-bottom: 55px;}
section.projects .project__number{ margin: 3rem; font-size: 96px; line-height: 0; text-align: center; font-family: 'Akarius';}
section.projects .project__data{ font-size: 24px; text-align: center; }

/* partners */
section.partners{padding: 3rem 0;scroll-margin-top: 3rem}
section.partners #partners-slider .carousel-inner .partners__item{margin: 2rem;background-color: rgb(0 0 0 / 12%);color: #fff;padding: 3rem 6rem;height: 300px;border-radius: 10px;}

/* Footer */
#footer{background: #4c0404   repeat; background-size: 80px; padding: 5rem 0; color: #fff; padding-right: 5%; padding-left: 5%;}
#footer .logo img {width: 165px; border-radius: 5%;}
#footer h3{position: relative; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffffff;}
#footer .list-unstyled{padding: 0;}
#footer a{color: #fff;}
#footer .text-social{padding: 4%;}

.project-intro__contact ul.share-buttons {float: right; list-style: none; padding: 10px;}
.project-intro__contact ul.share-buttons li {display: inline;}
.project-intro__contact ul.share-buttons li a{color: #fff !important; font-size: 1.5em; padding-right: 30px;}


/* project info */
.project-intro{ position: relative; }
.project-intro__wrapper{ position: absolute; top: 40%; text-align: center; background: #4c0404; border-radius: 10px; left: 50%; color: #fff; transform: translate(-50%); padding: 2rem; }
.project-intro__wrapper h3{font-size: 20px;}
.project-intro__market {color:#fff;}
.project-intro__contact{padding: 2rem 0; background: #4c0404   repeat; background-size: 80px; color: #fff;}

/* project-units */
.project-rooms{margin: 6rem 0;}
.project-rooms__wrapper{ border: 1px solid #c1c1c1; border-width: 1px 4px 3px 1px;padding: 2rem; webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
.project-rooms__title{ font-weight: bold; font-size: 22px;}
.project-rooms__data{color: #646464; font-size: 18px;}
.project-rooms__more_info{ display: flex; align-items: center; padding: 1rem 0; justify-content: space-between; flex-wrap: wrap; margin-top: 5%; }
.project-rooms__more_info a{display: flex;align-items: center;}
.project-rooms__more_info svg{width: 46px;}

/* modal */
.modal .modal-dialog .modal-content .modal-header{color: #fff; background-color: #4c0404;}

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

@media screen and (max-width: 991px){
  #header .logo img {width: 70px;}
  #home-slider .carousel-caption{ top: 33%;}
  #home-slider .carousel-caption h2{ font-size: 1.5rem;}
    section.warranty .warranty__numbers .warranty__numbers__number{font-size: 60px;}
    section.projects #projects-slider .wrapper{padding: 3rem;}
    .project-intro__wrapper{left: 10%; text-align: right; transform: translate(-10%); padding: 2rem;}
    .project-intro__wrapper h1{font-size: 1.5rem;}
    section.about .about__intro__title{ font-size: 22px; }
    section.projects .project__content h2{font-size: 1.7rem; padding-bottom: 15px;}
    h4 {font-size: 1.3rem;}
    #footer h3 {font-size: 1.3rem;}
    #footer .text-social{padding: 2%;}
    #footer h3 {margin-top: 1.5rem; margin-bottom: 1rem;}
}
@media screen and (max-width: 767px){
    #header{position: static; width: 100%; z-index: 99; background: #4c0404;}
    #header .navbar-nav { padding: 0 15px; }
    #header nav a{font-size: 14px; color: #f2f1f1;}
    .navbar-light .navbar-toggler{color: #f2f1f1; border: none;}
    h4 {font-size: 1.3rem;}
    section.about .about__intro{margin-left: 0;}
    section.services{text-align: center;}

    section.warranty .warranty__content{margin-right: 0;}
    section.warranty .warranty__numbers{display: block;}
    section.warranty .warranty__numbers > div{margin-bottom: 1rem;}
    section.projects #projects-slider .projects__item{margin-bottom: 1rem;}

    .project-intro__wrapper{position: static; width: 100%; text-align: right; transform: translate(0); border-radius: 10px;background: #4c0404; }
    .project-intro__wrapper h1{font-size: 1.5rem;}
    .project-rooms__more_info a{flex: 50%; margin-bottom: 10px;}
}
@media screen and (max-width: 480px){

}
@media screen and (min-width: 1200px){
    .container{max-width: 1440px;}
}