@charset "UTF-8";

/*  ======================================

Templete Name:Chakri
Templete URI: https://themeforest.net/user/premiumthemeltd
Author: Premiumthemeltd
Author URI: http://premiumtheme.org
Description: A  wordpress theme for freelance market place.
Version: 1.0
Tags: minimal, blog, two-columns, three-columns, four-columns
Text Domain: premiumtheme


NB : This is the stylesheet for this theme;

 =======================================  */


/**
* Table of content
*
* 1.0 - Variable Css
* 2.0 - Default Css
* 3.0 - Titles Css
* 4.0 - Button Css
* 5.0 - Icon Color Css
* 6.0 - 6.0 Navbar Css
* 7.0 - Modals Css
* 8.0 - Hero Css
* 9.0 - Featured Job Css
* 10.0 - Testimonial Slider Css
* 11.0 - Blog Sidebar Css
* 12.0 - Job Feature Sidebar Css
* 13.0 - Pagination Css
* 14.0 - Review Details Css
* 15.0 - Footer Css
* 16.0 - Category Css
* 17.0 - Featured City Css
* 18.0 - Cta Css
* 19.0 - Entrepreneurs Css
* 20.0 - Top Freelancer Css
* 21.0 - Pricing Table Css
* 22.0 - Blog Css
* 23.0 - Follow Css
* 24.0 - Feature Job Offline Page Css
* 25.0 - Feature Job Online Page Css
* 26.0 - Post Project Page Css
* 27.0 - Project Accept Page Css
* 28.0 - Bid Page Css
* 29.0 Dispute Page Css
* 30.0 Freelancer Profile Css
* 31.0 Freelancer List View Css
* 32.0 Project Milestone Page Css
* 33.0 Chatting Page Css
* 34.0 Blog Page Css
* 35.0 Dashboard Css
* 36.0 Responsive Css
* 37.0 Desktop Screen Css
* 38.0 Tab Screen Css

*/


/*------------------------------------------------------------------

[Color codes]

Background:     #ffffff (White)
Dark Background:    #0c0c0c (Light black)
Content:      #05022a (Dark Black)
Header h1-h6:   #020729 (Dark Black)
Navbar Background:  rgba(0, 181, 188, 0.9)

a (standard):     #2dced4 
a (visited):      #2dced4 
a (active):       #2dced4 

-------------------------------------------------------------------*/




/*===========================================*/

/************** 1.0 Variable Css ************/

/*=========================================*/

:root {
  /*************** Background Color and Text Coolors Values *****************/
  --primary-color: #2dced4;
  --main-title-color: #020729;
  --primary-text-color: #05022a;
  --secondary-text-color: #7d7d7d;
  --tertiary-text-color: #20292f;
  --text-color-four: #56bb4d;
  --text-color-five: #494949;
  --text-color-six: #8cc986;
  --text-color-seven: #dbffd8;
  --grey-light-bg-1: #f4f4f4;
  --grey-light-bg-2: #c5c5c5;
  --grey-light-bg-3: #f2f2f2;
  --grey-light-bg-4: #bcbcbc;
  --grey-light-bg-5: #f9f9f9;
  --yello-orange-bg: #fdbd45;
  --online-dot-bg: #1bdb1b;

  /*************** Category Css Values *****************/
  --cat-icon-color-one: #43ac9d;
  --cat-icon-bg-one: rgba(67, 172, 157, .5);
  --cat-icon-color-two: #e28365;
  --cat-icon-bg-two: rgba(226, 131, 101, .5);
  --cat-icon-color-three: #708fc8;
  --cat-icon-bg-three: rgba(112, 143, 200, .5);
  --cat-icon-color-four: #5ba452;
  --cat-icon-bg-four: rgba(91, 164, 82, .5);
  --cat-icon-color-five: #73549a;
  --cat-icon-bg-five: rgba(115, 84, 154, .5);
  --cat-icon-color-six: #4ba5c7;
  --cat-icon-bg-six: rgba(75, 165, 199, .5);
  --cat-icon-color-seven: #d25aa4;
  --cat-icon-bg-seven: rgba(210, 90, 164, .5);
  --cat-icon-color-eight: #5252d8;
  --cat-icon-bg-eight: rgba(82, 82, 216, .5);

  /*************** Color Css Values *****************/
  --color-one: #fdbd45;
  --color-two: #9ebef1;
  --color-three: #81d5c9;
  --color-four: #e7acd3;

  /*************** Feature Job Category Css Values *****************/
  --job-category-one: #81d5c9;
  --job-category-two: #fda88b;
  --job-category-three: #9ebef1;
  --job-category-four: #d05aa8;
  --job-category-five: #bca1f2;
  --amount-color: #56bb4d;

  /*************** Buttons Css Values *****************/
  --apply-btn-bg: #2dced4;

  /*************** Borders Css Values *****************/
  --border-one: #e5e5e5;
  --border-two: #dedcda;
  --border-three: #e7e7e7;
}

/*===========================================*/

/************** 2.0 Default Css ************/

/*========================================*/

* {
  padding: 0px;
  margin: 0px;
  outline: none;
}

body {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  line-height: 1.7em;
  font-weight: 400;
  background: var(--color-white);
  transition: all 0.5s ease;
  color: var(--primary-text-color);
  overflow-x: hidden;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.33em;
  font-weight: 400;
  margin-bottom: 0px;
}

a {
  border: 0px solid transparent;
  position: relative;
  text-decoration: none;
  transition: all 0.5s ease;
}

a:hover {
  text-decoration: none;
}

h1 {
  margin: 0px;
  font-size: 20px;
  font-weight: 400;
}

h2 {
  font-size: 18px;
  font-weight: 400;
}

h3 {
  font-size: 17px;
  line-height: 20px;
}

h4 {
  font-size: 16px;
  font-weight: 400;
}

h5 {
  font-size: 15px;
}

h6 {
  font-size: 12px;
}

p {
  font-size: 1em;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

li {
  list-style: none;
}

button {
  border: none;
  cursor: pointer;
}

input[type=submit]:focus {
  outline: none;
}

button:focus {
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

.form-group {
  margin-bottom: 0;
}

/*=====================================*/

/************ 3.0 Titles Css **********/

/*===================================*/

.titles {
  text-align: center;
  padding-bottom: 55px;
}

.titles__main-title {
  color: var(--main-title-color);
  padding-bottom: 7px;
}

.titles__sub-title {
  color: var(--secondary-text-color);
}

.bidding-title {
  color: var(--primary-color);
  border-bottom: 1px solid var(--border-one);
  padding: 52px 0 23px 30px;
}

/*=========================================*/

/************** 4.0 Button Css ************/

/*=======================================*/

.btn-secondary.dropdown-toggle {
  color: #ffffff;
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: none;
}

.apply {
  position: absolute;
  top: 58%;
  left: 133px;
  right: 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.apply-btn {
  font-size: 14px;
  color: #ffffff;
  background-color: var(--apply-btn-bg);
  padding: 2px 20px 3px 20px;
  border-radius: 100px;
  display: inline-block;
}

.apply-btn:hover {
  color: #ffffff;
}

.load-button {
  text-align: center;
  padding-top: 45px;
}

.load-button .load-btn {
  padding: 8px 28px 8px 28px;
  display: inline-block;
  border: 1px solid var(--apply-btn-bg);
  border-radius: 100px;
  font-size: 16px;
  color: var(--apply-btn-bg);
}

.load-button .load-btn:hover {
  background-color: var(--apply-btn-bg);
  color: #ffffff;
}

.get-button .get-btn {
  color: var(--primary-color);
  padding: 8px 30px;
  background-color: #ffffff;
  display: inline-block;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
}

.get-button .get-btn:hover {
  box-shadow: 0px 4px 8.3px 1.7px rgba(0, 0, 0, 0.22);
}

.hire-button .hire-btn {
  padding: 3px 20px;
  background-color: var(--primary-color);
  border-radius: 100px;
  color: #ffffff;
  display: inline-block;
}

.pt-button {
  padding: 10px 25px;
  background: linear-gradient(135deg, transparent, transparent, transparent, transparent, transparent);
  border: 1px solid #fff;
  border-radius: 100px;
  color: var(--color-white);
  transition: all 0.5s;
  text-transform: uppercase;
  font-size: 16px;
}

.pt-button:hover {
  color: var(--color-white);
}

.btn-search-pt {
  position: absolute;
  top: 0;
  right: 0;
  height: 60px;
  background: #3bc9d6;
  padding: 0 25px;
  border: 0px solid #ffff;
  border-radius: 0px 50px 50px 0px;
  color: #ffffff;
  font-size: 26px;
}

.view-btn {
  background: transparent;
  font-size: 15px;
  color: #92e1e5;
}

.view-btn.active {
  color: #ffffff;
}

.post-job-btn {
  display: block;
  margin: 0 auto;
  margin-top: 30px;
  padding-left: 13px;
}

.post-job-btn a {
  text-transform: capitalize;
}

.post-job-btn .button-ymp {
  padding: 8px 100px;
  background-color: var(--primary-color);
  border-radius: 100px;
  color: #ffffff;
  font-size: 20px;
  display: inline-block;
}

.post-job-btn .button-ymp:hover {
  box-shadow: 0px 5px 9.8px 0.2px rgba(31, 181, 173, 0.6);
}

.button-pt {
  background: #f8f9fc;
  color: var(--primary-color);
  padding: 5px 21px;
  border-radius: 100px;
  display: inline-block;
  margin-bottom: 15px;
}

.button-pt:hover {
  color: var(--primary-color);
  box-shadow: 0px 5px 9.8px 0.2px rgba(31, 181, 173, 0.6);
}

.verify-btn {
  color: #1bdb20;
  padding: 3px 15px;
  border-radius: 100px;
  display: inline-block;
  border: 1px solid #1bdb20;
  font-size: 14px;
  float: left;
}

.accept-btn {
  background: var(--primary-color);
  color: #ffffff;
  border-radius: 100px;
  display: inline-block;
  margin-right: 24px;
}

.accept-btn a {
  color: #ffffff;
  padding: 2px 21px;
  display: inline-block;
}

.reject-btn {
  background: #e65757;
  color: #ffffff;
  border-radius: 100px;
  display: inline-block;
}

.reject-btn a {
  color: #ffffff;
  padding: 2px 21px;
  display: inline-block;
}

.dispute-reply {
  display: inline-block;
  margin-top: 15px;
  text-decoration: none;
  background: var(--primary-color);
  color: #ffffff;
  padding: 7px 35px;
  border-radius: 100px;
  box-shadow: 0px 4px 5.4px 0.6px rgba(0, 0, 0, 0.13);
}

.dispute-reply:hover {
  color: #ffffff;
}

.request-milestone form .form-buttons .button-ymp {
  margin-top: 20px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  text-transform: capitalize;
  text-decoration: none;
  background: var(--primary-color);
  color: #ffffff;
  padding: 7px 35px;
  border-radius: 100px;
  display: inline-block;
  margin-right: 10px;
}

.request-milestone form .form-buttons .cancel {
  color: var(--secondary-text-color);
  background: #ffffff;
  padding: 7px 30px;
  font-size: 14px;
  text-transform: capitalize;
  border: 1px solid var(--border-one) !important;
}

.search-btn {
  font-size: 16px;
  color: #ffffff;
  background-image: linear-gradient(135deg, #8ca2ff 0%, #52b9e9 49%, #18d0d2 100%);
  padding: 8px 20px;
  position: absolute;
  right: 0px;
  top: 0px;
  border-top-right-radius: 19px;
  border-bottom-right-radius: 19px;
}

/*==============================================*/

/************** 5.0 Icon Color Css ************/

/*===========================================*/

.icon-color-one {
  color: var(--cat-icon-color-one);
}

.icon-color-two {
  color: var(--cat-icon-color-two);
}

.icon-color-three {
  color: var(--cat-icon-color-three);
}

.icon-color-four {
  color: var(--cat-icon-color-four);
}

.icon-color-five {
  color: var(--cat-icon-color-five);
}

.icon-color-six {
  color: var(--cat-icon-color-six);
}

.icon-color-seven {
  color: var(--cat-icon-color-seven);
}

.icon-color-eight {
  color: var(--cat-icon-color-eight);
}

.color-1 {
  color: var(--color-one);
}

.color-2 {
  color: var(--color-two);
}

.color-3 {
  color: var(--color-three);
}

.color-4 {
  color: var(--color-four);
}

/*======================================================*/

/************** 6.0 Job Category Color Css ************/

/*===================================================*/

.cat-color-one {
  background-color: var(--job-category-one);
}

.cat-color-two {
  background-color: var(--job-category-two);
}

.cat-color-three {
  background-color: var(--job-category-three);
}

.cat-color-four {
  background-color: var(--job-category-four);
}

.cat-color-five {
  background-color: var(--job-category-five);
}

/*==========================================*/

/************** 6.0 Navbar Css ************/

/*======================================*/

header {
  position: fixed;
  background: rgba(166, 0, 188, 0.9);
  width: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  transition: 1s;
  z-index: 3;
  padding: 0 0px;
  border-bottom: 1px solid var(--border-one);
}

.navbar-brand {
  display: none;
}

.navbar-nav .nav-link,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover {
  color: var(--main-title-color);
  transition: all 0.5s ease;
  padding: 0;
}

.dropdown-item.active, .dropdown-item:active {
  background-image: linear-gradient(135deg, #9d00bc 0%, #9f02ad 100%);
  color: #ffffff;
}

.navbar-expand-lg .navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0px;
}

.nav-item.dropdown.menu-padding.dropdown-user {
    position: relative;
    top: -5px;
}

.navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.fixed-it .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.navbar-brand img {
  max-height: 70px;
  transition: all 0.5s ease;
}

.fixed-it {
  background: rgba(166, 0, 188, 0.9);
  box-shadow: 0px 0px 25.5px 4.5px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.fixed-it .navbar-brand img {
  max-height: 40px;
}

.opacity-it {
  background: var(--primary-color);
  padding-bottom: 30px;
  height: 100vh;
}

.opacity-it .navbar-nav .nav-link {
  color: #ffffff;
}

.opacity-it .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.opacity-it .fixed-it .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(0, 0, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.opacity-it .navbar .navbar-toggler {
  border: 1px solid #ffffff;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  max-height: 70px;
  transition: all 0.5s ease;
}

.fixed-it .navbar-brand img {
  max-height: 40px;
}

.navbar .navbar-toggler {
  border: 1px solid #20292f;
}

.nav-item a {
  position: relative;
}

.nav-item a img {
  border-radius: 100px;
}

.nav-item .bell {
  font-size: 20px;
}

.nav-item .bell span {
  font-size: 9px;
  background-color: #f04a4a;
  color: #ffffff;
  border-radius: 20px;
  padding: 1px 2px;
  position: relative;
  bottom: 14px;
  right: 30px;
}

.nav-item .message {
  font-size: 20px;
}

.nav-item .message span {
  font-size: 9px;
  background-color: #f04a4a;
  color: #ffffff;
  border-radius: 20px;
  padding: 1px 2px;
  position: relative;
  bottom: 14px;
  right: 38px;
}

.nav-item a.bell:hover::after,
.nav-item a.bell.active::after {
  width: 0%;
}

.nav-item a.message:hover::after,
.nav-item a.message.active::after {
  width: 0%;
}

.nav-item a.user-img:hover::after,
.nav-item a.user-img.active::after {
  width: 0%;
}

.header-notification .navbar-nav {
  display: -webkit-inline-box !important;
}

.header-notification .right-menu li.nav-item {
  display: inline-block;
}

.right-menu {
  position: absolute;
  right: 0;
  top: 17px;
}

.dropdown-user ul.dropdown-menu {
  position: absolute;
  box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
  left: 0;
  right: -20px;
}

.right-menu .dropdown-user > .dropdown-menu {
  right: 0;
  left: auto;
}

.user-img .online {
  position: relative;
  top: -3px;
  left: -1px;
}

.user-img .online:before {
  content: "";
  width: 11px;
  height: 11px;
  background: #1bdb1b;
  position: absolute;
  top: -33px;
  left: -2px;
  bottom: 0;
  border: 1px solid #fff;
  border-radius: 100px;
}

.index-nav .navbar-nav .nav-link {
  color: #ffffff;
}

.index-nav .nav-item a:hover::after,
.index-nav .nav-item a.active::after {
  width: 100%;
  background: #ffffff;
}

.index-nav .nav-item a.bell:hover::after,
.nav-item a.bell.active::after {
  width: 0%;
}

.index-nav .nav-item a.message:hover::after,
.nav-item a.message.active::after {
  width: 0%;
}

.index-nav .nav-item a.user-img:hover::after,
.nav-item a.user-img.active::after {
  width: 0%;
}

.index-nav.fixed-it {
  background: rgba(108, 0, 151, 0.9);
  box-shadow: 0px 0px 25.5px 4.5px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.index-nav .navbar .navbar-toggler {
  border: 1px solid #ffffff;
  position: relative;
  top: -8px;
}

.navbar .navbar-toggler {
  position: relative;
  top: -8px;
}

.index-nav.index-guest .navbar .navbar-toggler {
  border: 1px solid #ffffff;
  position: relative;
  top: 0px;
}

.index-nav .navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'><path stroke='rgba(255, 255, 255, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}

.index-nav.index-guest .navbar-brand {
  display: block;
  position: relative;
  top: 0;
}

.index-guest .nav-item select {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 100px;
  padding-left: 27px;
  position: relative;
  top: 0;
  margin-top: 10px;
  width: auto;
}

.index-guest .nav-item select option {
  color: var(--primary-text-color);
}

.index-guest .navbar-nav {
  padding-top: 7px;
}

.sticky .logo {
  display: none;
}

.sticky .s-logo {
  display: block;
}

.s-logo {
  display: none;
}

.index-nav .s-logo {
  display: block;
}

.index-nav .logo {
  display: none;
}



/*=========================================*/

/************** 7.0 Modals Css ************/

/*=======================================*/
body.modal-open {
  overflow: visible;
  padding-right: 0px !important;
}

.unread-messages .chatting-page .users .active {
  background-color: #fff;
  border-radius: 10px;
}

#unread-messages .chatting-page .users ul li:hover {
  padding: 10px 15px;
  background: #f0f0f0;
}

.unread-messages .chatting-page .users li.active .user-details a {
  color: var(--main-title-color);
}

.unread-messages .chatting-page .users ul li .user-img {
  float: left;
  position: relative;
  margin-right: 30px;
}

#unread-messages .chatting-page .users li a {
  font-size: 12px;
}

#unread-messages .chatting-page .users li a.project-name {
  font-size: 14px;
}

#unread-messages .unread-messages {
  width: 100%;
  top: 55vh;
  -webkit-transform: translateY(-43vh) translateX(0vh);
  transform: translateY(-43vh) translateX(0vh);
}

.notification-text {
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  text-align: left;
}

.notification-time {
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 15px !important;
  text-align: left;
  color: #7d7d7d !important;
}

.unread-notification .chatting-page .users ul li .user-img {
  float: left;
  position: relative;
  margin-right: 30px;
}

.unread-notification .chatting-page .users ul li:hover {
  border-radius: 10px;
  background-color: #ffffff;
}

.unread-notification .chatting-page .users ul li:hover {
  border-radius: 10px;
  background-color: var(--primary-color);
}

#notification .unread-notification {
  width: 100%;
  top: 55vh;
  -webkit-transform: translateY(-43vh) translateX(0vh);
  transform: translateY(-43vh) translateX(0vh);
}

/*========================================*/

/************** 8.0 Hero Css ************/

/*=====================================*/

#hero {
  height: 100vh;
  background-position: top !important;
  background-size: cover !important;
}

.hero-wrapper {
  position: relative;
  height: 100vh;
}

.hero-wrapper .hero-details {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  padding-top: 15px;
  width: 100%;
}

.hero-wrapper .hero-details .hero-title h1 {
  font-weight: 500;
  color: #ffffff;
  padding-bottom: 25px;
}

.hero-wrapper .hero-details .hero-title .hero-text {
  color: #ffffff;
  padding-bottom: 52px;
}

.job-category {
  position: relative;
}

.hero-form select {
    width: 100%;
    background: #ffffff;
    font-size: 15px;
    height: 44px;
    border: 1px solid #ffffff;
    color: #00b5bc;
    padding-left: 45px;
    border-radius: 100px;
    margin-bottom: 30px;
}

.icon-one {
    position: absolute;
    top: 10px;
    font-size: 15px;
    left: 30px;
    color: #00b5bc; 
}

.job-keyword {
  position: relative;
}

.icon-two {
    position: absolute;
    top: 10px;
    font-size: 15px;
    left: 30px;
    color: #00b5bc; 
}

.hero-wrapper .hero-details .hero-form input {
  height: 44px;
  border: 1px solid #ffffff;
  padding-left: 54px;
  color: #00b5bc;
  margin-bottom: 30px;
}

.hero-wrapper .hero-details .hero-form input::-webkit-input-placeholder {
  color: #00b5bc;
}

.hero-wrapper .hero-details .hero-form input:-ms-input-placeholder {
  color: #00b5bc;
}

.hero-wrapper .hero-details .hero-form input::-ms-input-placeholder {
  color: #00b5bc;
}

.hero-wrapper .hero-details .hero-form input::placeholder {
  color: #00b5bc;
}

.hero-wrapper .hero-details .hero-form input.jobs {
  width: 100%;
  border-radius: 100px;
}

.hero-wrapper .hero-details .hero-form input::placeholder {
  font-family: FontAwesome,"Poppins",sans-serif;
  font-size: 15px;
}

.hero-wrapper .hero-details .hero-form input.keyword {
  width: 100%;
  border-radius: 100px;
}

.hero-wrapper .hero-details .hero-form .hero-btn {
  width: 130px;
  height: 44px;
  text-align: center;
  padding-left: 0;
  margin-left: 0px;
  font-size: 15px;
  background: #ffffff;
  color: #00b5bc;
  cursor: pointer;
  border-radius: 100px;
  box-shadow: 0px 3px 12.61px 0.39px rgba(0, 0, 0, 0.4);
}

/*================================================*/

/************** 9.0 Featured Job Css ************/

/*=============================================*/

#featured-job {
  background-color: var(--grey-light-bg-1);
  padding-top: 55px;
  padding-bottom: 60px;
}

