@import url("asset/bootstrap-icons.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;200;300;400;500;600;700;800;900&display=swap');
/*-------------------------------------*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
p,a,h3,h4,.button-group.filters-button-group,button,h5,label,input::placeholder,h1,th{
  text-transform: capitalize;
}
:root {
  --color1: #57b33f;
  --color1dark: #459c30;
  --lighter: #F6F7FB;
  --light: #e6ebed;
  --white: #FFFFFF;
  --white2: rgba(255, 255, 255, 0.97);
  --black: #000000;
  --dark: #343439;
  --gray: #969696;
  --body: #787878;
  --midgray: #878787;
}
body {
  font-family: 'Noto Kufi Arabic', sans-serif;
  position: relative;
  width: 100%;
  height: 100%;
}
#bodywrapper{width: 100%;position: relative;min-height: 200vh;}
img,iframe {max-width:100%;}
/************* General classes ***************/
::selection {background-color: var(--light);color:var(--color1dark);}
html {scroll-behavior: smooth;}
*:focus {
  box-shadow: inherit !important;
}
a {
  color: var(--color1);
  text-decoration: none;
  outline: none;
  transition: all .3s;
}
a:focus,a:active {
  text-decoration: none;
  outline: none;
}
a:hover {color: var(--color1dark);}
.store-apps-list-item a {
  display: flex;
  padding: .5714285714rem 1.1428571429rem;
  background-color: #f0f1f2;
  border: 1px solid #dde3e8;
  border-radius: 10px;
  justify-content: center;
  height: 2.6428571429rem;
  text-align: center;
  width: 8.2857142857rem;
}
.mainbtn{
  color: var(--color1dark);
  background-color: var(--white);
  font-size: 1rem;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid var(--white);
  transition: all .3s ease;
}
.mainbtn:hover{
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--white);
  color: var(--white);
  background-color: var(--color1dark);
}
.mainbtn2{
  color: var(--white);
  background-color: var(--color1dark);
  font-size: 1rem;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid var(--color1dark);
  transition: all .3s ease;
}
.mainbtn2:hover{
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--color1dark);
  color: var(--color1dark);
  background-color: var(--white);
}

.hrlighter{
  background-color: var(--lighter);
  border-top: 2px solid;
  border-top-color: var(--lighter);
  opacity: 1;
  height:2px;width:1300px;max-width: 100%;display: block;margin: 20px auto;
}

.form-control:focus,.form-select:focus {border-color: #96bc9e;}
.nav-link {color: var(--color1);}
.nav-link:focus, .nav-link:hover {color: var(--color1dark);}

.ltrcontent{ direction: ltr;text-align: left;}

/***********************************/
/************ header ***************/
#header{position: relative;z-index: 99;}
#topheader{
  background-color: var(--dark);
  background-image: url("Images/ruler.png");
  background-position: top center;
  background-repeat: repeat-x;
  color: var(--light);
  padding: 30px 0 50px 0;
  font-size: .9rem;
  font-weight: 200;
  border-bottom: 1px solid var(--black);
}
#topheader a i{color: var(--color1);}
#topheader a{color: var(--light);}
#topheader a:hover{color: var(--color1);}
#topheader h3{font-size: 1.1rem;font-weight: 200;}
#topheader .topheadercontent{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#myheader {
  position: sticky;
  top: 0;left: 0;
  width: 100%;
  z-index: 99;
  margin-top: -40px;
  background-color: var(--color1);
  border-radius: 3px;
  border-bottom: 2px solid var(--color1dark);
  float: left;
}
#myheader .container-fluid {flex-direction: row-reverse;}
#myheader .navbar-collapse {flex-grow: inherit;}
#myheader .navbar {--bs-navbar-padding-y: 4px;}
#myheader .nav-link {
  padding: 0;
  margin: auto 20px;
  color: var(--light);
  font-size: .9rem;
  font-weight: 700;
  text-shadow: 1px 1px 1px var(--midgray);
  position: relative;
}
#myheader .nav-link i,#myheader .nav-link i {color: var(--lighter);}
#myheader .nav-link::before{
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  bottom: -15px;
  left: 0;
  border-radius: 10px;
  transition: width .3s;
  background-color: var(--color1dark);
}
#myheader .nav-link:hover::before,#myheader .nav-link.active::before {
  width: 100%;
}
#myheader .nav-link:hover,#myheader .nav-link.active {
  color: var(--white);
  /* background-color: var(--color1dark); */
}
#myheader .dropdown-menu{top: 150%;padding: 0;}
#myheader .dropdown-menu .dropdown-item{
  font-size: .9rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px;
}
#logo img{height: 60px;}
.navbar-brand img{height: 60px;}


