:root {
    --custom_gray: #f1f2f4;
    --custom_dark_grey: #303030;
    --main_color: #5660FF;
    --secondary-color: #e8eaff;
}

/* Main styles */
body{
    font-family: "PT Sans", sans-serif;
    color: var(--custom_dark_grey);
}
.bg-primary{
    background-color: var(--main_color) !important;
}
.btn{ padding: .4rem 1.2rem; line-height: 1.8;}
.btn-primary {
    color: #fff;
    background-color: var(--main_color);
    border-color: var(--main_color);
    font-weight: 700;
}
.btn-primary:hover {
    color: var(--main_color);
    background-color: var(--bs-white);
    border-color: var(--main_color);
}
.btn-outline-primary {
    color: #5660ff;
    border-color: #5660ff;
}
.btn-outline-primary:hover {
    background-color: #5660ff;
    border-color: #5660ff;
}
.btn-link {
    color: #5660ff;
    text-decoration: none;
}
a.link-standard{ color: var(--custom_dark_grey);}
.modal-content{
    border-radius: 30px;
}
.text-success {
    color: #00ba00 !important;
}
.color-main{ color: var(--main_color);}
a {
    color: var(--main_color);
    text-decoration: none;
}
a:hover {
    color: var(--main_color);
}
a.ancor-main{
   color: var(--main_color);
   text-decoration: none;
}
a.ancor-main:hover{
   text-decoration: underline;
}
.unstyle-list{
    padding: 0;
}
.unstyle-list li{
    list-style: none;
}
a{
    transition: .3s all ease;
}
.text-decoration-line-through{
    text-decoration-line: line-through; 
}
.table>:not(caption)>*>* {
    padding: .7rem .5rem;
}
#datepicker{
    min-height: 43px;
}
#datepicker .input-group-append .input-group-text{
    line-height: 29px;
}

.width-80{ width: 80px}
.width-120{ width: 120px;}
.min-height-auto{
    min-height: auto;
}
.bg-gray{
    background: #D9D9D94A;
}
.bg-secondary{
    background-color: #e8eaff !important;

}
.text-gray{
    color: #8f8f8f;
}
.btn-light-danger{
    background: #EDB6A1;
}
.offcanvas {
    z-index: 10049;
}
.offcanvas-header {
    border-bottom: 1px solid #ddd;
}
.object-fit-cover{
    object-fit: cover
}
/* Pagination */
.page-item.active .page-link {
    background-color: var(--custom_dark_grey);
    border-color: var(--custom_dark_grey);
}
.page-item{
    margin: 0 15px 0 0;
}
.page-link {
    color: #333;
    border: 1px solid #333;
    border-radius: 50% !important;
    font-weight: bold;
    padding: 0;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 28px;
}
.page-link:hover {
    z-index: 2;
    color: #ffffff;
    background-color: #333333;
    border-color: #333;
}
.dropdown-menu.show {
    background: #ffffff;
    margin-top: 10px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 1px 4px 4px 0px rgb(0 0 0 / 27%);
    min-width: 235px;
}
.dropdown-item {
    padding: .45rem 0;
    border-bottom: 1px solid #ddd;
}
.dropdown-menu.show li:last-child a.dropdown-item{ border-bottom: none}
.dropdown-item.active, .dropdown-item:active {
    background-color: #5660ff;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: #ced0ff;
    padding-left: 10px;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--main_color);
}
.langMenuUl.show {
    background: #ffffff;
    margin-top: 10px;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 1px 4px 4px 0px rgb(0 0 0 / 27%);
    min-width: 115px;
}
.langMenuUl .dropdown-item {
    padding: .2rem 0;
    border-bottom: none;
    font-size: 14px;
}
.langMenuUl .dropdown-item:hover{
    padding-left: 10px;
}
.mt-12min{ margin-top: -12px;}
.speCard{
    border-radius: 18px;
    border: 1px solid #ddd;
    padding: 25px;
}
.text-justify{
    text-align: justify;
}
.rounded-4{
    border-radius: 10px;
}
.border-radius-18{
    border-radius: 18px;
}
.border-radius-30{
    border-radius: 30px;
}
.border-gray{
    border-color: #0000003B;
}
.fs-9{
    font-size: 9px;
}
.fs-11{
    font-size: 11px;
}
.fs-12{
    font-size: 12px;
}
.fs-13{
    font-size: 13px;
}
.fs-14{
    font-size: 14px;
}
.fs-16{
    font-size: 16px;
}
.fs-18{
    font-size: 18px;
}
.fs-22{
    font-size: 22px !important;
}
.fs-28{
    font-size: 28px !important;
}
.fs-30{
    font-size: 30px !important;
}
.w-80{width: 80px;}
.w-180{width: 180px;}

.table-min-width-1{
    min-width: 1000px;
}
.mt-custom{
    margin-top: 32px;
}
.me-40px{
    margin-right: 40px;
}

/* header styles */
.logo img{
    width: 102px;
    height: auto;
}
header> nav:first-child{
    border-bottom: 1px solid #0000002b;
    padding: 25px 0;
    transition: .3s all linear;
}
.nav-link{
    color: #333;
    font-weight: bold;
    padding: .5rem 1rem;
}
.nav-link.active{
    background: var(--main_color);
    color: #fff;
    border-radius: 35px;
}
.nav-link.active:hover{
    background: #283e89;
}
.nav .nav-item .nav-link.join{
    color: #fff !important;
}
.fixed-top {
    background: #ffffff;
    padding: 10px 0 !important;
}
.navbar-toggler{
    display: none;
}
.headerSearch{
    width: 400px;
    margin: 0 auto;
    position: relative;
}
.headerSearch input.form-control{
    border-radius: 30px;
    padding: 12px 100px 12px 42px;
    font-size: 15px;
    line-height: 22px;
}
.headerSearch i{
    position: absolute;
    top: 16px;
    left: 20px;
    color: #a9a9a9;
}
.headerSearch input.btn{
    font-size: 14px;
    border-radius: 30px;
    position: absolute;
    top: 5px;
    right: 6px;
    padding: 5px 15px;
}
 .banner{
    background: #f5f5ff;
    width: 100%;
    z-index: -1;
    position: relative;
    min-height: 570px;
    margin-top: -95px;
 }
 .bannerBg{
    background: #f5f5ff url(../img/header.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    width: 100%;
    min-height: 570px;
 }
 .banner .bar{ height: 95px;}
 .banner .bannerCon{
    top: 115px;
 }
 .banner .bannerCon h1{
    font-size: 56px;
    color: #000;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    line-height: 66px;
 }
a.seeAll{
    text-decoration: none;
    color: var(--main_color);
    font-size: 18px;
}
a.seeAll:hover{
    text-decoration: underline;
}
a.seeAll i{
    font-size: 14px;
    margin-left: 10px;
}
.nav-custom .nav-tabs .nav-item.show .nav-link, .nav-custom .nav-tabs .nav-link.active {
    color: var(--main_color);
    background-color: transparent !important;
    border-color: transparent !important;
    border-bottom: 2px solid var(--main_color) !important;
    border-radius: 0;
}
.nav-custom .nav-link:focus, .nav-link:hover {
    color: var(--main_color);
}
.nav-custom .nav-tabs .nav-link {
    font-size: 18px;
    font-weight: normal;
}