.feature-full__job-posts {
  background-color: #ffffff;
  overflow: hidden;
  padding: 30px 30px 0px;
  border: 1px solid var(--border-one);
  border-radius: 10px;
  position: relative;
  transition: all 0.5s;
  margin-bottom: 15px;
}

.feature-full__job-posts .budget {
  margin-left: 120px;
  margin-top: 8px;
  position: relative;
  top: -16px;
}

.feature-full__job-posts .budget ul li {
  display: inline-block;
}

.feature-full__job-posts:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.feature-full__job-posts:hover .job-title a {
  color: var(--primary-color);
}

.company-logo {
  float: left;
}

.job-description {
  float: left;
  margin-left: 30px;
  width: 57%;
}

.job-description .job-title {
  padding-bottom: 10px;
  height: 60px;
  overflow: hidden;
}

.job-description .job-title a {
  color: var(--main-title-color);
}

.job-description .location {
  margin-right: 0px;
}

.job-description .location a {
  color: var(--primary-color);
  font-size: 14px;
}

.job-description .job-category {
  padding: 0px 5px;
  border-radius: 5px;
  display: block;
  text-align: center;
  margin-bottom: 10px;
}

.job-description .job-category a {
  color: #ffffff;
  font-size: 14px;
}

.job-description .job-duration {
  font-size: 13px;
  color: var(--secondary-text-color);
  padding-left: 0px;
  display: inline-block;
}

.budget {
  float: left;
}

.budget ul li {
  margin-right: 10px;
}

.budget .duration {
  padding-bottom: 7px;
}

.budget .duration p {
  font-size: 13px;
}

.budget .amount {
  color: var(--amount-color);
}

.budget .amount p {
  font-size: 13px;
}

/*======================================================*/

/************** 10.0 Testimonial Slider Css ************/

/*====================================================*/

.testimonial-wrapper {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
  background: #ffffff;
  border-radius: 30px;
  padding-bottom: 37px;
  padding-top: 38px;
}

.testimonial-image {
  text-align: center;
}

.testimonial-item {
  box-shadow: 0px 5px 60.48px 23.52px rgba(0, 0, 0, 0.07);
  background: #ffffff;
  border-radius: 30px;
  margin: 0 0 0 5%;
  width: 90%;
  text-align: center;
  padding: 45px 30px;
  position: relative;
  z-index: 99;
}

.testimonial-item .author-social {
  padding-bottom: 17px;
}

.testimonial-item .author-social li {
  display: inline-block;
  padding-left: 2px;
}

.testimonial-item .author-social li a {
  color: var(--secondary-text-color);
  font-size: 13px;
}

.testimonial-item .author-social li a:hover {
  color: var(--primary-color);
}

.testimonial-item .quote {
  color: var(--secondary-text-color);
}

.testimonial-items {
  position: relative;
  margin-top: 45px;
  margin-bottom: 45px;
}

.author-image img {
  border-radius: 100%;
  margin-bottom: 10px;
}

.author-details .name {
  font-weight: 600;
  font-size: 14px;
}

.testimonial-slider .slick-slide img {
  margin: 0px auto 10px;
  display: block;
}

.testimonial-slider .slick-next {
  background: #ffffff;
  right: 0px;
  border-radius: 50px;
  box-shadow: 0px 5px 27.65px 7.35px rgba(0, 0, 0, 0.09);
  width: 45px;
  height: 45px;
  top: unset;
  bottom: -21px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  transition: all 0.5s ease;
}

.testimonial-slider .slick-next:before {
  content: "\f054";
  font-family: "FontAwesome";
  color: var(--primary-color);
  padding-left: 3px;
  transition: all 0.5s ease;
  position: relative;
  top: 0px;
  font-size: 15px;
}

.testimonial-slider .slick-next:hover {
  background-color: var(--primary-color);
}

.testimonial-slider .slick-next:hover:before {
  color: #ffffff;
}

/*================================================*/

/************** 11.0 Blog Sidebar Css ************/

/*=============================================*/

.blog-sidebar {
  padding: 0 30px;
  box-shadow: 0px 5px 27.65px 7.35px rgba(0, 0, 0, 0.09);
  border-radius: 10px;
  margin-top: 60px;
}

.blog-sidebar .widget {
  border-bottom: 1px solid #e7e7e7;
  padding-top: 39px;
  padding-bottom: 45px;
}

.blog-sidebar .widget:last-child {
  border-bottom: 0px solid #e7e7e7;
}

.blog-sidebar .widget .widget-title {
  padding-bottom: 0;
  position: relative;
  margin-bottom: 30px;
}

.blog-sidebar .widget .widget-title h4 {
  font-size: 22px;
  color: var(--primary-text-color);
  position: relative;
  display: inline-block;
}

.blog-sidebar .widget .widget-title h4:after {
  content: "";
  height: 2px;
  width: 20px;
  background-color: var(--primary-color);
  position: absolute;
  top: 14px;
  right: -27px;
  display: block;
}

.blog-sidebar .search-field .search-form {
  position: relative;
}

.blog-sidebar .search-field input {
  height: 40px;
  width: 100%;
  padding-left: 20px;
  border: 0px solid #ffffff;
  border-radius: 100px;
  box-shadow: 0px 3px 16.8px 4.2px rgba(0, 0, 0, 0.09);
  font-size: 14px;
}

.blog-sidebar .search-field input::-webkit-input-placeholder {
  color: var(--secondary-text-color);
}

.blog-sidebar .search-field input:-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.blog-sidebar .search-field input::-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.blog-sidebar .search-field input::placeholder {
  color: var(--secondary-text-color);
}

.blog-sidebar .category-widget ul li {
  padding-bottom: 5px;
}

.blog-sidebar .category-widget ul li:last-child {
  padding-bottom: 0;
}

.blog-sidebar .category-widget ul li:before {
  content: "\2022";
  color: var(--primary-color);
  font-size: 20px;
  padding-right: 8px;
}

.blog-sidebar .category-widget ul li a {
  color: var(--primary-text-color);
}

.blog-sidebar .category-widget ul li a:hover {
  color: var(--primary-color);
}

.blog-sidebar .recent-post-widget .recent-posts {
  margin-bottom: 30px;
}

.blog-sidebar .recent-post-widget .recent-posts:last-child {
  margin-bottom: 0px;
}

.blog-sidebar .recent-post-widget .recent-posts .feature-image {
  float: left;
}

.blog-sidebar .recent-post-widget .recent-posts .feature-image img {
  border-radius: 100px;
}