/****************************************************/
/*****************slider***********************/
#indexslider{
  position: relative;
  background-color: rgba(0, 0, 0, 0.4);
  background-image: url("Images/saudi-arabia.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  border-bottom: 6px solid var(--color1);
}

#indexslider video{
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
#sliderdata{
  padding: 200px 0;
  font-size: 1rem;
  color: var(--light);
}
#sliderdata h3{color: var(--white);font-size: 3rem;font-weight: 700;margin-bottom: 20px;text-shadow: 1px 1px 1px #000;}
#sliderdata h3 span{color: var(--color1);}
#sliderdata p{text-shadow: 1px 1px 1px #000;line-height: 2;}
#sliderdata .mainbtn{min-width: 260px;text-align: center;display: inline-block;padding: 15px 0;}

.play-btn-box {
  border: 2px rgba(255, 255, 255, 0.11) solid;
  border-radius: 50%;
  width: 180px;
  height: 180px;
  margin: 0px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.play-btn-line1 {
  border: 2px rgba(255, 255, 255, 0.451) solid;
  border-radius: 50%;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right-color: transparent;
}
.play-btn-line2 {
  border: 2px rgba(255, 255, 255, 0.451) solid;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right-color: transparent;
}
.play-button {
  background-color: rgb(255, 255, 255);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  border-radius: 50%;
  color: var(--color1);
  transition: all .4s;
}
.play-button:hover {box-shadow: 0 0 20px #FFF;}
#line1 {animation: rotation 4s infinite linear;}
@keyframes rotation {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}
#line2 {animation: rotation1 3s infinite linear;}
@keyframes rotation1 {
  from {transform: rotate(0deg);}
  to {transform: rotate(359deg);}
}


/****************************************************/
/***************indexservices*************************/
#indexservices{
  background-color: var(--white2);
  position: relative;
  padding-top: 50px;
  /* background-clip: content-box; */
  /* background-clip: padding-box; */
  /* background-clip: border-box; */
}
#indexservices h4{font-weight: 300;font-size: 1.3rem;color: var(--color1dark);}
#indexservices h5{font-weight: 600;font-size: 1.8rem;max-width: 700px;line-height: 1.4;color: var(--dark);}
#indexservices .swiper {
  max-height: 400px;
  text-align: center;
}
#indexservices .swiper-pagination-bullet {
  width: 8px;height: 8px;margin: 0 2px;
  border-radius: 3px;
  transition: all .3s;
}
#indexservices .swiper-pagination-bullet-active {
  background: var(--color1dark);width: 15px;
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0px;
}
#indexservices img {display: block;}
#indexservices .swiper h3 {font-size: 1.1rem;margin-top: 10px;color: var(--dark);transition: all .4s;}
#indexservices .swiper-slide img{transition: all .4s;}
#indexservices .swiper-slide:hover img{transform: scale(.9);}
#indexservices .swiper-slide:hover h3 {color: var(--color1dark);}