/* video Section */
.videoSec{
   height: 484px;
   background: url(../../assets/img/videoBg.png) center;
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;
   position: relative;
}
.ex-0{
    width: 580px;
    float: right;
    margin-right: 35px;
}
.ex-01{
    top: 120px;
    right: -40px;
}
.ex-02{
    bottom: 30px;
    left: -8px;
}
/* Footer Styles*/
footer{
    padding: 70px 0 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 50px;
}
footer .email{
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    text-transform: capitalize;
    color: rgba(0, 0, 0, 0.56);
    text-decoration: none;
}
footer .email:hover{
    color: var(--main_color);
}
footer h4{
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
}
footer .unstyle-list li a{
    text-decoration: none;
    margin: 9px 0;
    display: block;
    color: #333;
}
footer .unstyle-list li a:hover{
    color: var(--main_color);
}
footer .logo{
    width: 190px;
}
.copyrights a{
    color: #8d8d8d;
    text-decoration: none;
}
.copyrights a:hover{
    color: #333;
    text-decoration: none;
}
.copyrightSocial{
    list-style: none;
    padding: 0;
    margin: 0;
}
.copyrightSocial li a{
    color: #8d8d8d;
    padding: 0 10px;
}
.copyrightSocial li a:hover{
    color: #333;
}
.copyrightSocial li .langMenu {
    font-size: 13px;
    margin-top: 3px;
}

.titleCon img{
    width: 36px;
}

.proItem .imgCon img{
    width: 100%;
    height: 208px;
    border-radius: 30px;
}
.proItem .imgCon .wishlist{
    top: 15px;
    right: 15px;
    background: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    color: var(--custom_dark_grey);
}
.proItem .imgCon .wishlist:hover, .proItem .imgCon .wishlist.active{
    background: var(--main_color);
    color: #fff ;

}
.proItem .cate{
    font-size: 13px;
    color: #00000080;
    font-weight: bold;
}
.proItem .time{
    color: var(--main_color);
    font-size: 16px;
    font-weight: bold;
}
.proItem h3{
    font-size: 16px;
}
.proItem h3 a{
    color: #000;  
    text-decoration: none;
}
.proItem h3 a:hover{
    color: var(--main_color)
}
.proItem .rating{
    border-bottom: 1px solid #00000047;
    padding: 0 0 10px 0;
    margin-bottom: 15px;
}
.proItem .rating i{
    color: #FFE70F;
    font-size: 14px;
    margin-top: 3px;
}
.proItem .rating .num{
    color: #000000;
    font-size: 13px;
}
.proItem .rating .review{
    color: var(--custom_dark_grey);
    font-size: 13px;

}
.proItem .foo{
    font-size: 14px;
}
.proItem .foo div img{
    width: 36px;
    height: 36px;
    border-radius: 50%;
    float: left;
}
.proItem .foo div h6{
    float: left;
    margin: 10px 0 0 10px;
    font-size: 14px;
}
.proItem .foo div h6 a{
    color: #000;
    text-decoration: none;
}
.proItem .foo div h6 a:hover{
    color: var(--main_color); 
}
.proItem  .timeCon{
    margin: 5px 0 0 0;
}
.proItem  .timeCon .priceOld{
    margin: 0 10px 0 3px;
    text-decoration: line-through;
}
.proItem  .timeCon .priceNow{
    color: var(--main_color)
}

/* Trending Services Section */
.trendingTitle ul li button{
    color: #000;
    text-transform: uppercase;
    font-size: 15px;
}
.trendingTitle .nav-pills .nav-link {
    padding: 5px 20px;
    font-weight: bold;
    border: 2px solid transparent
}
.trendingTitle .nav-pills .nav-link.active, .trendingTitle .nav-pills .show>.nav-link {
    color: var(--main_color);
    background-color: transparent;
    border-radius: 20px;
    border: 2px solid var(--main_color)
}

.catCon{
    background: #878EFF17;
    text-align: start;
    padding: 40px 30px;
    border-radius: 10px;
    transition: .3s all ease;
}
.catCon img{
    width: 46px;
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}
.catCon span{
    width: 40px;
    height: 40px;
    background: #5660ff3d;
    display: block;
    margin-top: -42px;
    margin-left: 15px;
    margin-bottom: 10px;
    border-radius: 50%;
}
.catCon h3{
    font-weight: bold;
    font-size: 18px;
    text-transform: uppercase;
    margin-top: 25px;
}
.catCon:hover{
    background-color: var(--main_color);
    color: #fff;
}
.catCon:hover span {
    background: #ffffff3d;
}
.videoSec button{
    margin: auto;
    display: block;
    height: 110px;
    width: 115px;
    border: none;
    background: transparent;
    display: flex;
    height: 100%;
}
.videoSec button img{
    width: 110px;
    z-index: 6;
}
.videoSec::after{
    content:'';
    background: #00000036;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
}
.videoSec .logoVideo{
    width: 220px;
    position: absolute;
    right: 20px;
    bottom: 20px;
    z-index: 56;
}
.clients img{
    opacity: .5;
    transition: .3s all ease;
}
.clients img:hover{
    opacity: 1;
}
.clients .owl-nav{ display: none;}