.blog-sidebar .recent-post-widget .recent-posts .post-details {
  margin-left: 85px;
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-title {
  padding-bottom: 5px;
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-title a {
  color: var(--primary-text-color);
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-title a:hover {
  color: var(--primary-color);
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-meta ul li {
  display: inline-block;
  font-size: 14px;
  color: var(--primary-color);
  margin-right: 10px;
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-meta ul li:last-child {
  margin-right: 0;
}

.blog-sidebar .recent-post-widget .recent-posts .post-details .post-meta li.date {
  color: var(--secondary-text-color);
}

.blog-sidebar .comments-widget .comment {
  margin-bottom: 18px;
}

.blog-sidebar .comments-widget .comment:last-child {
  margin-bottom: 0;
}

.blog-sidebar .comments-widget .comment .icon {
  float: left;
  color: #acacac;
}

.blog-sidebar .comments-widget .comment p {
  margin-left: 29px;
}

.blog-sidebar .comments-widget .comment p a {
  color: var(--primary-color);
}

.blog-sidebar .comments-widget .comment p i {
  color: #7d7d7d;
}

ul.tags li {
  display: inline-block;
  margin-right: 7px;
  margin-bottom: 10px;
}

ul.tags li a {
  color: var(--primary-text-color);
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--primary-color);
  border-radius: 100px;
}

ul.tags li a:hover {
  color: var(--primary-color);
}

/*=======================================================*/

/************** 12.0 Job Feature Sidebar Css ************/

/*=====================================================*/

.sidebar-nav {
  margin-top: 45px;
  background-color: var(--primary-color);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.sidebar-nav ul li a {
  padding: 7px 30px 8px;
  display: inline-block;
  font-size: 15px;
  color: #ffffff;
}

.sidebar-nav ul li:nth-child(3) a {
  border-top-right-radius: 10px;
}

.sidebar-nav ul li:nth-child(1) a {
  border-top-left-radius: 10px;
}

.sidebar-nav .active {
  background-color: #57d8dd;
}

.sidebar-nav ul li.active {
  border-top-left-radius: 10px;
}

.sidebar-tab-content {
  border: 1px solid #e6eaee;
  border-top: 0px solid #e6eaee;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

.sidebar-tab-content .tab-content {
  padding: 20px 30px 0 30px;
}

.sidebar-tab-content .widget-title {
  font-size: 16px;
  padding-bottom: 10px;
  color: var(--main-title-color);
}

.sidebar-tab-content .sidebar-widget {
  margin-bottom: 25px;
}

.sidebar-tab-content .sidebar-widget .form-group {
  margin-bottom: 0;
}

.sidebar-tab-content .sidebar-widget .custom-select {
  height: 35px;
  font-size: 13px;
  border-radius: 100px;
  color: var(--secondary-text-color);
  border: 1px solid #e6eaee;
  padding-left: 15px;
}

.sidebar-tab-content .sidebar-widget .custom-select:focus {
  border: 1px solid #e6eaee;
  box-shadow: none;
}

.sidebar-tab-content .sidebar-widget .custom-select option {
  font-size: 13px;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--secondary-text-color);
  margin-bottom: 5px;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn input {
  position: absolute;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  cursor: pointer;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn input:checked ~ .checkmark {
  background-color: transparent;
  border: 1px solid #7d7d7d;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 15px;
  width: 15px;
  border: 1px solid #7d7d7d;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn .checkmark:after {
  content: "";
  left: 4px;
  top: 0px;
  width: 5px;
  height: 11px;
  border: solid var(--primary-color);
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  display: none;
}

.sidebar-tab-content .sidebar-widget .checkbox-btn input:checked ~ .checkmark:after {
  display: block;
}

.sidebar-tab-content .sidebar-widget .rating li {
  display: inline-block;
}

.sidebar-tab-content .sidebar-widget .rating li a {
  color: var(--secondary-text-color);
}

.sidebar-tab-content .country .view-all {
  text-align: center;
}

.sidebar-tab-content .country .view-all a {
  color: var(--primary-color);
  font-size: 16px;
}

.sidebar-tab-content .hourly-rate {
  overflow: hidden;
}

.sidebar-tab-content .hourly-rate #slider {
  width: 250px;
  margin-top: 42px;
  margin-bottom: 40px;
  margin-left: 12px;
}

.relative-tm {
  position: relative;
}

.value {
  position: absolute;
  top: 30px;
  left: 50%;
  margin: 0 0 0 -20px;
  width: 40px;
  text-align: center;
  display: block;
  outline: none;
  font-size: 1em;
}

.price-range-both.value {
  width: 100px;
  margin: 0 0 0 -50px;
  top: 26px;
}

.value i {
  font-style: normal;
}

.ui-widget-header {
  background: #1fb5ad !important;
}

.ui-widget-content .ui-state-default {
  border: 1px solid #1fb5ad !important;
  background: #ffffff !important;
  border-radius: 50%;
  height: 15px !important;
  width: 15px !important;
}

/********* Sidebar Map ***********/

#map {
  height: 300px;
  width: 100%;
  border-radius: 10px;
  margin-top: 45px;
}

/*==============================================*/

/************** 13.0 Pagination Css ************/

/*============================================*/

.pagination-area {
  text-align: center;
  padding-top: 85px;
}

.pagination-area ul li {
  display: inline-block;
  text-align: center;
  margin-right: 5px;
}

.pagination-area ul li:first-child {
  border: none;
}

.pagination-area ul li:first-child a {
  color: #e6eaee;
  border: 0px solid #ccc;
}

.pagination-area ul li:first-child a:hover {
  background-color: unset;
  color: var(--primary-color);
  border: 0px solid var(--primary-color);
}

.pagination-area ul li:last-child {
  border: none;
  margin-right: 0;
}

.pagination-area ul li:last-child a {
  color: #e6eaee;
  border: 0px solid #ccc;
}

.pagination-area ul li:last-child a:hover {
  background-color: unset;
  color: var(--primary-color);
  border: 0px solid var(--primary-color);
}

.pagination-area ul li a {
  font-size: 14px;
  height: 32px;
  width: 32px;
  padding-top: 3px;
  color: var(--main-title-color);
  display: inline-block;
  border: 1px solid var(--border-one);
  border-radius: 100px;
}

.pagination-area ul li a:hover {
  background-color: var(--primary-color);
  color: #ffffff;
  border: 1px solid var(--primary-color);
}

/*==================================================*/

/************** 14.0 Review Details Css ************/

/*================================================*/

.review-details {
  padding-bottom: 12px;
}

.review-details .review li {
  display: inline-block;
  color: var(--text-color-five);
}

.review-details .review .point {
  font-size: 16px;
  color: #ffffff;
  padding: 0 5px;
  background-color: var(--yello-orange-bg);
}

.review-details .review .star {
  color: var(--yello-orange-bg);
}

.review-details .review .amount {
  color: var(--primary-text-color);
}

.contact-details {
  padding-bottom: 25px;
}

.contact-details ul li {
  display: inline-block;
  margin-right: 5px;
}

.contact-details ul li a {
  height: 28px;
  width: 28px;
  color: var(--text-color-six);
  border: 1px solid var(--text-color-six);
  display: inline-block;
  border-radius: 100px;
  text-align: center;
}

.contact-details .verified {
  background-color: var(--text-color-six);
  color: #ffffff;
  position: relative;
  font-size: 11px;
  padding-left: 23px;
  padding-right: 6px;
  border-radius: 5px;
}

.contact-details .verified:before {
  content: "\F00C";
  font-size: 13px;
  font-family: fontAwesome;
  width: 25px;
  height: 25px;
  text-align: center;
  background-color: var(--text-color-six);
  border-radius: 100px;
  position: absolute;
  top: -4px;
  left: -3px;
}

/*===========================================*/

/************** 15.0 Footer Css ************/

/*========================================*/

footer {
  background-color: #0c0c0c;
  padding: 60px 0 0;
}

.footer-subscribe {
  background: #ffffff;
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
  margin-bottom: 60px;
}

.subscribe-text {
  padding-top: 5px;
  padding-bottom: 30px;
}

.subscribe-form-pt form {
  position: relative;
}

.mc-field-group input {
  width: 100%;
  height: 60px;
  border-radius: 30px;
  background: #ffffff;
  text-indent: 30px;
  box-shadow: 0px 5px 19.75px 5.25px rgba(0, 0, 0, 0.09);
  border: 0px solid #ffff;
}

.widget-area {
  padding: 3px 0 20px;
  color: #ffffff;
  position: relative;
}

.footer-widget {
  padding-bottom: 35px;
}

.footer-widget ul li a:hover {
  color: var(--primary-color);
}

.widget-title {
  font-size: 20px;
  padding-bottom: 37px;
}

.widget-area a {
  color: var(--color-white);
}

.widget-area a:hover {
  color: var(--color-white);
}

#copyright-area {
  background-color: #000000;
}

.copyright-area {
  color: #ffffff;
  font-size: 13px;
}

.copyright-wrapper {
  padding: 15px 0 17px;
  position: relative;
  overflow: hidden;
}

.copyright-wrapper a {
  color: #ffffff;
}

.copyright-text {
  float: left;
}

.copyright-text a:hover {
  color: var(--primary-color);
}

.footer-nav ul li {
  display: inline-block;
  position: relative;
}

.footer-nav ul li:first-child {
  margin-right: 11px;
}

.footer-nav ul li:first-child:after {
  content: "";
  height: 15px;
  width: 1px;
  position: absolute;
  top: 5px;
  background-color: #ffffff;
  margin-left: 6px;
}

.footer-nav ul li a:hover {
  color: var(--primary-color);
}

/*============================================*/

/************** 16.0 Category Css ************/

/*==========================================*/

#category {
  padding-top: 55px;
  padding-bottom: 30px;
}

.category {
  text-align: center;
  padding-top: 45px;
  padding-bottom: 40px;
  border: 1px solid var(--border-one);
  border-radius: 10px;
  margin-bottom: 30px;
  transition: all 0.5s;
  min-height: 282px;
}

.category:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.category__image {
  position: relative;
  padding-bottom: 25px;
}

.category__icon {
  position: absolute;
  top: 66px;
  left: 50%;
  -webkit-transform: translate(-50%, -50px);
          transform: translate(-50%, -50px);
  font-size: 48px;
}

.category__count {
  padding-bottom: 38px;
}

.category__count span {
  font-size: 14px;
  padding: 0 5px;
  border-radius: 3px;
  color: #ffffff;
}

.category__info {
  padding: 0 52px;
}

.category__info h6 {
  font-weight: 500;
}

.category__info h6 a {
  color: var(--main-title-color);
}

.category__count-color-one {
  background: var(--cat-icon-bg-one);
}

.category__count-color-two {
  background: var(--cat-icon-bg-two);
}

.category__count-color-three {
  background: var(--cat-icon-bg-three);
}

.category__count-color-four {
  background: var(--cat-icon-bg-four);
}

.category__count-color-five {
  background: var(--cat-icon-bg-five);
}

.category__count-color-six {
  background: var(--cat-icon-bg-six);
}

.category__count-color-seven {
  background: var(--cat-icon-bg-seven);
}

.category__count-color-eight {
  background: var(--cat-icon-bg-eight);
}

.category:hover .category__info a {
  color: var(--primary-color);
}

/*=================================================*/

/************** 17.0 Featured City Css ************/

/*===============================================*/

#featured-cities {
  padding-top: 55px;
  padding-bottom: 60px;
}

.cities {
  margin-bottom: 15px;
  border-radius: 10px;
  transition: all 0.5s;
  position: relative;
  z-index: 10;
}

.cities:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17); 
}

.cities__image {
  overflow: hidden;
  border-radius: 10px;
  transition: -webkit-transform 0.5s;
  transition: transform 0.5s; 
  transition: transform 0.5s, 
              -webkit-transform 0.5s;
}

.cities__image img {
  border-radius: 10px;
  width: 100%;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, 
              -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.7s;
  transition: transform 0.7s;
  transition: transform 0.7s, 
              -webkit-transform 0.7s;
}

.cities .cities__image:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  transition: all 0.5s;
  z-index: 1;
}

.cities:hover .cities__image:before {
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

.cities:hover .cities__image img {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    z-index: 9;
}

.cities__number-name {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
}

.cities__number {
  background: rgba(45, 206, 212, .5);
  font-size: 28px;
  color: #ffffff;
  text-align: center;
  padding: 10px 22px;
  border-radius: 5px;
  display: inline-block;
  margin-bottom: 15px;
  position: relative;
  z-index: 999;
}

.cities__name {
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
  width: 100%;
  text-align: center;
  padding: 10px 0;
  text-shadow: 0px 4px 8.3px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 999;
}

.cities__name a {
  color: #ffffff;
  display: block;
  line-height: 20px;
}

/*========================================*/

/************** 18.0 Cta Css ************/

/*=====================================*/

#cta {
  padding-top: 60px;
  padding-bottom: 60px;
  background-color: var(--grey-light-bg-1);
}

.cta {
  background-size: cover !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px;
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
  padding: 30px 45px;
}

.cta__details-wrapper {
  position: relative;
}

.cta__details {
  color: #ffffff;
  padding: 47px 0 0 15px;
}

.cta__details .cta-title {
  padding-bottom: 50px;
}

.cta__image {
  padding: 15px 0px;
  text-align: right;
}

.cta__image img {
  max-height: 235px;
  width: auto;
}

/*=================================================*/

/************** 19.0 Entrepreneurs Css ************/

/*===============================================*/

#entrepreneurs {
  padding-top: 55px;
  padding-bottom: 30px;
}

#entrepreneurs .titles__sub-title {
  padding: 0 90px;
}

.statistics {
  background-color: #ffffff;
  padding: 45px 30px 40px 30px;
  border-radius: 10px;
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
  transition: all 0.7s ease;
  margin-bottom: 30px;
}

.statistics:hover {
  background-color: var(--primary-color);
}

.statistics__icon {
  font-size: 42px;
  color: var(--grey-light-bg-2);
  float: left;
  position: relative;
}

.statistics__icon:after {
  content: "";
  height: 52px;
  width: 1px;
  background: var(--grey-light-bg-2);
  position: absolute;
  top: -6px;
  bottom: 0;
  left: 55px;
}

.statistics__details {
  color: var(--tertiary-text-color);
  margin-left: 75px;
}

.statistics__score {
  font-size: 28px;
  font-weight: 600;
  color: var(--primary-color);
}

.statistics:hover .statistics__icon {
  color: #ffffff;
}

.statistics:hover .statistics__icon:after {
  background-color: #ffffff;
}

.statistics:hover .statistics__score {
  color: #ffffff;
}

.statistics:hover .statistics__details {
  color: #ffffff;
}

/*==================================================*/

/************** 20.0 Top Freelancer Css ************/

/*================================================*/

#top-freelancer {
  padding-top: 55px;
  padding-bottom: 60px;
  background-color: var(--grey-light-bg-1);
}

.freelancers {
  background-color: #ffffff;
  border: 1px solid var(--border-one);
  border-radius: 10px;
  transition: all 0.5s;
  margin-bottom: 30px;
}

.freelancers:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.freelancers .feature-image {
  position: relative;
}

.freelancers .feature-image img {
  border-radius: 100%;
}

.freelancers .online:before {
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  top: 65%;
  right: 36%;
  background-color: var(--online-dot-bg);
  border: 2px solid #ffffff;
  border-radius: 100px;
}

.freelancers .name-designation .name {
  padding-bottom: 1px;
  font-size: 16px;
  font-weight: 500;
  color: var(--primary-text-color);
  text-transform: uppercase;
}

.freelancers .name-designation .designation {
  color: var(--secondary-text-color);
}

.freelancers .rate-hire .rate {
  color: var(--main-title-color);
}

.freelancers .rate-hire .rate span {
  color: var(--text-color-four);
  font-weight: 600;
}

.freelancers .review-details .review li {
  display: inline-block;
  color: var(--text-color-five);
}

.freelancers .review-details .review .point {
  font-size: 16px;
  color: #ffffff;
  padding: 0 5px;
  background-color: var(--yello-orange-bg);
}

.freelancers .review-details .review .star {
  color: var(--yello-orange-bg);
}

.freelancers .review-details .review .amount {
  color: var(--primary-text-color);
}

.freelancers .contact-details {
  padding-bottom: 0;
}

.freelancers .contact-details li {
  display: inline-block;
  padding-right: 5px;
}

.freelancers .contact-details li a {
  height: 28px;
  width: 28px;
  color: var(--text-color-six);
  border: 1px solid var(--text-color-six);
  display: inline-block;
  border-radius: 100px;
  text-align: center;
}

.freelancers .contact-details .verified {
  background-color: var(--text-color-six);
  color: #ffffff;
  position: relative;
  font-size: 11px;
  padding-left: 23px;
  padding-right: 6px;
  border-radius: 5px;
}

.freelancers .contact-details .verified:before {
  content: "\F00C";
  font-size: 13px;
  font-family: fontAwesome;
  width: 25px;
  height: 25px;
  text-align: center;
  background-color: var(--text-color-six);
  border-radius: 100px;
  position: absolute;
  top: -4px;
  left: -3px;
}

.freelancers .contact-details .address-book a {
  border-color: var(--grey-light-bg-4);
  color: var(--grey-light-bg-4);
}

.freelancers .contact-details .phone a {
  border-color: var(--grey-light-bg-4);
  color: var(--grey-light-bg-4);
}

.freelancer-grid-view {
  padding: 60px 30px;
}

.freelancer-grid-view .feature-image {
  text-align: center;
}

.freelancer-grid-view .feature-image img {
  margin-bottom: 25px;
}

.freelancer-grid-view .name-designation {
  text-align: center;
  padding-bottom: 25px;
}

.freelancer-grid-view .rate-hire {
  overflow: hidden;
  margin-bottom: 30px;
}

.freelancer-grid-view .rate-hire .rate {
  float: left;
}

.freelancer-grid-view .rate-hire .hire-button {
  float: right;
}

.freelancer-grid-view .review-details {
  padding-bottom: 12px;
}

/*=================================================*/

/************** 21.0 Pricing Table Css ************/

/*===============================================*/

#pricing-table {
  padding-top: 55px;
  padding-bottom: 30px;
}

.pricing-title-area {
  padding-bottom: 55px;
}

.pricing-item {
  position: relative;
  text-align: center;
  background-image: linear-gradient(135deg, #0ea0a6 0%, #2976d4 100%);
  border-radius: 10px;
  padding: 55px 0px 60px 0px;
  z-index: 0;
  margin-bottom: 30px;
  transition: all 0.5s ease;
  color: #ffffff;
}

.pricing-item:before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(135deg, #00b5bc 0%, #3e8ef0 100%);
  border-radius: 10px;
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.pricing-item:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.pricing-item .pricing-title {
  text-transform: uppercase;
  padding-bottom: 6px;
  font-weight: 600;
}

.pricing-item .price {
  padding-bottom: 23px;
  font-weight: 600;
}

.pricing-item .price span {
  position: relative;
  font-size: 24px;
  top: -14px;
  padding-right: 10px;
}

.pricing-item:hover .pt-button {
  background: linear-gradient(to top left, #fff, #fff, #fff, #fff, #fff);
  color: var(--apply-btn-bg);
  transition: all 0.5s;
}

.active.pricing-item:before,
.pricing-item:hover::before {
  opacity: 1;
}

.pricing-sub-title {
  padding-bottom: 25px;
}

.pricing-details {
  padding-bottom: 20px;
}

.pricing-details li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 0px 7px 0px;
}

.pricing-details li:last-child {
  border-bottom: none;
}

.title-center {
  text-align: center;
}

.pricing-item .pt-button.light:active,
.pricing-item .pt-button.light:hover {
  color: #3bc9d6;
}

.pricing-caption {
  text-align: center;
  color: #71818c;
}

/*========================================*/

/************** 22.0 Blog Css ************/

/*======================================*/

#blog-posts {
  padding-top: 55px;
  padding-bottom: 60px;
  background-color: var(--grey-light-bg-1);
}

.blog-posts {
  border: 1px solid var(--border-one);
  border-radius: 10px;
  transition: all 0.5s;
  margin-bottom: 15px;
}

.blog-posts:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.blog-posts .blog-image img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  width: 100%;
}