/*********/
#indexstatisticswrapper{
  position: relative;
  width: 100%;
  overflow: hidden;
}
#indexstatistics{
  margin: 0 auto;
  position: relative;
  /*-----*/
  max-width: 1320px;
  width: 100%;
}
#indexstatistics::before,#indexstatistics::after{
  content: "";
  position: absolute;
  top: 0;left: 100%;
  height: 100%;
  width: 100%;
  background-color: var(--white2);
  z-index: -1;
}
#indexstatistics::after{left: inherit;right: 100%;}
#indexstatisticscontent{
  background-color: rgba(70, 156, 48, 0.6);
  color: var(--white);
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 30px;
  font-size: 1.6rem;
  font-weight: 900;
  background-image: url("Images/ruler2.png");
  background-position: bottom center;
  background-repeat: repeat-x;
  text-align: center;
  text-shadow: 1px 1px 2px #000;
  border: 3px solid var(--color1dark);
}
#indexstatisticscontent b{display: block;font-weight: 400;font-size: 2.5rem;}

/****************************************************/
/************servicesproviders**************************/
#servicesproviders{
  background-color: var(--white2);
  position: relative;
  padding: 40px 0 10px 0;
}
.maintitle{text-align: center;}
.maintitle h4{font-weight: 300;font-size: 1.2rem;color: var(--color1dark);margin-bottom: 20px;}
.maintitle h5{font-weight: 600;font-size: 1.4rem;color: var(--dark);}

.comp-item{
  position: relative;
  display: block;
  width: 23%;
  color: var(--black);
  margin: 10px 1%;
}
.comp-poster{position: relative;width: 100%;overflow: hidden;border-radius: 12px 12px 0 0;}
.comp-poster h6{
  position: absolute;top: 10px;left: 0;background-color: rgba(255, 255, 255, 0.8);
  padding: 6px;font-size: .8rem;color: var(--black);border-radius: 0 5px 5px 0;
}
.comp-item .comp-poster img,.comp-item p,.comp-item h4{transition: all .5s ease;}
.comp-item:hover .comp-poster img{transform: scale(1.2);}
.compdata{
  width: 86%;
  background-color: rgba(255, 255, 255, 0.92);
  margin: -55px auto 20px auto;
  position: relative;
  z-index: 2;
  padding: 10px;
  border-radius: 12px;
}
.compdata::after{
  position: absolute;bottom: 0;left: 0;width: 100%;height: 100%;
  content: "";z-index: -1;height: 0;transition: all .7s ease;
  background-color: var(--color1);
}
.comp-item:hover .compdata::after{height: 100%;border-radius: 12px;}
.comp-item:hover .compdata p,.comp-item:hover .compdata h4{color: var(--white);}
.compdata p{font-size: .85rem;color: var(--body);margin: 0;padding: 0;}
.comp-logo{display: flex;align-items: center;margin-bottom: 10px;}
.comp-logo img{height: 40px;margin-right: 10px;}
.comp-logo h4{font-size: 1rem;font-weight: 900;color: var(--color1dark);}

.companiesfilter{
 min-height: 600px;
}
.filters-button-group{
  margin: 15px 0 20px 0;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border: 1px solid var(--light);
}
.categorybtn{
  cursor: pointer;
  color: var(--midgray);
  font-weight: 600;
  transition: all .3s;
}
.categorybtn i{font-size: 1.2rem;}
.categorybtn.is-checked{
  color: var(--color1dark);
}

/****************************************************/
/*****************headingarea*************************/
#headingarea{
  /* min-height: 200px; */
  background: #000 url("Images/banner.jpg") no-repeat bottom center;
  position: relative;
}
#headingarea::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background-image: url("Images/border01.png");
}
#headingareadata{
  padding-top: 90px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#headingareadata h3{margin-bottom: 50px;font-size: 3rem;color: var(--white);font-weight: 900;}