.testimonials {
    background: #BABEFE26;
    padding: 50px 0 30px;
}
.testimonials h4{
    font-size: 36px;
}
.testimonials p.text-center{ color: #00000080;}
.testimonials .owl-nav,  .testimonials .owl-dots{
    display: none;
}
.testimonials .testimonialsCon .item{
    background: #fff;
    border-radius: 22px;
    padding: 30px;
    margin: 0 0 10px 0;
    text-align: end;
    float: inline-start;
    box-shadow: 0px 8px 0px 0px rgba(86,96,255,0.75);
    -webkit-box-shadow: 0px 8px 0px 0px rgba(86,96,255,0.75);
    -moz-box-shadow: 0px 8px 0px 0px rgba(86,96,255,0.75);
}
.testimonials .testimonialsCon .item i{
    background: #D9D9D98A;
    padding: 10px;
    display: inline;
    border-radius: 50%;
}
.testimonials .testimonialsCon .item .footer img{
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}
.testimonials .testimonialsCon .item .footer span:first-of-type h3{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0;
}
.testimonials .testimonialsCon .item .footer .rating i{
    background: transparent;
    font-size: 14px;
    color: #FFE70F;
    padding: 0;
}
.testimonials .owl-carousel .owl-stage {
    left: 200px;
}
.How .item span{
    background: #bdbdbd3d;
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto 15px;
    text-align: center;
    line-height: 80px;
    border-radius: 50%;
}
.How .item:hover span{
    background: #f5f5ff;
}
.How .item h3{   
    font-weight: bold;   
    font-size: 20px;
}
.marketplace{
    background: var(--main_color);
    padding: 60px 45px;
    border-radius: 30px;
}
.marketplace a.btn{
    text-transform: uppercase;
    font-weight: 700;
}
.marketplace a.btn:hover{
    color: var(--main_color);
}
.marketplace a.btn:first-of-type {
    background-color: #fff;
    color: var(--main_color);
}
.marketplace .up-img {
    bottom: -85px;
    right: 120px;
    z-index: 1;
}
.marketplace .circle-01{
    background: #ffffffd9;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: 0;
    right: 70px;
    bottom: -42px;
}
.marketplace .circle-02{
    background: #ffffff70;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: 0;
    right: 300px;
    bottom: 35px;
}
.marketplace p, .marketplace ul, .marketplace .btn{
    font-size: 18px;
}
/* animation css */
/* Copy code to element you want to animate */
.marketplace .circle-01{
    animation: customAni 2s ease 0s infinite normal none;
}

/* Copy this code after the above code */
@keyframes customAni {
    0% {
      opacity: 0.8;
      transform: scale(0.2);
    }
  
    80% {
      opacity: 0;
      transform: scale(1.2);
    }
  
    100% {
      opacity: 0;
      transform: scale(2.2);
    }
  }

.marketplace .circle-02{
    animation: customAni2 2s ease 1s infinite normal none;
}

/* Copy this code after the above code */
@keyframes customAni2 {
    0% {
      opacity: 0.8;
      transform: scale(0.2);
    }
  
    80% {
      opacity: 0;
      transform: scale(1.2);
    }
  
    100% {
      opacity: 0;
      transform: scale(2.2);
    }
  }

/* pages styles */
/* sign in page */
.mt-innerPages{
    margin-top: 35px;
}
.mt-innerPages-2{
    margin-top: 15px;
}
.login-tabs{
    border: 1px solid #00000045;
    border-radius: 30px;
}
.required{
    color: var(--main_color);
    font-size: 20px;
    font-weight: bold;
}
.form-label{
    color: var(--custom_dark_grey);
    font-weight: bold;
}
.form-control, .form-select{
    border-radius: 30px;
    padding: .4rem 1.2rem;
    line-height: 1.8;
}
.or span{
    background: #fff;
    padding: 12px;
}
.loginBy> a{
    width: 61px;
    height: 61px;
    display: inline-block;
    border: 1px solid #ced4da;
    border-radius: 50%;
    text-align: center;
    line-height: 55px;
    transition: .3s all ease;
}
.loginBy> a img{   
     width: 52px;
    position: relative;
    z-index: -1;
}
.loginImg {
    border-radius: 30px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.loginBy> a:hover{
    border: 1px solid #333; 
}

/* Privacy page */
.innerHeader{
    background: #878EFF30;
    padding: 50px 0;
    margin-bottom: 40px;
}
.innerHeader .text{
    position: relative;
    z-index: 1;
    min-height: 100px;
}
.innerHeader h2{
    color: #000000;
    font-weight: bold;
    font-size: 32px;
}
.innerHeader svg{
    position: absolute;
    z-index: 0;
}
.innerHeader svg:first-child{
    height: 140px;
    left: -6px;
    top: 0;
}
.innerHeader svg:last-of-type{
    height: 120px;
    right: 0;
    bottom: -10px;
}

/* contact us page style */
.map iframe{
    width: 100%;
}
.contactForm-2 {
    border-radius: 15px;
    box-shadow: 1px 4px 4px 0px rgb(0 0 0 / 27%);
    margin-top: -160px;
}
/* Marketing page style */
.profile-img{
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 1px solid #ddd;
}
.status{
    right: 8px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.avaliable{
    background: #32C919;
}
.fr-profile .rating i{
    color: #eddd14;
}
.innerHeader .innerHeader-img{
    position: absolute;
    bottom: -50px;
    right: 0;
    max-height: 275px;
}
.marketing{
    background: transparent;
    padding: 0;
}
.marketing span {
    background: #fbf7ed;
}
.marketing h3 {
    font-size: 16px;
}
.marketing:hover {
    color: #000;
}
.Packages .header h3{
    font-size: 32px;
    font-weight: bold;
}
.Packages .header h3 span{
    font-size: 13px;
    opacity: .5;
    font-weight: 400;
}
.Packages .header td{
    vertical-align: top;
    min-width: 150px;
}
.Packages .header h4{
    font-size: 18px;
    font-weight: 700;
}
.Packages .body td{
    padding: 1rem .5rem;
}
.reviewCon .reviewItem:last-of-type{
    border-bottom: none !important;
}
.reviewItem img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}
.reviewItem .name img{
    width: 26px;
    height: 28px;
    object-fit: contain;
}
.rating i{
    background: transparent;
    font-size: 10px;
    color: #FFE70F;
    padding: 0;
}
.serPackages .nav-tabs .nav-item.show .nav-link, .serPackages .nav-tabs .nav-link.active {
    color: var(--main_color);
    background-color: transparent;
    border-color: transparent;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    border-color: transparent;
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
    color: #a5a5a5;
}
.nav-fill .nav-item .nav-link:hover, .nav-justified .nav-item .nav-link:hover {
    color: var(--custom_dark_grey);
}
.serPackages .nav-tabs{
    margin: 0 -25px;
}
.serPackages .nav-tabs .nav-item{
    position: relative;
}
.serPackages .nav-tabs .nav-item::after{
    content: "";
    width: 1px;
    height: calc(100% + 42px);
    background-color: #ddd;
    position: absolute;
    right: 0;
    top: -25px;
}
.serPackages .nav-tabs li:last-of-type::after{
    display: none;
}
.serPackages .features {
    color: #95979D
}
.serPackages .features li i{
    margin-right: 10px;
}

.freelancerPro .header img{
    width: 80px;
    height: 80px;
    object-fit: cover;
}
.freelancerPro .online {
    top: 28px;
}
.serPackages .nav-link {
    padding: 0 1rem .5rem;
}
.servPage .proItem{
    margin: 0 0 30px 0;
}

/* All Categories page */
.allcategories{
    margin-bottom: 20px;
}
.allcategories .imgCon .title{
    top: calc(50% - 25px);
    background: #fff;
    text-align: center;
    width: auto;
    margin: 0 auto;
    display: block;
    padding: 10px 15px;
    border-radius: 20px;
    font-size: 18px;
}
.allcategories .allCatItems li a{
    color: #000;
    padding: 10px 0;
    border-bottom: 1px solid #d4d4d4;
    width: 100%;
    display: block;
    font-weight: bold;
    font-size: 18px;
}
.allcategories .allCatItems li:last-child a, .allcategories .allCatItems li:last-child a:hover{
    border: transparent
}

.allcategories .allCatItems li a:hover{
    color: var(--main_color);
    border-bottom: 1px solid var(--main_color);
}
.allcategories .allCatItems li a i{
    rotate: 45deg;
}
.allcategories .allCatItems li a:hover i{
    rotate: 90deg;
}
.allcategories .imgCon img{
    height: 240px;
    width: 100%;
    object-fit: cover;
}

/* Gallery in maketing page */
.outer { margin:0 auto; max-width:100%;}
#thumbs .item {height: 118px;margin: 10px;border-radius: 18px;cursor: pointer;opacity: .7}
#thumbs .item img{height: 118px;object-fit: cover;width: 100%;border-radius: 18px;}
#thumbs .current .item { opacity: 1; }
.owl-theme .owl-nav [class*='owl-'] { -webkit-transition: all .3s ease; transition: all .3s ease; }
.owl-theme .owl-nav [class*='owl-'].disabled:hover { background-color: #D6D6D6; }
#big.owl-theme { position: relative; }
#big .owl-item .item img{border-radius: 18px;height: 470px;width: 100%;object-fit: cover;} 
#big.owl-theme .owl-next, #big.owl-theme .owl-prev, .outer .owl-dots{ display: none;}
#thumbs.owl-theme .owl-next, #thumbs.owl-theme .owl-prev { background:#333; }
#thumbs{position: relative;margin-top: 10px;}
#thumbs .owl-nav{position:absolute;top: 42px;margin-top: 0;width: 100%;}
#thumbs .owl-nav button{
    position: absolute;
    width: 30px;
    height: 30px;
    background: #ffff !important;
    border-radius: 50%;
    box-shadow: 1px 1px 1px rgb(0 0 0 / 42%);
    font-size: 12px;
    line-height: 30px;
}
#thumbs .owl-nav button.owl-prev{
    left: -15px;
}
#thumbs .owl-nav button.owl-next{
    right: -15px;
}
#thumbs .owl-nav button.owl-prev i.fa-arrow-left:before{
    content: "\f053";
}
#thumbs .owl-nav button.owl-next i.fa-arrow-right:before{
    content: "\f054";
}
.outer .owl-theme .owl-nav [class*=owl-]:hover {
    color: #050505;
}