.blog-posts .blog-details {
  padding: 22px 30px 23px 30px;
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.blog-posts .blog-details .post-meta li {
  display: inline-block;
  color: var(--primary-color);
  text-transform: uppercase;
  margin-right: 10px;
  padding-right: 15px;
  font-size: 13px;
  position: relative;
}

.blog-posts .blog-details .post-meta li:first-child:after {
  content: "";
  height: 13px;
  width: 1px;
  position: absolute;
  top: 6px;
  right: 0;
  background-color: var(--primary-color);
  margin-left: 15px;
}

.blog-posts .blog-details .post-meta li:last-child {
  margin-right: 0;
}

.blog-posts .blog-details .post-meta li a {
  color: var(--primary-color);
}

.blog-posts .blog-details .blog-title a {
  font-size: 20px;
  font-weight: 500;
  color: var(--main-title-color);
  padding-bottom: 16px;
  display: inline-block;
}

.blog-posts:hover .blog-title a {
  color: var(--primary-color);
}

/*==========================================*/

/************** 23.0 Follow Css ************/

/*=======================================*/

#followers {
  padding-top: 55px;
  padding-bottom: 28px;
}

.follow-details {
  overflow: hidden;
  padding-bottom: 40px;
}

.follow {
  float: left;
  overflow: hidden;
  margin-right: 30px;
  text-align: center;
}

.follow:last-child {
  margin-right: 0;
}

.follow .icon {
  float: left;
  font-size: 32px;
  padding-top: 6px;
}

.follow .followers {
  float: left;
  margin-left: 10px;
}

.follow .followers p {
  font-size: 10px;
  line-height: 20px;
  color: #696969;
  text-transform: uppercase;
}

.follow .followers .amount {
  color: var(--tertiary-text-color);
}

.follow .facebook {
  color: #3a589b;
}

.follow .twitter {
  color: #379ff5;
}

.follow .envelope {
  color: #8982f7;
}

.verify-image {
  text-align: center;
  padding-bottom: 30px;
}

/*==================================================*/

/******** 24.0 Feature Job Offline Page Css *******/

/*===============================================*/
.grid-view-items {
    margin-bottom: 30px;
}

#feature-job-offline-list {
  padding-top: 132px;
}

#feature-job-offline-list .grid-view {
  display: none;
}

#feature-job-offline-list .grid-view-items .apply .apply-btn {
  padding: 8px 17px 10px 17px;
}

#feature-job-offline-list .grid-view-items .duration {
  padding-bottom: 0;
}

#feature-job-offline-list .grid-view-items .job-duration {
  padding-left: 0;
}

#feature-job-offline-list .job-description .job-title {
  height: 60px;
  overflow: hidden;
}

#feature-job-offline-list .pagination-area {
  padding-top: 45px;
}

#feature-job-offline-grid {
  padding-top: 135px;
}

#feature-job-offline-grid .list-view {
  display: none;
}

#feature-job-offline-grid .pagination-area {
  padding-top: 45px;
}

.buttons-container {
  overflow: hidden;
  background-color: var(--primary-color);
  padding: 8px 30px 8px;
  color: #ffffff;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  margin-bottom: 15px;
}

.buttons-container .list-grid-btn {
  float: left;
}

.buttons-container .list-grid-btn li {
  display: inline-block;
  padding-right: 5px;
}

.buttons-container .sort-options {
  float: right;
}

.buttons-container .sort-options li {
  display: inline-block;
}

.buttons-container .sort-options select {
  background: transparent;
  border: none;
  color: #ffffff;
  position: relative;
  font-weight: 500;
}

.buttons-container .sort-options select option {
  color: #000;
}

.feature-job-items {
  float: left;
  width: 100%;
  margin: 0 10px 0 0;
}

.feature-job-items .apply {
  left: 18%;
  right: 0;
  display: inline-table;
}

 #feature-job-online-list .feature-job-items .apply {
    left: 20%;
}

.feature-job-items .grid-view-items .apply {
  right: unset;
  left: 19%;
  top: 60%;
}

.feature-job-items-sidebar {
  float: left;
  width: 100%;
  margin: 0 10px 0 0;
}

.feature-items:nth-child(odd) {
  margin: 0px;
}

.grid-view-items {
  position: relative;
  padding-bottom: 10px;
}

.grid-view-items .company-logo {
  height: auto;
  width: auto;
}

.grid-view-items .job-description {
  float: none;
  width: auto;
  margin-left: 130px;
}

.grid-view-items .job-description .job-title {
  height: 60px;
  margin-bottom: 10px;
  overflow: hidden;
  padding-bottom: 0;
}

.grid-view-items .job-description .location {
  float: none;
}

.grid-view-items .budget {
  float: right;
  position: relative;
  top: -12px;
  right: 73px;
}

.grid-view-items .budget ul li {
  display: inline-block;
}

.grid-view-items .duration p {
  color: var(--main-title-color);
  padding-bottom: 0;
  font-size: 13px;
}

.grid-view-items .amount p {
  font-size: 13px;
}

.grid-view-items .apply {
  left: 18%;
  right: 0;
  top: 48%;
  display: inline-table;
}

.grid-view-items .apply .apply-btn {
  font-size: 13px;
  padding: 8px 17px 10px 17px;
  line-height: 14px;
}

/*===========================================================*/

/************** 25.0 Feature Job Online Page Css ************/

/*=========================================================*/

#feature-job-online-list {
  padding-top: 132px;
}

#feature-job-online-list .location .flag {
  padding-right: 5px;
  position: relative;
  top: -1px;
}

#feature-job-online-list .pagination-area {
  padding-top: 30px;
}

/*********** Feature Job With Sidebar ************/

#feature-job-online-with-sidebar {
  padding-top: 132px;
}

#feature-job-online-with-sidebar .pagination-area {
  padding-top: 45px;
}

#feature-job-online-with-sidebar .feature-full__job-posts .budget ul li {
  display: block;
}

.feature-job-items-sidebar .apply .apply-btn {
  font-size: 13px;
  padding: 3px 18px 4px 18px;
}

.feature-job-items-sidebar .grid-view-items .apply .apply-btn {
  padding: 8px 17px 10px 17px;
}

/*=====================================================*/

/************** 26.0 Post Project Page Css ************/

/*===================================================*/

#post-project {
  padding-top: 130px;
  padding-bottom: 60px;
  background-color: #f4f6f9;
}

.submit-info {
  padding: 50px 30px 60px;
  background: #f4f4f4;
}

.get-job-title {
  padding: 20px 30px;
  border-bottom: 1px solid #e6eaee;
}

.form-control:focus {
  outline: none;
  box-shadow: none;
}

.submit-info .info-title {
  font-weight: 500;
  color: var(--main-title-color);
  float: left;
  padding-bottom: 8px;
}

.submit-info .need-info {
  padding-bottom: 25px;
}

.submit-info input {
  font-size: 15px;
  height: 45px;
  border: 1px solid var(--border-one);
  border-radius: 30px;
  outline: none;
}

.submit-info input::-webkit-input-placeholder {
  color: var(--secondary-text-color);
  font-size: 15px;
}

.submit-info input:-ms-input-placeholder {
  color: var(--secondary-text-color);
  font-size: 15px;
}

.submit-info input::-ms-input-placeholder {
  color: var(--secondary-text-color);
  font-size: 15px;
}

.submit-info input::placeholder {
  color: var(--secondary-text-color);
  font-size: 15px;
}

.submit-info input:focus {
  border: 1px solid var(--primary-color);
}

.submit-info .tooltip-icon {
  float: right;
  text-decoration: none;
}

.submit-info .tooltip-icon a {
  color: var(--primary-color);
}

.submit-info .get-description {
  padding-bottom: 60px;
}

.submit-info .get-description textarea {
  height: 217px;
  border-color: var(--border-one);
  font-size: 15px;
  border-radius: 10px;
}

.submit-info .get-description textarea:focus {
  border-color: var(--primary-color);
}

.submit-info .get-description textarea::-webkit-input-placeholder {
  color: var(--secondary-text-color);
}

.submit-info .get-description textarea:-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.submit-info .get-description textarea::-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.submit-info .get-description textarea::placeholder {
  color: var(--secondary-text-color);
}

.submit-info .file-upload-btn {
  border: 1px solid #7d7d7d;
  border-style: dashed;
  border-radius: 10px;
}

.submit-info .file-upload-btn p {
  color: var(--secondary-text-color);
  float: left;
  margin-left: 15px;
  margin-bottom: 23px;
}

.submit-info .file-upload-btn label {
  margin-bottom: 0;
}

.submit-info .file-upload-btn .file-upload {
  position: relative;
  display: inline-block;
  padding: 30px 0px 30px 15px;
  float: left;
}

.submit-info .file-upload-btn .file-upload__label {
  display: block;
  padding: 7px 15px;
  background: transparent;
  color: var(--main-title-color);
  border: 1px solid var(--main-title-color);
  border-radius: 30px;
  transition: background 0.3s;
}

.submit-info .file-upload-btn .file-upload__label:hover {
  cursor: pointer;
  background: #000;
  color: #ffffff;
}

.submit-info .file-upload-btn .file-upload__input {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  height: 100%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.submit-info .get-job-buttons {
  padding-top: 60px;
  padding-bottom: 52px;
}

.submit-info .get-job-buttons .form-group {
  margin-bottom: 0px;
}

.submit-info .get-job-buttons .custom-select {
  padding: 0px 15px;
  border-radius: 100px;
  border: 1px solid var(--border-one);
  font-size: 15px;
  height: 40px;
  color: var(--secondary-text-color);
}

.submit-info .get-job-buttons .custom-select:focus {
  box-shadow: none;
  border-color: var(--primary-color);
}

.pick-category {
  padding-bottom: 25px;
}

.pick-category .info-title {
  float: none;
}

.pick-category select {
  border: 1px solid var(--border-one);
  border-radius: 100px;
  height: 45px;
  font-size: 15px;
}

.pick-category .custom-select:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--primary-color);
}

.pick-category input {
  height: 45px;
  width: 100%;
  padding-left: 15px;
}

.submit-info ul {
  margin-bottom: 0;
}

.submit-info ul li .pick-cat {
  width: 100%;
  text-align: left;
}

.submit-info ul li .sub-cat {
  width: 100%;
  text-align: left;
}

.select-currency .custom-select {
  width: 100%;
  background-color: #ffffff;
  border-color: var(--border-one);
  height: 40px;
}

.big-budget .custom-select {
  width: 100%;
  background-color: #ffffff;
  border-color: var(--border-one);
  height: 40px;
}

.experience-level .info-title {
  padding-bottom: 10px;
  float: none;
}

.experience-level .body p {
  color: #7d7d7d;
}

.experience-level input[type=radio] {
  margin: 4px 0px 0px;
  line-height: normal;
  box-sizing: border-box;
}

.experience-level .xpbox input {
  display: none;
}

.experience-level .xpbox input + label {
  width: 100%;
  cursor: pointer;
  border: 1px solid var(--border-one);
  background-clip: padding-box;
  background: #f8f9fc;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-bottom: 30px;
}

.experience-level .xpbox input:checked + label .header {
  background-color: var(--primary-color);
  color: #ffffff;
}

.experience-level .xpbox input + label .header {
  text-align: center;
  padding: 10px 0px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--border-one);
  border-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.experience-level .xpbox input + label .body {
  text-align: center;
  position: relative;
  padding: 25px 30px;
  background: #f8f9fc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.experience-level .xpbox input + label .body .symbols {
  display: block;
  position: absolute;
  right: 15px;
  bottom: 5px;
}

.symbols {
  color: var(--text-color-four);
}

/*========================================================*/

/************** 27.0 Project Accept Page Css ************/

/*=====================================================*/

#project-accept-page {
  padding-top: 132px;
}

.project-accept-area {
  border: 1px solid var(--border-one);
  border-radius: 10px;
  padding-bottom: 53px;
  margin-bottom: 60px;
}

.bidding-header {
  background-color: var(--grey-light-bg-1);
}

.bidding-info {
  padding: 25px 15px 14px;
}

.bidding-info .bid-info {
  text-align: center;
  overflow: hidden;
}

.freelancer-bidding {
  padding-bottom: 0px;
  float: none;
}

.freelancer-bidding h5 {
  color: var(--primary-text-color);
  padding-bottom: 7px;
}

.freelancer-bidding ul {
  padding-left: 30px;
}

.freelancer-bidding ul li {
  display: inline-block;
}

.freelancer-bidding ul li a {
  color: var(--primary-color);
}

.freelancer-bidding ul li a img {
  border-radius: 100px;
}

.avg-bidding {
  padding-bottom: 15px;
}

.avg-bidding h5 {
  padding-bottom: 7px;
}

.avg-bidding .project-amount {
  color: var(--primary-color);
  line-height: 25px;
}

.project-budget {
  padding-bottom: 15px;
}

.project-budget h5 {
  padding-bottom: 7px;
}

.project-budget .project-amount {
  color: var(--primary-color);
  line-height: 25px;
}

.bidding .get-btn {
  background-color: var(--primary-color);
  color: #ffffff;
  font-weight: normal;
  padding: 9px 30px;
}

.project-description {
  padding-top: 53px;
  padding-left: 15px;
  padding-bottom: 22px;
}

.employee-info {
  padding-top: 55px;
  text-align: center;
}

.employee-info .title {
  font-size: 21px;
  padding-bottom: 45px;
}

.employee-info .feature-image {
  position: relative;
}

.employee-info .feature-image img {
  border-radius: 100px;
}

.employee-info .feature-image .online:before {
  content: "";
  height: 15px;
  width: 15px;
  position: absolute;
  top: 45%;
  right: 39%;
  background-color: var(--online-dot-bg);
  border: 2px solid #ffffff;
  border-radius: 100px;
}

.employee-info .feature-image .name-designation {
  margin-top: 25px;
  padding-bottom: 20px;
}

.employee-info .feature-image .name-designation .name {
  text-transform: uppercase;
  color: var(--primary-text-color);
}

.employee-info .feature-image .name-designation .designation {
  color: var(--secondary-text-color);
}

.employee-info .contact-details .address-book a {
  border-color: var(--grey-light-bg-4);
  color: var(--grey-light-bg-4);
}

.employee-info .contact-details .phone a {
  border-color: var(--grey-light-bg-4);
  color: var(--grey-light-bg-4);
}

.skill-requirement {
  padding-left: 30px;
}

.skill-requirement .title {
  font-size: 21px;
  padding-bottom: 17px;
}

.skill-requirement li {
  display: inline-block;
}

.skill-requirement li a {
  color: var(--primary-color);
}

.freelancer-awarded-milestones-wrapper {
  padding-top: 37px;
  border: 1px solid var(--border-one);
  border-radius: 10px;
}

.freelancers-awared {
  overflow: hidden;
  padding-left: 30px;
  padding-bottom: 60px;
}

.freelancers-awared .title {
  font-size: 21px;
  color: var(--main-title-color);
  padding-bottom: 25px;
}

.freelancers-awared .freelancer {
  overflow: hidden;
}

.freelancers-awared .freelancer .about-freelancer {
  float: left;
  margin-right: 25px;
}

.freelancers-awared .freelancer .about-freelancer img {
  border-radius: 100px;
  margin-bottom: 15px;
}

.freelancers-awared .freelancer .award-info a {
  color: var(--primary-color);
}

.freelancers-awared .freelancer .award-details {
  color: var(--secondary-text-color);
}

.reputation {
  padding-left: 30px;
  text-align: center;
  padding-bottom: 20px;
}

.reputation .title {
  font-size: 21px;
  padding-bottom: 25px;
}

.reputation .amout {
  padding-top: 8px;
  display: inline-block;
}

.reputation .review-dt {
  color: var(--secondary-text-color);
  padding-top: 10px;
}

.reputation .review-dt .amount {
  color: var(--main-title-color);
}

.project-bid {
  text-align: center;
  padding-bottom: 25px;
}

.project-bid .title {
  font-size: 21px;
  padding-bottom: 18px;
}

.project-bid a {
  display: block;
  color: var(--primary-color);
}

.milestone-wrapper {
  border-top: 1px solid var(--border-one);
  padding: 20px 30px 5px 24px;
}

.milestone-wrapper .milestone {
  overflow: hidden;
  padding-bottom: 3px;
}

.db-table .table td {
  padding-left: 30px;
}

.db-table .table th {
  padding-left: 30px;
}

.milestone-wrapper .milestone h3 {
  float: left;
  font-size: 24px;
  color: var(--primary-color);
}

.milestone-wrapper .milestone .add-milestone {
  float: right;
  color: var(--primary-color);
}

.db-table .btn-secondary {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  border-radius: 100px;
}

.db-table .btn-secondary:focus {
  box-shadow: none;
  outline: none;
}

