:root {
  --header-height: 100px;
  --main-theme-color: #FBF9F0;
  --main-text-color: #41280A;
  --main-text-color-transparent: rgba(5, 40, 10, 0.1);
  --main-highlight-color: #CF5831;

  --clients-icon-width: 150;
  --clients-span-width: 350;
}

.menu {
  background-image: url("../src/icon/menu-48.png");
}

.menudiv .close{
  background-image: var("../src/icon/x.svg");
}
.content{
  padding: 50px 100px;
  margin-bottom: 0;
/* text-align: center; */
}

.parrallax{
  position: relative;
  overflow: hidden;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
}
.parrallax_layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* z-index: -1; */
}


.contact-content .contact-form  {
  position: absolute;
  width: 60%;
  height: 550px;
  top: 120px;
  left: 15%;
  /* margin: 20px; */
  background-color: #fff;
  padding: 50px;
}

/*xs to lg*/
.parrallax-1{
  background-image: url(../src/image/background1.jpg);
  height: 500px;
}
.parrallax-2{
  background-image: url(../src/image/stars.jpg);
  height: 280px;
}

.clients-container h1, .clients-container h2, .clients-container p{
  color: #121007;
}
/* .about .text{
  left:
} */

.clients {
  height: 1820px;
  background-color: #fff;
  text-align: center;
  margin-bottom: 0;
}

.field{
  width: 100%;
}

#name, #email, #ContactNumber, .contact-form #subject, #message, #submit  {
  position: absolute;
  left: 40px;
  height: 35px;
  width: 290px;
  margin: 40px 40px 0px 0px;
}

.welcome{
  color: #fff;
  text-align: center;
}
.welcome h1{
  margin-top: 40px;
}
.welcome h3{
  color: #fff;
}
.contact-form {
  color: #121007;
  box-sizing: inherit;
  line-height: 1.5;
}

.contact-form #name {
  top: 0px;
}

.contact-form #email {
  top: 0px;
  left: 360px;
}

.contact-form #ContactNumber {
  top: 55px;
}

.contact-form #subject {
  top: 55px;
  left: 360px;
}
.contact-form #consent {
  position: absolute;
  top: 395px;
  left: 40px;
}
#consent-label {
  position: absolute;
  width: 610px;
  top: 390px;
  left: 40px;
}

.contact-form #message {
  resize: none;
  top: 120px;
  height: 200px;
  width: 610px;
}

.contact-form #submit {
  top: 480px;
  width: 610px;
}

#result {
  position: absolute;
  left: 40px;
  top: 580px;
}

.clients-container span{
  position: absolute;
  width: calc(var(--clients-span-width) * 1px);
  text-align: center;
}

.clients-container .ourservice{
  top: 230px;
  left: 40px;
  text-align: center;
}

.clients-container .images{
  position: absolute;
  top: 155px;
  left: 50%;
  transform: translateX(80px);
  width: 300px;
  height: 300px;
  /* background-color: #121007; */
}
.clients-container .image {
  background-size: contain;
  background-repeat: no-repeat;
  border: 2px solid #FBF9F0;
  border-radius: 10px;
}
.clients-container .image1{
  top: 0px;
  left: 30px;
  height: 280px;
  width: 320px;
  background-image: url("../src/clients/people.jpg");
}

.clients-container .image2{
  top: 165px;
  left: 200px;
  height: 175px;
  width: 249px;
  background-image: url("../src/clients/entrepreneur.jpg");
}

.clients-container .image3{
  top: 95px;
  left: -100px;
  height: 360px;
  width: 310px;
  background-image: url("../src/clients/stairs.jpg");
}



