@font-face {
      src: url('ZonaPro-Regular.ttf') format('truetype');
      font-family: "zonapro-regular";
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      src: url('ZonaPro-SemiBold.ttf') format('truetype');
      font-family: "zonapro-semibold";
      font-weight: 600;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      src: url('ZonaPro-Bold.ttf') format('truetype');
      font-family: "zonapro-bold";
      font-weight: 700;
      font-style: normal;
      font-display: swap;
    }

    @font-face {
      src: url('ZonaPro-ExtraBold.ttf') format('truetype');
      font-family: "zonapro-extrabold";
      font-weight: 800;
      font-style: normal;
      font-display: swap;
    }

    * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     list-style: none;
     text-decoration: none;
    }

    body {
      background-color: #fff;
    }

    html { font-size: 16px;
    }

    :root {
        --13.5: 0.844rem;
        --14: 0.875rem;
        --15: 0.9375rem;
        --16: 1rem;
        --17: 1.0625rem;
        --18: 1.125rem;
        --20: 1.25rem;
        --21: 1.3125rem;
        --22: 1.375rem;
        --23: 1.4375rem;
        --24: 1.5rem;
        --25: 1.5625rem;
        --26: 1.625rem;
        --27: 1.6875rem;
        --28: 1.75rem;
        --30: 1.875rem;
        --32: 2rem;
        --33: 2.0625rem;
        --34: 2.125rem;
        --35: 2.1875rem;
        --36: 2.25rem;
        --38: 2.375rem;
        --40: 2.5rem;
        --42: 2.625rem;
        --50: 3.125rem;
        --60: 3.75rem;
        --70: 4.375rem;
        --90: 5.625rem;
    }

    #career-section {
      max-width: 100%;
    }

    #career-section-proposition {
      position: relative;
      max-width: 100%;
      padding: 4.6rem 0% 4rem 0%;
      display: flex;
      flex-direction: column-reverse;
      justify-content: center;
      align-items: center;
      background-image: linear-gradient(to left bottom, #c5dcc4, #c5e4da, #ceeaeb, #def0f7, #eff5fc, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
    }

    #career-section-proposition-image {
      position: relative;
      width: 70%;
   }

   #career-section-image {
    width: 250px;
    height: 250px;
   }

    #career-section-proposition-text-box {
      padding-bottom: 100px;
      width: 94%;
    }

    #career-section-proposition-text-title {
      font-size: 26px;
      font-family: zonapro-extrabold;
      margin-bottom: 18px;
      word-spacing: 4px;
      line-height: 2.2;
      text-align: center;
    }

    #career-section-proposition-text-body {
      font-size: 105px;
      font-family: zonapro-regular;
      word-spacing: 3.5px;
      line-height: 24px;
      text-align: center;
    }

    #career-section-employability-skills {
      margin-top: 1rem;
      padding-top: 2.5rem;
      padding-bottom: 3rem;
      position: relative;
      max-width: 100%;
      background-image: url("../images/party4.jpg");
      background-position: center;
      border-bottom-left-radius: 50%;
      border-bottom-right-radius: 50%;
      border-top-right-radius: 16px;
      border-top-left-radius: 16px;
    }

    #career-section-title {
      font-size: 18px;
      margin-bottom: 40px;
      font-family: zonapro-extrabold;
      text-align: center;
    }

    #career-section-skills {
      position: relative;
      display: grid;
      grid-template-columns: 90%;
      row-gap: 50px;
      height: auto;
      margin-top: 2rem;
    }

    .career-skill {
      max-width: 90%;
      margin-left: 10%;
      text-align: center;
      padding: 18px 20px;
      border-radius: 16px;
      box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
    }

    .skill-title {
      font-size: 14px;
      font-family: zonapro-bold;
      margin-bottom: 14px;
      color: white;
    }

    .skill-content {
      font-size: 11.5px;
      font-family: zonapro-bold;
      color: white;
    }

    .soft-skill {
      background-color: rgb(248, 243, 242);
      background-color: rgb(10, 10, 49);
    }

    .hard-skill {
      background-color: rgb(228, 227, 255);
      background-color: rgb(36, 4, 37);
    }


    #career-section-vacancy {
      margin: 7rem 0% 150px 0px;
      text-align: center;
    }

    #career-section-vacancy-title {
      font-size: 18px;
      font-family: zonapro-extrabold;
      margin-bottom: 16px;
    }

    #career-section-vacancy-text {
      font-size: 11.5px;
      font-family: zonapro-bold;
    }



      @media screen and (min-width: 340px) {

        #career-section-proposition {
          position: relative;
          max-width: 100%;
          padding: 4.6rem 0% 4rem 0%;
          display: flex;
          flex-direction: column-reverse;
          justify-content: center;
          align-items: center;
          background-image: linear-gradient(to left bottom, #c5dcc4, #c5e4da, #ceeaeb, #def0f7, #eff5fc, #fff, #fff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
        }

        #career-section-proposition-image {
          position: relative;
          width: 70%;
       }

       #career-section-image {
        width: 300px;
        height: 330px;
       }

        #career-section-proposition-text-box {
          padding-bottom: 100px;
          borer: 2px solid teal;
          width: 94%;
        }

        #career-section-proposition-text-title {
          font-size: 40px;
          font-family: zonapro-extrabold;
          margin-bottom: 18px;
          word-spacing: 4px;
          text-align: center;
        }

        #career-section-proposition-text-body {
          font-size: 15px;
          font-family: zonapro-regular;
          word-spacing: 3.5px;
          line-height: 24px;
          text-align: center;
        }

        #career-section-employability-skills {
          margin-top: 1rem;
          padding-top: 2rem;
          padding-bottom: 3rem;
          position: relative;
          max-width: 100%;
          background-image: url("../images/party4.jpg");
          background-position: center;
          border-bottom-left-radius: 50%;
          border-bottom-right-radius: 50%;
          border-top-right-radius: 16px;
          border-top-left-radius: 16px;
        }

        #career-section-title {
          font-size: 22px;
          margin-bottom: 40px;
          font-family: zonapro-extrabold;
          text-align: center;
        }

        #career-section-skills {
          position: relative;
          display: grid;
          grid-template-columns: 90%;
          row-gap: 50px;
          height: auto;
          margin-top: 2rem;
        }

        .career-skill {
          max-width: 90%;
          margin-left: 10%;
          text-align: center;
          padding: 18px 20px;
          border-radius: 16px;
          box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
        }

        .skill-title {
          font-size: 16px;
          font-family: zonapro-bold;
          margin-bottom: 14px;
          color: white;
        }

        .skill-content {
          font-size: 12px;
          font-family: zonapro-bold;
          color: white;
        }

        .soft-skill {
          background-color: rgb(248, 243, 242);
          background-color: rgb(10, 10, 49);
        }

        .hard-skill {
          background-color: rgb(228, 227, 255);
          background-color: rgb(36, 4, 37);
        }


        #career-section-vacancy {
          margin: 7rem 0% 200px 0px;
          text-align: center;
        }

        #career-section-vacancy-title {
          font-size: 22px;
          font-family: zonapro-extrabold;
          margin-bottom: 16px;
        }

        #career-section-vacancy-text {
          font-size: 13px;
          font-family: zonapro-bold;
        }

       }

    @media screen and (min-width: 550px) {
      #career-section-proposition {
        position: relative;
        max-width: 100%;
        padding: 4.6rem 0% 4rem 0%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to left bottom, #c5dcc4, #c5e4da, #ceeaeb, #def0f7, #eff5fc, #f6f8fd, #fbfbfe, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
      }

      #career-section-proposition-image {
        position: relative;
        width: 60%;
        height: auto;
        }

        #career-section-image {
          width: 350px;
          height: 350px;
         }

      #career-section-proposition-text-box {
        padding-bottom: 140px;
        width: 90%;
      }

      #career-section-proposition-text-title {
        font-size: 40px;
        font-family: zonapro-extrabold;
        margin-bottom: 18px;
        word-spacing: 8px;
        text-align: center;
      }

      #career-section-proposition-text-body {
        font-size: 13px;
        font-family: zonapro-bold;
        word-spacing: 5px;
        line-height: 24px;
        text-align: center;
      }

      #career-section-employability-skills {
        margin-top: 1rem;
        padding-top: 2rem;
        padding-bottom: 3rem;
        position: relative;
        max-width: 100%;
        background-image: url("../images/party4.jpg");
        background-position: center;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 16px;
        border-top-left-radius: 16px;
      }

      #career-section-title {
        font-size: 25px;
        margin-bottom: 40px;
        font-family: zonapro-extrabold;
        text-align: center;
      }

      #career-section-skills {
        position: relative;
        display: grid;
        grid-template-columns: 90%;
        row-gap: 50px;
        height: auto;
        margin-top: 2rem;
      }

      .career-skill {
        max-width: 80%;
        margin-left: 15%;
        text-align: center;
        padding: 18px 20px;
        border-radius: 16px;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
      }

      .skill-title {
        font-size: 18px;
        font-family: zonapro-bold;
        margin-bottom: 14px;
        color: white;
      }

      .skill-content {
        font-size: 12px;
        font-family: zonapro-bold;
        color: white;
      }

      .soft-skill {
        background-color: rgb(248, 243, 242);
        background-color: rgb(10, 10, 49);
      }

      .hard-skill {
        background-color: rgb(228, 227, 255);
        background-color: rgb(36, 4, 37);
      }


      #career-section-vacancy {
        margin: 10rem 0% 200px 0px;
        text-align: center;
      }

      #career-section-vacancy-title {
        font-size: 25px;
        font-family: zonapro-extrabold;
        margin-bottom: 16px;
      }

      #career-section-vacancy-text {
        font-size: 14px;
        font-family: zonapro-bold;
      }

    }

    @media screen and (min-width: 770px) {
      #career-section-proposition {
        position: relative;
        max-width: 100%;
        padding: 4rem 0% 4rem 0%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to left bottom, #c5dcc4, #c5e4da, #ceeaeb, #def0f7, #eff5fc, #f6f8fd, #fbfbfe, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
      }

      #career-section-proposition-image {
        position: relative;
        width: 30%;
        }

        #career-section-image {
          width: 400px;
          height: 400px;
         }

      #career-section-proposition-text-box {
        padding-top: 40px;
        padding-bottom: 140px;
        width: 80%;
      }

      #career-section-proposition-text-title {
        font-size: 60px;
        font-family: zonapro-extrabold;
        margin-bottom: 18px;
        word-spacing: 8px;
        text-align: center;
      }

      #career-section-proposition-text-body {
        font-size: 15px;
        font-family: zonapro-bold;
        word-spacing: 5px;
        line-height: 24px;
        text-align: center;
      }

      #career-section-employability-skills {
        margin-top: 1rem;
        padding-top: 2rem;
        padding-bottom: 3rem;
        position: relative;
        max-width: 100%;
        background-image: url("../images/party4.jpg");
        background-position: center;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 30%;
        border-top-left-radius: 30%;
      }

      #career-section-title {
        font-size: 30px;
        margin-bottom: 100px;
        font-family: zonapro-extrabold;
        text-align: center;
      }

      #career-section-skills {
        position: relative;
        display: grid;
        grid-template-columns: 25% 25% 25%;
        justify-content: space-evenly;
        row-gap: 100px;
        height: auto;
        margin-top: 2rem;
      }

      .career-skill {
        max-width: 300px;
        margin-left: 5%;
        text-align: center;
        padding: 18px 10px;
        border-radius: 16px;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
      }

      .skill-title {
        font-size: 20px;
        font-family: zonapro-bold;
        margin-bottom: 14px;
        color: white;
      }

      .skill-content {
        font-size: 13px;
        font-family: zonapro-bold;
        color: white;
      }

      .soft-skill {
        background-color: rgb(248, 243, 242);
        background-color: rgb(10, 10, 49);
      }

      .hard-skill {
        background-color: rgb(228, 227, 255);
        background-color: rgb(36, 4, 37);
      }


      #career-section-vacancy {
        margin: 18rem 0% 200px 0px;
        text-align: center;
      }

      #career-section-vacancy-title {
        font-size: 30px;
        font-family: zonapro-extrabold;
        margin-bottom: 16px;
      }

      #career-section-vacancy-text {
        font-size: 15px;
        font-family: zonapro-bold;
      }

    }

    @media screen and (min-width: 1000px) {
      #career-section-proposition {
        position: relative;
        max-width: 100%;
        padding: 4rem 0% 4rem 0%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(to left bottom, #c5dcc4, #c5e4da, #ceeaeb, #def0f7, #eff5fc, #f6f8fd, #fbfbfe, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
      }

      #career-section-proposition-image {
        position: relative;
        width: 40%;
        margin-left: 5%;
        }

      #career-section-proposition-text-box {
        padding-top: 40px;
        width: 50%;
        margin-right: 5%;
      }

      #career-section-proposition-text-title {
        font-size: 43px;
        font-family: zonapro-extrabold;
        margin-bottom: 18px;
        word-spacing: 8px;
      }

      #career-section-proposition-text-body {
        font-size: 12px;
        font-family: zonapro-bold;
        word-spacing: 3px;
        line-height: 20px;
        text-align: justify;
      }

      #career-section-employability-skills {
        margin-top: 8rem;
        padding-top: 4rem;
        padding-bottom: 3rem;
        position: relative;
        max-width: 100%;
        background-image: url("../images/party4.jpg");
        background-position: center;
        border-bottom-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-top-right-radius: 30%;
        border-top-left-radius: 30%;
      }

      #career-section-title {
        font-size: 30px;
        margin-bottom: 100px;
        font-family: zonapro-extrabold;
        text-align: center;
      }

      #career-section-skills {
        position: relative;
        display: grid;
        grid-template-columns: 25% 25% 25%;
        justify-content: space-evenly;
        row-gap: 100px;
        height: auto;
        margin-top: 2rem;
      }

      .career-skill {
        max-width: 300px;
        margin-left: 5%;
        text-align: center;
        padding: 18px 10px;
        border-radius: 16px;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
      }

      .skill-title {
        font-size: 20px;
        font-family: zonapro-bold;
        margin-bottom: 14px;
        color: white;
      }

      .skill-content {
        font-size: 13px;
        font-family: zonapro-bold;
        color: white;
      }

      .soft-skill {
        background-color: rgb(248, 243, 242);
        background-color: rgb(10, 10, 49);
      }

      .hard-skill {
        background-color: rgb(228, 227, 255);
        background-color: rgb(36, 4, 37);
      }


      #career-section-vacancy {
        margin: 18rem 0% 200px 0px;
        text-align: center;
      }

      #career-section-vacancy-title {
        font-size: 30px;
        font-family: zonapro-extrabold;
        margin-bottom: 16px;
      }

      #career-section-vacancy-text {
        font-size: 15px;
        font-family: zonapro-bold;
      }


    }