#headingareadata #headerbreadcrumb{background-color: var(--color1dark);padding: 10px 40px;border-radius: 20px;z-index: 2;}
#headingareadata #headerbreadcrumb .breadcrumb {
  margin-bottom: 0;
  --bs-breadcrumb-divider-color: #d6d6d6;
  --bs-breadcrumb-item-active-color: #bddfb8;
}
#headingareadata #headerbreadcrumb .breadcrumb a{color: var(--white);}
/****************************************************/
/******************contactpage***************************/
#contactpage{position: relative;}
#contactpage form input,#contactpage form textarea{
  width: 100%;
  padding: 10px;
  font-size: 1rem;
  color: var(--body);
  text-align: right;
  border: 2px solid #d8d8d8;
  border-radius: 3px;
}
#contactpage form input:focus,#contactpage form textarea:focus{
  border: 2px solid var(--gray);
  outline: none;
  box-shadow: none;
}
#contactpage .formarea h4{font-size: 2.2rem;padding: 10px 0;font-weight: bold;line-height: 1.5;}
.formsidebar{
  background-color: var(--dark);
  color: var(--white);
  font-size: .9rem;
  border-radius: 3px;
}
.formsidebarheader{
  background-color: var(--color1);
  padding: 20px;
  line-height: 2;
  border-radius: 3px;
}
.formsidebarheader h3{font-size: 1.3rem;font-weight: bold;}
.formsidebarheader p{font-size: .85rem;color: var(--light);}
.formsidebarbody{
  padding: 40px 20px;
  line-height: 2;
}
.formsidebarbody .contactli{
  display: flex;
  margin-bottom: 10px;
}
.formsidebarbody .contactli i{
  font-size: 1.2rem;
  margin: 0;margin-right: 10px;padding: 0;
  color: var(--color1);
}
/* .formsidebarbody .contactli .contactliicon{
  font-size: 1rem;
  margin: 0;margin-left: 10px;padding: 0;
  color: #FFF;
  background-color: var(--color1dark);
  width: 40px;height: 40px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
} */
.formsidebarbody b{display: block;font-size: 1rem;}
.formsidebarbody span{color: var(--gray);}
/****************************************************/
/******************servicespage***********************/
#servicespage{position: relative;}
#allservices{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#allservices .comp-item {width: 31.33%;}
#servicespage #sortarea {display: flex;justify-content: space-between;align-items: center;}
#servicespage #sortarea select {max-width: 300px;}
#servicespage #sortarea option {font-weight: .8rem;}
.servicessidebar h4{font-size: 1.1rem;font-weight: bold;color: var(--dark);}
.pagination {
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 253, 17, 0.25);
  --bs-pagination-active-bg: var(--color1);
  --bs-pagination-active-border-color: var(--color1);
}
.page-link {color: var(--color1);}
.page-link:hover {color: var(--color1dark);}

/****************************************************/
/******************servicedetailspage***********************/
#servicedetailspage{position: relative;}