/* profile page */
.profile-2 .profile-img {
    width: 130px;
    height: 130px;
}
.profile-2 .avaliable {
    width: 20px;
    height: 20px;
    right: 0;
    bottom: 20px;
    top: auto;
}
.circleFeat span{
    border: 1px solid #0003;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    line-height: 44px;
}
.serItem{
    background: #878EFF45;

}
.activity .item a{
    color: #000;
}
.activity .item a:hover{
    color: var(--main_color);
}
.activity .item{
    margin: 0 0 20px 0;
    border-bottom: 1px solid #dee2e6;
}
.activity li:last-child .item{
    margin: 0;
    border-bottom: none
}
.services .proItem .imgCon img {
    height: 160px;
}
.services .owl-dots, .portfolio .owl-dots{
    display: none;
}
.services .owl-nav button, .portfolio .owl-nav button{
    background: #fff !important;
    width: 48px;
    height: 48px;
    border-radius: 16px !important;
    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 26%);
    font-size: 22px !important;
}
.services .owl-nav button:hover, .portfolio .owl-nav button:hover{
    box-shadow: none;
    border: 1px solid #ddd;
}
.services .owl-nav button:hover span, .portfolio .owl-nav button:hover span{
    color: #000
}
.services .owl-nav, .portfolio .owl-nav{
    position: absolute;
    top: 45px;
    width: 100%;
}
.services .owl-nav button, .portfolio .owl-nav button{
    position: absolute;
}
.services .owl-nav button.owl-next, .portfolio .owl-nav button.owl-next{
    right: -30px;
}
.services .owl-nav button.owl-prev, .portfolio .owl-nav button.owl-prev{
    left: -30px;
}
.portfolio .owl-item .item a img{
    height: 260px;
    object-fit: cover;
    width: 100%;
}
.portfolio .owl-nav{
    top: calc(50% - 42px) !important;
}
.proCardSticky{
    position: sticky;
    top: 100px;
}


/* Portfolio page */
.portImgMain{
    width: 90px;
    height: 90px;
    object-fit: cover;
}
.freePortfolio .item{
    background: #fff;
    box-shadow: 0 2px 8px 1px rgb(0 0 0 / 10%);
    float: left;
    width: 100%;
    margin: 0 0 20px 0;
}
.freePortfolio .item:hover{
    box-shadow: 0 0 0px 1px rgb(0 0 0 / 15%);
}
.freePortfolio .item img{height: 250px;object-fit: cover; border-radius: 30px;}
.freePortfolio .item p{margin: 10px 0;color: #000;height: 22px;}

/* Posts page */
.commBar a i{
    font-size: 20px;
}
.commBar a{
    color: var(--custom_dark_grey);
}
.commBar a:hover{
    color: var(--main_color);
}
.commBar a:hover i{
    color: var(--main_color);
}
.commentBg{
    background: #D9D9D970;
    border-radius: 15px;
    padding: 10px 20px;
    min-width: 240px;
    min-height: 63px;
}
.commBar{
    font-size: 13px;
}
.msgParent{
    margin: 0 0 40px 0;
}
.msgParent .profile-img{
    width: 63px;
    height: 63px;
}
.msgParent ul{
    margin: 20px 0 0 80px;
}
.msgParent ul li .profile-img  {
    width: 43px;
    height: 43px;
}
.msgParent ul li ul{
    margin: 20px 0 0 60px;
}
.msgParent ul li ul li{
    margin: 0 0 20px 0;
}
.postCommentForm textarea{
    border-radius: 10px;
    padding: 10px 50px 10px 20px;
}
.postCommentForm button.btn{
    color: var(--custom_dark_grey);
}

/* ProfileFreeancer Msg */
.upload__inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
.upload__btn {
    float: inline-end;
    margin-right: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.upload__img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    width: 100%;
}
.upload__img-box {
    width: 25%;
    padding: 0 10px;
    margin-bottom: 12px;
}
.upload__img-close {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 5px;
    right: 5px;
    text-align: center;
    line-height: 24px;
    z-index: 1;
    cursor: pointer;
}
.upload__img-close:after {
    content: '\2716';
    font-size: 14px;
    color: white;
}
.img-bg {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    padding-bottom: 100%;
    border: 1px solid #ddd;
    border-radius: 10px;
}
.sendMsg textarea.form-control:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}
.sendMsg textarea.form-control{
    border: none;
    overflow: auto;
    outline: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    resize: none; /*remove the resize handle on the bottom right*/
    border-radius: 0;
}


/* Freelancer profile styles */
#sidebarCollapse{ font-size: 20px;}
.freelancerHeader .name{
    background: #878EFF;
    color: #fff;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    text-align: center;
}
.freelancerHeader ul li.nav-item a{
    position: relative;
}
.freelancerHeader .noti{
    background: var(--main_color);
    border-radius: 50%;
    width: 12px;
    height: 12px;
    display: block;
    position: absolute;
    top: 10px;
    right: 13px;
}
.h-icon{ width: 22px;}
.wrapperFreelancerProfile {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    transition: all 0.3s;
}

#sidebar.active {
    margin-left: -250px;
}
#sidebar ul li {
    margin: 0 0 5px 0;
}
#sidebar ul li a {
    padding: 10px 10px 10px 30px;
    display: block;
    color: var(--custom_dark_grey);
}

