/*
	Theme Name: ما هو اسم القالب؟
	Theme URI: https://www.elnooronline.com/
	Author: تم تصميم وتطوير بواسطة شركة النور أون لاين
	Author URI: https://www.elnooronline.com/
*/
/* start part basic */
@import url(assets/css/helper-en.css);
@import url(assets/css/all.min.css);
@import url(assets/css/bootstrap.css);
@import url(assets/css/aos.css);
@import url(assets/css/slick-theme.css);
@import url(assets/css/slick.css);
@import url(assets/css/animate.min.css);
@import url(assets/css/splide.min.css);
@import url(assets/css/magnific-popup.css);
@font-face {
  font-family: arabic;
  src: url(assets/FONT/GE_SS_Two_Medium.otf);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
a {
  color: var(--text) ;
  text-decoration: none !important;
}
body {
  font-family: "Cairo", sans-serif;
  overflow-x: hidden !important;
  -webkit-box-sizing:0;
  box-sizing:0;
  padding:0;
  margin:0;
  direction: ltr;
}
:root {
  --title: rgb(172, 172, 172);
  --prime: rgba(216, 180, 143, 1);
  --second: rgb(148, 117, 86) ;
  --third: rgba(21, 51, 48, 1);
  --sodark: rgb(22, 68, 63);
  --shadow:0px 0px 5px 5px rgba(134, 134, 134, 0.13);
  --border: transparent;
--bg:rgb(20, 20, 20);
--text: white;
}
.backgroun{
background-color: var(--bg);
color:var(--text);
}


p::selection,
h1::selection,
h2::selection,
h4::selection,
h5::selection,
h6::selection {
  background-color: var(--prime);
  color: white;
}
p,
h1,
h2,
h4,
h5,
h6 {
  margin: 0px;
  padding: 0px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}
ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
input:focus {
  outline: none;
}
.load {
  position: absolute;
  right: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: white;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load img {
  width: 20%;
  height: 20%;
}

.loaderlodging {
  height: 100vh;
  z-index: 10000;
  transition: 0.8s;
  background-color: var(--third) !important;
  top: 0px;
}
.loaderlodging__body {
  overflow: hidden;
}
.loaderlodging img {
  width: 250px !important;
  height: 80px !important;
  object-fit: contain;
}
.loaderlodging__body.afterloading {
  overflow: inherit;
}
.loaderlodging__body {
  overflow: hidden;
}
.loaderlodging.remove {
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #cecece;
  border-bottom-color: var(--prime);
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}
.loaderlodging img {
  width: 100px;
  height: 100px;
}
.btn-secondary {
  background-color: var(--third);
  transition: 1s;
}
.btn-secondary:hover {
  background-color: var(--third);
  opacity: 0.8;
}
.btn-outline-secondary {
  border: var(--third) solid 1px;
  color: var(--third);
  transition: 1s;
}
.btn-outline-secondary:hover {
  border: var(--third) solid 1px;
  background-color: var(--third);
  color: white;
}
.text-secondary {
  color: var(--third) !important;
}
button:focus{
  outline: none;
}
.shadow{
  border-radius: 10px;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
	}
    100% {
        transform: rotate(-360deg);
	}
}
.title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-bottom: 40px;
  text-wrap: nowrap;
}
.title img {
  width: 45px;
  height: 45px;
  margin-right: 20px;
}
.btn-primary{
    background-color:var(--prime) ;
    color: white;
    border: var(--prime);
  }
  .btn-primary:hover{
    background-color:var(--second) ;
  }
  .btn-outline-primary{
    background-color:white ;
    color: var(--prime);
    border: var(--prime) solid 1px;
  }
  .btn-outline-primary:hover{
    background-color:var(--prime) ;
    color: white;
    border: var(--prime) solid 1px;
  }
  .text-primary{
    color: var(--prime) !important;
  }
  .btn-outline-primary{
    background-color:white ;
    color: var(--prime);
    border: var(--prime) solid 1px;
  }
  .btn-outline-primary:hover{
    background-color:var(--prime) ;
    color: white;
    border: var(--prime) solid 1px;
  }