#companyslider .swiper {
  width: 100%;
  height: 100%;
}
#companyslider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
#companyslider .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.swiper-button-next, .swiper-button-prev {
  color: var(--swiper-navigation-color,var(--color1dark));
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 2rem;
  opacity: .3;
  font-weight: bolder;
  transition: all .4s;
}
.swiper-button-next:hover::after, .swiper-button-prev:hover::after {
  opacity: .8;
}
.swiper-pagination-bullet-active {
  background: var(--swiper-pagination-color,var(--color1dark));
}
/**/
.servicedetailssidebar{
  border: 1px solid var(--light);
  border-radius: 10px;
  padding: 20px 30px;
}
.compnamerating{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.compnameimg{
  display: flex;
  align-items: center;
  font-size: .8rem;
}
.compnameimg h6{font-size: .8rem;margin: 0;padding: 0;}
.compimg{
  width: 40px;height: 40px;
  border-radius: 50%;
  border: 1px solid var(--light);
  padding: 5px;
  overflow: hidden;
  margin-left: 8px;
}
.siderating{color: var(--body);font-size: .8rem;}
.siderating i{font-size: .9rem;}
.siderating span{color: var(--dark);font-size: .9rem;}
.compserv{position: relative;}
.compserv h4{
  font-size: 1.4rem;font-weight: bold;
  color: var(--color1dark);
  border-bottom: 1px solid var(--light);
  display: inline-block;
  padding-bottom: 8px;margin-bottom: 15px;
}
.compserv ul{list-style: none;color: var(--dark);font-size: .95rem;}
.compserv li::before{
  font-family: "bootstrap-icons";
  content:"\F26B";
  margin-left: 7px;
  color: var(--color1);
  transition: all .3s ease;
}
.servicedetailssidebar .mainbtn2{
  width: 100%;margin-top: 10px;padding: 10px;
}
.servicedetailssidebar .mainbtn2:hover{
  background-color: var(--color1dark);color:var(--white);
  border-color: var(--light);
}
#contactserviceModel textarea{font-size: .9rem;}
#servicedetailspage .tab-content{padding: 30px 10px;}
.ratingcomments{font-size: .9rem;color: var(--body);}
.ratingcomments h6{font-size: 1rem;color: var(--dark);}
.ratingcomments select{width: 200px;}

/****************************************************/
/**************pricingpage**************************/
#pricingpage{position: relative;}
.pricingblock h5{font-weight: bold;font-size: 1.2rem;margin-bottom: 20px;}
.pricingblock .pricenumber{font-weight: bolder;font-size: 2rem;margin-bottom: 20px;}
.pricingblock{
  padding: 50px;
  text-align: center;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
  line-height: 2rem;
  color: var(--black);
  text-shadow: 1px 1px 2px #FFF;
}
.pricingblock::before{
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;left: 0;
  width: 100%;height: 100%;
  z-index: -1;
  /* opacity: .6; */
  filter: blur(1px);
}
.pricingblock.pricing002{border-radius: 40px;}
.pricingblock.pricing001:before{background-image: url('Images/construction/01.jpg');}
.pricingblock.pricing002:before{background-image: url('Images/construction/02.jpg');}
.pricingblock.pricing003:before{background-image: url('Images/construction/03.jpg');}
.pricingblock ul{list-style: none;padding: 0;margin: 0;}
.pricingblock li.trueicon:before,.pricingblock li.falseicon:before{
  font-family: "bootstrap-icons";
  content:"\F26E";
  font-weight: bold;
  margin-left: 5px;
  font-size: 1.4rem;
  display: inline-block;
  transform: translateY(5px);
  color: var(--color1);
}
.pricingblock li.falseicon:before{content:"\F62A";color: red;}

/****************************************************/
/****************************************************/


/****************************************************/
/****************calltoaction****************************/
#calltoaction{
  padding: 40px 0;
  text-align: center;
  background-color: var(--color1);
  background-image: url("Images/pattern.png");
  background-repeat: repeat;
}
.calltoaction h4{color: var(--white);font-size: 1.2rem;font-weight: 900;margin: 0;padding: 0;}
.calltoaction .mainbtn{font-weight: 800;}
.calltoaction{
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}


/****************************************************/
/**************Footer**********************/
#footer{
  background: var(--black) url("Images/footer-bg.jpg") no-repeat top center;
  color: var(--gray);
  font-size: .9rem;
}

#topfooter{
  padding: 40px 0;
}

#footer h3{
  margin-bottom: 30px;
  color: var(--light);
  font-size: 1.3rem;
  position: relative;
  display: inline-block;
}
#footer h3::after{
  content: "";
  position: absolute;
  width: 0%;
  height: 1px;
  bottom: -10px;
  left: 0;
  border-radius: 10px;
  background-color: var(--color1);
  width: 60%;

}
.footerlogo{
  /* background-color: rgba(255, 255, 255, 0.5);padding: 5px; */
  /* border-radius: 3px;display: inline-block; */
}
.footerlogo img{height: 90px;}
#footer ul{list-style: none;margin: 0;padding: 0;}
#footer li{margin-bottom: 6px;}
#footer li::before{
  font-family: "bootstrap-icons";
  content:"\F22D";
  font-size: .8rem;
  margin-right: 7px;
  transition: all .3s ease;
  transform: rotate(180deg);
  display: inline-block;
}
#footer .footercontact{margin-bottom: 10px;display: flex;}
#footer .footercontact i{margin-right: 6px;}
#footer a{
  color: var(--gray);
}
#footer a:hover{
  color: var(--color1);
  text-shadow:  1px 1px 1px var(--black);
}

