<!-- Hero Section -->
<div class="bg-overlay-dark-v1 bg-img-hero-center" style="background-image: url(https://images.unsplash.com/photo-1558403194-611308249627?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60);">
<div class="container space-2 space-3--lg position-relative z-index-2">
<!-- Content -->
<div class="w-md-80 mx-md-auto text-center mt-4 mb-8">
<h6 class="text-white letter-spacing-0_06 text-uppercase opacity-lg mb-1">Just explore then apply</h6>
<h1 class="text-white mb-0">Find your dream job in a quick way</h1>
</div>
<form class="w-lg-80 mx-auto bg-white rounded shadow-sm" action="#">
<div class="d-md-flex justify-content-between align-items-stretch">
<div class="flex-grow-1">
<div class="row no-gutters">
<div class="col-md-6">
<input type="text" class="form-control form-control-lg rounded-bottom-0 rounded-md-right-0 border-left-0 border-top-0" placeholder="Search position, skills or company">
</div>
<div class="col-md-6">
<input type="text" class="form-control form-control-lg rounded-0 border-left-0 border-right-0 border-top-0" placeholder="Search location">
</div>
</div>
<div class="d-lg-flex justify-content-between px-3 px-lg-4 py-3">
<!-- Checboxes -->
<div class="mb-3 mb-lg-0">
<div class="custom-control custom-checkbox custom-control-inline w-40 w-lg-auto mr-4">
<input type="checkbox" class="custom-control-input" id="full-time">
<label class="custom-control-label text-gray-700" for="full-time">
Full-Time
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline w-40 w-lg-auto mr-4">
<input type="checkbox" class="custom-control-input" id="part-time">
<label class="custom-control-label text-gray-700" for="part-time">
Part-Time
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline w-40 w-lg-auto mr-4">
<input type="checkbox" class="custom-control-input" id="internship">
<label class="custom-control-label text-gray-700" for="internship">
Internship
</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline w-40 w-lg-auto mr-4">
<input type="checkbox" class="custom-control-input" id="contractor">
<label class="custom-control-label text-gray-700" for="contractor">
Contractor
</label>
</div>
</div>
<!-- End Checboxes -->
<!-- Toggle -->
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="remote">
<label class="custom-control-label font-weight-bold text-primary" for="remote">Remote</label>
</div>
<!-- End Toggle -->
</div>
</div>
<!-- Submit -->
<div class="px-3 pb-3 px-md-0 pb-md-0">
<button type="submit" class="btn btn-primary d-block w-100 h-md-100 rounded-md-left-0">
<i class="svg-icon svg-icon-2xs text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="17.998" height="17.967" viewBox="0 0 17.998 17.967">
<g transform="translate(0 0)">
<path d="M16.161,17.967a.839.839,0,0,1-.6-.248l-3.506-3.5a.838.838,0,0,1-.246-.6v-.572a7.3,7.3,0,1,1,1.265-1.264h.573a.842.842,0,0,1,.6.246l3.506,3.5a.848.848,0,0,1,0,1.193l-1,.993A.83.83,0,0,1,16.161,17.967ZM7.312,2.807a4.491,4.491,0,1,0,4.5,4.491A4.5,4.5,0,0,0,7.312,2.807Z" fill="#000000"></path>
</g>
</svg>
</i>
</button>
</div>
<!-- End Submit -->
</div>
</form>
<!-- End Content -->
</div>
<div class="position-relative z-index-2 opacity-lg text-center">
<!-- Bottom Content -->
<div class="container pb-8">
<h6 class="text-white font-weight-normal mb-4">Trusted by huge and impactful companies</h6>
<!-- Slick Carousel -->
<div class="js-slick-carousel u-slick"
data-autoplay="true"
data-speed="5000"
data-infinite="true"
data-slides-show="6"
data-responsive='[{
"breakpoint": 1200,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 992,
"settings": {
"slidesToShow": 4
}
}, {
"breakpoint": 768,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 576,
"settings": {
"slidesToShow": 3
}
}, {
"breakpoint": 480,
"settings": {
"slidesToShow": 2
}
}]'>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/amazon-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/google-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/paypal-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/slack-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/samsung-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/airbnb-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/lenovo-white.png" alt="Image Description">
</div>
<div class="js-slide">
<img class="u-clients u-clients--lg" src="../../assets/img/clients/spotify-white.png" alt="Image Description">
</div>
</div>
<!-- End Slick Carousel -->
</div>
<!-- End Bottom Content -->
</div>
</div>
<!-- End Hero Section -->
