:root {
  --secondary-color: #ff8103;
  --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/clear-types-gov.png);
    background-size: cover;
    background-position: center;
    min-height: 50svh;
    margin-top: 66px;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    .hero-section-text {
      width: 100%;
      padding: 1rem;
      h1 {
        font-size: 3rem;
        color: var(--secondary-color);
        font-weight: 700 ;
        
      }
      p {
        font-size: 2rem ;
        color: #fff;
        
      }
    }
  }
}

@media (max-width: 768px) {
  .hero-section-text {
    h1 {
      font-size: 1.8rem !important;
      font-weight: 700 !important;
    }
    p {
      font-size: 1rem !important;
    }
  }
}

.about-section {
  margin-top: var(--margin-top-section);
  .container {
    .row {
      .about-section-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);
        }
        ul {
          li {
            font-size: 16px;
            font-weight: normal;
            color: var(--grag-color);
          }
        }
      }
      .image-card {
        img {
          width: 100%;
          border-radius: 0 30px 0 30px;
          box-shadow: 0px 4px 12px 0px #0000001a;
        }
      }
    }
  }
}
