{% extends "layout/layout.html" %}

{% block content %}
{% include "../templates/layout/header-footer/header-home2.html" %}

{% set page_title = "Job Details" %}
{% set current_page = "Job Details" %}


{% include "../templates/components/breadcrumbs/breadcrumbs.html" %}


<!--Breadcrumb Area-->
<div class="breadcrumbs-height rt-pt-50">
    <div class="container">
        <div class="row align-items-center breadcrumbs-height">
            <div class="col-12">
                <div class="card jobcardStyle1 bg-transparent border-transparent hover:bg-transparent hover-shadow:none body-0">
                    <div class="card-body">
                        <div class="rt-single-icon-box flex-wrap">
                            <div class="icon-thumb rt-mb-10 rt-mb-lg-20">
                                <img src="assets/images/icon/single-job-logo-2.png" alt="" draggable="false">
                            </div>
                            <div class="iconbox-content">
                                <div class="post-info2">
                                    <div class="post-main-title2"> <a href="#">Sunior UX Designer</a> <span
                                            class="badge rounded-pill bg-danger-50 text-danger-500">Featured</span>
                                        <span class="badge rounded-pill bg-primary-50 text-primary-500">Full Time</span>
                                    </div>
                                    <div class="body-font-3 text-gray-600 pt-2">
                                        <a class="info-tools" href="#">
                                            <span> <i class="ph-link text-primary-500"></i> </span>
                                            <span class="text-gray-600">https://twitter.com</span>
                                        </a>
                                        <a class="info-tools" href="tel:555-0120">
                                            <span><i class="ph-phone text-primary-500"></i></span>
                                            <span class="text-gray-600">(406) 555-0120</span>
                                        </a>
                                        <a class="info-tools" href="mailto: twitter@gmail.com">
                                            <span><i class="ph-envelope-simple text-primary-500"></i></span>
                                            <span class="text-gray-600">twitter@gmail.com</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="iconbox-extra align-self-center flex-md-row flex-column">
                                <div class="rt-mb-md-10">
                                    <button
                                        class="bg-gray-10 bg-primary-50 text-primary-500 plain-button icon-56 hover:bg-primary-500 hover:text-gray-10">
                                        <i class="ph-bookmark-simple"></i>
                                    </button>
                                </div>
                                <div class="max-311">
                                    <button type="button" class="btn btn-primary btn-lg d-block">
                                        <span class="button-content-wrapper ">
                                            <span class="button-icon align-icon-right">
                                                <i class="ph-arrow-right"></i>
                                            </span>
                                            <span class="button-text">
                                                Apply Now
                                            </span>
                                        </span>
                                    </button>
                                    <span class="d-block rt-pt-10 text-lg-end text-start f-size-14 text-gray-700 ">Job
                                        expire in: <span class="text-danger-500">June 30, 2021</span></span>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Single job content Area-->
