@font-face
{
font-family: 'gadugi';
src: url('../fonts/gadugi.ttf');	 
}

@font-face
{
font-family: 'gadugib';
src: url('../fonts/gadugib.ttf');	 
}

@font-face
{
font-family: 'Ghawar-Regular';
src: url('../fonts/Ghawar-Regular.otf');	 
}

html
{
    padding: 0px;
    margin: 0px;
  width:100%;
  height:100%;
}

body
{
    padding: 0px;
    margin: 0px;
    width:100%;
  height:100%;
    font-family: "gadugi";
}

.loader-area
{
    position:fixed;
    background-color:#000;
    width:100%;
    z-index:1000000;
}

.loader-inside
{
     background-image: url("../images/n2sheh-projects.png");
    width: 100%;
    height:100%;
     z-index:1000001;
     background-size:cover;
    position:relative;
}

.loader-area img
{
      left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position:absolute;
}

.resturant
{
    background-image: url("../images/resturant.jpg");
    width: 100%;
    height: 500px;
    background-size: cover;
    background-attachment: fixed;
}

.alling
{
    width: 100%;
    height: 100%;
    position: relative;
}

.menu-header
{
    background: rgb(0,0,0);
    background: linear-gradient(180deg, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
    width: 100%;
    height: 25%;
    position: fixed;
    top:0px;
    left: 0px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display: flex;
    z-index: 100;
}

.video-demo
{
    width: 100%;
}

.logo
{
   flex:1;
 
}

.menulinks
{
   flex:2;
   
}

.menulinks ul
{
   list-style: none;
}

.menulinks a
{
    color:#ffffff;
    text-decoration: none;
    display: inline-block;
    margin-right: 5%;
    position: relative;
  left: 20%;
  padding: 5px;
  border-radius: 10px;
}

.logo img
{
    position: relative;
  left: 20%;
}

.onhover
{
    background-color: #c29859; 
}


.first-section
{
    position: relative;
}

.orangeareabottomvideo
{
background: rgb(194,152,89);
background: linear-gradient(360deg, rgba(194,152,89,1) 45%, rgba(0,0,0,0) 100%);
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 300px;
z-index: 10;
}

.thedots
{
  background-image: url("../images/dots.png");
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -505px;
  z-index: 10;
  position: relative;
}

.second-section
{
    position: relative;
    background-color: #c29859;
    width: 100%;
    height: 100%;
    margin-top: -234px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}

.secondsection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
   position:relative;
   top:12%;
}

.secondsectionone-text
{
    width: 46%;
    text-align: justify;
}

.secondsection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.secondsection-two img
{
    z-index: 12;
    position: relative;
    top:98px;
    right: 12%;
}

.bigtitle
{
font-family: gadugib;
color:#ffffff;
font-size:23px;
}

.smalltext
{
    color:#ffffff;
    font-size:18px;
}


.third-section
{
    position: relative;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}


.thirdsection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
}

.thirdsectiontwo-text
{
    width: 46%;
    text-align: justify;
}

.thirdsection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
    position:relative;
    top:8%;
}

.thirdsection-one img
{
    z-index: 12;
    position: relative;
    top:98px;
    left: 12%;
}

.bigtitle-thirdsection
{
font-family: gadugib;
color:#6d6e70;
font-size:23px;
text-align: justify;
}

.smalltext-thirdsection
{
    color:#6d6e70;
    line-height: 30px;
     font-size:18px;
}


.fourth-section
{
    position: relative;
    background-color:#000;
    width: 100%;
    height: auto;
}

.n2sheh-fourth-section
{
    background-image: url("../images/n2sheh-projects.png");
    width:100%;
    height:100%;
    position: relative;
     background-size: contain;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}

.fourthsection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
   position: relative;
  top: 43px;
}

.fourthsectionone-text
{
    width: 46%;
    text-align: justify;
}

.fourthsection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.fourthsection-two img
{
    z-index: 12;
    position: relative;
    top:98px;
    right: 12%;
}