#socialmediafooter a{
  text-decoration: none;
  /* padding: 3px 8px; */
  /* background-color: rgba(207, 207, 207, 0.2); */
  color: var(--color1);
  margin-right: 20px;
  opacity: .5;
  transition: all .4s ease;
}
#socialmediafooter a i{font-size: 1rem;}
#socialmediafooter a:hover{opacity: 1;}

#copyrights{
  padding: 15px 0 30px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  border-top: 1px solid rgba(150, 150, 150, 0.3);
  color: var(--gray);
}







/****************************************************/
/****************************************************/
@media only screen and (max-width: 992px) {
  #sloganheader{display: none;}
  #topheader .ltrcontent span:last-child{display: none;}
  #sliderdata {padding: 90px 0;text-align: center;}
  #footer h3 {margin-top: 30px;}
  #myheader .nav-link {margin: 0;margin-bottom: 12px;padding: 0;padding-bottom: 6px;border-bottom: 1px solid var(--color1dark);}
  #myheader .nav-link:hover::before, #myheader .nav-link.active::before {display: none;}
  #service-man-img{display: none;}
  #indexservices {padding-bottom: 20px;}
  #copyrights {flex-direction: column;}
  .filters-button-group {flex-wrap: wrap;justify-content: stretch;}
  .comp-item {width: 31.33%;}
  .pricingblock.pricing002 {border-radius: 4px;}
}

@media only screen and (max-width: 768px) {
  #indexservices h5 {font-size: 1.3rem;}
  #indexservices img {width: 94%;margin: auto;}
  #topfooter {padding: 40px 20px;}
  #topfooter .col-md-6{border-bottom: 1px solid rgba(187, 187, 187, 0.3);padding-bottom: 20px;}
  #topfooter .col-md-6:last-child{border-bottom: none;}
  .comp-item {width: 48%;}
}









/*--Title separators--*/
.mm-separator-outer {overflow:hidden;margin-bottom: 20px;}
.mm-separator {
	display:inline-block;
	height:3px;
	width:50px;
	position:relative;
}
.mm-separator .separator-left,
.mm-separator .separator-right {
	position:absolute;
	top:50%;
	width:70px;
	height:2px;
	margin-top:-1px;
}
.mm-separator .separator-left{left:-80px;}
.mm-separator .separator-right{right:-80px;}
.mm-separator.style-liner {width:20px;height:4px;}
.mm-separator.style-square {
	width:10px;height:10px;
	background-color:transparent;
	border-width:3px;
	border-style:solid;
	border-color:#2d3239;
}
.mm-separator.style-square .separator-left,
.mm-separator.style-square .separator-right {
	height:3px;background-color: var(--color1);
}
.mm-separator.style-square.has-bg {border-color:#fff;}



/***********************************************************************/
/***********************************************************************/

#registerpage{position: relative;}
#registerpage::before{
  position: absolute;top: 10px;left: 0;width: 100%;height: 100%;content: "";opacity: .02;z-index: -1;
  background-image: url("Images/construction/construction03.jpg");background-position: bottom center;
  background-attachment: fixed;background-size: cover;border-top: 10px solid rgba(255, 255, 255, 0.4);
}
#registerpage form input:not([type='file'],[type='radio'],[type='checkbox']),#registerpage form textarea{
  width: 100%;
  padding: 5px 10px;
  font-size: .9rem;
  color: var(--body);
  text-align: right;
  border: 2px solid #d4d4d4;
  border-radius: 3px;
}
#registerpage form input:not([type='file']):focus,#registerpage form textarea:focus{
  border: 2px solid var(--gray);
  outline: none;
  box-shadow: none;
}
#registerpage form input,#registerpage form label,#registerpage form select{}
#registerpage form label{border-left: none;}
.form-check-input:checked {background-color: #57b33f;}
.accounttypewrapper label{border: none !important;}
#registerpage .formarea h4{font-size: 2.2rem;padding: 10px 0;font-weight: bold;line-height: 1.5;}

/************profilepage******************/
#profilepage {
  position: relative;
  padding: 80px 0;
  min-height: 500px;
}
.nav-pills .nav-link {
  background-color: rgba(125, 125, 125, 0.1);
  border-radius: 0;
  color: var(--dark);
}
.nav-pills .nav-link.active {
  color: var(--white);
  background-color: var(--color1dark);
}

