@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&subset=latin,latin-ext');
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
body {
    background-color:#fff;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;font-size:14px; line-height:30px ; color:#313131; 
}
a:focus{outline:none}
a{background:0 0; font-size:12px;transition: all 0.4s ease 0s;  font-family:'Open Sans', sans-serif;font-weight:normal; color:#313131; text-decoration:none; line-height:25px   }
a:visited{color:#313131; text-decoration:none;  }
a:active,a:hover{ outline:0; color:#44c3cf; text-decoration:none ;transition: all 0.3s ease 0s; cursor:pointer } /*  transition: all 0.4s ease 0s;*/
img{border:0}
hr {
    clear: both;
    border-color: #e4e4ec;
    margin:10px 0;
    border: 0;
    border-top: 1px solid #eeeeee;
}
table {
    border-collapse: collapse;
    border-spacing: 0; margin:0; padding:0
}
p{padding:0; margin:0}
.clear {clear:both}




.maincontent{width:100%; min-width:100%; margin:0 auto}

.mobilecontent{padding:15px}







.topmenu{width:100%; }
.topmenu a,.topmenu a:visited{color:#fff; font-size:14px}
.topmenu a:hover{color:#ffffff90}
.topmenu ul{list-style-type:none; margin:0;padding:0;  text-transform:uppercase; margin-left:30px; margin-top:30px}
.topmenu ul li{margin:5px 0}
.inlogo{width:100%; margin:100px auto; text-align:center}
.inlogo img{width:80%}




.services{width:100%; background-color:#9b793c; padding:20px 0}
.header{margin-bottom:20px}
.header h3{font-size:26px; font-weight:700; text-transform:uppercase; color:#fff; line-height:46px}

.services p{width:100%; color:#fff; font-weight:300}






.howwe{width:100%; background-color:#434343; padding:20px 0; color:#fff}
.aboutleft {
    display: block;
    vertical-align: top;
    width: 100%;
    position: relative;
}
.aboutright {
    display: block;
    vertical-align: top;
    width: 100%;
    height:300px;
    padding-left: 0;
    background: url(images/aboutimage.jpg) 100% 0 no-repeat ;
    background-repeat: no-repeat;
    background-size:100%;
    margin-top:30px
}

.workddiv{
    background-color:#0e793d; padding:20px
}


.text-slide{color:#9b793c; display:none}
.text-slide h1{font-size:30px; padding-top:10px}






.serviceheader{width:100%; padding:20px 20px;}

.serviceheader img{width:200px}

.closeback{
    position: fixed;
    right: 20px;
    top: 40px;
}
.closeback i {
    font-size: 35px;
}

.servicetitle{font-size:30px; text-align:center; text-transform:uppercase; padding:50px 0; font-weight:700}
.serviceitem {
    width: 100%;
    margin: 10px 0;
    display: inline-block;
    vertical-align: top;
    height: 300px;
}























.gallery {
	 --size: 22dvw;
	 display: grid;
	 grid-template-columns: repeat(4, var(--size));
	 grid-auto-rows: var(--size);
	 margin-bottom: var(--size);
	 place-items: start center;
	 gap: 5px;
}
 .gallery:has(:hover) img:not(:hover), .gallery:has(:focus) img:not(:focus) {
	/* filter: brightness(0.5) contrast(0.5);
	*/
	 transition: 0.5s;
}
 .gallery img {
	 object-fit: cover;
	 width: calc(var(--size) * 2);
	 height: calc(var(--size) * 2);
	 clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
	 grid-column: auto / span 2;
	 border-radius: 5px;
}
 .gallery img:nth-child(3n+1) {
	 grid-column: 2 / span 2;
}
  .gallery img:nth-child(8) {
	 grid-column: auto / span 2;
}
 .gallery img:hover, .gallery img:focus {
	/* transform:scale(1.3)!important;
	*/
	 z-index: 1;
	 transition: 0.5s !important;
	 clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
 .gallery img:focus {
	/*outline: 1px dashed black;
	 outline-offset: -5px;
	*/
}
 




 
.swiper-slide{position:relative; width:100%; height:399px!important;z-index:1000}
.swipertitle{position:absolute; bottom:0; padding:30px; color:#fff; font-size:20px; font-weight:400; z-index:1000}
.swipertitle a{color:#fff;font-size:16px; font-weight:700;}
.swipertitle span {color:#ccc;font-size:13px; font-weight:300; line-height:24px; padding-top:10px; display:block}
.swipertitle a hr{border-color:#fff; margin-bottom:0}
element {
}
.swiper-slide .slide__gradient {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 11;
  width: 100%;
  height: 60%;
  -webkit-transition: all ease .6s;
  -moz-transition: all ease .6s;
  -o-transition: all ease .6s;
  transition: all ease .6s;
  opacity: 1;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 19%, rgba(0,0,0,0) 20%, rgba(0,0,0,0.54) 40%, rgba(0,0,0,0.65) 50%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(19%, rgba(0, 0, 0, 0)), color-stop(20%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0.54)), color-stop(50%, rgba(0, 0, 0, 0.65)));
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.54) 40%, rgba(0, 0, 0, 0.65) 50%);
  background: -o-linear-gradient(top, rgba(0,0,0,0) 19%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.54) 40%,rgba(0,0,0,0.65) 50%);
  background: -ms-linear-gradient(top, rgba(0,0,0,0) 19%,rgba(0,0,0,0) 20%,rgba(0,0,0,0.54) 40%,rgba(0,0,0,0.65) 50%);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0.6) 70%);
  border-radius:0 0 7px 7px
}



















 

.footer{
    width: 100%;
    background-color: #0e793d;
    padding: 50px 0 10px 0;
    line-height: 40px;
    color: #fff;
    background-image: url(images/footerpattern.png); 
    background-position: 95% 40%;
    background-size: 10%;
    background-repeat:no-repeat
}


.footer ul{padding:0; margin:0; list-style-type:none;}
.footer ul li{  color:#ffffff; font-size:16px; font-weight:200; text-align:center; margin-bottom:20px
            /*    border-bottom:solid 1px rgba(206,180,106,.3);*/
}
.footer ul li i{
    margin-right: 10px;
  color: rgb(206,180,106);
  display: block;
  font-size: 18px;
  margin-bottom: :10px;
  padding-bottom: 10px;
}
.footerlogo{text-align:center; margin:40px 0}
.footerlogo img{width:250px; display:inline-block; margin-bottom:20px}
.footerlogo i{font-size:22px; margin:10px 5px; color:rgb(206,180,106)}

.copyright {
    margin-top: 20px;
    font-size: 13px;
    font-family: Poppins;
    text-align: left;
    color: rgba(206,180,106,1);
    font-weight:300; letter-spacing:1px; text-transform:uppercase;
    border-top:solid 1px rgba(206,180,106,.3);
    text-align:center
}
.copyright a{color:#fff; font-size: 12px;font-weight:300;}


.logincontent{background-color:#fff; width:80dvw; margin:100px auto; color:#000; text-align:center}

.headerlogologin{width:100%;}
.headerlogologin img{width:50%; margin:30px auto}
.loginmain{width:80%; margin:30px auto; text-align:left}
.loginmain label{display:block; margin-top:15px }
.submitButton{padding-top:20px}








.image {
    display: block;
    overflow: hidden;
    position: relative;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    transition: none;  height:100%;
    border-radius:7px
}
.image img {
  position : absolute;
 -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  top: 0px;
  right: 0px;
  object-fit: cover; width:100%; height:100%;
}


.image:hover img {
    /*opacity: 1;
    -webkit-animation: flash 1s;
    animation: flash 1s;*/
     -webkit-transform: scale(1.1);
     transform: scale(1.1);
       -moz-transition: all 0.7s;
    -webkit-transition: all 0.7s;
    transition: all 0.7s;

}




@-webkit-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@-moz-keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
@keyframes ani-mouse {
  0% {
  opacity: 1;
  top: 29%;
  }
  15% {
  opacity: 1;
  top: 50%;
  }
  50% {
  opacity: 0;
  top: 50%;
  }
  100% {
  opacity: 0;
  top: 29%;
  }
}
 .scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  margin-top:60px;
  bottom:15px
}
.scroll-btn > * {
  display: inline-block;
  line-height: 18px;
  font-size: 13px;
  font-weight: normal;
  color: #7f8c8d;
  color: #ffffff;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: 2px;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *.active {
  color: #ffffff;
}
.scroll-btn > *:hover,
.scroll-btn > *:focus,
.scroll-btn > *:active,
.scroll-btn > *.active {
  opacity: 0.8;
  filter: alpha(opacity=80);
}
.scroll-btn .mouse {
  position: relative;
  display: block;
  width: 35px;
  height: 55px;
  margin: 0 auto 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 3px solid white;
  border-radius: 23px;
}
    .scroll-btn .mouse > * {
        position: absolute;
        display: block;
        top: 29%;
        left: 50%;
        width: 8px;
        height: 8px;
        margin: -4px 0 0 -4px;
        background: white;
        border-radius: 50%;
        -webkit-animation: ani-mouse 2.5s linear infinite;
        -moz-animation: ani-mouse 2.5s linear infinite;
        animation: ani-mouse 2.5s linear infinite;
    }