#sidebar ul li a:hover {
    color: var(--main_color);
}
#sidebar ul li a i{  
    margin: 0 10px 0 0;
    font-size: 18px;
}
#sidebar ul li a.active{
    background: var(--main_color);
    color: #fff;
}
#sidebar ul li.active>a,#sidebar a[aria-expanded="true"] {
    color: #fff;
    background: var(--main_color);
}
#sidebar ul li p.title{
    margin: 20px 20px 10px 30px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
    background: #FAF9F9;
}
/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */

@media (max-width: 991px) {
    #sidebar {
        margin-left: -250px;
    }
    #sidebar.active {
        margin-left: 0;
    }
    #sidebarCollapseMo{
        display: block !important;
    }
}


/* Freelancer profile service page */
.serTable thead tr td{
    font-size: 20px;
    font-weight: bold;
}
.serTable .servImg{
    width: 110px;
    height: 80px;
    object-fit: cover;
}
.serTable tbody tr:last-child{
    border-bottom: white;
}
.serv-pills .nav-link.active:hover, .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background: transparent;
    border-radius: 0;
}
.serv-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--custom_dark_grey) ;
}
.nav-pills .nav-link.active{
    background: transparent;
    color: var(--main_color);
    border-bottom: 3px solid  var(--main_color);
}

/* Freelancer my Profile page */
.uploadProfileImg .btn_upload {
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    position: relative;
    color: #fff;
    background-color: var(--main_color);
    padding: 5px 10px;
  }
  
  .uploadProfileImg .btn_upload:hover,
  .uploadProfileImg .btn_upload:focus {
    background-color: #878eff;
  }
  
  .uploadProfileImg {
    display: flex;
    align-items: flex-start;
    margin-top: 10px !important;
  }
  
  .uploadProfileImg .btn_upload input {
    cursor: pointer;
    height: 100%;
    position: absolute;
    filter: alpha(opacity=1);
    -moz-opacity: 0;
    opacity: 0;
  }
  
  .uploadProfileImg .btn-rmv1,
  .uploadProfileImg .btn-rmv2,
  .uploadProfileImg .btn-rmv3,
  .uploadProfileImg .btn-rmv4,
  .uploadProfileImg .btn-rmv5 {
    display: none;
  }
  
  .uploadProfileImg .rmv {
    width: 40px;
    height: 40px;
    display: inline-block;
    border: none;
    margin: 16px 0 0 25px;
    background: transparent;
    font-size: 26px;
  }
  
  .uploadProfileImg .rmv:hover {
    color: #af0000;
  }
  
  .customaccor .accordion-button:not(.collapsed) {
    color: var(--main_color);
    background-color: transparent;
    box-shadow: none;
}
a.btn-circle{
    color: #000;
    border: 1px solid #ddd;
    width: 42px;
    height: 42px;
    line-height: 42px;
    cursor: pointer;
}
a.btn-circle:hover{
    background: #333;
    color: #fff;
}


.addServFreelancer .howWork img{
    width: 50px;
}
.addServFreelancer .howWork .px-4{
    min-width: 160px;
    min-height: 130px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple, .select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
    border: 1px solid #ced4da;
    border-radius: 30px;
    padding: .4rem 1.2rem;
    height: 42px;
    overflow: auto;
}
.select2-container .select2-selection--multiple .select2-selection__rendered {
    margin: 0 0 0 -15px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #878eff;
    border: none;
    border-radius: 30px;
    margin-right: 5px;
    margin-top: 0;
    margin-bottom: 5px;
    padding: 4px 20px 4px 10px;
    font-size: 13px;
    font-weight: bold;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background-color: transparent;
    color: #000;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    left: auto;
    top: 2px;
    right: 5px;
    font-size: 16px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    border-right: none;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #000;
}

.addServFreelancer table select{
    border: none;
}
.addServFreelancer table select.form-select:focus {
    border-color: transparent;
    box-shadow: none;
}

.checkbox-lg .custom-control-label::before, 
.checkbox-lg .custom-control-label::after {
  top: .8rem;
  width: 1.55rem;
  height: 1.55rem;
}

.checkbox-lg .custom-control-label {
  padding-top: 13px;
  padding-left: 6px;
}

/* Upload image and video with preview and remove button */
.imgVidUpload{
    position: relative;
    background: #D9D9D954;
    border-radius: 40px;
    width: 100%;
    height: 220px;
    max-width: 100%;
    display: block;
    overflow: hidden;
    margin: 0 0 20px 0;
}
.imgVidUpload .drop-zone {
    background: #D9D9D954;
    border-radius: 40px;
    width: 300px;
    max-width: 100%;
    margin: 0 auto;
}

.imgVidUpload .drop-zone.highlight {
    background-color: #eaf6ff;
}

.imgVidUpload .preview {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 220px;
    right: 0;
    left: 0;
    margin: auto;
}

.imgVidUpload .preview-item {
    height: 100%;
    width: 100%;
}

.imgVidUpload .preview-item img,
.imgVidUpload .preview-item video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}

.imgVidUpload .remove-button {
    position: absolute;
    top: 15px;
    right: -10px;
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    z-index: 11111;
    padding: 0 20px 0 8px;
    border-radius: 5px;
}
.imgVidUpload .file-input{
    position: absolute;
    opacity: 0;
    z-index: 1;
    width: 100%;
    /* max-width: 100%; */
    height: 220px;
    border-radius: 40px;
    right: 0;
    left: 0;
    /* display: block; */
    margin: auto;
    cursor: pointer;
}
.imgVidUpload .bg{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
}
.imgVidUpload .bg img{
    width: 60px;
    margin: 0 0 10px 0;
}
.imgVidUpload .bg h4{
    font-size: 16px;
}

/* Notification Page */
.datepicker{
    padding: 15px;
}
.datepicker table tr td.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active:hover{
    background: #5660ff !important;
}

/* Review page */
.reviewImgCon img{
    height: 100px;
    object-fit: cover;
}
.reviewPage .row{
    border-bottom: 1px solid #ddd;
}
.reviewPage .row:last-child{
    border-bottom: none;
}

/* Wallet */
.freelancerWallet .catCon {
    padding: 25px;
}
.freelancerWallet .catCon {
    background: #fff;
}
.freelancerWallet .catCon:hover {
    background-color: var(--main_color);
}
.freelancerWallet .search img{
    top: 10px;
    left: 10px;
}
.freelancerWallet .search .form-control{
    padding-left: 40px;
}


