/*============================================================================================*/
/* Your custom styles below */
/*============================================================================================*/

@font-face {
  font-family: "GESSTwo";
  src: url("../fonts/GE\ SS\ Two\ Bold.otf");
  src: url("../fonts/GE\ SS\ Two\ Light.otf") format("embedded-opentype"),
    url("../fonts/GE\ SS\ Two\ Medium.otf") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Al-Qabas";
  src: url("../fonts/Al\ Qabas\ Bold\ -\ [UrduFonts.com].ttf");
  src: url("../fonts/Al\ Qabas\ Light\ -\ [UrduFonts.com].ttf")
      format("embedded-opentype"),
    url("../fonts/Al\ Qabas\ Regular\ -\ [UrduFonts.com].ttf") format("woff2");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #e8e4cb;
  font-family: GESSTwo;
}
img {
  position: absolute;
  width: 30%;
}
.ground {
  background: #867c7a;
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  z-index: -1;
}
.door img {
  width: 154px;
  left: 50%;
  top: 60%;
  transform: translateX(-50%);
}
.blocks1 img {
  right: 0%;
  top: 70%;
  width: 25%;
}
.blocks2 img {
  left: 0%;
  top: 60%;
  width: 25%;
}
.green1 img {
  bottom: 7%;
  left: 33%;
  width: 150px;
  z-index: 1;
}
.green2 img {
  bottom: 7%;
  left: 25%;
  width: 150px;
  z-index: 2;
}
.green3 img {
  bottom: 7%;
  right: 33%;
  width: 150px;
  z-index: 2;
}
.green4 img {
  bottom: 7%;
  right: 25%;
  width: 150px;
  z-index: 1;
}
.ground1 img {
  width: 100%;
  bottom: 0%;
}
.grunge1 img {
  width: 20%;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
}
.grunge2 img {
  width: 20%;
  top: 50%;
  right: 15%;
  transform: translate(-50%, -50%);
}
.wall-down img {
  transform: rotate(180deg);
  top: 0;
  width: 100%;
  z-index: -1;
}
.logo img {
  top: 13%;
  left: 50%;
  transform: translateX(-50%);
}
.tagline img {
  top: 48%;
  left: 50%;
  transform: translateX(-50%);
}
.inp input {
  border: 1px solid #77492c;
  border-radius: 6px;
  background: transparent;
  padding: 5px;
  outline: none;
  direction: rtl;
  width: 100%;
}
.inp p,
.inp p.thanks {
  font-size: 12px;
  font-weight: bold;
  color: #77492c;
}
p.thanks {
  font-size: 15px !important;
}
.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5px;
  margin-top: 20px;
}
.buttons button {
  border: 1px solid #77492c;
  border-radius: 6px;
  background: transparent;
  padding: 6px;
  outline: none;
  width: 100%;
  direction: rtl;
}
@media (max-width: 500px) {
}
@media (max-width: 807px) {
  .ground {
    background: #867c7a;
    width: 100%;
    height: 60px;
    position: absolute;
    bottom: 0;
    z-index: -1;
  }
  .door img {
    width: 154px;
    left: 50%;
    transform: translateX(-50%);
  }
  .blocks1 img {
    right: 5%;
    top: 60%;
    width: 25%;
  }
  .blocks2 img {
    left: 5%;
    top: 60%;
    width: 25%;
  }
  .green1 img {
    bottom: 7%;
    left: 33%;
    width: 150px;
    z-index: 1;
  }
  .green2 img {
    bottom: 7%;
    left: 25%;
    width: 150px;
    z-index: 2;
  }
  .green3 img {
    bottom: 7%;
    right: 33%;
    width: 150px;
    z-index: 2;
  }
  .green4 img {
    bottom: 7%;
    right: 25%;
    width: 150px;
    z-index: 1;
  }
  .ground1 img {
    width: 100%;
    bottom: 0%;
  }
  .grunge1 img {
    width: 20%;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
  }
  .grunge2 img {
    width: 20%;
    top: 50%;
    right: 15%;
    transform: translate(-50%, -50%);
  }
  .wall-down img {
    transform: rotate(180deg);
    top: 0;
    width: 100%;
    z-index: -1;
  }
  .green1 img {
    bottom: 7%;
    left: 13%;
    width: 150px;
    z-index: 1;
  }
  .green2 img {
    bottom: 7%;
    left: 0%;
    width: 150px;
    z-index: 2;
  }
  .green3 img {
    bottom: 7%;
    right: 13%;
    width: 150px;
    z-index: 2;
  }
  .green4 img {
    bottom: 7%;
    right: 0%;
    width: 150px;
    z-index: 1;
  }
  .blocks1 img {
    right: 3%;
    top: 70%;
    width: 28%;
  }
  .blocks2 img {
    left: 5%;
    top: 70%;
    width: 28%;
  }
  .grunge1 img {
    width: 40%;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
  }
  .grunge2 img {
    width: 40%;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
  }
  .tagline img {
    top: 47%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
  }
}
@media (min-width: 808px) {
  .content {
    width: 450px !important;
    position: relative;
    height: 100%;
  }
  .green1 img {
    bottom: 7%;
    left: 6%;
    width: 150px;
    z-index: 1;
  }
  .green2 img {
    bottom: 7%;
    left: -18%;
    width: 150px;
    z-index: 2;
  }
  .green3 img {
    bottom: 7%;
    right: 6%;
    width: 150px;
    z-index: 2;
  }
  .green4 img {
    bottom: 7%;
    right: -18%;
    width: 150px;
    z-index: 1;
  }
  .blocks2 img {
    left: 5%;
    top: 70%;
    width: 28%;
  }
}
.form-step {
  display: none;
}
.form-step.active {
  display: block;
}
.form-step p:not(.form-step#step-4 p) {
  margin-top: 20px !important;
  line-height: 2;
  text-align: center !important;
}
.input-error {
  border: 2px solid red !important;
}
.form-step {
  position: absolute;
  top: 34%;
  transform: translate(-50%, -50%);
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.num-font {
  font-family: Al-Qabas;
}

button {
  background-color: #77492c !important;
  color: #fff;
}
/* Remove number input spinners */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield; /* Firefox */
}