.btn-group > .btn:first-child {
  margin-left: 0;
  border-radius: 100px;
  padding-left: 15px;
}

.btn-secondary:not(:disabled):not(.disabled):active {
  background: var(--primary-color);
}

.btn-secondary:not(:disabled):not(.disabled):active {
  border-color: var(--primary-color);
}

.project-id .title {
  font-size: 16px;
}

/*=============================================*/

/************** 28.0 Bid Page Css ************/

/*==========================================*/

#project-bid-page {
  padding-top: 133px;
}

.get-button.bidding {
  text-align: center;
}

.bid-project-page {
  border: 1px solid var(--border-one);
  border-radius: 10px;
  padding-bottom: 55px;
  margin-bottom: 53px;
}

.proposal {
  padding-bottom: 55px;
}

.proposal .title {
  font-size: 21px;
  padding-bottom: 18px;
}

.proposal p {
  padding-bottom: 7px;
}

.proposal textarea {
  height: 200px;
  border-radius: 10px;
}

.proposal-breakdown .replicate {
  overflow: hidden;
}

.proposal-breakdown .title {
  font-size: 21px;
  padding-bottom: 17px;
}

.proposal-breakdown p {
  text-transform: uppercase;
  padding-bottom: 7px;
}

.proposal-breakdown .proposal-left {
  width: 70%;
  float: left;
}

.proposal-breakdown .proposal-left input {
  border: 1px solid var(--border-two);
  margin-bottom: 0px;
  width: 97%;
  border-radius: 100px;
  height: 45px;
}

.proposal-breakdown .proposal-left input:focus {
  border: 1px solid var(--primary-color);
}

.proposal-breakdown .proposal-left input::-webkit-input-placeholder {
  text-transform: lowercase;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-style: italic;
}

.proposal-breakdown .proposal-left input:-ms-input-placeholder {
  text-transform: lowercase;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-style: italic;
}

.proposal-breakdown .proposal-left input::-ms-input-placeholder {
  text-transform: lowercase;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-style: italic;
}

.proposal-breakdown .proposal-left input::placeholder {
  text-transform: lowercase;
  color: var(--secondary-text-color);
  font-size: 14px;
  font-style: italic;
}

.proposal-breakdown .proposal-left .add-item {
  color: var(--primary-color);
  text-decoration: none;
  text-transform: initial;
}

.proposal-breakdown .proposal-left .items ul {
  float: right;
  margin-bottom: 0;
}

.proposal-breakdown .proposal-left .items ul li {
  text-align: right;
  padding: 16px;
  position: relative;
  bottom: 37px;
  right: 0px;
  color: var(--primary-text-color);
  text-transform: uppercase;
}

.proposal-breakdown .proposal-left .info {
  float: left;
}

.proposal-breakdown .proposal-left .info p {
  position: relative;
  text-transform: capitalize;
  bottom: 7px;
  font-size: 14px;
  color: var(--secondary-text-color);
}

.proposal-breakdown .proposal-right {
  position: relative;
  float: left;
  width: 30%;
  padding: 0px;
  font-size: 14px;
}

.proposal-breakdown .proposal-right p {
  color: var(--primary-text-color);
}

.proposal-breakdown .proposal-right input {
  border: 1px solid var(--border-two);
  margin-bottom: 15px;
  border-radius: 100px;
  height: 45px;
}

.proposal-breakdown .proposal-right input:focus {
  border: 1px solid var(--primary-color);
}

.proposal-breakdown .proposal-right input[type=submit] {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: #fff;
  border-radius: 100px;
  cursor: pointer;
  margin-top: 60px;
  width: 103px;
}

.proposal-breakdown .proposal-right .additional {
  width: 100%;
}

.proposal-breakdown .proposal-right .bidding-close {
  position: absolute;
  right: 12px;
  top: 12px;
  cursor: pointer;
}

.proposal-breakdown .proposal-right .error {
  border-color: red !important;
}

.proposal-breakdown .notify-tm {
  overflow: hidden;
  width: 100%;
  padding-bottom: 18px;
}

.proposal-breakdown .notify-tm .checkbox-btn {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: var(--secondary-text-color);
}

.proposal-breakdown .notify-tm .checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 15px;
  width: 15px;
  border: 1px solid #7d7d7d;
}

.proposal-breakdown .notify-tm .checkmark:after {
  content: "";
  left: 4px;
  top: 0px;
  width: 5px;
  height: 11px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  position: absolute;
  display: none;
}

.proposal-breakdown .notify-tm .checkbox-btn input {
  position: absolute;
  opacity: 0;
}

.proposal-breakdown .notify-tm .checkbox-btn input:checked ~ .checkmark {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.proposal-breakdown .notify-tm .checkbox-btn input:checked ~ .checkmark:after {
  display: block;
}

/*================================================*/

/************** 29.0 Dispute Page Css ************/

/*==============================================*/

#dispute-page {
  padding-top: 132px;
}

.get-started-wrapper {
  text-align: center;
  background-position: center center;
  padding-top: 53px;
}

.dispute {
  border: 1px solid #e6eaee;
  border-radius: 10px;
  padding: 24px 30px 0;
  margin-bottom: 60px;
}

.dispute .project-name {
  color: #1fb5ad;
  padding-bottom: 20px;
}

.dispute h5 {
  padding-bottom: 8px;
  color: #0f0d0e;
}

.get-started-wrapper img {
  padding-bottom: 30px;
}

.get-started-wrapper .stage a {
  color: #222222;
}

.get-started-wrapper .stage a:hover {
  color: #1fb5ad;
}

.note {
  background: #e6eaee;
  padding: 27px 30px 22px 15px;
  border-radius: 10px;
}

.note h5 {
  font-weight: 600;
  padding-bottom: 20px;
}

.note ul {
  margin-bottom: 0px;
  padding-left: 20px;
}

.note ul li {
  list-style-type: disc;
}

.note ul li span {
  color: #ff6c60;
}

.negotiation {
  border: 1px solid #eeeeee;
  margin-top: 60px;
  padding: 24px 30px 30px;
  border-radius: 10px;
}

.negotiation h4 {
  font-weight: 400;
  padding-bottom: 5px;
}

.negotiation .negotiation-inner {
  margin-top: 20px;
}

.negotiation .negotiation-inner img {
  float: left;
  border-radius: 100px;
}

.negotiation .message {
  margin-left: 75px;
}

.negotiation .message-title {
  background: var(--primary-color);
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  padding: 10px 15px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.negotiation .message-title h5 {
  float: left;
  padding: 0;
  color: #ffffff;
  font-size: 18px;
}

.negotiation .message-title img {
  border-radius: 0;
  margin: 6px 0 0 15px;
}

.negotiation .message-title span {
  float: right;
  color: #f2f2f2;
}

.negotiation .dispute-message {
  background: #f3f4f7;
  padding: 15px 15px 22px 15px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.negotiation .dispute-message span {
  color: #494949;
}

.respond {
  margin-top: 55px;
  border-radius: 5px;
}

.respond h4 {
  padding-bottom: 10px;
  font-size: 21px;
}

.respond textarea {
  border-color: #eeeeee;
  width: 100%;
  height: 147px;
  border-radius: 10px;
  padding-left: 30px;
}

.file-upload-area {
  margin-top: 50px;
  border-radius: 5px;
}

.file-upload-area h5 {
  padding-bottom: 8px;
}

.file-upload-area .file-upload-btn {
  border: 1px solid #eeeeee;
  background: #f3f4f7;
  text-align: center;
  border-radius: 10px;
}

.file-upload-area .file-upload-btn p {
  margin-top: 0px;
  color: var(--secondary-text-color);
  margin-bottom: 15px;
}

.file-upload-area .file-upload-btn .file-upload {
  padding: 15px 30px;
  position: relative;
  display: inline-block;
}

.file-upload-area .file-upload-btn .file-upload__label {
  background: #f3f4f7;
  cursor: pointer;
  display: block;
  padding: 7px 33px;
  color: #222222;
  border: 1px solid #222222;
  border-radius: 100px;
  margin: 0;
}

.file-upload-area .file-upload-btn .file-upload input {
  display: none;
}

.dispute-countdown {
  border: 1px solid #eeeeee;
  margin-top: 60px;
  background: #f3f4f7;
  padding: 30px;
  border-radius: 5px;
}

.dispute-countdown span {
  display: block;
  text-align: center;
  color: #000000;
}

.dispute-countdown h4 {
  color: var(--primary-color);
  text-align: center;
}

.dispute-countdown .respond-text {
  color: var(--primary-color);
  display: block;
  text-align: center;
  margin-top: 12px;
}

.dispute-countdown .arbitration {
  border: 1px solid #b3b3b3;
  color: #0f0d0e;
  padding: 10px 10px;
  border-radius: 10px;
  margin-top: 15px;
}

.dispute-countdown .amount-disputed {
  border-bottom: 1px dashed #b3b3b3;
  margin-top: 12px;
  padding-bottom: 8px;
}

.dispute-countdown .amount-disputed span {
  display: inline-block;
  font-size: 1.5em;
}

.dispute-countdown .show-milestones {
  color: var(--primary-color);
  font-style: italic;
  font-size: 16px;
  float: right;
}

.dispute-countdown .amount-disputed .dispute-countdown .show-milestones {
  color: var(--primary-color);
  float: right;
  margin-top: 10px;
  font-style: italic;
}

.dispute-countdown .enter-amount {
  border-bottom: 1px dashed #b3b3b3;
  margin-top: 25px;
  padding-bottom: 22px;
}

.bar-ymp {
  border: 0.5px solid #7d7d7d;
  width: 50px;
  display: block;
  margin: 0 auto;
  margin-bottom: 23px;
}

.stage {
    padding-bottom: 6px;
}

.mobile-padding {
    padding-bottom: 55px;
}

/*======================================================*/

/************** 30.0 Freelancer Profile Css ************/

/*====================================================*/

#freelancer-portfolio {
  background-repeat: no-repeat !important;
  padding-bottom: 95px;
  background-size: inherit !important;
  background-position: top center !important;
}

#freelancer-portfolio::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 61.4%;
  width: 100%;
  background: rgba(0, 0, 0, 0.3);
}

.freelancer-portfolio {
  background-color: var(--grey-light-bg-1);
  padding-top: 20px;
  position: relative;
  top: 177px;
  border-radius: 5px;
  padding-bottom: 20px;
  margin-bottom: 185px;
  border: 1px solid #e6eaee;
}

.freelancer-info {
  padding: 50px 30px 40px;
}

.freelancer-info .freelancer-detail {
  padding-bottom: 65px;
}

.freelancer-info .freelancer-detail .freelancer-name {
  color: var(--primary-text-color);
}

.freelancer-info .freelancer-detail .online {
  font-size: 14px;
  color: #10bd00;
  padding-left: 22px;
  position: relative;
  bottom: 1px;
}

.freelancer-info .freelancer-detail .profile-title {
  font-size: 20px;
  color: var(--main-title-color);
  padding-bottom: 6px;
}

.freelancer-info .freelancer-detail .hire-for {
  padding-top: 20px;
}

.freelancer-info .freelancer-detail ul {
  margin-bottom: 15px;
}

.freelancer-info .recent-reviews {
  padding-bottom: 30px;
  border-bottom: 1px solid #e6eaee;
}

.freelancer-info .recent-reviews h3 {
  float: left;
  font-size: 20px;
  color: var(--main-title-color);
}

.freelancer-info .pagination-area {
  padding-top: 60px;
  padding-bottom: 0px;
}

.freelancer-name {
  padding: 5px 0px 15px 0px;
}

.recent-reviews p {
  float: right;
}

.review-wrapper {
  border-bottom: 1px solid #e6eaee;
  padding-bottom: 7px;
  padding-top: 30px;
}

.review-wrapper img {
  float: left;
  margin-right: 30px;
  border: 1px solid var(--border-one);
  border-radius: 5px;
}

.project-review {
  padding-left: 0px;
}

.project-review ul li {
  display: inline-block;
}

.project-review .client-rating li {
  color: var(--yello-orange-bg);
  padding-top: 10px;
}

.project-review .client-rating li:last-child {
  padding-left: 0px;
  color: var(--text-color-four);
}

.review-detail p {
  color: var(--main-title-color);
}

.milestone-amount {
  color: #494949;
}

.review-detail {
  padding-top: 35px;
}

.review-detail .client p {
  float: left;
  color: var(--main-title-color);
}

.review-detail .client span {
  color: #7d7d7d;
}

.review-detail .client img {
  padding: 0px 10px;
  margin-right: 0px;
  position: relative;
  top: 7px;
  border: none;
}

.project-review ul.category-ch li a {
  color: #7d7d7d;
}

.show-post {
  padding-top: 26px;
  text-align: center;
}

.show-post p {
  float: left;
}

.profile-pagination {
  border: 1px solid #e6eaee;
  float: right;
  border-radius: 5px;
}

.profile-pagination ul {
  margin-bottom: 0;
}

.profile-pagination ul li {
  display: inline-block;
  border-right: 1px solid #e6eaee;
  padding: 2px 0px;
}

.profile-pagination ul li a {
  padding: 3px 10px 3px 10px;
  color: #7d7d7d;
}

.profile-pagination ul li:last-child {
  border-right: none;
}

.portfolio-pagination p {
  float: left;
}

.freelancer-detail {
  padding-bottom: 47px;
}

/***************** Freelancer Profile Page Sidebar Css *****************/

.freelancer-profile-sidebar img {
  position: relative;
  bottom: 65px;
  background: #fff;
  padding: 5px;
  border: 1px solid var(--border-one);
  border-radius: 10px;
  width: 72%;
  left: 0px;
  display: block;
  margin: 0 auto;
}

.profile-info {
  padding: 0 15px 0 15px;
}

.profile-info h4 {
  padding-bottom: 10px;
  font-size: 20px;
  color: var(--main-title-color);
}

.profile-info .hourly-rate {
  overflow: hidden;
  padding: 0px 0px 20px 0px;
}

.profile-info .hourly-rate h5 {
  float: left;
  color: var(--text-color-four);
}

.profile-info .hourly-rate .button-ymp {
  color: #ffffff;
  background-color: var(--primary-color);
  font-size: 13px;
  text-transform: capitalize;
  padding: 5px 15px;
  float: right;
  border: 1px solid var(--primary-color);
  border-radius: 100px;
  box-shadow: 0px 4px 5.4px 0.6px rgba(0, 0, 0, 0.13);
}

.profile-info .hourly-rate .form-control {
  width: auto;
}

.profile-info .hourly-rate .form-control:focus {
  background: var(--primary-color);
  color: #ffffff;
}

.profile-info .overviews {
  border: 1px solid #e6eaee;
  border-radius: 5px;
  background: #f9f9f9;
}

.profile-info .overviews ul {
  margin-bottom: 0px;
  border-radius: 10px;
}