/* Checkout page */
.promoCheckoutSummary{
    border-top: 1px solid #ddd;
  }
  .promoCheckoutSummary .promoForm input.btn {
    width: 30%;
    border: 1px solid #2a547e;
    border-radius: 0;
    color: #ffffff;
    background: #2a547e;
  }
  .summaryCon-2 .details{
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  .checkCon input[type=radio] + label {
    cursor: pointer;
    float: left;
    width: 100%;
  }
  
  .checkCon input[type=radio] {
    display: none;
  }
  
  .checkCon input[type=radio] + label:before {
    content: "\f111";
    border: 0.1em solid #5660ff;
    border-radius: 50%;
    width: 23px;
    height: 23px;
    margin-right: 10px;
    vertical-align: bottom;
    color: transparent;
    transition: .2s;
    font-family: 'FontAwesome';
    font-size: 12px;
    line-height: 22px;
    float: left;
    margin-top: 18px;
  }
  
  .checkCon input[type=radio] + label:active:before {
    transform: scale(0);
  }
  
  .checkCon input[type=radio]:checked + label:before {
    background-color: #5660ff;
    border-color: #5660ff;
    color: #fff;
  }
  
  .checkCon input[type=radio]:disabled + label:before {
    transform: scale(1);
    border-color: #aaa;
  }
  
  .checkCon input[type=radio]:checked:disabled + label:before {
    transform: scale(1);
    background-color: #bfb;
    border-color: #bfb;
  }
  .checkCon label img{
  display: inline-block;
  float: left;
  margin-right: 7px;
  }
  .checkCon label span{
    margin-left: 30px;
  }

  /* Order Page */
  .search .form-control {
    height: 38px;
  }
  .freelancerWallet .search .h-icon{
    width: 17px;
  }
  .actionBtn .dropdown-toggle::before{
    display: none;
  }
  .actionBtn .btn{
    background: #5660FF12;
    border-radius: 50%;
  }
  .actionBtn .dropdown-menu.show{
    background-color: #f0f0f0;
  }
  .actionBtn .dropdown-menu li:last-child .dropdown-item{
    border: none
  }
  .actionBtn .dropdown-menu.show {
    min-width: 155px;
    border-bottom-right-radius: 0;
    border-top-left-radius: 0;
}
.actionBtn .dropdown-item:focus, .actionBtn .dropdown-item:hover {
    background-color: #dbdbdb;
}
.actionBtn  .dropdown-item.active, .actionBtn .dropdown-item:active {
    color: #333;
}


/* Chat page */
.emailUserImg{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    float: left;
    margin: 0 15px 0 0;
    object-fit: cover;
}
.emailUseraName{
    margin: 5px 0 0 0;
    font-size: 20px;
    font-weight: 700;
}
.chatContainer{
    height: calc( 100vh - 150px);
    position: relative;
    /* overflow: hidden; */
}
.emailUserImgChat{
    border-radius: 5px;
    width: 55px;
    height: 55px;
    object-fit: cover;
    float: left;
    margin: 0 15px 0 -5px;
}
.chatNames{
    width: calc(100% - -10px);
    padding: 0;
    background: #fff;
    margin: 0 0 0 -10px;
    height: 55px;
}
.chatNames h4 span.price{
    display: block;
    font-size: 14px;
    color:#9b9b9b;
    margin: 5px 0 0 0;
}
.chatIcons .backbtn{
    margin-left: -15px;
}
.msg textarea.form-control{
    width: calc( 100% - 42px);
    float: left;
    margin: 0 0 10px 0;
}
.msg button{
    background: var(--main_color);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    text-align: center;
    float: left;
    margin: 5px;
}

.msg{
    width: 100%;
    float: inline-start;
    padding: 20px 10px 20px 20px !important;
    position: relative;
    top: -30px;
    background: #fff;
    z-index: 11;
    height: 80px;
}
.coBox{
    margin: 0 12px 0 0;
    padding: 5px 15px 0 25px;
}
.coBox img{
    width: 55px;
    height: 55px;
    border-radius: 50%;
    float: left;
    margin: 15px 15px 0 10px;
    object-fit: cover;
    background-color: #fff;
}
.coBoxCon{
    margin: 0
}
.coBoxCon .time{
    font-size: 13px;
    color: #9b9b9b;
}
.chatOptions  .btn{
    padding: 0;
}
.coBoxCon .stsus{
    color: #9b9b9b;
    font-size: 14px;
    margin: 5px 0 0 0;
}
.coBoxCon .stsus i.fa-check-double{
    color: var(--custom_Green);
}
.chatOptions .dropdown-menu{ left: 9.5rem !important;     padding: 0;}
.chatOptions .dropdown-menu .dropdown-item{ font-size: 14px; }
.usera{
    float:left
}
.userb{
    float: right;
}
.usera, .userb{
    clear: both;
    margin: 0 0 7px 0;
}
.usera div{
    background: #ececec;
    float: left;
    padding: 7px 15px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    border-bottom-left-radius: 0;
}
.usera div p{margin: 0;font-weight: 700;font-size: 15px;position: relative;}

.userb div{
    background: var(--main_color);
    float: left;
    padding: 5px 10px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    color: #fff;
    border-bottom-right-radius: 0;
}
.userb div p{margin: 0;font-weight: 700;position: relative;}
.usera div p span.time, .userb div p span.time{
    font-size: 12px;
    font-weight: 300;
    display: block;
    clear: both;
    text-align: end;
}
.mesaggesCon{
    padding: 15px 20px 15px 20px;
/*    overflow-y: auto;*/
    width: 100%;
/*    min-height: 400px;*/
    max-height: calc( 100vh - 425px );
    margin: 0 0 10px 0;
}
.mesaggesCon::after{
    height: 30px;
    content: '';
    float: inline-end;
    width: 100%;
}
.coBoxCon .noti{
    width: 22px;
    height: 22px;
    background: var(--main_color);
    color: #fff;
    border-radius: 50%;
    line-height: 22px;
    font-size: 12px;
}
.coBoxCon.active{
    background: #ececec;
}
.coBoxCon:hover{
    background: #f5f5f5;
}
.coBoxCon.active:hover{
    background:  #ececec;
}

#search-form {display: none;float: right;width: 100%;}
.contSearch{
    right: 20px;
    top: 20px;
    width: 89%;
    position: relative;
}
#search-icon{
    position: absolute;
    right: 20px;
    z-index: 11;
    top: 10px;
}
.contSearch #search-button {
    float: right;
    top: 1px;
    position: relative;
    right: -20px;
}
.freelancChat .actionBtn .btn {
    width: 45px;
    height: 45px;
    background: #5660FF12;
    border-radius: 50%;
}
.freelancChat .actionBtn .btn i{
    transform: rotate(90deg);
    text-align: center;
}
.freelancChat .actionBtn .dropdown-menu.show {
    background-color: #fff;
    padding: 5px 15px;
}
.freelancChat .actionBtn .dropdown-item:focus, .freelancChat .actionBtn .dropdown-item:hover {
    background-color: #fff;
}
.freelancChat .dropdown-item:focus, .freelancChat .dropdown-item:hover {
    padding-left: 0;
}
.receiveCon{
    overflow-y: auto;
    position: sticky;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc( 100vh - 150px);
}
.speCard-2 {
    border: 1px solid #ddd;
    padding: 25px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}
