@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: #681444;
    --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, 0.5);
    --cat-icon-color-two: #e28365;
    --cat-icon-bg-two: rgba(226, 131, 101, 0.5);
    --cat-icon-color-three: #708fc8;
    --cat-icon-bg-three: rgba(112, 143, 200, 0.5);
    --cat-icon-color-four: #5ba452;
    --cat-icon-bg-four: rgba(91, 164, 82, 0.5);
    --cat-icon-color-five: #73549a;
    --cat-icon-bg-five: rgba(115, 84, 154, 0.5);
    --cat-icon-color-six: #4ba5c7;
    --cat-icon-bg-six: rgba(75, 165, 199, 0.5);
    --cat-icon-color-seven: #d25aa4;
    --cat-icon-bg-seven: rgba(210, 90, 164, 0.5);
    --cat-icon-color-eight: #5252d8;
    --cat-icon-bg-eight: rgba(82, 82, 216, 0.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: 15px;
}
.titles-course {
    text-align: center;
    padding-bottom: 0px;
}
.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: 0px;
}

.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(0, 181, 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, #00b5bc 0%, #3e8ef0 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(0, 181, 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: 40px;
    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(0, 181, 188, 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;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-top: 15px;
    width: 100%;
}

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

.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;
    margin-top: 100px;
}

.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, 0.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;
    height: 500px; /* Set a fixed height for all freelancers */
    width: 450px;
}

.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"blog-posts-news" {
    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;
        color: #fdc901;
    }

    .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: #681444;
        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;
        font-weight: bolder;
    }

    .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: #681444;
        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: 10px;
        padding-bottom: 0px;
    }

    .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: 55px;
        padding-bottom: 0px;
    }

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

    #entrepreneurs {
        padding-top: 90px;
        padding-bottom: 50px;
    }

    .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: 0px;
        padding-bottom: 0px;
    }

    #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: 60px;
        padding-bottom: 70px;
    }

    /************** Followers Css ************/

    #followers {
        padding-top: 80px;
        padding-bottom: 0px;
    }

    .follow-details {
        padding: 0 85px !important;
        padding-bottom: 40px !important;
    }

    .follow {
        margin-right: 50px;
        margin-left: 50px;
    }

    /************** 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: 40px;
    }

    #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;
    }
}

.container.bg-light {
    background-image: url("template/frontend/img/"); /* Set the path to your background image */
    background-size: cover; /* Cover the entire container with the background image */
    background-position: center center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the background image */
    padding: 50px; /* Add padding to the container content */
}

/* CSS for Client Reviews Section */
.client-review-container {
    border: 1px solid #ccc;
    min-height: 400px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.client-review-container img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    margin-bottom: 20px;
}

.client-review-text {
    color: #333;
    font-size: 16px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 20px;
}

.client-name {
    color: #007bff;
    font-weight: bold;
    text-align: center;
}

/* Additional Styles */
.container h2,
.container p.client_head {
    margin: 0; /* Remove margin between h2 and p.client_head tags */
}

.container p.client_head {
    color: #681444;
    font-weight: bold; /* Change color of text in p.client_head tag */
}
.client_main_head {
    font-weight: bold;
}
.footer-logo img {
    width: 250px; /* Set the width of your logo */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px; /* Optional: add margin between logo and social icons */
}

.social-icons {
    display: flex; /* Use flexbox to display icons in a row */
    align-items: center; /* Center items vertically within the container */
}

.social-icons a.social-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #fff;
    margin-right: 14px;
    background-color: #000000;
    color: #ffffff;
    text-decoration: none;
}