.bigtitle
{
font-family: gadugib;
color:#ffffff;
font-size:23px;
}

.smalltext
{
    color:#ffffff;
     font-size:18px;
}



.five-section
{
    position: relative;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}


.fivesection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
}

.fivesectiontwo-text
{
    width: 41%;
    text-align: justify;
}

.fivesection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
  bottom: 10%;
}

.fivesection-one img
{
    z-index: 12;
    position: relative;
    bottom: 98px;
    left: 12%;
}

.bigtitle-fivesection
{
font-family: gadugib;
color:#6d6e70;
font-size:23px;
}

.smalltext-fivesection
{
    color:#6d6e70;
    line-height:30px;
     font-size:18px;
}


.six-section
{
    position: relative;
    background-color:#c29859;
    width: 100%;
    height: 738px;
}

.n2sheh-six-section
{
    background-image: url("../images/n2sheh-contact.png");
    width:100%;
    height:100%;
    background-size: cover;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}

.sixsection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
}

.sixsectionone-text
{
    width: 46%;
    text-align: justify;
}

.sixsection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.sixsection-two img
{
    z-index: 12;
    position: relative;
    bottom:98px;
    right: 12%;
}

.bigtitle
{
font-family: gadugib;
color:#ffffff;
font-size:23px;
}

.smalltext
{
    color:#ffffff;
    line-height: 30px;
     font-size:18px;
}


.socialmedia-area
{
    position: fixed;
    top: 45%;
    right: 0px;
    z-index: 15;
}

.first-small-head-ric
{
    background-color: #c29859;
    width: 80px;
    height: 15px;
  
}

.social-area
{
    background-color: #c29859;
    width: 80px;
    height: 100%;
 
    position: relative;
    top:5px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 25px;
    padding-bottom: 25px;
    display: flex;
}

.social-area img
{
    margin-top: 10px;
}

.second-small-head-ric
{
    background-color: #c29859;
    width: 80px;
    height: 15px;
   
    position: relative;
    top:10px
}

.seven-section
{
    background-image: url("../images/projects-background.jpg");
    width: 100%;
    height: 741px;
    background-size:cover;
    position:relative;
}


.n2sheh-projects
{
     background-image: url("../images/n2sheh-projects.png");
    width: 100%;
    height: 100%;
    text-align: center;
    background-size:cover;
    position:relative;
}

.title-project
{
    color:#c29859;
    font-family: "gadugib";
    font-size: 40px;
    text-transform: uppercase;
    display: inline-block;
    top: 7%;
    position: relative;
}

.the-slider-projects
{
    position: relative;
    top:12%;
}

.the-slider-projects img
{
    width: 850px;
}

.slider-prev
{
 background-image: url("../images/arrow-left.png");
 width: 64px;
 height: 64px;
 position: absolute;
 left:10%;
 top: 47%;
 z-index: 15;
 cursor: pointer;
}

.slider-next
{
    background-image: url("../images/arrow-right.png");
    width: 64px;
    height: 64px;
    right:10%;
    top: 47%;
    position: absolute;
    z-index: 15;
    cursor: pointer;
}


.bx-wrapper
{
    z-index: 10;
    position: relative;
    right: 31px;
}


.eight-section
{
    position: relative;
    background-color: #ffffff;
    width: 100%;
    height: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
}


.eightsection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
}

.eightsectiontwo-text
{
    width: 56%;
    text-align: justify;
    position: relative;
    right: 10%;
}

.eightsection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
}

.eightsection-one img
{
    z-index: 12;
    position: relative;
    top:98px;
    left: -6%;
}

.bigtitle-eightsection
{
font-family: gadugib;
color:#6d6e70;
font-size:23px;
}

.smalltext-eightsection
{
    color:#6d6e70;
    line-height:30px;
     font-size:18px;
}



.nine-section
{
    position: relative;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    display: flex;
    background-image: url("../images/ninesectionbackground.jpg");
    width: 100%;
    height: 850px;
    background-size: cover;
}

 .yellow-umbrella
          {
              display:none;
          }
          
          