.sendMsgCon{
    width: calc( 100% - 44px);
}
.msg.speCard button[type=submit]{
    position: absolute;
    bottom: 27px;
}
.viewPrfileBtn{
    bottom: 10px;
    left: 20px;
    right: 20px;
    width: calc(100% - 40px);
}
.sepcialCatCon{
    background: url(../img/raraw-1.png) no-repeat right center;
}
a.chatUs{
    box-shadow: 1px 1px 8px 0px rgb(0 0 0 / 40%);
    padding: 10px 30px 10px 5px;
    background: #fff;
    display: inline-block;
    width: fit-content;
    color: #000;
    position: fixed;
    left: 20px;
    bottom: 20px;
    border: 1px solid #ffffff;
    z-index: 11;
}
a.chatUs:hover{
    box-shadow: none; 
    border: 1px solid #dee2e6;
}
.chatContainer .accordion-button:not(.collapsed) {
    background-color: #e7f1ff;
    box-shadow: none;
}
.chatContainer .accordion-button:not(.collapsed) {
    color: var(--main_color);
}
.freelancChat .accordion-button[aria-expanded="false"]{
    opacity: .3;
}
.freelancChat .accordion-button[aria-expanded="true"]{
    opacity: 1;
}
.freelancChat .accordion{
    height: auto;
    max-height: 100%;
    overflow-y: auto;
}
.freelancChat .accordion-body {
    padding: 0;
}
.freelancChat .msg{
    height: auto;
    top: 0;
}
.freelancChat .upload__img-wrap {
    margin: 0 0 0px -30px;
    padding: 0 0 0 20px;
}
/* Manage Service page */
.mangeService .wishlist.danger:hover, .mangeService .wishlist.danger.active {
    background: #af0000;
}

.profileDropmenu .dropdown-menu {
    min-width: 280px;
    border-radius: 38px;
    border-top-right-radius: 0;
    border-bottom-left-radius: 0;
}
.profileDropmenu .dropdown-toggle::after{
    display: none;
}
.profileDropmenu .freelancerPro .header img {
    width: 50px;
    height: 50px;
}
.profileDropmenu .freelancerPro .header h5{
    font-size: 16px;
} 
.profileDropmenu .dropdown-item {
    border-bottom: none;
}
.notiDropMenu .dropdown-toggle::after{
    display: none;
}
.notiDropMenu ul li a span.notiItem {
    background: #878eff61;
    border-radius: 50%;
    width: 55px;
    height: 55px;
    text-align: center;
    line-height: 55px;
}
.notiDropMenu ul li a:hover span.notiItem{
    background: #f3f4ff;
}
.notiDropMenu ul li a:hover p{
    color: var(--main_color);
}
.notiDropMenu ul li p{
    color: #333;
}
.notiDropMenu .dropdown-menu {
    min-width: 340px;
}

 /* Scrollbar  STYLE 1  */
 .style-1::-webkit-scrollbar-track
 {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
     background-color: #F5F5F5;
 }
 
 .style-1::-webkit-scrollbar
 {
     width: 8px;
     background-color: #F5F5F5;
 }
 
 .style-1::-webkit-scrollbar-thumb
 {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
     background-color: #b3b3b3;
 }
 .titlesBanner {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    vertical-align: middle;
    display: inline-table;
    margin: auto;
 }
.titlesBanner h1{
    font-size: 48px;
}

/* Timeline */
.shareSection .card{
    box-shadow: 3px 3px 8px rgb(0 0 0 / 20%)
}
.shareSection  .imgVidUpload{
    height: auto;
    background: none;
    border-radius: 0;
    margin: 0;
}
.shareSection .file-input, .shareSection .imgVidUpload .preview{
    height: auto;
    border-radius: 0;
}
.shareSection .imgVidUpload .preview-item img, .shareSection  .imgVidUpload .preview-item video{
    overflow: hidden;
    object-fit: cover;
    width: 100%;
    border-radius: 0;
}
.shareSection .imgVidUpload .bg img {
    width: 32px;
    margin: 0;
}
.shareSection .imgVidUpload .bg {
    justify-content: left;
    display: inline-block !important;
}
.shareSection .imgVidUpload .remove-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 5px;
    left: 80px;
    text-align: center;
    line-height: 24px;
    z-index: 1;
    cursor: pointer;
    padding: 0;
}
.shareSection .imgVidUpload .remove-button::after{
    content: '\2716';
    font-size: 14px;
    color: white;
}

.shareSection .imgVidUpload .preview{
    position: relative;
    margin: 0;
}   
.shareSection  .upload__img-box {
    width: 120px;
    height: 120px;
    float: left;
    margin-bottom: 0;
}
.shareSection  .upload__img-wrap {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    width: 100%;
    margin-top: 30px;
    position: relative;
    top: 10px;
}

.shareSection  .upload__btn{
    bottom: 0;
    right: 0;
    z-index: 11;
    position: relative !important;
    cursor: pointer;
}
.shareSection  .imgVidUpload .preview-item {
    height: 110px;
    width: 110px;
}

/* About us page Styles */
.why .catCon span {
    background: var(--main_color);
    margin: -44px auto 10px;
    border-radius: 50%;
    position: relative;
    right: -15px;
}
.why .catCon:hover {
    background-color: var(--main_color) !important;
    color: #fff!;
}
.faq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus' viewBox='0 0 16 16'%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
    transition: all 0.5s;
  }
.faq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash' viewBox='0 0 16 16'%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
  }
.faq .accordion-button::after {
    transition: all 0.5s;
  }
  .faq .accordion-button:not(.collapsed) {
    color: var(--main_color);
    background-color: transparent;
    box-shadow: none;
}
.faq .accordion-item{
    border: none;
}
.navigator a.link-dark:hover{
    color: var(--main_color) 
}

/* Projects Page */
.projects .search .form-control {
    height: auto;
}
.projects .search img {
    top: 14px;
    left: 14px;
}
.tags .btn-primary{
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--custom_dark_grey);
}
.tags  .btn-primary:hover{
    background-color: var(--main_color);
    border-color: var(--main_color);
    color: #fff;
}

/* Responsive Styles */
@media only screen and (max-width: 1400px) {
    .ex-01 {
        width: 240px;
    }
    .ex-02 {
        width: 256px;
    }
    .freelancChat  #search-form {
        width: 98%;
    }
}

@media only screen and (max-width: 1200px) {
    .videoSec .logoVideo {
        width: 170px;
    }
    .banner {
        min-height: 470px;
    }
    .banner .bannerCon h1 {
        font-size: 46px;
        line-height: 56px;
    }
    .headerSearch {
        width: 380px;
    }
    .h2, h2 {
        font-size: calc(1rem + .8vw);
    }
    .titleCon img {
        width: 28px;
    }
    .trendingTitle ul li button {
        font-size: 14px;
    }
    .trendingTitle .nav-pills .nav-link {
        padding: 5px 15px;
    }
    .display-5 {
        font-size: calc(1rem + 1.6vw);
        line-height: 1;
    }
    .marketplace p, .marketplace ul, .marketplace .btn {
        font-size: 16px;
    }
    .ex-0 {
        width: 410px;
    }
    .ex-02 {
        width: 245px;
    }
    .marketplace .up-img {
        right: 90px;
        width: 420px;
    }
    .marketplace .circle-01, .marketplace .circle-02 {
        width: 180px;
        height: 180px;
    }
    .marketplace .circle-01 {
        right: 45px;
    }
    .marketplace .circle-02 {
        right: 240px;
    }
    .innerHeader {
        padding: 30px 0;
        margin-bottom: 20px;
    }
    .freelancChat  #search-form {
        width: 96%;
    }
    .titlesBanner h1{
        font-size: 38px;
    }
}

