Careers Components in Vista library

<section class="bg-darkPink-900 pt-24 pb-56">
    <div class="container mx-auto px-4">
        <div class="pb-24 mb-24 border-b border-white border-opacity-20 border-dashed">
            <div class="flex items-start justify-between flex-wrap gap-6">
                <div class="order-last sm:order-first">
                    <h1 class="font-heading text-white text-4xl md:text-6xl font-bold mb-6">Careers at Vista</h1>
                    <a href="#" class="group relative inline-block p-0.5 font-semibold overflow-hidden rounded-full">
                        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-500 group-focus:to-white opacity-40 group-focus:opacity-20 rounded-full"></div>
                        <div class="relative z-50 flex items-center py-2 px-4 bg-white group-hover:bg-opacity-80 group-focus:bg-opacity-80 rounded-full transition duration-200">
                            <p class="text-pinkSecondary-900">View Openings</p>
                        </div>
                    </a>
                </div>
                <div class="relative">
                    <div class="absolute left-0 top-0 bg-pink-500 blur-xl filter opacity-50 h-full w-full"></div>
                    <img class="h-16 relative z-50" src="vista-assets/images/logos/vista-logo-small.svg" alt="">
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-4xl font-bold mb-4">Benefits</h2>
        <p class="text-white text-opacity-70 mb-16 max-w-2xl">Our team receives support, enjoys ample vacation time, opportunities to give back, and the financial resources they need to thrive both inside and outside of work.</p>
        <div class="flex flex-wrap -m-4 lg:mb-16">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/wallet.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Inclusive Health Package</p>
                        <p class="text-white text-opacity-70 max-w-xs">We care for your well-being, no health expense stress.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/weight.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Free Gym Membership</p>
                        <p class="text-white text-opacity-70 max-w-xs">Enjoy a complimentary gym membership for your fitness.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/global.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Flexible Working Style</p>
                        <p class="text-white text-opacity-70 max-w-xs">We're fully remote, working across time zones.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-24">
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/happyemoji.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Balanced Working Life</p>
                        <p class="text-white text-opacity-70 max-w-xs">Enjoy 4-week vacations. Recharge as needed.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/messages.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Diversity and Inclusion</p>
                        <p class="text-white text-opacity-70 max-w-xs">Diversity in team members and inclusive culture.</p>
                    </div>
                </div>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="bg-gradient-to-b from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                    <div class="bg-darkPink-900 rounded-2xl p-8">
                        <img class="h-6 mb-6" src="vista-assets/images/careers/blur.svg" alt="">
                        <p class="text-white text-lg font-semibold mb-2">Generous Perks Program</p>
                        <p class="text-white text-opacity-70 max-w-xs">We offer stipends for home office, learning, and wellness perks.</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex flex-wrap -m-4 mb-24">
            <div class="w-full lg:w-2/3 p-4">
                <h2 class="font-heading text-white text-4xl font-bold mb-4 max-w-xs">Our hiring process</h2>
                <p class="text-white text-opacity-70 max-w-lg">Our interview process aims to ensure Vista is the right fit for you just as much as ensuring you are the right fit for Vista. We encourage you to apply and see for yourself what makes us a great place to work!</p>
            </div>
            <div class="w-full lg:w-1/3 p-4">
                <div class="flex lg:justify-end gap-6">
                    <div class="relative">
                        <div class="relative z-50">
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">1</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">2</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center mb-4">
                                <span class="text-white text-sm font-bold">3</span>
                            </div>
                            <div class="rounded-full bg-pink-500 py-1 w-8 h-8 flex items-center justify-center">
                                <span class="text-white text-sm font-bold">4</span>
                            </div>
                        </div>
                        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 bg-pink-500 h-full w-px"></div>
                    </div>
                    <div class="flex flex-col gap-5">
                        <p class="text-white text-lg font-semibold">Candidate screening</p>
                        <p class="text-white text-lg font-semibold">Technical interview</p>
                        <p class="text-white text-lg font-semibold">Negotiation offer</p>
                        <p class="text-white text-lg font-semibold">Onboarding</p>
                    </div>
                </div>
            </div>
        </div>
        <h2 class="font-heading text-white text-center text-4xl font-bold mb-10">Open roles</h2>
        <p class="text-white text-lg font-semibold mb-4">Engineering</p>
        <a href="#" class="inline-block mb-4 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Full-Stack Engineer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="inline-block mb-10 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Senior Engineer (Platform Team)</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <p class="text-white text-lg font-semibold mb-4">Design</p>
        <a href="#" class="inline-block mb-4 w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Staff Product Designer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
        <a href="#" class="inline-block w-full group">
            <div class="bg-gradient-to-t from-pink-300 via-pink-700 to-darkPink-900 rounded-2xl p-px">
                <div class="bg-pinkSecondary-900 rounded-2xl px-8 py-5">
                    <div class="flex flex-wrap -mx-4">
                        <div class="w-full sm:w-1/2 px-4">
                            <p class="text-white text-lg font-medium mb-2 sm:mb-0">Product Designer</p>
                        </div>
                        <div class="w-full sm:w-1/2 px-4">
                            <div class="flex flex-wrap justify-between items-center gap-4">
                                <p class="text-white text-opacity-70 group-hover:text-opacity-100 transition duration-200">Remote</p>
                                <span class="text-white text-opacity-50 group-hover:text-opacity-100 transition duration-200">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                        <g>
                                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                                        </g>
                                    </svg>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </a>
    </div>