.ninesection-one
{
   flex:1;
   justify-content: center;
   align-items: center;
   display: flex;
}

.ninesectionone-text
{
    width: 46%;
    text-align: justify;
}

.ninesection-two
{
    flex:1;
    justify-content: center;
    align-items: center;
    display: flex;
}


.smalltextnine
{
    color:#c29859;
    font-size:23px;
     font-size:18px;
     line-height:34px;
}

.fontbold
{
    font-family: "gadugib";
    font-size: 26px;
}

.font-regular
{
    font-family: "Ghawar-Regular";
}


.ten-section
{
    background-color:#c29859;
    width: 100%;
    height: 604px;
    background-size: cover;
    position: relative;
}

.n2sheh-contact
{
    background-image:url("../images/n2sheh-contact.png");
    width: 100%;
    height:100%;
    background-size:cover;
    position: relative;
    text-align: center;
}

.contactus-title
{
    color:#181818;
    font-family: "gadugib";
    font-size: 40px;
    display: inline-block;
    top:7%;
    position: relative;
}


.contactus-container
{
    flex-direction: row;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  width: 100%;
  height:91%;
}

.logoandaddress
{
flex: 1;
text-align: center;
}

.contactus-form
{
    flex: 1;
    
}

.containerforaddressandlogo
{
    text-align: left;
  display: inline-block;
}

.logo-footer img
{
    width: 180px;
}

.address {
    color:#181818;
    position: relative;
    left: 99px;
    font-size:20px;
}

.mailtoclass
{
    text-decoration: none;
    color:#181818;
}

.textboxclass
{
    background-color: #f3f3f3;
    color:#c29859;
    padding: 10px;
    font-family: "gadugi";
    border: none;
    width: 300px;
}

.textareaclass
{
    background-color: #f3f3f3;
    color:#c29859;
    padding: 10px;
    font-family: "gadugi";
    border: none;
    width: 300px;
    resize: none;
}

.submitbutton
{
    background-color: #181818;
    color:#c29859;
    font-family: "gadugib";
    border: none;
    width: 310px;
    border-radius: 15px;
    height: 35px;
}

.footer-bottom
{
    background-image: url("../images/tensectionfooterbackground.jpg");
    width: 100%;
    height: 120px;
    position:relative;
}

.n2sheh-bottom-footer
{
    background-image: url("../images/n2sheh-bottom-footer.png");
    width: 100%;
    height: 100%;
    background-size: cover;
       position:relative;
}


@media (min-width:900px) and (max-width:1370px) {
  
}