.social-icons a i {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Specific colors for social media icons on hover */
.social-icons a.social-icon:hover {
    background-color: #007bff;
    color: #fff;
}
.getstd_logo {
    width: 200px;
    height: auto;
}
.getstd_tittle {
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
}
.googgle-button {
    width: 200px;
    height: auto;
}
.contact-link {
    margin-right: 20px; /* Add margin between the contact links */
    text-decoration: none; /* Remove underline from links */
    color: #ffffff; /* Change text color */
}

.contact-link i {
    margin-right: 5px; /* Add margin between icon and text */
    color: #007bff; /* Change icon color */
}
.contact-icons {
    margin-top: 6%;
}
/* Style for Search Bar */
.search-bar {
    margin-bottom: 20px;
}

.search-bar input[type="text"] {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 3px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Style for Teacher Dropdown */
.teacher-dropdown select {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    margin-bottom: 20px;
    border: 3px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.teacher-dropdown button.filter-button {
    padding: 12px 24px;
    font-size: 16px;
    background-color: #681444;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.teacher-dropdown button.filter-button:hover {
    background-color: #45a049;
}

/* Style for Categories */
.categories h4 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
    margin-top: 30px;
    font-weight: bold;
}

.categories ul {
    list-style: none;
    padding: 0;
}

.categories li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
    display: flex;
    align-items: center;
}

.categories li i {
    margin-right: 10px;
    font-size: 20px;
    color: #007bff; /* Icon color */
}

.categories a {
    text-decoration: none;
    color: #007bff;
    transition: color 0.3s ease;
}

.categories a:hover {
    color: #0056b3; /* Hover color */
}

/* Style for Price Filters */
.price-filters h4 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
    margin-top: 30px;
    font-weight: bold;
}

.price-filters label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}

.price-filters input[type="checkbox"] {
    margin-right: 10px;
}

.price-filters button.filter-button {
    padding: 12px 24px;
    font-size: 16px;
    background-color: #681444;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.price-filters button.filter-button:hover {
    background-color: #45a049;
}
.pagination-area {
    text-align: center;
    margin-top: -118px;
    margin-bottom: 26px;
}

#pagination {
    list-style: none;
    padding: 0;
    display: inline-block;
}

#pagination li {
    display: inline-block;
    margin: 0 5px;
}

#pagination a {
    display: block;
    padding: 8px 12px;
    background-color: #3498db;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    transition: background-color 0.3s;
}

#pagination a:hover {
    background-color: #2980b9;
}

#pagination .active a {
    background-color: #2980b9;
}
#blogPostsContainer .blog-posts {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    max-width: 100%;
    width: 100%;
}

#blogPostsContainer .row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

#blogPostsContainer .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
    box-sizing: border-box;
    padding: 0 15px;
}

@media (max-width: 768px) {
    #blogPostsContainer .col-lg-3 {
        flex: 0 0 50%;
        max-width: 50%;
        margin-top: 28px;
    }
}
/* styles.css */

/* Heading Colors */
.course-title {
    color: #3498db;
}

.overview-heading {
    color: #681444;
    font-weight: bold;
}

/* Text Colors */
.category-name {
    color: #27ae60;
}

.detail-label {
    color: #000000;
}

.lesson-link {
    color: #e74c3c;
}
.lessonp {
    color: #000000;
    margin-top: 5%;
}
.lesson-tittle {
    font-weight: bold;
}

#blog-grid {
    font-family: "Poppins", sans-serif;
    background-color: #ffffff; /* Set a light background color */
    padding: 50px 0; /* Add some padding for spacing */
    margin-top: -18px;
}

.category-title-teacher {
    background-color: #ffffff; /* Set a white background color for the widget */
    border-radius: 8px; /* Add rounded corners for a modern look */
    padding: 20px; /* Add padding to the widget content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.widget-title-teacher {
    margin-bottom: 15px; /* Add some spacing between title and buttons */
    padding-bottom: 30px; /* Add spacing between title and buttons */
}

.widget-title-teacher h4 {
    font-size: 2.33em;
}

.category-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Adjust the gap as needed */
}



