:root {
  --secondary-color: #fe8004;
  --primary-color: #0b69a3;
  --margin-top-section: 5rem;
  --grag-color: #616161;
}
body {
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
    sans-serif;
}

/* Start Apply jop header */
.home-page-hcs {
  padding: 0;
  overflow: hidden;
}

header {
  .hero-section {
    background-image: url(../images/apply-jop-cover.png);
    background-size: cover;
  background-position: center;
  min-height: 60svh;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  }
}

.about-find-jop {
  margin-top: var(--margin-top-section);
  .find-jop-text {
    h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-color);
    }
    h1::after {
      content: "";
      display: block;
      width: 80px;
      height: 3px;
      background: var(--primary-color);
      margin-top: 5px;
    }
    p {
      font-size: 16px;
      font-weight: normal;
      color: var(--grag-color);
    }
    h2 {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--primary-color);
    }
    h2::after {
      list-style: none;
      content: "";
      display: block;
      width: 80px;
      height: 3px;
      background: var(--primary-color);
      margin-top: 5px;
    }
    ul {
      list-style-type: disc;
    }
    ul li {
      font-size: 16px;
      font-weight: normal;
      color: var(--grag-color);
    }
  }
  .image-container {
    img {
      border-radius: 0 8% 0 8%;
      box-shadow: 0px 4px 12px 0px #0000001a;
    }
  }
}

.our-process-to-hire {
  margin-top: var(--margin-top-section);
  .process-hire-text {
    padding-left: 2%;
    h1 {
      font-size: 2rem;
      font-weight: 700;
      color: var(--primary-color);
    }
    h1::after {
      content: "";
      display: block;
      width: 80px;
      height: 3px;
      background: var(--primary-color);
      margin-top: 5px;
    }
    p {
      font-size: 16px;
      font-weight: normal;
      color: var(--grag-color);
    }
    ul {
      list-style-type: disc;
      li {
        font-size: 16px;
        font-weight: normal;
        color: var(--grag-color);
        span {
          font-weight: 800;
          color: var(--secondary-color);
        }
      }
    }
  }
  .image-container {
    img {
      border-radius: 0 8% 0 8%;
      box-shadow: 0px 4px 12px 0px #0000001a;
    }
  }
}

@media (max-width: 768px) {
  .process-hire-text {
    margin-top: 1rem;
    padding: 5px 20px !important;
    h1{
      font-size: 1.8rem !important;
      font-weight: 700 !important;
    }
    p{
      font-size: 1rem !important;
    }
  }
  .hero-section-text{
    h1{
      font-size: 1.8rem !important;
      font-weight: 700 !important;
    }
    p{
      font-size: 1rem !important;
    }
  }
  .find-jop-text{
    padding: 5px 20px;
    h1{
      font-size: 1.8rem !important;
      font-weight: 700 !important;
    }
    p{
      font-size: 1rem !important;
    }
  }
  .form-apply-jop{
    padding: 5px 2rem;
  }
}

/* End Apply jop header */

/* start apply jop form */

.contact-us {
  .form-apply-jop {
    form {
      .col-md-6 {
        margin-bottom: 0.5rem;
      }
      .form-group {
        display: flex;
        flex-direction: column;
        span.hint {
          font-size: 12px;
          color: var(--grag-color);
        }
        label {
          font-size: 16px;
          font-weight: 600;
          color: var(--grag-color);
          margin-bottom: 5px;
          display: block;
          span.req {
            color: #f39c12;
          }
        }
        input {
          padding: 8px;
          border: 1px solid #e5e7eb;
          outline: none;
          box-shadow: none;
          border-radius: 10px;
          transition: all 0.3s ease;
          font-size: 14px;
        }
        input:focus {
          box-shadow: 0 0 0 3px rgba(11, 110, 243, 0.12);
          border-color: #0b6ef3;
        }
        select {
          width: 100%;
          padding: 8px;
          border-radius: 10px;
          border: 1px solid #e5e7eb;
          background: #fff;
          font: inherit;
          color: inherit;
          outline: none;
        }
        select:focus {
          box-shadow: 0 0 0 3px rgba(11, 110, 243, 0.12);
          border-color: #0b6ef3;
        }
        textarea {
          padding: 8px;
          border: 1px solid #e5e7eb;
          outline: none;
          box-shadow: none;
          border-radius: 10px;
          transition: all 0.3s ease;
          font-size: 14px;
        }
        textarea:focus {
          box-shadow: 0 0 0 3px rgba(11, 110, 243, 0.12);
          border-color: #0b6ef3;
        }
        button {
          padding: 8px;
          border: 1px solid #e5e7eb;
          outline: none;
          box-shadow: none;
          border-radius: 10px;
          transition: all 0.3s ease;
          font-size: 14px;
          background-color: var(--primary-color);
          color: #fff;
        }
        button:hover {
          background-color: var(--secondary-color);
          color: #fff;
        }
      }
    }
  }
}

/* end apply jop form */