/* Header style */
      header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        padding: 0.5em;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 999;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
      }

      header .header-container {
        margin: 0 auto;
        padding: 0 1.3em;
      }

      footer {
        background-color: #222222;
        padding: 0.6em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.87em;
        color: #fff;
        height: 40px;
      }

      footer .footer-container {
        margin: 0 auto;
        padding: 0 0.6em;
      }

      .logo {
        padding-left: 0.8vw;
      }

      /* Add table style for hiring process */
       .table-container {
        margin: 0 auto;
      }

      table {
        text-align: left;
        border-collapse: collapse;
        margin: 0 auto;
      }

      td {
        padding: 1.5625em;
        border: 0px;
      }

      td:first-child {
        text-align: left;
      }

      th {
        padding: 0.9375em;
        background-color: #25b3c3;
      }

      .table-container table tr {
        transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out, opacity 0.3s ease-in-out;
        position: relative;
      }
      .table-container table tr:hover {
        background-color: #99d5dd;
        color: #333;
        opacity: 0.8;
      }

      .table-container table tr:before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0.125em;
        background-color: #ff3067;
        transform: scaleX(0);
        transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
      }

      .table-container table tr:hover:before {
        transform: scaleX(1);
        background-color: #ff3067;
      }

      .table-container table tr h4 {
        margin-bottom: 0.3125em;
      }


      /* Add Apple-inspired CSS styles */
      body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
      }

      <nav class="nav my-nav">
      </nav>

      .my-nav {
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
      }

      .my-nav ul {
      list-style-type: none;
      margin: 2vh;
      overflow: hidden;
      }

      .my-nav li {
      display: inline;
      position: relative;
      }

      .my-nav li::before {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      height: 2.5px;
      background-color: white;
      width: 0;
      transition: 0.3s;
      }

      .my-nav li:hover::before {
      width: 100%;
      left: 25%; 
      transition: 0.3s;
      }

      .my-nav a {
      color: #b9babb;
      text-decoration: none;
      padding: 0.625em;
      font-size: 1.1em;
      margin: 0 0.25em;
      }
      .my-nav a:hover {
      text-shadow: 0 0 15px #fff; 
      transition: text-shadow 0.3s ease; 
      font-weight: bold;
      color: #fff;  
      }

      #about,
      #jobs,
      #culture-benefits,
      #contact {
        padding: 0em 0;
      }

      #contact a {
        color: #333333;
        margin: 0.3vw;
        top: 0px;
        position: relative;

        &:hover {
          transition: all 0.2s ease-out;
          filter: drop-shadow(0px 4px 8px rgba(38, 38, 38, 0.5));
          top: -4px;
          font-size: x-large;
        }
      }

      #jobs a {
        color: #484b6a;
      }

      #culture-benefits {
        display: flex;
        justify-content: center;
      }

      #banner {
        position: relative;
        background-image: url("images/bg-img.png");
        background-size: cover;
        height: 110vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
      }

      #banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        z-index: 1;
      }

      #banner .banner-container {
        position: relative;
        z-index: 2;
      }

      h1,
      h2,
      h3,
      h4 {
        color: #000;
        text-align: center;
        margin-bottom: 1.25em;
      }

      h1 {
        font-size: 2.5em;
      }

      h2 {
        font-size: 2em;
      }

      p.headline {
        margin-bottom: 1em;
        text-align: center;
        font-size: 1.2em;
      }

      p.body-p {
        margin-bottom: 1em;
        text-align: center;
        font-size: 1em;
      }

      ul,
      ol {
        margin-bottom: 0.9375em;
      }

      li {
        margin-bottom: 0.3125em;
      }

      /* Intro Box styles */
      .intro {
        text-align: left;
        background-color: #ff0044;
        border-radius: 0 0 30% 30%;
        padding: 5.841vw;
        color: #fff;
        overflow: hidden;
        margin-bottom: 8vh;
      }

      .intro-container {
        width: 100%;
      }

      @media (min-width: 1024px) {
        h1 {
          font-size: 2.25em;
        }

        h2 {
          font-size: 1.5em;
        }

        nav a {
          font-size: 0.875em;
          padding: 0.5em;
        }

        p {
          font-size: 0.875em;
        }

        #banner {
          background-size: cover;
          height: 110vh;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          text-align: center;
        }

        #banner::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.3);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          z-index: 1;
        }

        #banner .container {
          position: relative;
          z-index: 2;
          margin-bottom: 2.179vh;
        }

        .cards {
          display: flex;
          justify-content: center;
          gap: 15px;
        }

        .cards .first,
        .cards .second,
        .cards .third {
          background-color: #b4c1c5;
        }

        .cards .card {
          display: inline-block;
          align-items: center;
          justify-content: center;
          text-align: center;
          box-sizing: border-box;
          vertical-align: middle;
          line-height: 1.4;
          height: auto;
          width: 30vw;
          border-radius: 1.5em;
          color: white;
          padding: 1em;
          cursor: pointer;
          transition: 400ms;
        }

        .cards .card p.tip {
          font-size: 1.5em;
          font-weight: 700;
        }

        .cards .card p.second-text {
          font-size: 1em;
          text-align: justify;
        }

        .cards .card:hover {
          transform: scale(1.1, 1.1);
        }

        .cards:hover>.card:not(:hover) {
          filter: blur(10px);
          transform: scale(0.9, 0.9);
        }
      }

      @media screen and (min-width: 320px) and (max-width: 1023px) {
        header {
          font-size: 0.5em;
          text-align: left;
        }

        h1 {
          font-size: 1.8em;
        }

        h2 {
          font-size: 1.5em;
        }

        .my-nav a {
          font-size: 0.9em;
          padding: 0.5em;
          margin: 0.35em;
        }

        p {
          font-size: 0.875em;
        }

        #banner {
          background-size: cover;
          height: 47vh;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          text-align: center;
        }

        #banner::before {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: rgba(0, 0, 0, 0.6);
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          z-index: 1;
        }

        #banner .container {
          position: relative;
          z-index: 2;
        }

        .cards {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 8vh;
        }

        .cards .first,
        .cards .second,
        .cards .third {
          background-color: #b4c1c5;
        }

        .cards .card {
          display: inline-block;
          top: 0px;
          position: relative;
          align-items: center;
          justify-content: center;
          text-align: center;
          box-sizing: border-box;
          vertical-align: middle;
          line-height: 1.4;
          height: auto;
          width: 80%;
          border-radius: 1.5em;
          color: #444444;
          padding: 1em;

          &:hover {
            transition: all 0.2s ease-out;
            box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.3);
            top: -4px;
            background-color: #efefef;
          }
        }

        .cards .card p.tip {
          font-size: 1.5em;
          font-weight: 700;
        }

        .cards .card p.second-text {
          font-size: .9em;
          text-align: justify;
        }
      }

      /* Dark Mode styles */
      @import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

      * {
        box-sizing: border-box;
      }

      body {
        background-color: #faf7f2;
        color: #333;
      }

      .dark {
        background-color: #121212;
        color: #fff;
      }

      .dark h1,
      .dark h2,
      .dark h3,
      .dark h4 {
        color: #fff;
      }

      .dark .icon,
      .dark a {
        color: #fff;
      }

      .dark .intro {
        background-color: #282828;
      }

      .dark .cards .first,
      .dark .cards .second,
      .dark .cards .third {
        background-color: #282828;
      }

      .dark .cards .card {
        color: white;

        &:hover {
          transition: all 0.2s ease-out;
          box-shadow: 0px 4px 8px rgba(38, 38, 38, 0.3);
          top: -4px;
          background-color: #282828;
        }
      }

      .dark #jobs a {
        color: #fff;
      }

      .dark #contact a {
        color: #fff;
      }

      .checkbox {
        opacity: 0;
        position: absolute;
      }

      .checkbox-label {
        background-color: #111;
        width: 3.125em;
        height: 1.625em;
        border-radius: 3.125em;
        position: relative;
        padding: 0.3125em;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .fa-moon {
        color: #f1c40f;
      }

      .fa-sun {
        color: #f39c12;
      }

      .checkbox-label .ball {
        background-color: #fff;
        width: 1.375em;
        height: 1.375em;
        position: absolute;
        left: 0.125em;
        top: 0.125em;
        border-radius: 50%;
        transition: transform 0.2s linear;
      }

      .checkbox:checked+.checkbox-label .ball {
        transform: translateX(1.5em);
      }
      .dark .apply-now-button span {
        color: #fff; 
      }

      /* table filter */
      * {
        box-sizing: border-box;
      }

      .input-container {
        display: flex;
        justify-content: center;
      }

      #myInput {
        margin-bottom: 2em;
        border-radius: 2em;
        background-image: url('images/search-icon.png');
        background-position: 20px center;
        background-repeat: no-repeat;
        width: 80%;
        font-size: 0.9em;
        padding: 12px 0 12px 50px;
        border: 1px solid #ddd;
        margin-bottom: 8vh;
        background-size: 25px;
        color: black;
      }

      #myInput:hover {
        box-shadow: 0 0 1em #00000025;
      }

      #myjobsTable {
        border-collapse: collapse;
        margin: 1vh auto;
        font-size: 1em;
        width: 50%;
      }

      #myjobsTable th,
      #myjobsTable td {
        text-align: left;
        padding: 0.8em;
      }

      #myjobsTable tr.header,
      #myjobsTable tr:hover {
        background-color: #99d5dd;
        opacity: 0.9;
        text-align: left;
      }


      /* Apply Now button */
      .apply-now-button {
       position: relative;
       margin: 8vh auto;
       padding: 12px 18px;
       transition: all 0.2s ease;
       border: none;
       background: none;
      }

      .apply-now-button:before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       display: block;
       border-radius: 50px;
       background: #b1dae7;
       width: 45px;
       height: 45px;
       transition: all 0.3s ease;
      }

      .apply-now-button span {
       position: relative;
       font-family: "Ubuntu", sans-serif;
       font-size: 18px;
       font-weight: 700;
       letter-spacing: 0.05em;
       color: #234567;
      }

      .apply-now-button svg {
       position: relative;
       top: 0;
       margin-left: 10px;
       fill: none;
       stroke-linecap: round;
       stroke-linejoin: round;
       stroke: #234567;
       stroke-width: 2;
       transform: translateX(-5px);
       transition: all 0.3s ease;
      }

      .apply-now-button:hover:before {
       width: 100%;
       background: #b1dae7;
      }

      .apply-now-button:hover svg {
       transform: translateX(0);
      }

      .apply-now-button:active {
       transform: scale(0.95);
      }

      * {
        scroll-behavior: smooth;
      }