.profile-info .overviews ul li {
  border-bottom: 1px solid #e6eaee;
  padding: 7px 17px;
  color: var(--main-title-color);
  font-size: 14px;
  background: var(--grey-light-bg-5);
  transition: all 0.5s;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.profile-info .overviews ul li:last-child {
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.profile-info .overviews ul li:hover {
  box-shadow: 0px 1px 7px 0px rgba(0, 0, 0, 0.1);
}

.profile-info .overviews ul li span.icon {
  text-align: center;
  font-size: 14px;
  border-radius: 50px;
  float: none;
  padding-right: 5px;
}

.profile-info .overviews ul li span {
  text-align: center;
  width: 50px;
  float: right;
  font-size: 14px;
  border-radius: 50px;
}

.overviews ul li span.yellow {
  background-color: var(--color-one);
  color: #ffffff;
}

.overviews ul li span.blue {
  background-color: var(--color-two);
  color: #ffffff;
}

.overviews ul li span.violet {
  background-color: var(--color-three);
  color: #ffffff;
}

.overviews ul li span.red {
  background-color: var(--color-four);
  color: #ffffff;
}

.verification {
  padding: 25px 0px;
}

.verification ul {
  margin-bottom: 0px;
  border: 1px solid #e6eaee;
  background: #f9f9f9;
  border-radius: 10px;
}

.verification ul li {
  padding: 7px 15px;
  border-bottom: 1px solid #e6eaee;
  font-size: 14px;
}

.verification ul li:last-child {
  border-bottom: none;
}

.verification ul li:nth-child(1) {
  color: var(--secondary-text-color);
}

.verification ul li:nth-child(2) {
  color: var(--secondary-text-color);
}

.verification ul li span {
  float: right;
  font-size: 14px;
}

.verification ul li.active {
  color: var(--primary-title-color);
}

.verification ul li.active span {
  color: #5dc26a;
}

.top-skills {
  padding-bottom: 30px;
}

.top-skills ul {
  border: 1px solid #e6eaee;
  border-radius: 5px;
  margin-bottom: 0;
  background: var(--grey-light-bg-5);
}

.top-skills ul li {
  border-bottom: 1px solid #e6eaee;
  padding: 5px 15px;
  color: var(--main-title-color);
  font-size: 16px;
}

.top-skills ul li span {
  float: right;
}

.top-skills ul li:last-child {
  border-bottom: none;
}

.experience {
  padding-bottom: 30px;
}

.experience .type {
  border: 1px solid #e6eaee;
  border-radius: 5px;
  padding: 11px 15px;
  background: #f9f9f9;
}

.experience .type h5 {
  color: var(--secondary-text-color);
}

.experience p {
  color: #222222;
  font-weight: 500;
}

.experience span {
  color: #222222;
  font-weight: 500;
  float: right;
}

.education .degrees {
  border: 1px solid #e6eaee;
  border-radius: 5px;
  background: #f9f9f9;
}

.education .degrees h5 {
  color: var(--primary-text-color);
}

.education .degrees p {
  color: var(--primary-title-color);
}

.education .degrees .mba-degree {
  padding: 10px 15px;
  border-bottom: 1px solid #e6eaee;
}

.education .degrees .mba-degree span {
  color: var(--secondary-text-color);
}

.education .degrees .cse-degree {
  padding: 10px 15px;
}

.education .degrees .cse-degree span {
  color: var(--secondary-text-color);
}

/*********** Freelancer Profile Page Portfolio Css ***********/

#portfolio {
  padding-bottom: 0px;
}

#portfolio .pagination-area {
  padding-top: 30px;
}

.portfolio-menu {
  overflow: hidden;
  padding-bottom: 55px;
  text-align: center;
}

.portfolio-menu h3 {
  float: none;
  font-size: 20px;
  color: var(--primary-color);
  font-weight: 500;
  padding-bottom: 15px;
}

.portfolio-menu .portfolio-btn-group {
  float: right;
}

.portfolio-menu .button-group button {
  background: none;
  border: none;
  padding-right: 24px;
  color: var(--main-title-color);
}

.portfolio-menu .button-group button.active {
  color: var(--primary-color);
}

.portfolio-menu .button-group .form-control {
  width: 22%;
  padding-top: 0px;
  padding-bottom: 5px;
  display: inline-block;
}

.grid-item {
  padding-bottom: 30px;
}

.single-image {
  border-radius: 10px;
  transition: all 0.5s;
}

.single-image:hover {
  box-shadow: 0px 4px 19.98px 7.02px rgba(0, 0, 0, 0.17);
}

.single-image img {
  display: block;
  transition: 0.5s ease;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.single-image .buttons {
  position: absolute;
  display: block;
  margin: 0 auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  top: 50%;
  left: 39%;
}

.buttons ul li {
  margin-bottom: 30px;
}

/*========================================================*/

/************** 31.0 Freelancer List View Css ************/

/*======================================================*/

#freelancer-list-view {
  padding-top: 132px;
}

#freelancer-list-view .pagination-area {
  padding-top: 45px;
}

#freelancer-list-view .grid-view {
  display: none;
}

.freelancer-list-view {
  overflow: hidden;
  padding: 30px 15px;
}

.freelancer-list-view .left-align {
  overflow: hidden;
}

.freelancer-list-view .left-align .feature-image {
  float: left;
  margin-right: 30px;
}

.freelancer-list-view .left-align .online:before {
  top: 74%;
  right: 2%;
}

.freelancer-list-view .contact-details {
  margin-left: 130px;
}

.freelancer-list-view .contact-details ul li:nth-child(1) {
  width: 75%;
  margin-bottom: 10px;
}

.freelancer-list-view .left-align {
  margin-bottom: 15px;
}

.freelancer-list-view .right-align {
  margin-left: 130px;
  float: none;
}

.freelancer-list-view .name-designation {
  margin-bottom: 15px;
}

/************** Freelancer Grid View Css ************/

#browse-freelancer-grid {
  padding-top: 132px;
}

#browse-freelancer-grid .list-view {
  display: none;
}

#browse-freelancer-grid .freelancer-grid-view .online:before {
  top: 40%;
  right: 34%;
}

#browse-freelancer-grid .pagination-area {
  padding-top: 45px;
}

/************** Freelancer List View With Sidebar Css ************/

#freelancer-list-view-with-sidebar {
  padding-top: 132px;
}

#freelancer-list-view-with-sidebar .grid-view {
  display: none;
}

#freelancer-list-view-with-sidebar .freelancer-list-view .contact-details {
  margin-left: 130px;
}

#freelancer-list-view-with-sidebar .freelancer-list-view .contact-details ul li:nth-child(1) {
  width: 80%;
  margin-bottom: 10px;
}

#freelancer-list-view-with-sidebar .pagination-area {
  padding-top: 45px;
}

/************** Freelancer Grid View With Sidebar Css ************/

#browse-freelancer-grid-with-sidebar {
  padding-top: 132px;
}

#browse-freelancer-grid-with-sidebar .list-view {
  display: none;
}

#browse-freelancer-grid-with-sidebar .pagination-area {
  padding-top: 60px;
}

#browse-freelancer-grid-with-sidebar .freelancer-grid-view .online:before {
  top: 38%;
  right: 33%;
}

/*==========================================================*/

/************** 32.0 Project Milestone Page Css ************/

/*========================================================*/

.request-milestone {
  padding: 24px 24px 0 30px;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  margin: 20px 0px 28px 0px;
  background: #ffffff;
}

.request-milestone .request-title {
  padding-bottom: 17px;
}

.request-milestone .request-title .float {
  text-align: right;
  position: relative;
  bottom: 45px;
  font-size: 1.31em;
}

.request-milestone .request-title .float a {
  text-decoration: none;
  color: #7d7d7d;
}

.request-milestone form {
  padding-bottom: 35px;
}

.input-fields {
  float: left;
  width: 100%;
}

.input-fields .input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 28%;
  float: left;
}

.input-fields .input-group-addon {
  background-color: #f8f9fd;
  border: 0 0 0 0 solid #e6eaee;
}

.request-milestone form input[type=number] {
  width: 23.5%;
  float: left;
  border: 1px solid #e6eaee;
  height: 35px;
  border-radius: 100px;
}

.request-milestone form input[type=number]::-webkit-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=number]:-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=number]::-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=number]::placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=number]:focus {
  border: 1px solid #e6eaee;
}

.request-milestone form input[type=text] {
  width: 50%;
  margin-left: 30px;
  float: left;
  border: 1px solid #e6eaee;
  height: 35px;
  border-radius: 100px;
}

.request-milestone form input[type=text]::-webkit-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=text]:-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=text]::-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=text]::placeholder {
  color: var(--secondary-text-color);
}

.request-milestone form input[type=text]:focus {
  border: 1px solid #e6eaee;
}

.milestone-table .table th {
  border-top: none;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

a.float.add-milestone {
  float: right;
  position: relative;
  top: -3px;
}

a.close-milestone.pull-right {
  float: right;
  position: relative;
  top: -34px;
  color: #e6eaee;
  right: 6px;
  font-size: 21px;
}

.request-milestone .input-fields {
  float: left;
  width: 100%;
  padding-bottom: 29px;
}

/*=========================================================*/

/***************** 33.0 Chatting Page Css *****************/

/*=======================================================*/

#chatting-page {
  padding-top: 125px;
}

.chat-freelancers {
  padding: 0px 15px;
}

.chatting-page .search input {
  height: 42px;
  width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-one);
  border-radius: 100px;
  outline: none;
  background-color: #fafafa;
}

.chatting-page .search input::-webkit-input-placeholder {
  font-family: FontAwesome,"Poppins",sans-serif;
}

.chatting-page .search input:-ms-input-placeholder {
  font-family: FontAwesome,"Poppins",sans-serif;
}

.chatting-page .search input::-ms-input-placeholder {
  font-family: FontAwesome,"Poppins",sans-serif;
}

.chatting-page .search input::placeholder {
  font-family: FontAwesome,"Poppins",sans-serif;
}

.chatting-page .search input.form-control {
  line-height: 0px;
}

.chatting-page .search input::-webkit-input-placeholder {
  padding: 0 5px;
  color: #222222;
}

.chatting-page .search input:-ms-input-placeholder {
  padding: 0 5px;
  color: #222222;
}

.chatting-page .search input::-ms-input-placeholder {
  padding: 0 5px;
  color: #222222;
}

.chatting-page .search input::placeholder {
  padding: 0 5px;
  color: #222222;
}

.chatting-page .menu ul {
  margin-bottom: 0;
  padding: 19px 0px;
}

.chatting-page .menu ul li {
  display: inline-block;
  padding-right: 40px;
}

.chatting-page .menu ul li:last-child {
  padding-right: 0px;
}

.chatting-page .menu ul li a {
  color: var(--primary-color);
}

.chatting-page .users ul li {
  padding: 10px 15px;
  background-color: #fafafa;
  transition: all 0.5s;
}

.chatting-page .users ul li:hover {
  border-radius: 10px;
  background-color: var(--primary-color);
}

.chatting-page .users ul li:hover .user-details a {
  color: #ffffff;
}

.chatting-page .users ul li:hover .user-details a.user-description {
  color: #e6eaee;
}

.chatting-page .users ul li .user-img {
  float: left;
  position: relative;
}

.chatting-page .users ul li .user-img img {
  border-radius: 100px;
}

.chatting-page .users ul li .user-img .online-icon:before {
  content: "";
  height: 10px;
  width: 10px;
  background-color: #42b72a;
  position: absolute;
  top: 35px;
  right: 2px;
  border: 1px solid #ffffff;
  border-radius: 100px;
}

.chatting-page .users ul li .user-img .msg-alert {
  height: 16px;
  width: 16px;
  font-size: 9px;
  background-color: #f04a4a;
  color: #ffffff;
  position: absolute;
  top: -2px;
  left: -5px;
  text-align: center;
  line-height: 17px;
  border-radius: 100px;
}

.chatting-page .users ul li .user-details {
  margin-left: 55px;
}

.chatting-page .users ul li .user-details .user-name {
  color: var(--main-title-color);
  font-size: 14px;
  display: block;
}

.chatting-page .users ul li .user-details .user-description {
  color: var(--secondary-text-color);
  font-size: 14px;
  line-height: 18px;
}

.chatting-page .users .active {
  background-color: var(--primary-color);
  border-radius: 10px;
}

.chatting-page .users li.active .user-details a {
  color: #ffffff;
}

.chat-freelancers .nav-tabs {
  border-bottom: none;
}

.chat-freelancers .tab-content {
  padding: 0;
}

.chat-panel {
  padding-bottom: 60px;
}

.chat-panel .chat-header {
  text-align: center;
  padding-bottom: 45px;
}

.chat-panel .chat-header .loading {
  color: var(--primary-color);
  font-size: 14px;
}

.chat-panel .chat-header .time {
  color: var(--secondary-text-color);
  font-size: 14px;
}

.chat-panel .chat-avatar {
  float: right;
}

.chat-panel .chat-avatar img {
  border-radius: 100px;
}

.avatar {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
}

.chat-body {
  display: block;
  margin: 10px 30px 18px 0;
  overflow: hidden;
}

.chat-body .chat-content {
  position: relative;
  display: block;
  float: right;
  padding: 8px 15px;
  margin: 0 20px 10px 0;
  clear: both;
  background-color: var(--primary-color);
  border-radius: 5px;
}

.chat-content p {
  margin-bottom: 7px;
  color: #ffffff;
}

.chat-time {
  display: block;
  margin-top: 8px;
  color: #ececec;
}

.chat-left .chat-avatar {
  float: left;
}

.chat-left .chat-content {
  float: left;
  margin: 0 0 10px 20px;
  background-color: #eeeef2;
}

.chat-left .chat-content p {
  color: #494949;
}

.chat-left .chat-time {
  color: #7d7d7d;
}

.chat-content + .chat-content:before {
  border-color: transparent;
}

.chat-panel-footer {
  padding-top: 20px;
}

.md-file-send:before {
  content: "\F0C6";
  font-family: "FontAwesome";
  color: #cccccc;
  font-size: 16px;
}

.md-file-send {
  background: none;
  padding: 5px 3px;
  cursor: pointer;
}

.message-send:before {
  content: "\F1D8";
  font-family: "FontAwesome";
  color: #ffffff;
  font-size: 16px;
  position: relative;
  left: -1px;
}

.message-send {
  background: none;
  cursor: pointer;
  background: var(--primary-color);
  height: 30px;
  width: 30px;
  padding: 2px 5px;
  border-radius: 100px;
  box-shadow: 0px 3px 4.45px 0.55px rgba(0, 0, 0, 0.28);
}

.message-send:focus {
    box-shadow: none;
}

.form-material input {
  border: none;
  border-bottom: 1px solid #dcdcdc;
  border-radius: 0px;
  padding-bottom: 9px;
}

.input-group-btn {
  padding-bottom: 10px;
  border-bottom: 1px solid #dcdcdc;
}

.input-group-btn label {
  margin-bottom: 0px;
  margin-right: 8px;
}

input[type="file"] {
    display: none;
}

/*=============================================*/

/************** 34.0 Blog Page Css ************/

/*===========================================*/

#blog-page-hero {
  position: relative;
  background-size: cover !important;
  background-position: center !important;
}

#blog-page-hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(135deg, rgba(0, 181, 188, 0.89) 0%, rgba(62, 142, 240, 0.89) 100%);
}

#blog-grid {
  padding-top: 60px;
}

#blog-grid .blog-posts {
  margin-bottom: 30px;
}

#blog-grid .pagination-area {
  padding-top: 30px;
}

.blog-hero-area .blog-category-title {
  color: #ffffff;
  text-align: center;
  padding-top: 95px;
  padding-bottom: 18px;
}

.blog-hero-area .blog-category-title span {
  font-style: italic;
}

.blog-hero-area .blog-post-meta {
  text-align: center;
  padding-bottom: 53px;
}

.blog-hero-area .blog-post-meta .left-meta ul li {
  display: inline-block;
  color: #ffffff;
  padding-right: 20px;
  font-size: 14px;
}

.blog-hero-area .blog-post-meta .left-meta ul li span {
  padding-right: 10px;
}

.blog-hero-area .blog-post-meta .right-meta ul li {
  display: inline-block;
  color: #ffffff;
  padding-right: 20px;
  font-size: 14px;
}

.blog-hero-area .blog-post-meta .right-meta ul li span {
  padding-right: 10px;
}

#blog {
  padding-top: 60px;
}

.blog-post-details .feature-image {
  margin-bottom: 50px;
}

.blog-post-details .feature-image img {
  border-radius: 10px;
}

.blog-description .blog-meta {
  overflow: hidden;
  margin-bottom: 52px;
}

.blog-description .blog-meta .blog-tag {
  margin-bottom: 30px;
}

.blog-description .blog-meta .blog-tag .tags li {
  margin-bottom: 0;
}

.blog-description .blog-meta .blog-tag .tags li a {
  margin-bottom: 0;
}

.blog-description .blog-meta .social-share ul li {
  display: inline-block;
  margin-right: 7px;
}

.blog-description .blog-meta .social-share ul li a {
  background-color: var(--primary-color);
  font-size: 14px;
  height: 30px;
  width: 30px;
  display: inline-block;
  text-align: center;
  border-radius: 100px;
  color: #ffffff;
  padding-top: 4px;
}

.blog-description .user-comments {
  padding-bottom: 85px;
}

.blog-description .comment-fields h4 {
  padding-bottom: 50px;
}

.blog-description .comment-fields .full {
  margin-bottom: 23px;
}

.blog-description .comment-fields .full textarea {
  width: 100%;
  height: 200px;
  border: 1px solid #b7b7b7;
  border-radius: 10px;
  padding-left: 30px;
  padding-top: 15px;
}

.blog-description .comment-fields .half {
  margin-bottom: 20px;
}

.blog-description .comment-fields .half input {
  width: 100%;
  border: 1px solid #b7b7b7;
  border-radius: 10px;
  height: 60px;
  padding-left: 30px;
  margin-right: 30px;
  margin-bottom: 30px;
}