.clients-container .wearepicon {
  width: calc(var(--clients-icon-width) * 1px);
  height: calc(var(--clients-icon-width) * 1px);
  top: 0px;
  left: 0px;
  margin-left: calc((var(--clients-span-width) - var(--clients-icon-width))/2 * 1px);
  background-position: center;
  border-radius: 20%;
  background-repeat: no-repeat;
  background-size: calc(var(--clients-icon-width) * 1px);
  image-rendering: crisp-edges;
  image-rendering: -moz-crisp-edges;          /* Firefox */
  image-rendering: -o-crisp-edges;            /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming)*/
}
.wearep1 .wearepicon{
  background-image: url("../src/clients/icons/diamond.png");
}
.wearep2 .wearepicon{
  background-image: url("../src/clients/icons/globe.png");
}
.wearep3 .wearepicon{
  background-image: url("../src/clients/icons/we.png");
  margin-left: calc((var(--clients-span-width) * 1.5 - var(--clients-icon-width))/2 * 1px);
}

.clients-container .wearep1{
  top: 670px;
  right:100px;
  width: calc(var(--clients-span-width) * 1px);
}
.clients-container .wearep2{
  top: 670px;
  left: 100px;
  width: calc(var(--clients-span-width) * 1px);
}
.clients-container .wearep3{
  top: 960px;
  left: 230px;
  width: calc(var(--clients-span-width) * 1.5px);
}
.clients-container .wearep3 .weare{
  width: calc(var(--clients-span-width) * 1.5px);
}
.clients-container .weare{
  position: absolute;
  top: 0px;
  left: 0px;
}


.clients-container .wepowertitle{
  position: absolute;
  top: 1280px;
  left: 0;
  text-align: center;
}
.clients-container .wepowericon{
  top:-128px;
  left:127px;
  height: 94px;
  width: 94px;
  background-size: contain;
  background-repeat: no-repeat;
}
.clients-container .wepower1{
  left: 100px;
  top: 1550px;
}
.clients-container .wepower2{
  right: 100px;
  top: 1550px;
}

.clients-container .wepower1icon{
  background-image: url("../src/clients/icons/puzzle.png");
}
.clients-container .wepower2icon{
  background-image: url("../src/clients/icons/award.png");
}


.clients-container .wepower{
  position: absolute;
  top: 0px;
  left: 0px;
}

.button{
  position: absolute;
  left: 50%;
  transform: translateX(-125px);
  color: #fff;
  padding: 8px 0 0 0;
  display: inline-block;
  width: 250px;
  height:36px;
  font-size: 23px;
  font-weight: lighter;
  text-align: center;
  cursor: pointer;
  margin-top: 30px;
  background-color: var(--main-highlight-color);
  border-radius: 8px;
}

.button:hover{
  background-color: #EE6644;
  transition: all .3s linear;
}


@media only screen and (max-device-width: 900px){ 
    /* Retina-specific stuff here */

    .clients {
      height: 3200px;
    }

    .content-header h1 {
      margin-top: 50px;
    }

    .clients-container .ourservice{
      top: 800px;
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
    }
    
    .clients-container .images{
      top: 285px;
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
      width: calc(var(--clients-span-width) * 1px);
      height: 800px;
      overflow-x: hidden;
      /* background-color: #121007; */
    }

    .clients-container .wearep1 {
      top: 1600px;
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
      /* transform:translateX(-125px); */
    }
    .clients-container .wearep2 {
      top: 1240px;
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
    }
    .clients-container .wearep3 {
      top: 1950px;
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
      width: calc(var(--clients-span-width) * 1px);
    }
    .clients-container .wearep3 .weare{
      width: calc(var(--clients-span-width) * 1px);
    }

    .wearep3 .wearepicon{
      margin-left: calc((var(--clients-span-width) - var(--clients-icon-width))/2 * 1px);
    }

    .clients-container .wepowertitle{
      top: 2300px;
    }

    .clients-container .wepower1{
      
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
      top: 2600px;
    }
    .clients-container .wepower2{
      left: 50%;
      transform: translateX(calc(var(--clients-span-width) * -0.5px));
      top: 3050px;
    }
    .button {
      height: 36px;
      margin-top: 20px;
    }

}