.title p{
	text-wrap:wrap;
	    text-align: center;
}
/* end basic */
/* start header  */
header {
  height: 100px;
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: 100;
}
header .dropdown-item {
  text-align: center;
  border-radius: 3px;
}
header .dropdown-menu {
  transform: translate3d(0px, 35px, 0px) !important;
}
header .head {
  background-color: rgba(21, 51, 48, 0.856);
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
header .head .logo img {
  width: 100px;
  height: 100%;
  object-fit: contain;
}
header .head .col {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

}
header .head ul {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: auto 0px;
}
header .head .list-links {
  display: flex !important;
  justify-content: flex-start !important;
}

header .head li {
  margin: auto 20px;
  text-wrap: nowrap;
  position: relative;
}
header .head li:hover a {
  color: white;
}
header .head li::after {
  content: "";
  position: absolute;
  right: 0%;
  bottom: -10px;
  width: 0%;
  height: 2px;
  background-color: white;
  transition: 1s;
}
header .head li:hover:after {
  width: 100%;
}
header .head li::before {
  content: "";
  position: absolute;
  left: 0%;
  bottom: -10px;
  width: 0%;
  height: 2px;
  background-color: white;
  transition: 1s;
}
header .head li:hover:before {
  width: 100%;
}
header .head .lang-btn button {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}
header .head .lang-btn button i {
  margin-right: 10px;
}
header .head .lang-btn .dropdown-toggle::after {
  display: none;
}
/* end header  */
/* //////////////////////////////////// */
/* start landing  */
.landing {
  position: relative;
  height: 100vh;
  width: 100%;
}
.landing .bg-landing{
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0px;
  top: 0px;
}
.landing .bg-landing img{
  width: 100%;
  height: 100%;
}
.landing .text-landing{
  width: 95%;
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50% , -50%);
  text-align: center;
}
.landing .text-landing > *{
  color: white;
  margin-bottom: 30px;
}
.landing .text-landing h1{
  font-size: 75px;
}
.landing .text-landing .btns-landing a{
width: 200px;
margin:  10px;
padding: 10px;
border-radius: 10px;
}
/* end landing  */
/* /////////////////////////////////////////// */
/* start landing  */
.about-us{
  position: relative;
  margin: 50px 0px;
  height: 60vh;
}
.about-us .box-top-right{
  position: absolute;
  left: 0%;
  top: 0%;
  width: 60%;
  height: 55%;
  background-color: var(--prime);
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 20px;
  color: white;
  border-right: solid 5px white;
  border-bottom: solid 5px white;
  z-index: 1;
}
.about-us .box-top-right .text-about{
  margin-left: 30px;
}
.about-us .box-top-left .text-about > *{
  margin: 10px 0px;
}
.about-us .box-top-right ul{
  list-style-type: disc;
}
.about-us .box-top-right ul li{
  margin: 10px 0px;
}
.about-us .box-bottom-left{
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 60%;
  height: 55%;
  background-color: var(--third);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: solid 7px var(--prime);
}
.about-us .box-bottom-left img{
  object-fit: contain;
  height: 100%;
  margin-bottom: 150px;
	display:none;
}
.about-us .box-bottom-right{
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 40%;
  height: 45%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 50px;
}
.about-us .box-bottom-right h6{
  margin-left: 20px;
}
.about-us .box-bottom-right img{
object-fit: cover;
}
/* start goals  */
.goals{
  position: relative;
}
.goals .bg-image{
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: -2;
}
.goals .bg-image2{
  position: absolute;
  right: 0px;
  bottom: -20%;
  height: 100%;
  object-fit: contain;
  z-index: -2;
}
.goals .box-center{
  width: 70%;
  margin: auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content:space-around;
  border-radius: 15px;
  background-color: var(--prime);
  color: white;
}
.goals .box-center div > img{
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.goals .box-center ul li{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 20px 0px;
}
.goals .box-center ul li p{
  margin-left: 15px;
}
/* end landing  */
/* /////////////////////////////////////////// */
/* start projects */
.projects .project .button-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
}
.projects .project a {
  color: black;
}
.projects .project .button-group button{
  margin: 0px 15px;
  width: 150px;
  padding: 10px;
  border-radius: 2px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border: none;
  background-color: var(--prime);
color: white;
}
.projects .project .button-group .is-checked{
  background-color: var(--third);
}
.projects .project .card {
  border: none;
  box-shadow:var(--shadow) ;
  border-radius:  20px;
margin: 20px 0.5%;
padding: 0px;
transition: 1s;
z-index: 1;
overflow: hidden;
text-wrap: nowrap;
}
.projects .project .card svg   {
  margin-right: 10px;
}
.projects .project .card:hover svg path  {
  transition: 1s;
}
.projects .project .card:hover ,.projects .project .card:hover svg path  {
  color: white !important;
  fill: white;
}
.projects .project .card::after {
content: "";
position: absolute;
bottom: 0px;
left: 0px;
width:0px ;
height: 0px;
background-color: var(--prime);
border-radius: 50%;
border-bottom-left-radius: 20px;
transition: 1s;
z-index: -1;
}
.projects .project .card:hover:after {
  border-radius: 20px;
  width: 100%;
  height: 100%;
}
.projects .project .card .card-img-top {
  position: relative;
}
.projects .project .card .card-img-top > img {
  height: 300px;
  width: 100%;
  object-fit: cover;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.projects .project .card .card-img-top .float{
  position: absolute;
  top: 30px;
  left: 0px;
  background-color: var(--third);
  color: white;
  display: flex;
  padding: 10px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
}
.projects .project .card ul li{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 15px 0.5%;
}
.projects .project .card ul li img{
  margin-right: 15px;
}
/* end projects */
/* /////////////////////////////////////////// */
/* start numbers  */
.numbers{
  position: relative;
}
.numbers .number .title{
  color: white;
}
.numbers .bg-victor{
  position: absolute;
  right: 0px;
  top: -300px;
  z-index: -1;
}
.numbers .bg-victor img{
  height: 175vh;
}
.numbers .number {
  height: 100%;
  padding: 50px;
}
.numbers .number .row {
  width: 100%;
}
.numbers .number .row .col {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: white;
}
.numbers .number .row .col > * {
  margin: 5px 0px;
}
.numbers .number .row .col h2 {
 color: var(--prime); 
}
.numbers .number{
  position: relative;
}
.numbers .number .bg-image{
  position: absolute;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.numbers .number .bg-image img{
  width: 100%;
  height: 100%;
}
/* end numbers  */
/* /////////////////////////////////////////// */
/* start news  */
.news .card {
  padding: 0px;
  margin: 20px 0.5%;
  border-radius: 20px;
  box-shadow: var(--shadow);
  border: none;
  position: relative;
  z-index: 1;
}
.news .card ,.news .card a ,.news .card i{
  transition: 1s;
}
.news .card:hover ,.news .card:hover a ,.news .card:hover i {
  color: white !important;
}

.news .card .card-img-top img{
  width: 100%;
  height: 300px;
}
.news .card .card-body {
  padding: 5px 25px;
  padding-bottom: 25px;
}
.news .card .card-body i {
  color: var(--prime);
  margin: 0px 5px ;
}
.news .card .card-body > *{
  margin: 15px 0px;
}
.news .card .card-body a{
  color: var(--prime);
  font-size: 20px;
  font-weight: bolder;
}
.news  .card::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 0px;
  width:0px ;
  height: 0px;
  background-color: var(--prime);
  border-radius: 50%;
  border-bottom-left-radius: 20px;
  transition: 1s;
  z-index: -1;
  }
  .news  .card:hover:after {
    border-radius: 20px;
    width: 100%;
    height: 100%;
  }
/* end news  */
/* /////////////////////////////////////////// */
/* start company */
.company{
  position: relative;
}
.company .bg-image-comp{
  position: absolute;
  left: 0px;
  bottom: -100%;
}
.company .bg-image-comp img{
  object-fit: contain;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.splide{
  margin: 65px 0px ;
}
.news .splide__slide img{
  width: 100%;
  height: 100px;
  object-fit: contain;
}
.splide__arrow , .splide__pagination{
display: none  !important;
}
/* end company  */
/* //////////////////////////////////////////// */
/* start location  */
.location iframe{
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
/* end location  */
/* //////////////////////////////////////////// */
/* start another pages  */
.landing-2 {
  position: relative;
  height: 50vh;
}
.landing-2 .text-landing {
 position: absolute;
 right: 50%;
 top: 50%;
 transform: translate(50% , -50%);
color: white;
margin: auto;
text-align: center;
}
.landing-2 .text-landing > div{
  margin: 12px;
}
.landing-2 .bg-landing{
  position: absolute;
  right: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.landing-2 .bg-landing img{
  width: 100%;
  height: 100%;
}
/* start projects  */
.pagination {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  align-items: center;
  margin: 30px 0px;
}
.pagination ul {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination ul li a {
  margin: 0px 5px;
  box-shadow: 0px 0px 5px 5px rgba(241, 241, 241, 0.74);
  border-radius: 5px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 1s;
}
.pagination ul li a {
  color: black;
  transition: 0.5s;
}
.pagination ul li .active {
  background-color: var(--third);
  color: white;
}
.pagination ul li:hover a {
  background-color: var(--third);
}
.pagination ul li:hover a {
  color: white;
}
.pagination ul .arrow-page:hover a {
  background-color: var(--prime);
  color: white;
}
/* start single services */
.service .images-service .col{
  margin: 0px 0.5%;
  padding: 0px;
}
.service .images-service .col:nth-of-type(1),.service .images-service .col:nth-of-type(2){
  margin-bottom: 15px;
}
.service .images-service .col:last-of-type:after{
  content: " عرض المزيد";
  position: absolute;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(2, 2, 2, 0.507);
  border-radius: 20px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bolder;
  font-size: 18px;
}
.service .images-service img{
  width: 99%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}
/* start single project  */
.location-project{
  width: 100%;
  height: 100%;
  position: relative;
}
.location-project button{
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%,-50%);
z-index: 1;
border-radius: 5px;
padding: 10px;
width: 75%;
}
.location-project iframe{
  width: 100%;
  height: 150px;
  border-radius: 15px;
  filter: brightness(0.8);
  z-index: -1;
  transition: 1s;
}
.location-project:hover iframe{
  filter: brightness(0.6);
}
.info-project > *{
margin-right: 30px;
}
.service .projects .card a{
  transition: 1s;
  font-weight: bold;
}
.service .projects .card:hover a{
  background-color: white;
  color: var(--prime) !important;
}
/* start contact us  */
.contact-us form  {
  padding: 40px 0px;
}
.contact-us form  div label{
  font-weight: bolder;
  margin-bottom: 15px;
  margin-left: 10px;
}
.contact-us form  div {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  width: 90%;
  margin: auto;
  margin-bottom: 15px;
}
.contact-us form  div input ,.contact-us form  div textarea {
  width: 100%;
  border: none;
  background-color: rgba(213, 215, 215, 0.25);
  border-radius: 10px;
  padding:10px;
}
.contact-us .info-contact{
  position: relative;
  width: 70%;
}
.contact-us .info-contact .info-text{
  position: absolute;
  right: 50%;
  top:10%;
  transform: translatex( 50%);
  width:70%;
  height: 90%;
  color: white;
  padding: 25px;
}
.contact-us .info-contact .info-text > div{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 40px 0px;
}
.contact-us .info-contact .info-text > div h5{
  margin-bottom: 15px;
}
.contact-us .info-contact .info-text > div i{
  font-size: 25px;
  margin-right: 15px;
  color: var(--prime);
}
.contact-us .info-contact .bg-contact{
  position: absolute;
  right: 50%;
  top:2.5%;
  transform: translatex( 50%);
  width:70%;
  height: 95%;
  z-index: -1;
}
.contact-us .info-contact .bg-contact img{
  border-radius: 25px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-us .location iframe{
  width: 100%;
  margin: 30px 0px;
  border-radius: 15px;
}
/* start about us  */
.about-us .col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-us .col:first-of-type {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.about-us .col:first-of-type  .info-title h1 {
margin-bottom: 20px;
}
.about-us .col:first-of-type  .info-title ul {
  margin: 10px 20px;
  list-style-type: disc;

}
.about-us .col:first-of-type  .info-title ul li {
margin: 10px 0px;
}
.about-us .col .vesion {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
}
.about-us .col .vesion img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.about-us .col .vesion >* {
  margin-right: 15px;
}
.about-us .col > img{
  width: 90%;
  height: 90%;
object-fit: contain;
}
.about-us-2 .box-bottom-left{
background-color: var(--prime);
border-bottom-color: var(--third) ;
}
.about-us-2 .box-top-right{
  background-color: var(--third);
  }
.about-us-2 ul{
  list-style-type: none !important;
}
/* end another pages  */
/* ///////////////////////////////////////////// */
/* start footer */
footer {
  position: relative;
  margin-top: 50px;
  border-top-right-radius: 30px;
  border-top-left-radius: 30px;
}
footer::after{
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--prime);
}
footer .container-90 {
  border-radius: 20px;
}
footer .container-90 {
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}
footer .col {
  margin: 20px 0%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  color: black;
}

footer .col h2 {
  margin-bottom: 30px;
  color: black;
  position: relative;
  font-size: 25px;
}
footer .col h2::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  width: 100%;
  height: 1px;
  background-color: var(--prime);
}
footer .col ul {
  padding: 0;
  margin-left: 10px;
}
footer .col li {
  margin-bottom: 30px;
  text-align: left;
  color: black  ;
}
footer .col li a {
  color: black !important;
}
footer .col:last-of-type li a {
  display: flex;
  flex-direction: row;
  align-items: center;
}
footer .logo {
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
}

footer .logo img {
  width: 100%;
  height: 60px;
  object-fit: contain;
}
footer .logo div {
  margin: 0px 10px;
}
footer .logo ul {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
}
footer .logo ul li {
  margin: 0px 5px;
  padding: 0;
  width: 35px;
  height: 35px;
  color: black;
background-color: var(--prime);
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}

footer .logo ul li i {
  font-size: 20px;
  color: white;
}
footer .col a {
  color: var(--prime);
}
footer .search{
  margin-top: 20px;
}
footer .search-content{
  position: relative;
  width: 150%;
}
footer .search input {
  width: 100%;
  border-radius: 30px;
  margin-top: 20px;
  padding: 15px;
  border: none;
  font-size: 15px;
  padding-left: 20px;
  box-shadow: 0px 0px 5px 5px rgba(92, 92, 92, 0.199);
}
footer .search button {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-25%);
}
footer .footer-new ul {
  margin: 0px;
}
footer .footer-new ul li {
  margin: 20px 0px;
  padding: 0px;
  color: black;

}
footer .footer-new ul li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0px;
  color: black;
}
footer .footer-new ul li img {
  width: 75px;
  height: 70px;
  padding-right: 5px;
}
footer .footer-new ul li a span {
  margin-right: 0px;
}
footer .footer-new ul li a span p {
  font-size: 15px;
  margin-top: 5px;
}
footer .end-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 15px;
  color: black;
  margin-top: 0px;
  border-top: solid 1px white;
  position: relative;
  text-align: center;
}
footer .end-footer::after{
  content: "";
  position: absolute;
  top: 0px;
  width: 100%;
  height: 1px;
  background-color: var(--prime);
}
footer .elnoor {
  width: 100px;
  height: 30px;
}
.end-footer a {
  display: flex !important;
  align-items: center;
  width: 250px;
}

.end {
  display: none;
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 60;
  background-color: var(--third);
  border-radius: 10px;
  height: 40px;
  width: 40px;
}
/* end footer  */
/* ////////////////////////////////////////////// */

/* start social */
.social{
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  
}
.social ul li {
  margin: 10px 0px;
  width: 40px;
  height: 40px;
  background-color: var(--third);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.social ul li i{
  font-size: 22px;
}
/* end social */
/*--------- Responsive ----- */
@media (min-width: 992px) {
  header .head-phone {
    display: none !important;
  }
}
@media (max-width: 992px) {
   /* start header  */
   .bars {
    font-size: 25px;
    color: white;
  }
  header .phone {
    display: none;
    position: absolute !important;
    top: 0px;
    right: 0px;
    width: 100%;
    height: 100vh;
    align-items: flex-start !important;
    overflow-x: hidden;
  }
  header .head .col {
    align-items: flex-start !important;
  }
  header .list-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  header .phone-slide {
    position: absolute;
    right: -100%;
    top: 0px;
    height: 100vh;
    width: 50%;
    margin: 0px;
    background-color: black;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    transition: 1s;
  }
  header .head-phone {
    margin: 30px 0px;
  }
  header .head-phone .closes i {
    color: white;
    font-size: 35px;
  }
  header .phone-slide ul {
    flex-direction: column;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
  }
  header .phone-slide ul li {
    margin: 15px 0px !important;
    padding: 0px;
  }
  /* end header  */
  .about-us .box-bottom-right{
    flex-direction: column;
  }
  .about-us .box-bottom-right img{
    margin-bottom: 15px;
  }
  .about-us .box-top-right{
  height: 45%;
  width: 58%;
}
.about-us .box-bottom-left{
  height: 45%;
  width: 58%;
}
.about-us .box-bottom-right {
  width: 45%;
}
  .goals .box-center{
    width: 100%;
    flex-direction: column;
  }
  .goals .box-center img{
    display: none;
  }
  .projects .project .button-group {
flex-wrap: wrap;
  }
  .projects .project .button-group button {
    margin: 10px;
    width: 130px;
  }
  .numbers .number .bg-image img{
    object-fit: cover;
  }
  .numbers .number{
    height: 100%;
  }
  .numbers .number .col{
    margin: 20px 0.5%;
  }
  .location iframe{
    width: 100%;
  }
  .end-footer > * {
    margin: 10px 0px;
  }
.service .images-service .row > div{
  margin: 20px 0.5%;
  position: relative;
  left: 10px;
}
.about-us-2 .box-top-right{
  height: 60% !important;
}
.about-us-2 .box-top-right ul li{
  margin: 15px 0px !important;
}
}
@media (max-width: 768px) {
  header .phone-slide {
    width: 100%;
  }
  header .row {
    padding-top: 10px;
  }
  header .row .col {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .landing .text-landing h3{
    font-size: 17px;
  }
  .landing .text-landing h1{
    font-size: 55px;
  }
  .landing .text-landing a{
    width: 170px;
  }
  .about-us .box-bottom-right ,.about-us .box-bottom-left ,.about-us .box-top-right{
    position: relative;
    width: 100% !important;
    height: 100%;
    border: none;
    margin: 20px 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
  }
  .about-us {
    height: 100%;
  }
  .about-us .box-bottom-left img{
    margin: 0px ;
    width: 50%;
  }
	.about-us .box-bottom-left {
 	display:none;
}
  .about-us .box-bottom-right img{
    margin-bottom: 20px;
  }
  .service .images-service img{
    height: 250px;
  }
  .service .box-service{
    width: 100% !important;
  }
  .service .box-service > *{
    font-size: 19px !important;
    text-align: center;
  }
  .service .box-service button{
    text-wrap: nowrap;
    width: 90% !important;
  }
  .text-service h2{
    font-size: 20px;
    }
    .info-project {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
    }
    .info-project > *{
      margin: 15px 5px;
    }
    .contact-us .info-contact{
      height: 70vh;
    }
    .contact-us .info-contact .info-text{
      display: flex;
      flex-direction: row !important;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .contact-us .info-contact .info-text > div{
      margin: 10px 0px !important;
    }
    .about-us .col .vesion{
      flex-direction: column;
    }
    .about-us .col:last-of-type{
      margin-bottom: 25px;
    }

    .about-us-2 .box-top-right div > img{
      padding: 30px 0px;
    }
    .about-us-2 ul li{
      margin: 25px 0px !important;
    }
    .about-us-2 .box-top-right .text-about{
      margin: 0px;
    }
    
  footer .col {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  footer .col:last-of-type li i {
    margin: 25px 10px;
    font-size: 25px;
  }
  footer .col:last-of-type li a svg {
    margin: 25px 10px;
  }
.btn-w100{
  width: 100% !important;
}
}
@media (max-width: 500px) {
		footer .search-content{
		width:125%;
	}
}
@media (max-width: 375px) {
  .projects .project .button-group button{
    width: 110px;
  }
  .numbers .number .row .col > *{
    text-wrap: nowrap;
  }
  .news .card .card-body > h4{
    font-size: 17px;
  }
}


/* start basic js  */
.left-0 {
  right: 0% !important;
}
.flex {
  display: flex !important;
}
.block {
  display: block !important;
}
.noen {
  display: none !important;
}
.header-fixed {
  position: fixed !important;
  top: 0%;
  right: 0;
  width: 100%;
  height: 80px;
  transition: 1s;
  z-index: 50;
  transition: 1s all;
  animation-name: down;
  animation-duration: 0.7s;
  transition-delay: 0s;
  background-color: var(--sodark) !important;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 30px;
}
@keyframes down {
  from {
    position: fixed;
    top: -100%;
  }
  to {
    position: fixed;
    top: 0%;
  }
}