@media (max-width:900px) {
    .logo img {
        left: 0%;
        width: 103px;
        top: 13px;
      }
      .menu-header
      {
        flex-direction: column;
      }

      .menulinks {
        flex: 1;
        width: 100%;
        text-align: center;
      }

        .menulinks ul {
            list-style: none;
            display: inline-block;
            padding: 0px;
          }

          .menulinks a {
            display: inline-block;
            margin-right: 20px;
            position: relative;
            left: 0%;
            padding: 0px;
            font-size: 13px;
          }

          .menu-header {
            height: 15%;
          }

          .thedots {
            height: 322px;
            margin-top: -128px;
             background-size: contain;
          } 

          .orangeareabottomvideo {
            height: 88px;
          }


          .social-area {
            width: 41px;
            height: 100%;
            top: 5px;
            padding-top: 0px;
            padding-bottom: 7px;
          }

          .social-area img {
            width: 37px;
          }

          .second-small-head-ric {
            background-color: #c29859;
            width: 41px;
            height: 7px;
            opacity: 1;
            position: relative;
            top: 10px;
          }

          .first-small-head-ric {
            background-color: #c29859;
            width: 41px;
            height: 7px;
            opacity: 1;
          }


          .socialmedia-area {
            top: 26%;
          }


          .second-section {
            height: auto;
            margin-top: -234px;
            flex-direction: column;
          }

          .secondsectionone-text {
            width: 81%;
            margin-top: 196px;
          }

          .secondsection-two img {
            right:0%;
            width: 100%;
          }

          .third-section {
            flex-direction: column;
            height: auto;
          }

          .thirdsection-one img {
            z-index: 12;
            position: relative;
            top: 0px;
            left: 0%;
            margin-top: 165px;
             width: 100%;
          }

          .thirdsectiontwo-text {
            width: 79%;
            padding-top: 25px;
            padding-bottom: 25px;
          }

        



          .n2sheh-fourth-section
          {
              height: auto;
            flex-direction: column;
            background-position:right;
             background-size: cover;
          }
        
          .fourthsectionone-text {
            width: 79%;
            padding-top:72px;
            padding-bottom: 25px;
          }

          .fourthsection-two img {
            z-index: 12;
            position: relative;
            top: 0px;
            right: 0%;
             width: 100%;
          }

          .imagefadi
          {
            width: 682px;
          }


          .five-section {
            height: auto;
            flex-direction: column;
          }

          .fivesection-one img {
            z-index: 12;
            position: relative;
            bottom: 57px;
            left: 0%;
             width: 100%;
          }


          .fivesectiontwo-text {
            width: 79%;
            padding-bottom: 117px;
          }


          .resturant {
            background-attachment: fixed;
            background-position: center center;
          }

       
          
          .n2sheh-six-section
          {
               height: auto;
            flex-direction: column;
          }

          .sixsection-two img {
            bottom: -44px;
            right: 0%;
            width: 100%;
          }

          .sixsectionone-text {
            width: 79%;
            padding-top: 40px;
            padding-bottom: 25px;
          }
          
          .title-project
          {
            top:10%;
          }

          .bx-wrapper {
            right: 19px;
          }

          .the-slider-projects img
          {
            width: 100%;
          }

          .slider-next
          {
            top:122%;
          }

          .slider-prev
          {
            top:122%;
          }

          .eight-section {
            height: auto;
            flex-direction: column;
          }
          
          .eightsection-one img {
            z-index: 12;
            position: relative;
            top: 98px;
            left: 0%;
            width: 100%;
          }

          .eightsectiontwo-text {
            width: 79%;
            position: relative;
            right: 0%;
            padding-top: 25px;
            padding-bottom: 25px;
            margin-top: 107px;
          }

          .nine-section {
            position: relative;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            display: flex;
            background-image: url("../images/background-section-nine-mobile.jpg");
            width: 100%;
            height: auto;
            background-size: cover;
            background-repeat: no-repeat;
          }
          
          .yellow-umbrella
          {
              display:block;
          }

          .ninesectionone-text {
            width: 74%;
            padding-top: 25px;
            padding-bottom: 25px;
          }

          .smalltextnine {
            color: #c29859;
            font-size: 16px;
          }

          .contactus-container {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            display: flex;
            position: relative;
            width: 100%;
            height: auto;
          }

          .containerforaddressandlogo {
            text-align: center;
            display: inline-block;
            margin-top: 72px;
          }

          .address {
            left: 0px;
            margin-top: 50px;
          }


          .ten-section
          {
            height: auto;
          }

          .contactus-form {
            margin-top: 72px;
            margin-bottom: 72px;
          }

          .contactus-title
        {
            top:30px;
        }
        
        .video-demo {
  width: 100%;
  height: 88vh;
  object-fit: cover;
}
    
    
.seven-section
{
    background-image: url("../images/projects-background.jpg");
    width: 100%;
    height: 569px;
    background-size:cover;
    position:relative;
    margin-top:230px;
}


.n2sheh-projects
{
    background-position:right;
}



.n2sheh-bottom-footer
{
   background-position:right; 
}

.loader-inside
{
      background-position:right; 
}

.secondsection-one
{
    top:0%;
}

.thirdsection-two
{
    top:13px;
}

.fourthsection-one
{
     top: -26px;
}

.fivesection-two
{
    bottom:0%;
    top:27px;
}

}