/****************/

.dataTables_wrapper {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  padding: 10px;
}
.dataTables_wrapper .d-flex.justify-content-around{
  width: auto !important;text-align: center;
  gap: 10px;
  justify-content: center !important;
}
.dataTables_wrapper tr th,.dataTables_wrapper tr td{
  vertical-align: middle;
}

.orangeBtn {
  color: var(--white);
  background-color: #daa13a;
  font-size: 1rem;
  padding: 8px 20px;
  text-decoration: none;
  border-radius: 3px;
  border: 2px solid #eaa90d;
  transition: all .3s ease;
}

.selectAccountType {
  padding:15px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
  border-radius: 12px;
  border: 1px solid #d0d0d0;
  background: #fff;
  color: #50B230;
  font-weight: 700;
  min-width: 18rem;
}

.selectAccountType.activeTab {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  background-color: #04AA6D; /* Green */
  border:0px;
  color: white;
}

.selectAccountType:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
  background-color: #04AA6D; /* Green */
  border:0px;
  color: white;
}

#CorporationData input:focus:invalid {
  border-color: red !important;
}

/* .dataTables_wrapper tr th:last-child,.dataTables_wrapper tr td:last-child{
  text-align: center !important;

} */
@media all and (min-width:569px) and (max-width: 959px) {
  #myheader .nav-link{
    font-size: .8rem;
  }
}

@media only screen and (max-width: 600px) {
  #myheader .nav-link{
    font-size: .8rem;
  }
}
table{
    width: 100% !important;
}
table thead th, table td{
    text-align: center !important
}
.select2-container{
    width: 100% !important
}
.select2-results__options,.select2-container--default .select2-selection--multiple{
    direction: rtl
}
#myheader .nav-link
{
    padding-bottom: 2px;
    margin-bottom: 2px!important;
    margin-top: 6px!important;}


     /* CSS used here will be applied after bootstrap.css */

     /*.dropdown {*/
     /*    display:inline-block;*/
     /*    margin-left:20px;*/
     /*    padding:10px;*/
     /*}*/


 .glyphicon-bell {

     font-size:1.5rem;
 }

.notifications{
    min-width:420px;
}

.notifications-wrapper {
    overflow:auto;
    max-height:550px;
    border: 2px solid #fff4f4;
    border-radius: 25px;
    background-color: white;
    margin-bottom: 5px;
}


.header-menu-title {
    color:whitesmoke;
    font-size:1.1rem;
    display:inline-block;
}

.glyphicon-circle-arrow-right {
    margin-left:10px;
}


.notification-heading, .notification-footer  {
    padding:2px 10px;
}


.header-dropdown-menu.divider {
    margin:5px 0;
}

.header-item-title {

    font-size:1rem;
    color:#000;

}

.notifications a.header-content {
    text-decoration:none;
    background:#ccc;

}
.notification-item p {
    color:black;
}
.notification-item {
    padding:10px;
    margin:5px;
    background:whitesmoke;
    border-radius:4px;
}
.notification-footer{
    text-decoration: none;

}
.notification-footer:hover{
    background-color: black;
    cursor: pointer;

}

 body{
     font-family: 'Ubuntu', sans-serif !important;
 }

 #OrdersAllProjects table{
  width:100% !important;
  text-align:center !important;
}

#profilepage .justify-content-around{margin:auto}
/*input{*/
/*    text-align: left !important*/
/*}*/