.category-filter {
    border: 1px solid #7d7d7d; /* Adjust the border style as needed */
    padding: 10px 20px; /* Fixed size for the button */
    cursor: pointer;
    font-weight: bold;
    background-color: white;
    color: #7d7d7d;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 20px; /* Add curved borders */
    min-width: 150px; /* Set a minimum width for the button */
    margin-right: 50px;
}
.gift-category-filter {
    border: 1px solid #7d7d7d; /* Adjust the border style as needed */
    padding: 10px 20px; /* Fixed size for the button */
    cursor: pointer;
    font-weight: bold;
    background-color: white;
    color: #7d7d7d;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 20px; /* Add curved borders */
    min-width: 150px; /* Set a minimum width for the button */
    margin-right: 50px;
}
.teacher-category-filter {
    border: 1px solid #7d7d7d; /* Adjust the border style as needed */
    padding: 10px 20px; /* Fixed size for the button */
    cursor: pointer;
    font-weight: bold;
    background-color: white;
    color: #7d7d7d;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 20px; /* Add curved borders */
    min-width: 150px; /* Set a minimum width for the button */
    margin-right: 50px;
}

.gift-category-filter:last-child {
    margin-right: 0; /* Remove margin from the last button */
}

.gift-category-filter:hover {
    background-color: #d534db; /* Change to the desired hover background color */
    color: white;
}

.teacher-category-filter:last-child {
    margin-right: 0; /* Remove margin from the last button */
}

.teacher-category-filter:hover {
    background-color: #d534db; /* Change to the desired hover background color */
    color: white;
}
.category-filter:last-child {
    margin-right: 0; /* Remove margin from the last button */
}

.category-filter:hover {
    background-color: #d534db; /* Change to the desired hover background color */
    color: white;
}

/* Modal styling */
#teacherModal {
    color: #333;
}

.modal-content {
    border-radius: 10px;
}

.modal-header {
    background-color: #007bff;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    font-weight: bold;
}

.modal-body {
    padding: 20px;
}
.te-mod-dec {
    color: #000;
    margin-top: 5px;
}

.te-des-mod {
    color: #727272;
    margin-bottom: 10px;
}
.te-name-mod {
    color: #681444;
    font-weight: bold;
}

/* Teacher image styling */

/* Teacher details styling */
#teacherName {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: bold;
}

#teacherDescription {
    font-size: 16px;
    line-height: 1.5;
    color: #2e2e2e;
}

/* Close button styling */
.close {
    color: #fff;
    font-size: 30px;
}

/* Optional: Add a subtle box shadow to the modal */
.modal-content {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.privacy-title {
    color: #333; /* Example text color */
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}

.privacy-heading {
    font-size: 18px; /* Example font size */
    color: #640606;
    margin-top: 20px;
    margin-bottom: 20px;
}

.privacy-list {
    list-style-type: disc; /* Example list style */
    margin-left: 20px; /* Example left margin */
    margin-top: 20px;
    margin-bottom: 20px;
}

.privacy-paragraph {
    margin-bottom: 15px; /* Example bottom margin */
    color: #063a64;
    margin-top: 20px;
    margin-bottom: 20px;
}
#blog-posts-news {
    padding-top: 55px;
    padding-bottom: 60px;
    background-color: var(--grey-light-bg-1);
}

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

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

.blog-posts-news .blog-image img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
    height: 246px;
}
.text {
    max-height: 100px; /* Set your desired max height */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Set the number of lines to display */
    -webkit-box-orient: vertical;
}

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

.blog-posts-news .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-news .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-news .blog-details .post-meta li:last-child {
    margin-right: 0;
}

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

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

.blog-posts-news:hover .blog-title a {
    color: var(--primary-color);
}
.news-filters a {
    display: inline-block;
    padding: 5px 10px;
    margin: 5px;
    text-decoration: none;
    color: #ffffff;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.news-filters a.active {
    color: #ffffff;
    background-color: #ffe600;
    border-color: #191a1b;
}