@media only screen and (max-width: 991px) {
    .navbar-toggler, .logo-mo {
        display: block !important;
    }
    .logo-mo img {
        width: 102px;
        height: auto;
    }
    .nav{
        display: none;
    }
    .navbar-light .navbar-toggler{
        border: none;
        box-shadow: none;
        cursor: pointer;
    }
    header> nav:first-child {
        padding: 10px 0;
    }
    .offcanvas.show {
        z-index: 11111;
    }
    .offcanvas-title{
        color: var(--main_color);
    }
    .proItem{
        margin: 0 0 25px 0;
    }
    .catCon h3 {
        min-height: 40px;
    }
    .marketing h3 {
        min-height: auto;
    }
    
    .display-5 {
        font-size: calc(1rem + 1.2vw);
    }
    .marketplace {
        padding: 40px 30px;
    }
    .ex-0 {
        margin-right: 0;
    }
    .ex-01 {
        top: 60px;
        right: -40px;
        width: 180px;
    }
    .ex-02 {
        bottom: 24px;
        width: 184px;
    }
    .videoSec {
        height: 295px;
    }
    .marketplace .up-img {
        right: 50px;
        width: 340px;
        bottom: -60px;
    }
    .h1, h1 {
        font-size: calc(1rem + 1.1vw);
    }
    .marketplace p, .marketplace ul, .marketplace .btn {
        font-size: 14px;
    }
    .marketplace .circle-01 {
        right: 5px;
    }
    .marketplace .circle-02 {
        right: 180px;
        bottom: 15px;
    }
    .innerHeader h2 {
        font-size: 24px;
    }
    .innerHeader .innerHeader-img {
        max-height: 245px;
    }
    .marketing {
        margin-top: 20px;
    }
    .freelancChat #search-form {
        width: 90%;
    }
    .shareSection .upload__btn-box .w-75{
        width: 100% !important;
        margin-left: 0 !important;
        margin-top: 10px;
    }
}

@media only screen and (max-width: 768px) {
    .category .cat{
        margin-bottom: 20px;
    } 
    .ex-02 {
        left: 60px;
    }
    .videoSec button img {
        width: 80px;
    }
    .videoSec button img {
        width: 80px;
    }   
    .testimonials h4 {
        font-size: 32px;
    } 
    footer .email{
        margin: 0 0 30px 0;
    }
    .marketplace .up-img{
        position: relative !important;
        right: 0;
        left: 0;
        width: 340px;
        bottom: -60px;
        margin: 0 auto;
        display: block;
    }
    .marketplace .circle-01 {
        background: #ffffffd9;
        right: 10px;
        bottom: -35px;
    }
    .marketplace .circle-02 {
        right: 210px;
        bottom: 35px;
    }
    .join .btn{
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }
    .contactForm {
        margin-top: 0;
    }
    .commentBg {
        min-width: 140px;
    }
    .msgParent .profile-img {
        width: 52px;
        height: 52px;
    }
    .msgParent ul li .profile-img {
        width: 32px;
        height: 32px;
    }
    .msgParent ul {
        margin: 20px 0 0 40px;
    }
    .msgParent ul li ul {
        margin: 20px 0 0 20px;
    }
    .reviewImgCon .border-start{
        border: none !important;
    }
    .reviewImgCon img{
        margin-left: 0 !important;
    }
    a.chatUs  {
       display: none;
    }
    #showProfile, #showChat{
        width: 100%;
        border-left: none;
        border-right: none;
    }
    .chatMobVersion .coBox {
        padding: 5px 25px 0 25px;
    }
    .freelancChat #search-form {
        width: 100%;
    }
    .chatMobVersion .contSearch {
        right: 30px;
        width: 89%;
    }
    .chatMobVersion .emailUseraName {
        font-size: 16px;
        color: #333;
    }
    #showChat .mesaggesCon {
        padding: 0;
    }
    #showChat .accordion-body {
        padding: 1rem 0;
    }
    #showChat .accordion-button {
        padding: .5rem 0;
    }
    #showChat .emailUserImgChat {
        width: 45px;
        height: 45px;
    }
    #showChat .emailUseraName {
        font-size: 16px;
    }
    #showChat .chatNames {
        height: auto;
    }
    #showChat.dropdown-menu.show {
        padding: 5px 10px;
        min-width: 125px;
    }
    #showChat .emailUseraName {
      color: #333;  
    }
    #showChat .msg {
        height: auto; 
    }
    #showChat .upload__img-box {
        width: 23%;
        padding: 0 5px;
    }
    #showChat .accordion-button[aria-expanded="false"] {
        opacity: .3;
    }
    .shareSection .imgVidUpload, .shareSection .upload__btn-box .w-75 {
        width: 100% !important;
    }
    .shareSection .upload__img-box {
        width: 81px;
        height: 81px;
        padding: 0 10px;
    }
    .shareSection .imgVidUpload .preview-item {
        height: 70px;
        width: 70px;
    }
    .postCommentForm  .w-25{
        width: 100% !important;
    }
    .shareSection .imgVidUpload .remove-button {
        left: 40px;
    }
    .scroll-tabs{
        width: 100%;
        overflow-x: auto;
    }
    .scroll-tabs ul.nav{
        width: max-content;
    }
    .nav-custom .tab-content{
        margin-top: 10px;
    }
}

@media only screen and (max-width: 575px) {
    .ex-02 {
        left: 0;
    }
    .videoSec .logoVideo {
        width: 120px;
    }
    .titlesBanner h1 {
        font-size: 28px;
    }
}

@media only screen and (max-width: 520px) {
    .headerSearch {
        width: 300px;
    }
    .headerSearch i{
        display: none;
    }
    .headerSearch input.form-control {
        padding: 15px 110px 15px 15px;
    }
    .chatMobVersion .contSearch {
        width: 86%;
    }
    .titlesBanner{
        width: 200px;
    }
    .titlesBanner p.fs-22{
        font-size: 15px !important;
    }
}

@media only screen and (max-width: 400px) {
    .marketplace .up-img {
        width: 240px;
    }
    .marketplace .circle-01, .marketplace .circle-02 {
        width: 120px;
        height: 120px;
    }
    .marketplace .circle-02 {
        right: 110px;
        bottom: 5px;
    }
    .marketplace .circle-01 {
        right: -5px;
    }
    .ex-01 {
        right: -20px;
    }
    .testimonials h4 {
        font-size: 25px;
    }
    .freelancChat #search-form {
        width: 96%;
    }
    
}