.blog-description .comment-fields .half input:last-child {
  margin-right: 0;
  margin-bottom: 0;
}

/*=============================================*/

/************** 35.0 Dashboard Css ************/

/*===========================================*/

#dashboard-map {
  padding-top: 132px;
}

#dashboard-map .milestone-wrapper {
  border: 1px solid var(--border-three);
  border-bottom: 0px solid #e7e7e7;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

#dashboard-map .db-table {
  border: 1px solid #e7e7e7;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.overview {
  border: 1px solid var(--border-three);
  padding: 30px 30px 21px 30px;
  border-radius: 10px;
  margin-bottom: 30px;
}

.overview .stat-icon {
  font-size: 24px;
  height: 50px;
  width: 50px;
  text-align: center;
  border-radius: 100px;
  padding-top: 12px;
  padding-left: 2px;
  float: left;
}

.overview .icon-color-one {
  color: #56bb4d;
  border: 1px solid #56bb4d;
}

.overview .icon-color-two {
  color: #9ebef1;
  border: 1px solid #9ebef1;
}

.overview .icon-color-three {
  color: #2dced4;
  border: 1px solid #2dced4;
}

.overview .icon-color-four {
  color: #fdbd45;
  border: 1px solid #fdbd45;
}

.overview .stat-text {
  text-align: right;
}

.overview .stat-text p {
  padding-bottom: 5px;
}

.overview .stat-text span {
  font-size: 24px;
}

.chart {
  border: 1px solid var(--border-three);
  border-radius: 10px;
  margin-bottom: 30px;
}

.chart .chart-info {
  overflow: hidden;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border-three);
  padding: 10px 30px 27px;
  background-color: #f9fafc;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.chart .chart-info .title {
  float: left;
  color: var(--main-title-color);
  font-size: 20px;
}

.chart .chart-info .nav-tabs {
  border-bottom: 0px solid #dee2e6;
}

.chart .chart-info .chart-nav {
  float: right;
}

.chart .chart-info .chart-nav li {
  display: inline-block;
  position: relative;
  margin-right: 7px;
  padding-right: 10px;
}

.chart .chart-info .chart-nav li:not(:last-child):after {
  content: "";
  height: 18px;
  width: 2px;
  background-color: #a6a8af;
  position: absolute;
  top: 5px;
  right: 0;
}

.chart .chart-info .chart-nav li:last-child {
  margin-right: 0;
  padding-right: 0;
}

.chart .chart-info .chart-nav li a {
  font-size: 14px;
  color: var(--main-title-color);
}

.small-charts .chart-info {
  border-bottom: 0px solid var(--border-three);
  background-color: #ffffff;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.small-charts .chart-info .title {
  padding-top: 15px;
  padding-bottom: 15px;
}

.tab-content {
  padding: 30px 0px 50px 30px;
}

.user-transections {
  border: 1px solid var(--border-three);
  border-radius: 10px;
}

.user-transections .transection-header .title-and-meta {
  overflow: hidden;
  padding: 10px 30px 10px 30px;
  background: #f9fafc;
  border-bottom: 1px solid var(--border-three);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.user-transections .transection-header .title-and-meta .title {
  font-size: 20px;
  color: var(--main-title-color);
  float: left;
}

.user-transections .transection-header .title-and-meta .meta {
  float: right;
}

.user-transections .transection-header .title-and-meta .meta li {
  display: inline-block;
  margin-right: 5px;
  cursor: pointer;
  color: #878787;
  font-size: 14px;
}

.user-transections .transection-header .title-and-meta .meta li:hover {
  color: var(--primary-color);
}

.user-transections .transection-header .title-and-meta .meta li:last-child {
  margin-right: 0;
}

.user-transections .transection-header .title-and-meta .meta .active {
  color: var(--primary-color);
}

.user-transections .transection-header .search-area {
  padding: 10px 15px;
  background: #f4f4f4;
}

.user-transections .transection-header .search-area input {
  width: 100%;
  height: 30px;
  border: 1px solid #ffffff;
  border-radius: 100px;
  font-size: 12px;
  padding-left: 15px;
}

.user-transections .transection-header .search-area input::-webkit-input-placeholder {
  color: var(--secondary-text-color);
}

.user-transections .transection-header .search-area input:-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.user-transections .transection-header .search-area input::-ms-input-placeholder {
  color: var(--secondary-text-color);
}

.user-transections .transection-header .search-area input::placeholder {
  color: var(--secondary-text-color);
}

.user-transections .transection-body tr th {
  text-transform: uppercase;
  color: var(--main-title-color);
  font-weight: 500;
}

.user-transections .transection-body table {
  margin-bottom: 0;
}

.user-transections .transection-body table td {
  padding: 15px 15px 10px 15px;
}

.user-transections .transection-body .user-image {
  float: left;
}

.user-transections .transection-body .user-image img {
  border-radius: 100px;
}

.user-transections .transection-body .details {
  margin-left: 45px;
}

.user-transections .transection-body .details .name {
  color: var(--main-title-color);
  line-height: 10px;
}

.user-transections .transection-body .details .mail {
  font-size: 10px;
  color: #878787;
}

.user-transections .transection-body .success {
  position: relative;
  float: left;
  top: 3px;
}

.user-transections .transection-body .success:before {
  content: "";
  height: 8px;
  width: 8px;
  background-color: var(--text-color-four);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
}

.user-transections .transection-body .pending {
  position: relative;
  float: left;
  top: 3px;
}

.user-transections .transection-body .pending:before {
  content: "";
  height: 8px;
  width: 8px;
  background-color: var(--yello-orange-bg);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
}

.user-transections .transection-body .cancle {
  position: relative;
  float: left;
  top: 3px;
}

.user-transections .transection-body .cancle:before {
  content: "";
  height: 8px;
  width: 8px;
  background-color: #e65757;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50px;
}

.user-transections .transection-body .trans-meta {
  padding-left: 16px;
}

.user-transections .transection-body .trans-meta .type {
  line-height: 14px;
}

.user-transections .transection-body .trans-meta .trans-id {
  font-size: 10px;
  color: #878787;
}

.user-transections .transection-body .trans-date {
  font-size: 12px;
  line-height: 15px;
  color: var(--main-title-color);
}

.user-transections .transection-body .edit {
  color: var(--primary-color);
}

.user-transections .transection-body .complete p {
  color: var(--amount-color);
  font-size: 12px;
}

.user-transections .transection-body .pendings p {
  color: var(--color-one);
  font-size: 12px;
}

.user-transections .transection-body .cancel p {
  color: #e65757;
  font-size: 12px;
}

.user-transections .transection-body .time p {
  font-size: 12px;
}

.user-transections .transection-body .price p {
  font-size: 12px;
}

.product-transection {
  margin-top: 30px;
}

.user-transections .transection-body.products table td {
  padding: 10px 15px 10px 15px;
}

.user-transections .transection-body.products table {
  margin-bottom: 10px;
}

/*===============================================*/

/************** 36.0 Responsive Css ************/

/*===========================================*/

@media (min-width: 768px) {
  .blog-hero-area .blog-category-title {
    padding-top: 100px;
    padding-bottom: 105px;
  }

  .blog-post-meta {
    overflow: hidden;
  }

  .blog-post-meta .left-meta {
    float: left;
  }

  .blog-post-meta .right-meta {
    float: right;
  }

  .portfolio-menu .portfolio-btn-group {
    float: none;
  }

  .portfolio-menu .button-group .form-control {
    width: 14%;
  }

  .blog-sidebar {
    margin-top: 0;
  }

  .transection-body .table-responsive {
    display: inline-table;
  }

  .freelancer-list-view {
    padding: 30px 30px;
  }

  .freelancer-list-view .left-align {
    width: 65%;
    display: inline-block;
    margin-bottom: 0;
  }

  .freelancer-list-view .right-align {
    float: right;
    margin-left: 0;
  }

  .freelancer-list-view .contact-details {
    margin-left: 130px;
  }

  .freelancer-list-view .contact-details ul li:nth-child(1) {
    width: auto;
    margin-bottom: 10px;
  }

  .sidebar-nav {
    margin-top: 0;
  }

  .sidebar-nav ul li a {
    padding: 7px 9px 8px;
    font-size: 14px;
  }

  #freelancer-list-view-with-sidebar .freelancer-list-view .contact-details ul li:nth-child(1) {
    width: 61%;
    margin-bottom: 10px;
  }

  #browse-freelancer-grid-with-sidebar .freelancer-grid-view .rate-hire .hire-button {
    float: left;
  }

  #browse-freelancer-grid-with-sidebar .freelancer-grid-view .online:before {
    top: 40%;
    right: 19%;
  }

  .grid-view-items .job-description .job-title {
    height: 60px;
    overflow: hidden;
  }

  .grid-view-items .budget {
    top: -7px;
    right: 56px;
  }

  .grid-view-items .budget .duration p {
    font-size: 13px;
  }

  .grid-view-items .budget .amount p {
    font-size: 13px;
  }

  .feature-full__job-posts.grid-view-items .apply {
    left: 18%;
  }

  .feature-full__job-posts {
    padding: 30px;
  }

  .feature-full__job-posts .budget {
    top: 0px;
  }

  .feature-full__job-posts .budget .duration p {
    font-size: 16px;
  }

  .feature-full__job-posts .budget .amount p {
    font-size: 16px;
  }

  .feature-full__job-posts .apply {
    left: unset;
    top: 50px;
  }

  .feature-full__job-posts.grid-view-items .budget .duration p {
    font-size: 13px;
  }

  .feature-full__job-posts.grid-view-items .budget .amount p {
    font-size: 13px;
  }

  .job-description .job-category {
    display: inline-block;
  }

  #project-bid-page {
    padding-top: 116px;
  }

  #browse-freelancer-grid-with-sidebar {
    padding-top: 115px;
  }

  #browse-freelancer-grid {
    padding-top: 115px;
  }

  #freelancer-list-view-with-sidebar {
    padding-top: 115px;
  }

  #freelancer-list-view {
    padding-top: 115px;
  }

  #chatting-page {
    padding-top: 115px;
  }

  #dashboard-map {
    padding-top: 115px;
  }

  #dispute-page {
    padding-top: 115px;
  }

  #feature-job-offline-grid {
    padding-top: 115px;
  }

  #feature-job-offline-list {
    padding-top: 115px;
  }

  #feature-job-online-with-sidebar {
    padding-top: 115px;
  }

  #feature-job-online-list {
    padding-top: 115px;
  }

  .freelancer-portfolio {
    top: 160px;
  }

  #hero {
    padding-top: 55px;
  }

  #post-project {
    padding-top: 117px;
  }

  #project-accept-page {
    padding-top: 117px;
  }

  .right-menu {
    top: 8px;
  }

  .index-nav .navbar .navbar-toggler {
    top: 0px;
  }

  .navbar .navbar-toggler {
    top: 0;
  }

  .freelancer-bidding {
    float: left;
    padding-right: 12px;
    border-right: 1px solid var(--border-one);
  }

  .avg-bidding {
    float: left;
    border-right: 1px solid var(--border-one);
    padding: 0px 15px;
  }

  .project-budget {
    float: left;
    padding-left: 15px;
  }

  .get-button.bidding {
    text-align: left;
  }

  .project-bid {
    text-align: left;
  }

  .reputation {
    text-align: left;
  }

  .employee-info {
    padding-right: 15px;
  }
}

/*==============================================*/

/********** 37.0 Desktop Screen Css ************/

/*============================================*/