/* 
//recent-post section news-room page */

.recent-post-item {
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

.recent-post-item img {
    max-width: 334px;
    border-radius: 8px;
}

.recent-post-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.recent-h {
    margin: 0;
    color: #333;
    font-size: 20px;
    margin-bottom: 8px; /* Add margin at the bottom */
    margin-left: 10px;
}

.recent-p {
    margin: 0;
    color: #3f0e0e;
    font-size: 11px;
    margin-right: 10px;
}

.news-image {
    max-width: 356px;
    height: 200px;
    width: 220px;
}

/* syles fr blog-post details */

#details-box {
    background-color: #fff;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.enrolled-bar {
    background-color: #e8e8e8;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 20px;
}

.custom-badge {
    font-size: 14px; /* Adjust the font size as needed */
    padding: 10px 15px; /* Adjust the padding as needed */
    /* Add more styles based on your design requirements */
}

.structure h4,
.time h4,
.level h4,
.investment h4 {
    margin-bottom: 10px;
    color: #727272;
    font-weight: bold;
}

.course-structure-detail h5,
.time h5,
.level h5,
.investment h5 {
    margin-bottom: 10px;
    color: #000000;
    font-size: 22px;
    font-weight: bold;
}

.badge {
    text-align: center;
}

.course-structure-detail,
.time,
.level,
.investment {
    margin-bottom: 20px;
}

.investment h4:first-child {
    font-size: 28px;
    margin-bottom: 5px;
}

/* desriptio-section blog-post details page */
/* Add these styles to your existing stylesheet or create a new one */

.description-content {
    margin-top: 20px;
    padding: 30px;
}

.description h4 {
    text-align: center;
    color: #a3005c;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

.description p {
    font-size: 18px;
    line-height: 1.6;
    color: #333;
}

.category-filter-teacher {
    border: 1px solid #7d7d7d; /* Adjust the border style as needed */
    padding: 10px 20px; /* Fixed size for the button */
    cursor: pointer;
    font-weight: bold;
    background-color: white;
    color: #7d7d7d;
    transition: background-color 0.3s, color 0.3s;
    border-radius: 20px; /* Add curved borders */
    min-width: 150px; /* Set a minimum width for the button */
    margin-right: 50px;
}

.category-filter-teacher:last-child {
    margin-right: 0; /* Remove margin from the last button */
}

.category-filter-teacher:hover {
    background-color: #d534db; /* Change to the desired hover background color */
    color: white;
}

.gift-container {
    margin-top: 20px; /* Adjust margin as needed */
}

.gift-post {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
    height: 485px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.gift-image img {
    max-width: 100%;
    height: 250px;
    vertical-align: middle;
}

.post-meta {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-meta li {
    display: inline-block;
    margin-right: 10px;
}

.blog-title a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
}

.text p {
    font-size: 16px;
}

.additional-details p {
    font-size: 14px;
    color: #888;
}

.gift-post .gift-details {
    padding: 22px 30px 23px 30px;
    background-color: #ffffff;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden; 
}

.gift-post .gift-image {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 100%;
     height: 246px;
}
.gift-post .email{
    font-size: 14px;
}
/* gift details page */
.gift-details-container {
    margin-top: 20px;
    background-color: #f9f9f9; /* Add a light background color */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.gift-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px; /* Add rounded corners to the image */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
}

.gift-name {
    font-size: 28px;
    color: #333;
    margin-top: 10px;
}

.gift-price,
.gift-quantity,
.gift-category {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
}

.add-to-cart-form {
    margin-top: 20px;
}

.add-to-cart-btn {
    background-color: #4caf50;
    color: #fff;
    padding: 15px 25px;
    border: none;
    border-radius: 5px; /* Add rounded corners to the button */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Add a smooth transition effect */
}

.add-to-cart-btn:hover {
    background-color: #45a049;
}