<div class="single-job-content rt-pt-50">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 rt-mb-lg-30">
                <div class="body-font-1 ft-wt-5 rt-mb-20">Job Description</div>
                <div class="body-font-3 text-gray-500">
                    Integer aliquet pretium consequat. Donec et sapien id leo accumsan pellentesque eget maximus tellus.
                    Duis et est ac leo rhoncus tincidunt vitae vehicula augue. Donec in suscipit diam. Pellentesque quis
                    justo sit amet arcu commodo sollicitudin. Integer finibus blandit condimentum. Vivamus sit amet
                    ligula ullamcorper, pulvinar ante id, tristique erat. Quisque sit amet aliquam urna. Maecenas
                    blandit felis id massa sodales finibus. Integer bibendum eu nulla eu sollicitudin. Sed lobortis diam
                    tincidunt accumsan faucibus. Quisque blandit augue quis turpis auctor, dapibus euismod ante
                    ultricies. Ut non felis lacinia turpis feugiat euismod at id magna. Sed ut orci arcu. Suspendisse
                    sollicitudin faucibus aliquet.
                    <br>
                    <br>

                    Nam dapibus consectetur erat in euismod. Cras urna augue, mollis venenatis augue sed, porttitor
                    aliquet nibh. Sed tristique dictum elementum. Nulla imperdiet sit amet quam eget lobortis. Etiam in
                    neque sit amet orci interdum tincidunt.
                </div>
                <div class="rt-spacer-50"></div>
                <div class="body-font-1 ft-wt-5 rt-mb-20">Job Description</div>
                <div class="body-font-3 text-gray-500">
                    <ul>
                        <li class="rt-mb-12">
                            Quisque semper gravida est et consectetur.
                        </li>
                        <li class="rt-mb-12">
                            Curabitur blandit lorem velit, vitae pretium leo placerat eget.
                        </li>
                        <li class="rt-mb-12">
                            Morbi mattis in ipsum ac tempus.
                        </li>
                        <li class="rt-mb-12">
                            Curabitur eu vehicula libero. Vestibulum sed purus ullamcorper, lobortis lectus nec.
                        </li>
                        <li class="rt-mb-12">
                            vulputate turpis. Quisque ante odio, iaculis a porttitor sit amet.
                        </li>
                        <li class="rt-mb-12">
                            commodo feugiat. Nullam laoreet, diam placerat dapibus tincidunt.
                        </li>
                        <li class="rt-mb-12">
                            odio metus posuere lorem, id condimentum erat velit nec neque.
                        </li>
                        <li>
                            dui sodales ut. Curabitur tempus augue.
                        </li>
                    </ul>
                </div>
                <div class="share-job rt-pt-50">
                    <ul class="rt-list gap-8">
                        <li class="d-inline-block body-font-3 text-gray-900">
                            Share this job:
                        </li>
                        <li class="d-inline-block ms-3">
                            <button class="btn btn-outline-plain job-details">
                                <span class="text-primary-500"> <span class="iconify"
                                        data-icon="bx:bxl-facebook"></span></span>
                                <span class="text-primary-500">Facebook</span>
                            </button>
                        </li>
                        <li class="d-inline-block">
                            <button class="btn btn-outline-plain job-details">
                                <span class="text-twitter"> <span class="iconify"
                                        data-icon="bx:bxl-twitter"></span></span>
                                <span class="text-twitter">Twitter</span>
                            </button>
                        </li>
                        <li class="d-inline-block my-lg-2 my-0">
                            <button class="btn btn-outline-plain job-details">
                                <span class="text-pinterest me-1"> <span class="iconify"
                                        data-icon="bi:pinterest"></span></span>
                                <span class="text-pinterest">Pinterest</span>
                            </button>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="col-lg-5">
                <div class="p-32 pb-0 border border-2 border-primary-50 rt-rounded-12 rt-mb-24 lg:max-536">
                    <div class="body-font-1 ft-wt-5 rt-mb-32 ">Job Overview</div>
                    <div class="row">
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-calendar-blank f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Job Posted:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">June 15, 2021</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-timer f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Job Expire in:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">Aug 15, 2022</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-wallet f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Salery:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">$50k-80k/month</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-map-pin-line f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Location:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">New York, USA</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-suitcase-simple f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Job Type:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">Full Time</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-user f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Gender:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">Female</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-graduation-cap f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Education:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">Graduation</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl-4 col-lg-6 col-md-4 col-sm-4 rt-mb-32">
                            <div class="single-jSidebarWidget">
                                <div class="icon-thumb rt-mb-10">
                                    <i class="ph-clipboard-text f-size-30 text-primary-500"></i>
                                </div>
                                <div class="iconbox-content">
                                    <div class="f-size-12 text-gray-500 uppercase text-uppercase rt-mb-6">Experience:</div>
                                    <span class="d-block f-size-14 ft-wt-5 text-gray-900">10-15 Years</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="p-32 border border-2 border-primary-50 rt-rounded-12 rt-mb-24 lg:max-536">
                    <div class="rt-single-icon-box rt-mb-32">
                        <div class="icon-thumb rt-mr-16">
                            <img src="assets/images/icon/logo-insta-xl.png" alt="">
                        </div>
                        <div class="iconbox-content">
                            <div class="f-size-20 text-gray-900 ft-wt-5 rt-mb-6">Instagram</div>
                            <a class="d-block text-gray-500 f-size-14" href="#">Social networking service</a>
                        </div>
                    </div>
                    <div class="rt-mb-32">
                        <ul class="rt-list">
                            <li class="d-flex justify-content-between align-items-start body-font-3 rt-mb-14">
                                <span class="text-gray-500 d-block">Founded in:</span>
                                <div class="my-auto">
                                    March 21, 2006
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-start body-font-3 rt-mb-14">
                                <span class="text-gray-500 d-block">Organization type:</span>
                                <div class="my-auto">
                                    Private Company
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-start body-font-3 rt-mb-14">
                                <span class="text-gray-500 d-block">Company size:</span>
                                <div class="my-auto">
                                    120-300 Employers
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-start body-font-3 rt-mb-14">
                                <span class="text-gray-500 d-block">Phone:</span>
                                <div class="my-auto">
                                    (406) 555-0120
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-start body-font-3 rt-mb-14">
                                <span class="text-gray-500 d-block">Email:</span>
                                <div class="my-auto">
                                    twitter@gmail.com
                                </div>
                            </li>
                            <li class="d-flex justify-content-between align-items-start body-font-3">
                                <span class="text-gray-500 d-block">Website:</span>
                                <div class="my-auto">
                                    https://twitter.com
                                </div>
                            </li>
                        </ul>
                    </div>
                    <ul class="rt-list gap-8 job-details-social">
                        <li class="d-inline-block">
                            <a href="#">
                                <span class="iconify" data-icon="bx:bxl-facebook"></span>
                            </a>
                        </li>
                        <li class="d-inline-block">
                            <a href="#">
                                <span class="iconify" data-icon="bx:bxl-twitter"></span>
                            </a>
                        </li>
                        <li class="d-inline-block">
                            <a href="#">
                                <span class="iconify" data-icon="bx:bxl-instagram"></span>
                            </a>
                        </li>
                        <li class="d-inline-block">
                            <a href="#">
                                <span class="iconify" data-icon="bx:bxl-youtube"></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="rt-spacer-100 rt-spacer-md-50"></div>