@media (min-width: 813px) {
  body {
    font-size: 15px;
    line-height: 1.7em;
    overflow-x: hidden;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.33em;
    font-weight: 400;
    margin-bottom: 0px;
  }

  h1 {
    font-size: 2.93em;
  }

  h2 {
    font-size: 2.33em;
  }

  h3 {
    font-size: 1.867em;
  }

  h4 {
    font-size: 1.6em;
  }

  h5 {
    font-size: 1.067em;
  }

  h6 {
    font-size: 1em;
  }

  p {
    font-size: 1em;
  }

  .pagination-area ul li {
    margin-right: 10px;
  }

  .pagination-area ul li a {
    height: 43px;
    width: 43px;
    font-size: 16px;
    padding-top: 8px;
  }

  /********** Navbar Css ************/

  header {
    background: transparent;
    padding: 20px 44px 0px;
    border-bottom: 0px solid var(--border-one);
  }

  .navbar {
    padding: 0px 1rem 0;
  }

  .index-guest .navbar {
    padding:0;
  }

  .navbar-brand {
    display: block;
    position: relative;
    top: -6px;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    margin: 0px 15px;
  }

  .navbar-expand-lg .right-menu.navbar-nav .nav-link {
    margin: 0 0px 0 9px!important;
  }

  .navbar .navbar-nav > li:hover .dropdown-menu {
    display: block;
  }

  .dropdown-menu {
    margin-top: 0px;
    padding: 0;
    border: 0px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    border-radius: 5px;  }

  li.nav-item.dropdown.menu-padding {
    padding-bottom: 12px;
  }

  .index-guest li.nav-item.dropdown.menu-padding {
    padding-bottom: 12px;
  }

  .index-guest .dropdown-menu {
    padding-top: 0;
  }

  .dropdown-item:focus,
  .dropdown-item:hover {
    background-color: transparent;
  }

  .dropdown-menu .nav-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  .dropdown-menu .nav-item:last-child {
    border-bottom: 0px solid rgba(0, 0, 0, 0);
  }

  .dropdown-menu .nav-item:hover {
    background-image: linear-gradient(135deg, #00b5bc 0%, #3e8ef0 100%);
    color: #ffffff;
  }

  .dropdown-menu .nav-item:hover:first-child {
    border-radius: 5px 5px 0 0;
  }

  .dropdown-menu .nav-item:hover:last-child {
    border-radius: 0 0 5px 5px;
  }

  .dropdown-menu:hover {
    border-radius: 5px;
  }

  .dropdown-item.active,
  .dropdown-item:active {
    color: #16181b;
    text-decoration: none;
    background-color: #ffffff;
  }

  .navbar-nav .dropdown-item {
    text-align: left;
    border-bottom: 0px solid #cccccc;
    padding: 8px 20px 8px 20px;
    position: relative;
    background: transparent;
    min-width: 200px;
    font-size: 14px;
    transition: padding 0.5s ease;
  }

  .navbar-nav .dropdown-item:hover {
    padding: 8px 20px 8px 35px;
    color: #ffffff;
  }

  .navbar-nav .dropdown-item:before {
    position: absolute;
    left: 15px;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    content: "";
    width: 0px;
    height: 2px;
    background: rgba(255, 255, 255, 0.7);
    transition: all 0.6s ease;
  }

  .navbar-nav .dropdown-item:hover::before {
    width: 10px;
  }

  .dropdown-menu .nav-item a:after,
  .dropdown-menu .nav-item a:hover::after {
    height: 0px;
  }

  .fixed-it .nav-item a::after,
  .fixed-it .nav-item a.active::after {
    background: #ffffff;
  }

  .fixed-it .navbar-nav .nav-link,
  .fixed-it .navbar-nav .nav-link:focus,
  .fixed-it .navbar-nav .nav-link:hover {
    color: #ffffff;
  }

  .fixed-it .nav-item a::after,
  .nav-item a::after {
    width: 0%;
    height: 2px;
    display: block;
    content: " ";
    position: absolute;
    left: 0%;
    transition: left 0.2s cubic-bezier(0.215, 0.61, 0.355, 1), width 0.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  .index-nav .nav-item a:hover::after,
  .nav-item a::after {
    width: 0%;
    background: #ffffff;
  }

  .nav-item a:hover::after,
  .nav-item a.active::after {
    width: 100%;
    background: var(--main-title-color);
  }

  .fixed-it .nav-item a:hover::after,
  .fixed-it .nav-item a.active::after {
    width: 100%;
    background: #ffffff;
  }

  .dropdown-menu .nav-item a:hover::after,
  .dropdown-menu .nav-item a.active::after {
    width: 0%;
    background: var(--main-title-color);
  }

  .index-nav .nav-item a:hover::after,
  .index-nav .nav-item a.active::after {
    width: 100%;
    background: #ffffff;
  }

  .index-nav.fixed-it {
    background: rgba(108, 0, 151, 0.9);
    box-shadow: 0px 0px 25.5px 4.5px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }

  .index-nav.fixed-it .nav-item a::after,
  .index-nav.fixed-it .nav-item a.active::after {
    background: #ffffff;
  }

  .index-nav.fixed-it .navbar-nav .nav-link {
    color: #ffffff;
  }

  .right-menu {
    position: relative;
    right: 0;
    top: 0px;
    padding: 0px 0 0px;
  }

  #notification .unread-notification {
    width: 100%;
    top: 55vh;
    -webkit-transform: translateY(-43vh) translateX(5vh);
    transform: translateY(-43vh) translateX(5vh);
  }

  #unread-messages .unread-messages {
    -webkit-transform: translateY(-43vh) translateX(5vh);
    transform: translateY(-43vh) translateX(5vh);
  }

  .index-nav.index-guest .navbar-brand {
    display: block;
    position: relative;
    top: -13px;
  }

  .index-guest .navbar-nav {
    padding-top: 0px;
    padding-bottom: 8px;
  }

  .index-guest .form-group {
    margin-bottom: 0;
  }

  .index-guest .nav-item select {
    top: -7px;
  }

  .index-guest .custom-select {
    width: 100%;
  }

  .index-guest .nav-item select {
    margin-top: 0;
  }

  /********** Hero Css ************/

  .hero-form input {
    width: unset;
  }

  .hero-form input.jobs {
    width: 300px !important;
    border-radius: 0 !important;
    border-top-left-radius: 50px !important;
    border-bottom-left-radius: 50px !important;
  }

  .hero-form input.keyword {
    width: 300px !important;
    position: relative;
    left: -2px;
    border-radius: 0 !important;
    border-top-right-radius: 50px !important;
    border-bottom-right-radius: 50px !important;
    float: left;
}

  .hero-form input.hero-btn {
    margin-left: 25px;
  }

  .hero-form select {
    width: 33%;
    float: left;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    margin-right: 3px;
    -webkit-appearance: none;
  }

  .job-keyword {
    float: left;
  } 

  .hero-wrapper .hero-details .hero-form .hero-btn {
    margin-left: 26px;
  }

  /********** Category Css ************/
  .titles__main-title {
    color: var(--main-title-color);
    padding-bottom: 13px;
  }

  #category {
    padding-top: 90px;
    padding-bottom: 70px;
  }

  /********** Featured Jobs Css ************/

  #featured-job {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .job-description .job-title {
    padding-bottom: 10px;
    height: auto;
  }

  .apply {
    top: 50%;
    left: unset;
    right: -21px;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }

  .apply-btn {
    font-size: 16px;
    padding: 7px 30px 8px 30px;
  }

  .feature-full__job-posts .budget {
    margin-left: 50px;
  }

  .grid-view-items .budget {
    margin-left: 100px;
  }

  /********** Featured Cities Css ************/

  #featured-cities {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  /************** Cta Css ************/

  #cta {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  /************** Entrepreneurs Css ************/

  #entrepreneurs {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  .statistics {
    margin-bottom: 60px;
  }

  /************** Testimonial Css ************/

  .testimonial-image {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    padding-left: 30px;
  }

  .testimonial-item {
    width: auto;
    margin: 60px 0px 60px 45px;
    padding: 60px;
  }

  .testimonial-items {
    margin-right: 160px;
    margin-left: 30px;
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .testimonial-items:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 108%;
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 5px 27.65px 7.35px rgba(0, 0, 0, 0.09);
    border-radius: 30px;
    z-index: 99;
  }

  .testimonial-slider .slick-next {
    right: 35px;
    width: 45px;
    height: 45px;
    top: 50%;
    bottom: unset;
    left: unset;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

  /************** Top Freelancer Css ************/

  #top-freelancer {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  #top-freelancer .load-button {
    padding-top: 30px;
  }

  /************** Pricing Item Css ************/

  #pricing-table {
    padding-top: 90px;
    padding-bottom: 92px;
  }

  .pricing-item {
    margin-bottom: 0;
  }

  .pricing-caption {
    padding-top: 52px;
  }

  /************** Blog Posts Css ************/

  #blog-posts {
    padding-top: 90px;
    padding-bottom: 100px;
  }

  /************** Followers Css ************/

  #followers {
    padding-top: 95px;
    padding-bottom: 70px;
  }

  .follow-details {
    padding: 0 85px !important;
    padding-bottom: 40px !important;
  }

  .follow {
    margin-right: 45px;
  }

  /************** Post Job Online Css ************/

  #feature-job-online-with-sidebar {
    padding-top: 150px;
  }

  .pick-category ul li {
    width: 49%;
    display: inline-block;
  }

  .submit-info ul li:nth-child(1) {
    margin-right: 16px;
  }

  .submit-info .file-upload-btn p {
    margin-top: 36px;
  }

  .post-job-btn {
    display: inline-block;
    margin: unset;
    margin-top: 60px;
  }

  #feature-job-offline-list {
    padding-top: 150px;
  }

  #feature-job-offline-list .grid-view {
    display: block;
  }

  #feature-job-offline-list .pagination-area {
    padding-top: 30px;
  }

  #feature-job-offline-grid {
    padding-top: 150px;
  }

  #feature-job-offline-grid .list-view {
    display: block;
  }

  #feature-job-offline-grid .pagination-area {
    padding-top: 15px;
  }

  /************** Freelancer View Css ************/

  #browse-freelancer {
    padding-top: 100px;
  }

  /************** Project Accept Css ************/

  .project-accept-area {
    margin-bottom: 100px;
  }

  .freelancer-bidding {
    float: left;
    padding-right: 12px;
    border-right: 1px solid var(--border-one);
  }

  .avg-bidding {
    float: left;
    border-right: 1px solid var(--border-one);
    padding: 0px 15px;
  }

  .project-budget {
    float: left;
    padding-left: 15px;
  }

  .get-button.bidding {
    text-align: right;
    padding-top: 5px;
  }

  .project-description {
    padding-left: 29px;
  }

  .project-description .title {
    padding-bottom: 16px;
  }

  .reputation {
    padding-left: 60px;
  }

  .freelancer-awarded-milestones-wrapper {
    padding-top: 55px;
  }

  /************** Bid Page Css ************/

  .proposal-breakdown .proposal-right {
    padding: 0px;
  }

  .proposal-breakdown .proposal-left .items ul li {
    right: 102px;
  }

  .proposal-breakdown .proposal-right input[type=submit] {
    width: 119px;
  }

  .proposal-breakdown .proposal-right .additional {
    width: 90%;
  }

  .proposal-breakdown .proposal-right .bidding-close {
    right: 0px;
    top: 8px;
  }

  /***************** Freelancer Profile Page *****************/

  #freelancer-portfolio {
    background-size: contain !important;
  }

  #freelancer-portfolio::before {
    height: 55.2%;
  }

  .freelancer-portfolio {
    top: 225px;
  }

  .freelancer-profile-sidebar img {
    left: 30px;
  }

  .profile-info {
    padding: 0 0 0 30px;
  }

  .freelancer-info {
    padding-right: 28px;
  }

  .freelancer-info .freelancer-detail .online {
    bottom: 4px;
  }

  .review-wrapper {
    padding-top: 30px;
  }

  .client-rating {
    padding-bottom: 20px;
  }

  .category-ch {
    padding-bottom: 17px;
  }

  .project-review {
    padding-left: 130px;
  }

  .review-detail {
    padding-top: 0px;
  }

  .project-review .client-rating li:last-child {
    padding-left: 22px;
  }

  .freelancer-info {
    padding: 30px 30px;
  }

  .freelancer-info .pagination-area {
    padding-top: 60px;
    padding-bottom: 48px;
  }

  .portfolio-menu .button-group .form-control {
    width: 8%;
    display: inline-block;
    float: right;
  }

  .portfolio-menu h3 {
    float: left;
  }

  /************** Chatting Css ************/

  #chatting-page {
    padding-top: 150px;
  }

  .chat-panel {
    padding-bottom: 0px;
  }

  /************** Blog Css ************/

  .blog-sidebar {
    margin-top: 0;
  }

  .blog-hero-area .blog-category-title {
    padding-top: 180px;
    padding-bottom: 123px;
  }

  .blog-post-meta {
    overflow: hidden;
  }

  .blog-post-meta .left-meta {
    float: left;
  }

  .blog-post-meta .right-meta {
    float: right;
  }

  #blog {
    padding-top: 100px;
  }

  #blog-grid {
    padding-top: 100px;
  }

  .blog-post-details .feature-image {
    margin-bottom: 90px;
  }

  .comment-fields .bidding {
    text-align: left;
  }

  .blog-description .blog-meta .blog-tag {
    float: none;
  }

  .blog-description .blog-meta .social-share {
    float: none;
  }

  .blog-description .comment-fields .half input {
    width: 47.6%;
  }

  /************** Dashboard Css ************/

  .user-transections .transection-body .trans-meta .type {
    line-height: 10px;
  }

  .user-transections .transection-body .success {
    top: 0;
  }

  .user-transections .transection-body .pending {
    top: 0;
  }

  .user-transections .transection-body .cancle {
    top: 0;
  }

  .user-transections .transection-body .trans-date {
    line-height: 9px;
  }

  .transection-body .table-responsive {
    display: inline-table;
  }

  .product-transection {
    margin-top: 0px;
  }

  /************** Sidebar Css ************/

  #map {
    height: 1176px;
    margin-top: 0;
    z-index: 0;
  }

  .sidebar-nav ul li a {
    padding: 7px 29px 8px;
    font-size: 16px;
  }

  /************** Feature Job Css ************/

  #feature-job-offline-list .feature-full__job-posts .budget ul li {
    display: block;
  }

  #feature-job-offline-list .grid-view-items .budget ul li {
    display: inline-block;
  }

  #feature-job-offline-list .grid-view {
    display: block;
  }

  #feature-job-offline-list .job-description .job-title {
    height: auto;
  }

  .job-description .job-duration {
    padding-left: 9px;
  }

  .job-description .location {
    margin-right: 10px;
  }

  .job-description .job-category {
    display: inline-block;
    margin-bottom: 0;
  }

  .feature-job-items .apply {
    right: -4px;
    left: unset;
    top: 50%;
  }

  .feature-full__job-posts {
    padding: 30px 30px 30px;
  }

  .feature-full__job-posts .budget {
    top: 0;
  }

  .budget .duration p {
    font-size: 16px;
  }

  .budget .amount p {
    font-size: 16px;
  }

  .grid-view-items {
    padding-bottom: 0;
  }

  .grid-view-items .company-logo {
    height: 42px;
    width: 70px;
  }

  .grid-view-items .job-description {
    width: 65%;
    margin-left: 100px;
  }

  .grid-view-items .job-description .job-title {
    height: 65px;
    margin-bottom: 10px;
    overflow: hidden;
    padding-bottom: 0;
    margin-bottom: 23px;
  }

  .grid-view-items .job-description .location {
    float: left;
  }

  .grid-view-items .budget {
    float: right;
    position: relative;
    top: -26px;
    right: 0;
  }

  .grid-view-items .budget ul li {
    display: inline-block;
    margin-right: 5px;
  }

  .grid-view-items .apply {
    top: 60%;
    left: 19%;
  }

  .feature-full__job-posts.grid-view-items .budget .duration p {
    font-size: 13px;
  }

  .feature-full__job-posts.grid-view-items .budget .amount p {
    font-size: 13px;
  }

  /************** Freelancer List View Page Css ************/

  #freelancer-list-view {
    padding-top: 150px;
  }

  #freelancer-list-view .pagination-area {
    padding-top: 30px;
  }

  #freelancer-list-view .grid-view {
    display: block;
  }

  .freelancer-list-view {
    padding: 30px 60px;
  }

  .freelancer-list-view .right-align .rate-hire {
    margin-bottom: 4px;
  }

  .freelancer-list-view .right-align .hire-button {
    margin-bottom: 4px;
  }

  .freelancer-list-view .left-align {
    float: left;
    overflow: hidden;
    width: 50%;
  }

  .freelancer-list-view .left-align .feature-image {
    margin-right: 0px;
  }

  .freelancer-list-view .right-align {
    float: right;
  }

  .freelancer-list-view .name-designation {
    margin-bottom: 15px;
    margin-left: 130px;
  }

  .freelancer-list-view .contact-details {
    margin-left: 130px;
  }

  .freelancer-list-view .contact-details ul li:nth-child(1) {
    width: auto;
    margin-bottom: 10px;
  }

  #freelancer-list-view-with-sidebar {
    padding-top: 150px;
  }

  #freelancer-list-view-with-sidebar .freelancer-list-view {
    padding: 30px 30px;
  }

  #freelancer-list-view-with-sidebar .freelancer-list-view .left-align {
    width: 70%;
  }

  #freelancer-list-view-with-sidebar .freelancer-list-view .contact-details {
    margin-left: 130px;
  }

  #freelancer-list-view-with-sidebar .freelancer-list-view .contact-details ul li:nth-child(1) {
    width: auto;
    margin-bottom: 10px;
  }

  #freelancer-list-view-with-sidebar .grid-view {
    display: block;
  }

  /************** Freelancer Grid View Page Css ************/

  #browse-freelancer-grid {
    padding-top: 150px;
  }

  #browse-freelancer-grid .pagination-area {
    padding-top: 30px;
  }

  #browse-freelancer-grid .list-view {
    display: block;
  }

  #browse-freelancer-grid-with-sidebar {
    padding-top: 150px;
  }

  #browse-freelancer-grid-with-sidebar .list-view {
    display: block;
  }

  #browse-freelancer-grid-with-sidebar .freelancer-grid-view .rate-hire .hire-button {
    float: right;
  }

  #browse-freelancer-grid-with-sidebar .freelancer-grid-view .online:before {
    top: 38%;
    right: 33%;
  }

  #browse-freelancer-grid-with-sidebar .pagination-area {
    padding-top: 30px;
  }

  #project-bid-page {
    padding-top: 150px;
  }

  #dashboard-map {
    padding-top: 150px;
  }

  #dispute-page {
    padding-top: 150px;
  }

  .file-upload-area .file-upload-btn p {
    float: left;
    margin-bottom: 0;
    margin-top: 20px;
  }

  .file-upload-area .file-upload-btn .file-upload {
    float: left;
  }


  #feature-job-online-list {
    padding-top: 150px;
  }

  #post-project {
    padding-top: 150px;
  }

  #project-accept-page {
    padding-top: 150px;
  }

  .job-description .location a img {
    margin-right: 10px;
  }

  #freelancer-list-view-with-sidebar .pagination-area {
    padding-top: 30px;
  }

  #feature-job-online-with-sidebar .pagination-area {
    padding-top: 30px;
  }

  #feature-job-online-list .pagination-area {
    padding-top: 30px;
  }

  .experience-level .xpbox input + label {
    margin-bottom: 0;
  }

  .post-job-btn {
    margin-top: 60px;
  }

  #post-project {
    padding-bottom: 100px;
  }

  .project-bid {
    text-align: left;
  }

  .reputation {
    text-align: left;
  }

  a.float.add-milestone {
    top: 0px;
  }

  .mobile-padding {
    padding-bottom: 23px;
  } 
  /************** Footer Css ************/

  footer {
    padding: 150px 0 0;
    margin-top: 88px;
  }

  .subscribe-text {
    padding-top: 0;
    padding-bottom: 0px;
  }

  .footer-subscribe {
    padding: 60px 100px;
    z-index: 0;
    position: absolute;
    top: -271px;
  }

  .footer-nav {
    float: right;
  }

  .widget-area {
    padding: 3px 0 58px;
  }

  .project-bid {
    text-align: left;
  }

  #feature-job-online-list .feature-job-items .apply {
    left: unset;
  }
}

/*==========================================*/

/********** 38.0 Tab Screen Css ************/

/*========================================*/

@media (min-width: 768px) {
  .follow-details {
    overflow: hidden;
    padding: 0 55px;
    padding-bottom: 40px;
  }

  .feature-full__job-posts .budget {
    margin-left: 0px;
    margin-top: 0px;
  }

  .grid-view-items .apply {
    top: 54%;
  }
}

@media (max-width: 768px) {

  .job-description {
    width: 48%;
  }

  .budget ul li {
    display: block;
    margin-right: 0;
  }

  .cta__details {
    padding-bottom: 45px;
  }

  .cta__image {
    text-align: center;
  }

  .cta__image img {
    max-height: 100%;
    width: auto;
  }

  .freelancer-bidding {
    padding-right: 5px;
  }

  .avg-bidding {
    padding: 0px 7px;
  }

  .project-budget {
    padding-bottom: 15px;
  }
}