</section>

<section class="position-relative pb-12 pb-lg-24 bg-danger-dark">
  <div class="container">
    <div class="py-7 mb-16 mb-sm-24 border-bottom border-white border-opacity-10">
      <div class="row">
        <div class="col-sm-6 mb-8 mb-sm-0">
          <div class="d-flex align-items-center"><img class="img-fluid" style="height: 24px;" src="vista-assets/images/logos/vista-logo-small.svg" alt=""><span class="mx-8">
              <svg width="1" height="24" viewBox="0 0 1 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <line x1="0.5" y1="24" x2="0.5" stroke="white" style="stroke:white;stroke-opacity:1;"></line>
              </svg></span><span class="fw-semibold">Careers</span></div>
        </div>
        <div class="col-sm-6 text-sm-end"><a class="btn p-0 fs-9 border-0" href="#"><span class="me-2">View openings</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.5 3L10.5 8L5.5 13" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg></a></div>
      </div>
    </div>
    <div class="mw-5xl mx-auto">
      <div class="row align-items-center">
        <div class="col-md-8 col-lg-6 mt-12 mt-md-0 order-last order-md-first">
          <h2 class="font-heading mb-6">Careers at Vista</h2><a class="btn d-inline-flex align-items-center text-danger-dark btn-light border-2 border-secondary border-opacity-25" href="#">View Openings </a>
        </div>
        <div class="col-md-4 col-lg-6">
          <div class="d-flex justify-content-md-end">
            <div class="position-relative" style="width: 67px;">
              <div class="position-absolute top-50 start-50 mt-n16 translate-middle-x d-inline-block h-100 w-100 bg-gradient-danger-top rounded-pill" style="filter: blur(65px);"></div>
              <div>
                <svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <g clip-path="url(#clip0_304_4654)">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M50.2748 5.09818H13.3191C13.0588 5.09818 12.8065 5.13454 12.561 5.19864C12.5116 5.21178 12.4647 5.23215 12.4177 5.2526C12.383 5.26764 12.3483 5.28272 12.3124 5.295C12.2834 5.30594 12.2542 5.31662 12.225 5.3273C12.103 5.37198 11.9805 5.4168 11.8666 5.48196C11.8128 5.51295 11.7648 5.55016 11.717 5.58722C11.6846 5.6123 11.6523 5.63731 11.6184 5.66029C11.5989 5.67412 11.5792 5.68785 11.5596 5.70159C11.4575 5.77299 11.3549 5.84468 11.2648 5.93168C11.2104 5.98523 11.1639 6.04577 11.1171 6.10676C11.0987 6.13071 11.0802 6.15473 11.0612 6.17843C11.0365 6.20746 11.0104 6.23563 10.9843 6.26386C10.9265 6.32635 10.8684 6.38913 10.8237 6.46216L0.717657 22.2637C0.69658 22.2983 0.681702 22.3354 0.666688 22.3729C0.654919 22.4022 0.643067 22.4318 0.62808 22.4605C0.615496 22.483 0.599306 22.5041 0.582946 22.5254C0.561647 22.5532 0.540059 22.5813 0.525766 22.6134C0.512352 22.6434 0.505411 22.6742 0.498551 22.7047C0.491857 22.7344 0.48524 22.7637 0.47276 22.7917C0.419037 22.935 0.375107 23.0817 0.341273 23.231C0.315402 23.3474 0.295652 23.4652 0.282103 23.5837C0.269462 23.7317 0.267608 23.8803 0.276556 24.0285L0.277711 24.0437C0.28654 24.1601 0.295228 24.2747 0.313537 24.3881C0.33911 24.5284 0.382665 24.6604 0.427219 24.7953L0.432081 24.8101C0.439135 24.8301 0.446067 24.8502 0.452986 24.8702C0.487178 24.9691 0.521065 25.0671 0.567884 25.1605C0.577279 25.1803 0.583968 25.2014 0.590702 25.2227C0.597221 25.2434 0.603782 25.2641 0.612877 25.2838C0.647464 25.3482 0.692809 25.4034 0.738184 25.4587C0.762349 25.4881 0.786521 25.5176 0.809082 25.5484C0.829573 25.5789 0.846879 25.61 0.863979 25.6408C0.890083 25.6877 0.915708 25.7337 0.951458 25.7755L31.4969 61.8539C32.0237 62.4756 32.8132 62.9173 33.6003 62.8949C33.6057 62.8949 33.6112 62.8964 33.6162 62.8977C33.6202 62.8988 33.6239 62.8998 33.6268 62.8998C33.6708 62.9023 33.7127 62.9023 33.7571 62.9023H33.7632C34.0272 62.9023 34.2863 62.853 34.5355 62.7864C34.6095 62.763 34.6762 62.7396 34.7502 62.7112C34.9358 62.6454 35.1144 62.5611 35.2831 62.4595C35.297 62.4514 35.3111 62.4433 35.3252 62.4351C35.3691 62.4098 35.4138 62.3839 35.4559 62.3558C35.6571 62.2163 35.8457 62.056 36.0086 61.8625L66.8678 25.7847C66.8905 25.7575 66.9076 25.727 66.9248 25.6965C66.9371 25.6744 66.9494 25.6524 66.9639 25.6316C66.9823 25.6084 67.0025 25.5866 67.0228 25.5647C67.0567 25.5281 67.0907 25.4913 67.117 25.4471C67.1441 25.4045 67.163 25.3587 67.182 25.3124C67.194 25.2831 67.2062 25.2536 67.2205 25.2246C67.2725 25.1291 67.3216 25.0328 67.36 24.9292C67.4179 24.7788 67.4576 24.6262 67.4921 24.4733C67.4963 24.4537 67.5006 24.4342 67.5049 24.4148C67.5232 24.332 67.541 24.2513 67.5488 24.1674C67.5685 23.9971 67.5611 23.8311 67.5488 23.6622C67.546 23.6241 67.5449 23.587 67.5439 23.5506C67.5422 23.4915 67.5406 23.4343 67.5316 23.3779C67.4983 23.1634 67.4303 22.9534 67.3475 22.7512C67.3385 22.73 67.3339 22.7085 67.3292 22.687C67.3243 22.6642 67.3194 22.6413 67.3093 22.6185C67.3078 22.617 67.3065 22.6154 67.3052 22.6138C67.304 22.6122 67.3029 22.6104 67.3019 22.6087C67.3019 22.6042 67.2999 22.6018 67.2977 22.5991L67.2969 22.5982L63.8734 15.3288L42.0278 41.3633L30.0575 42.4106L29.0103 30.4403L50.2748 5.09818Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                  </g>
                </svg>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="my-12 my-sm-24 border-white border-opacity-10" style="border-bottom: 2px dashed;"></div>
      <div class="mw-2xl mb-16">
        <h4 class="mb-4">Benefits</h4>
        <p class="text-white text-opacity-50 mb-0">Our team receives support, enjoys ample vacation time, opportunities to give back, and the financial resources they need to thrive both inside and outside of work.</p>
      </div>
      <div class="row mb-12 mb-md-24">
        <div class="col-sm-6 col-lg-4 mb-16">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.94 2.21001L9.52995 7.82001H7.11995C6.71995 7.82001 6.32995 7.85001 5.94995 7.93001L6.94995 5.53001L6.98995 5.44001L7.04995 5.28001C7.07995 5.21001 7.09995 5.15001 7.12995 5.10001C8.28995 2.41001 9.58995 1.57001 11.94 2.21001Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M18.7301 8.09002L18.7101 8.08002C18.1101 7.91002 17.5001 7.82002 16.8801 7.82002H10.6201L12.8701 2.59002L12.9001 2.52002C13.0401 2.57002 13.1901 2.64002 13.3401 2.69002L15.5501 3.62002C16.7801 4.13002 17.6401 4.66002 18.1701 5.30002C18.2601 5.42002 18.3401 5.53002 18.4201 5.66002C18.5101 5.80002 18.5801 5.94002 18.6201 6.09002C18.6601 6.18002 18.6901 6.26002 18.7101 6.35002C18.8601 6.86002 18.8701 7.44002 18.7301 8.09002Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M12.52 17.66H12.77C13.07 17.66 13.32 17.39 13.32 17.06C13.32 16.64 13.2 16.58 12.94 16.48L12.52 16.33V17.66Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M18.29 9.52001C17.84 9.39001 17.37 9.32001 16.88 9.32001H7.11999C6.43999 9.32001 5.79999 9.45001 5.19999 9.71001C3.45999 10.46 2.23999 12.19 2.23999 14.2V16.15C2.23999 16.39 2.25999 16.62 2.28999 16.86C2.50999 20.04 4.20999 21.74 7.38999 21.95C7.61999 21.98 7.84999 22 8.09999 22H15.9C19.6 22 21.55 20.24 21.74 16.74C21.75 16.55 21.76 16.35 21.76 16.15V14.2C21.76 11.99 20.29 10.13 18.29 9.52001ZM13.28 15.5C13.74 15.66 14.36 16 14.36 17.06C14.36 17.97 13.65 18.7 12.77 18.7H12.52V18.92C12.52 19.21 12.29 19.44 12 19.44C11.71 19.44 11.48 19.21 11.48 18.92V18.7H11.39C10.43 18.7 9.63999 17.89 9.63999 16.89C9.63999 16.6 9.86999 16.37 10.16 16.37C10.45 16.37 10.68 16.6 10.68 16.89C10.68 17.31 11 17.66 11.39 17.66H11.48V15.97L10.72 15.7C10.26 15.54 9.63999 15.2 9.63999 14.14C9.63999 13.23 10.35 12.5 11.23 12.5H11.48V12.28C11.48 11.99 11.71 11.76 12 11.76C12.29 11.76 12.52 11.99 12.52 12.28V12.5H12.61C13.57 12.5 14.36 13.31 14.36 14.31C14.36 14.6 14.13 14.83 13.84 14.83C13.55 14.83 13.32 14.6 13.32 14.31C13.32 13.89 13 13.54 12.61 13.54H12.52V15.23L13.28 15.5Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M10.6799 14.14C10.6799 14.56 10.7999 14.62 11.0599 14.72L11.4799 14.87V13.54H11.2299C10.9199 13.54 10.6799 13.81 10.6799 14.14Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Inclusive Health Package</span>
                <p class="text-white text-opacity-50 mb-0">We care for your well-being, no health expense stress.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-16">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.8467 5.25C16.1367 5.25 14.0967 5.9 14.0967 9V15C14.0967 18.1 16.1367 18.75 17.8467 18.75C19.5567 18.75 21.5967 18.1 21.5967 15V9C21.5967 5.9 19.5567 5.25 17.8467 5.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M7.48682 5.25C5.77682 5.25 3.73682 5.9 3.73682 9V15C3.73682 18.1 5.77682 18.75 7.48682 18.75C9.19682 18.75 11.2368 18.1 11.2368 15V9C11.2368 5.9 9.19682 5.25 7.48682 5.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M14.0968 11.25H11.2368V12.75H14.0968V11.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M23.1667 15.25C22.7567 15.25 22.4167 14.91 22.4167 14.5V9.5C22.4167 9.09 22.7567 8.75 23.1667 8.75C23.5767 8.75 23.9167 9.09 23.9167 9.5V14.5C23.9167 14.91 23.5767 15.25 23.1667 15.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M2.16675 15.25C1.75675 15.25 1.41675 14.91 1.41675 14.5V9.5C1.41675 9.09 1.75675 8.75 2.16675 8.75C2.57675 8.75 2.91675 9.09 2.91675 9.5V14.5C2.91675 14.91 2.57675 15.25 2.16675 15.25Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Free Gym Membership</span>
                <p class="text-white text-opacity-50 mb-0">Enjoy a complimentary gym membership for your fitness.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-16">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M7.98355 20.91C7.95355 20.91 7.91356 20.93 7.88355 20.93C5.94355 19.97 4.36355 18.38 3.39355 16.44C3.39355 16.41 3.41355 16.37 3.41355 16.34C4.63355 16.7 5.89355 16.97 7.14355 17.18C7.36355 18.44 7.62355 19.69 7.98355 20.91Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M21.2735 16.45C20.2835 18.44 18.6335 20.05 16.6235 21.02C17.0035 19.75 17.3235 18.47 17.5335 17.18C18.7935 16.97 20.0335 16.7 21.2535 16.34C21.2435 16.38 21.2735 16.42 21.2735 16.45Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M21.3535 7.70998C20.0935 7.32998 18.8235 7.01998 17.5335 6.79998C17.3235 5.50998 17.0135 4.22998 16.6235 2.97998C18.6935 3.96998 20.3635 5.63998 21.3535 7.70998Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M7.98348 3.09C7.62348 4.31 7.36348 5.55 7.15348 6.81C5.86348 7.01 4.58348 7.33 3.31348 7.71C4.28348 5.7 5.89348 4.05 7.88348 3.06C7.91348 3.06 7.95348 3.09 7.98348 3.09Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M15.8235 6.59C13.5035 6.33 11.1635 6.33 8.84351 6.59C9.09351 5.22 9.41351 3.85 9.86351 2.53C9.88351 2.45 9.87351 2.39 9.88351 2.31C10.6735 2.12 11.4835 2 12.3335 2C13.1735 2 13.9935 2.12 14.7735 2.31C14.7835 2.39 14.7835 2.45 14.8035 2.53C15.2535 3.86 15.5735 5.22 15.8235 6.59Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M6.9235 15.49C5.5435 15.24 4.1835 14.92 2.8635 14.47C2.7835 14.45 2.7235 14.46 2.6435 14.45C2.4535 13.66 2.3335 12.85 2.3335 12C2.3335 11.16 2.4535 10.34 2.6435 9.56001C2.7235 9.55001 2.7835 9.55001 2.8635 9.53001C4.1935 9.09001 5.5435 8.76001 6.9235 8.51001C6.6735 10.83 6.6735 13.17 6.9235 15.49Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M22.3334 12C22.3334 12.85 22.2134 13.66 22.0234 14.45C21.9434 14.46 21.8834 14.45 21.8034 14.47C20.4734 14.91 19.1134 15.24 17.7434 15.49C18.0034 13.17 18.0034 10.83 17.7434 8.51001C19.1134 8.76001 20.4834 9.08001 21.8034 9.53001C21.8834 9.55001 21.9434 9.56001 22.0234 9.56001C22.2134 10.35 22.3334 11.16 22.3334 12Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M15.8235 17.41C15.5735 18.79 15.2535 20.15 14.8035 21.47C14.7835 21.55 14.7835 21.61 14.7735 21.69C13.9935 21.88 13.1735 22 12.3335 22C11.4835 22 10.6735 21.88 9.88351 21.69C9.87351 21.61 9.88351 21.55 9.86351 21.47C9.42351 20.14 9.09351 18.79 8.84351 17.41C10.0035 17.54 11.1635 17.63 12.3335 17.63C13.5035 17.63 14.6735 17.54 15.8235 17.41Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M16.0968 15.7633C13.5957 16.0789 11.0713 16.0789 8.57017 15.7633C8.25461 13.2622 8.25461 10.7378 8.57017 8.23667C11.0713 7.92111 13.5957 7.92111 16.0968 8.23667C16.4124 10.7378 16.4124 13.2622 16.0968 15.7633Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Flexible Working Style</span>
                <p class="text-white text-opacity-50 mb-0">We're fully remote, working across time zones.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-16 mb-lg-0">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M11.97 2C6.44997 2 1.96997 6.48 1.96997 12C1.96997 17.52 6.44997 22 11.97 22C17.49 22 21.97 17.52 21.97 12C21.97 6.48 17.5 2 11.97 2ZM17.4 16.43C16.17 18.2 14.15 19.25 12 19.25C9.84997 19.25 7.82997 18.2 6.59997 16.43C6.35997 16.09 6.44997 15.62 6.78997 15.39C7.12997 15.15 7.59997 15.24 7.82997 15.58C8.77997 16.94 10.34 17.76 12 17.76C13.66 17.76 15.22 16.95 16.17 15.58C16.41 15.24 16.87 15.16 17.21 15.39C17.56 15.62 17.64 16.09 17.4 16.43Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Balanced Working Life</span>
                <p class="text-white text-opacity-50 mb-0">We care for your well-being, no health expense stress.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4 mb-16 mb-md-0">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M22.6666 12.86C22.6666 15.15 21.4866 17.18 19.6666 18.46L18.3266 21.41C18.0166 22.08 17.1166 22.21 16.6466 21.64L15.1666 19.86C13.3066 19.86 11.5966 19.23 10.2966 18.18L10.8966 17.47C15.5166 17.12 19.1666 13.46 19.1666 9.00002C19.1666 8.24002 19.0566 7.49002 18.8566 6.77002C21.1266 7.97002 22.6666 10.25 22.6666 12.86Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M16.9667 6.07C15.7967 3.67 13.1867 2 10.1667 2C6.02675 2 2.66675 5.13 2.66675 9C2.66675 11.29 3.84675 13.32 5.66675 14.6L7.00675 17.55C7.31675 18.22 8.21675 18.34 8.68675 17.78L9.23675 17.12L10.1667 16C14.3067 16 17.6667 12.87 17.6667 9C17.6667 7.95 17.4167 6.96 16.9667 6.07ZM12.6667 9.75H7.66675C7.25675 9.75 6.91675 9.41 6.91675 9C6.91675 8.59 7.25675 8.25 7.66675 8.25H12.6667C13.0767 8.25 13.4167 8.59 13.4167 9C13.4167 9.41 13.0767 9.75 12.6667 9.75Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Diversity and Inclusion</span>
                <p class="text-white text-opacity-50 mb-0">Enjoy a complimentary gym membership for your fitness.</p>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-lg-4">
          <div class="position-relative rounded-2 bg-gradient-danger-bottom" style="padding: 1px;">
            <div class="ps-8 py-8 pe-10 pe-md-16 rounded-2 bg-danger-dark">
              <svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M13.8035 7.41L16.2635 6.2C16.5635 6.05 16.6435 5.66 16.4135 5.42C15.5235 4.44 14.6235 3.62 13.9035 3C13.5735 2.72 13.0835 2.95 13.0835 3.38V6.96C13.0835 7.33 13.4735 7.57 13.8035 7.41Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M13.0835 19.74V21.39C13.0835 21.69 13.3535 21.94 13.6535 21.89C16.3835 21.44 18.6635 19.61 19.7435 17.15C19.9335 16.73 19.4735 16.31 19.0535 16.51L13.3635 19.3C13.1935 19.38 13.0835 19.55 13.0835 19.74Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M11.5835 3.36C11.5835 2.93 11.0935 2.7 10.7635 2.97C8.40347 4.95 4.21347 9.12 4.23347 13.9C4.23347 17.92 7.17347 21.25 11.0135 21.89C11.3135 21.94 11.5835 21.69 11.5835 21.39V3.36Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M13.7735 12.4699L19.0635 10.2499C19.3335 10.1299 19.4635 9.81995 19.3335 9.55995C18.9635 8.82995 18.5335 8.11995 18.0635 7.45995C17.9235 7.25995 17.6635 7.19995 17.4435 7.29995L13.3535 9.28995C13.1835 9.36995 13.0735 9.54994 13.0735 9.73994V12.0099C13.0835 12.3599 13.4435 12.6099 13.7735 12.4699Z" fill="white" style="fill:white;fill-opacity:1;"></path>
                <path d="M20.1635 14.31C20.3235 14.23 20.4235 14.08 20.4235 13.91C20.4235 13.27 20.3435 12.64 20.2035 12.02C20.1335 11.72 19.8035 11.56 19.5235 11.68L13.3835 14.3C13.2035 14.38 13.0835 14.56 13.0835 14.76V16.96C13.0835 17.33 13.4735 17.57 13.8035 17.41L19.7035 14.54L20.1635 14.31Z" fill="white" style="fill:white;fill-opacity:1;"></path>
              </svg>
              <div class="mt-6"><span class="d-block mb-2 fs-7 fw-semibold">Generous Perks Program</span>
                <p class="text-white text-opacity-50 mb-0">We're fully remote, working across time zones.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mb-12 mb-md-24 align-items-center">
        <div class="col-md-6 col-xl-7 mb-12 mb-md-0">
          <div class="mw-lg">
            <h4 class="font-heading mb-4"><span class="d-block">Our hiring</span><span>process</span></h4>
            <p class="text-white text-opacity-50 mb-0">Our interview process aims to ensure Vista is the right fit for you just as much as ensuring you are the right fit for Vista. We encourage you to apply and see for yourself what makes us a great place to work!</p>
          </div>
        </div>
        <div class="col-md-6 col-xl-5">
          <div class="d-flex flex-column align-items-md-end">
            <div>
              <div class="d-flex mb-4 align-items-center">
                <div class="position-relative d-flex align-items-center justify-content-center fs-9 fw-bold bg-danger rounded-pill" style="width: 32px; height: 32px;"><span>1</span>
                  <div class="position-absolute top-100 start-50 translate-middle-x bg-danger py-4" style="width: 2px;"></div>
                </div><span class="ms-6 fs-7 fw-semibold">Candidate screening</span>
              </div>
              <div class="d-flex mb-4 align-items-center">
                <div class="position-relative d-flex align-items-center justify-content-center fs-9 fw-bold bg-danger rounded-pill" style="width: 32px; height: 32px;"><span>2</span>
                  <div class="position-absolute top-100 start-50 translate-middle-x bg-danger py-4" style="width: 2px;"></div>
                </div><span class="ms-6 fs-7 fw-semibold">Technical interview</span>
              </div>
              <div class="d-flex mb-4 align-items-center">
                <div class="position-relative d-flex align-items-center justify-content-center fs-9 fw-bold bg-danger rounded-pill" style="width: 32px; height: 32px;"><span>3</span>
                  <div class="position-absolute top-100 start-50 translate-middle-x bg-danger py-4" style="width: 2px;"></div>
                </div><span class="ms-6 fs-7 fw-semibold">Negotiation offer</span>
              </div>
              <div class="d-flex align-items-center">
                <div class="position-relative d-flex align-items-center justify-content-center fs-9 fw-bold bg-danger rounded-pill" style="width: 32px; height: 32px;"><span>4</span></div><span class="ms-6 fs-7 fw-semibold">Onboarding</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h4 class="text-center font-heading mb-10">Open roles</h4><span class="d-block mb-4 fs-7 fw-semibold">Engineering</span>
        <div class="mb-10"><a class="btn d-block mb-4 border-0 text-start" href="#">
            <div class="position-relative rounded-2 bg-gradient-danger-top" style="padding: 1px;">
              <div class="bg-danger-dark rounded-2">
                <div class="px-8 py-5 rounded-2 bg-danger bg-opacity-10">
                  <div class="row align-items-center">
                    <div class="col-lg-6 mb-4 mb-lg-0"><span class="fs-7 fw-medium">Full-Stack Engineer</span></div>
                    <div class="col-sm-6 col-lg-3 mb-4 mb-sm-0"><span class="text-white text-opacity-50 fw-normal">Remote</span></div>
                    <div class="col-sm-6 col-lg-3 text-end">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div></a><a class="btn d-block border-0 text-start" href="#">
            <div class="position-relative rounded-2 bg-gradient-danger-top" style="padding: 1px;">
              <div class="bg-danger-dark rounded-2">
                <div class="px-8 py-5 rounded-2 bg-danger bg-opacity-10">
                  <div class="row align-items-center">
                    <div class="col-lg-6 mb-4 mb-lg-0"><span class="fs-7 fw-medium">Senior Engineer (Platform Team)</span></div>
                    <div class="col-sm-6 col-lg-3 mb-4 mb-sm-0"><span class="text-white text-opacity-50 fw-normal">Remote</span></div>
                    <div class="col-sm-6 col-lg-3 text-end">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div></a></div><span class="d-block mb-4 fs-7 fw-semibold">Design</span>
        <div><a class="btn d-block mb-4 border-0 text-start" href="#">
            <div class="position-relative rounded-2 bg-gradient-danger-top" style="padding: 1px;">
              <div class="bg-danger-dark rounded-2">
                <div class="px-8 py-5 rounded-2 bg-danger bg-opacity-10">
                  <div class="row align-items-center">
                    <div class="col-lg-6 mb-4 mb-lg-0"><span class="fs-7 fw-medium">Staff Product Designer</span></div>
                    <div class="col-sm-6 col-lg-3 mb-4 mb-sm-0"><span class="text-white text-opacity-50 fw-normal">Remote</span></div>
                    <div class="col-sm-6 col-lg-3 text-end">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div></a><a class="btn d-block border-0 text-start" href="#">
            <div class="position-relative rounded-2 bg-gradient-danger-top" style="padding: 1px;">
              <div class="bg-danger-dark rounded-2">
                <div class="px-8 py-5 rounded-2 bg-danger bg-opacity-10">
                  <div class="row align-items-center">
                    <div class="col-lg-6 mb-4 mb-lg-0"><span class="fs-7 fw-medium">Product Designer</span></div>
                    <div class="col-sm-6 col-lg-3 mb-4 mb-sm-0"><span class="text-white text-opacity-50 fw-normal">Remote</span></div>
                    <div class="col-sm-6 col-lg-3 text-end">
                      <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <g opacity="0.5">
                          <path d="M6.875 3.75L13.125 10L6.875 16.25" stroke="white" style="stroke:white;stroke-opacity:1;" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div></a></div>
      </div>
    </div>
  </div>
</section>