import React from "react";

export default function JobDescription() {
  return (
    <section className="wrapper !bg-[#ffffff]">
      <div className="container !pb-[4.5rem] xl:!pb-24 lg:!pb-24 md:!pb-24">
        <div className="flex flex-wrap mx-[-15px]">
          <div className="xl:w-10/12 lg:w-10/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto">
            <div className="blog single !mt-[-7rem]">
              <div className="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
                <div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2.8rem_3rem_2.8rem] lg:!p-[2.8rem_3rem_2.8rem] md:!p-[2.8rem_3rem_2.8rem]">
                  <h2 className="h1 !mb-3 !leading-[1.3]">Job Description</h2>
                  <p>
                    Fusce dapibus, tellus ac cursus commodo, tortor mauris
                    condimentum nibh, ut fermentum massa justo sit amet. Vivamus
                    sagittis lacus vel augue laoreet rutrum faucibus dolor
                    auctor. Cras mattis consectetur purus sit amet fermentum.
                    Aenean lacinia bibendum nulla sed consectetur. Curabitur
                    blandit tempus porttitor. Vivamus sagittis lacus vel augue
                    laoreet rutrum faucibus dolor auctor. Nullam quis risus eget
                    porta ac consectetur vestibulum.
                  </p>
                  <p>
                    Donec sed odio dui consectetur adipiscing elit. Etiam
                    adipiscing tincidunt elit, eu convallis felis suscipit ut.
                    Phasellus rhoncus tincidunt auctor. Nullam eu sagittis
                    mauris. Donec non dolor ac elit aliquam tincidunt at at
                    sapien. Aenean tortor libero, condimentum ac laoreet vitae,
                    varius tempor nisi. Duis non arcu vel lectus urna mollis
                    ornare vel eu leo.
                  </p>
                  <h3 className="h2 !mb-3 !mt-9 !leading-[1.35]">
                    Responsibilities
                  </h3>
                  <p>
                    Cum sociis natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus. Cras justo odio, dapibus ac
                    facilisis in, egestas eget quam. Praesent commodo cursus
                    magna, vel scelerisque nisl consectetur et.
                  </p>
                  <div className="flex flex-wrap mx-[-15px] !mt-[-15px] xl:mx-[-20px]">
                    <div className="xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] !px-[15px] max-w-full !mt-[15px]">
                      <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
                        <li className="relative !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Aenean eu leo quam ornare curabitur blandit tempus.
                          </span>
                        </li>
                        <li className="relative !mt-[0.35rem] !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Nullam quis risus eget urna mollis ornare donec
                            elit.
                          </span>
                        </li>
                      </ul>
                    </div>
                    {/*/column */}
                    <div className="xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] !px-[15px] max-w-full !mt-[15px]">
                      <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
                        <li className="relative !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Etiam porta sem malesuada magna mollis euismod.
                          </span>
                        </li>
                        <li className="relative !mt-[0.35rem] !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Fermentum massa vivamus faucibus amet euismod.
                          </span>
                        </li>
                      </ul>
                    </div>
                    {/*/column */}
                  </div>
                  {/*/.row */}
                  <h3 className="h2 !mb-3 !mt-9 !leading-[1.35]">
                    Requirements
                  </h3>
                  <p>
                    Cum sociis natoque penatibus et magnis dis parturient
                    montes, nascetur ridiculus mus. Cras justo odio, dapibus ac
                    facilisis in, egestas eget quam. Praesent commodo cursus
                    magna, vel scelerisque nisl consectetur et.
                  </p>
                  <div className="flex flex-wrap mx-[-15px] !mt-[-15px] xl:mx-[-20px] !mb-10">
                    <div className="xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] !px-[15px] max-w-full !mt-[15px]">
                      <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
                        <li className="relative !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Aenean eu leo quam ornare curabitur blandit tempus.
                          </span>
                        </li>
                        <li className="relative !mt-[0.35rem] !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Nullam quis risus eget urna mollis ornare donec
                            elit.
                          </span>
                        </li>
                      </ul>
                    </div>
                    {/*/column */}
                    <div className="xl:w-6/12 w-full flex-[0_0_auto] xl:!px-[20px] !px-[15px] max-w-full !mt-[15px]">
                      <ul className="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
                        <li className="relative !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Etiam porta sem malesuada magna mollis euismod.
                          </span>
                        </li>
                        <li className="relative !mt-[0.35rem] !pl-6">
                          <span>
                            <i className="uil uil-check w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex justify-center items-center bg-[#dce7f9] !text-[#22b573] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell absolute left-0" />
                          </span>
                          <span>
                            Fermentum massa vivamus faucibus amet euismod.
                          </span>
                        </li>
                      </ul>
                    </div>
                    {/*/column */}
                  </div>
                  {/*/.row */}
                  <a
                    href="mailto:apply@email.com"
                    className="btn btn-primary !text-white !bg-[#22b573] border-[#22b573] hover:text-white hover:bg-[#22b573] hover:!border-[#22b573] active:text-white active:bg-[#22b573] active:border-[#22b573] disabled:text-white disabled:bg-[#22b573] disabled:border-[#22b573] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]"
                  >
                    Apply Now
                  </a>
                </div>
                {/* /.card-body */}
              </div>
              {/* /.card */}
            </div>
            {/* /.blog */}
          </div>
          {/* /column */}
        </div>
        {/* /.row */}
      </div>
      {/* /.container */}
    </section>
  );
}