<!--Related candidate Area-->
<hr class="hr-0">
<section class="related-jobs-area rt-pt-100 rt-pt-md-50">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="d-flex flex-wrap">
                    <div class="flex-grow-1">
                        <h4>Related Jobs</h4>
                    </div>
                    <div class="flex-gorw-0 d-flex">
                        <button class="btn icon-48 plain-button slickprev bg-primary-50 rt-mr-12">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M19 12H5" stroke="#0066FF" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M12 5L5 12L12 19" stroke="#0066FF" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </button>
                        <button class="btn icon-48 plain-button slicknext bg-primary-50 rt-mr-12">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
                                xmlns="http://www.w3.org/2000/svg">
                                <path d="M5 12H19" stroke="#0066FF" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                                <path d="M12 5L19 12L12 19" stroke="#0066FF" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="rt-spacer-40 rt-spacer-md-20"></div>
        <div class="row">
            <div class="col-12">
                <div class="newestjob_active slick-bullet deafult_style_dot related-jobs"
                    data-slick='{"dots": false, "rows": 2}'>
                    {% include "../templates/components/job/related-job1.html" %}
                </div>
            </div>
        </div>
    </div>
</section>

<div class="rt-spacer-80"></div>
{% include "../templates/layout/header-footer/footer-three.html" %}


{% endblock %}