/*
Mobile first approach
*/
.navbar-area .nav-container .responsive-mobile-menu {
    top: 1rem;
}
.project-category-item{padding: 10px;}
.single-project-thumb img {
    border-radius: 7px;
    height: 12rem;
    width: 100%;
    object-fit: cover;
}

.shop-close-content.active {
    left: auto;
    right: 0;
    background: #e5e2f1;
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px){
  .single-project-thumb img {
    height: 21rem;
}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.single-project-thumb img {
    height: 21rem;
}
.project-category-item{padding: 24px;}
}

/*
=====================================
*/
@media only screen and (max-width: 575.98px)
.navbar-area .nav-container.bg-white {
    margin: 0px 12px 24px 12px;
}
@media only screen and (max-width: 575px)
.navbar-area .nav-container {
    padding: 8px 0px 30px 0px !important;
}



@media (min-width: 300px) and (max-width: 991.98px)
.click-nav-right-icon {
    position: absolute;
    left: 6px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 24px;
    color: rgba(0, 0, 0, 0.6);
    display: block;
}
@media only screen and (max-width: 991.98px)
.navbar-area .navbar-toggler {
    position: absolute;
    left: 50px;
    top: 50%;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    border: 1px solid rgba(0, 0, 0, 0.7);
    outline: none;
}
@media screen and (max-width: 991.98px)
.pat-100 {
    padding-top: 20px !important;
}
.single-project-orderCompleted{display: none;}

@media only screen and (max-width: 991.98px)
.navbar-area .navbar-toggler {
    right: auto !important;
    left: 2.5rem;
}
@media (min-width: 300px) and (max-width: 991.98px)
.click-nav-right-icon {
    right: auto !important;
    left: 0.5rem;
}

.ts-videostyle{
  max-width: 100%;
    min-height: 60vh;
    object-fit: cover;
    border-radius: 1rem;
}

.project-preview-thumb.mt-4{display:none;}

/* Order prject details page */
@media screen and (max-width: 767px) {
      .row{
        display:flex;
        flex-direction: column;
        flex-flow: row wrap;

    }
  div.project-preview{
    order: 1;
  }
.container.bg-white.nav-container {
    direction: ltr;
    padding-bottom: 3.2rem !important;
}
.show-nav-content.show {
    margin-top: 10px;
  	margin-bottom: -2rem;
  }
  .navbar-area .navbar-toggler {
  	right:auto;
  	left: 1rem;
  }
  .click-nav-right-icon{
  	right:auto;
  	left: 5rem;
  }
}
.splide__pagination{bottom: -1em !important;}
body{overflow: auto !important;}

.custom_pagination .pagination {
    justify-content: normal;
    gap: 0.5rem;
    display: inline-flex;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    height: 3.2rem;
}
@media screen and (max-width: 767px){
.navbar-right-notification .navbar-right-notification-wrapper.active {
  transform: translateX(-44%) !important;
}
.bookmark-wrap.active {
    transform: translateX(2%) !important;
}
.shop-icon::after {
    content: "تصفية النتائج";
    position: relative;
    right: 3rem;
    top: -2rem;
}
  .shop-icon-sidebar {
    margin-bottom: 0rem;
    margin-top: -3rem;
}
}
.navbar-author-wrapper {
    left: auto;
    right: 0;
}
.login-right-contents.text-white {
    width: 85%;
}
.single-project-content-title>a{
    font-family: var(--body-font);
    font-size: 1.2rem;
}
.breadcrumb-contents-title, .single-freelancer-author-name, .project-preview-contents-title, .project-preview-head-title{
  font-family: var(--body-font);
}

@media (min-width: 300px) and (max-width: 991.98px){
.profile-settings-menu-inner {
    left: auto !important;
}
}
@media screen and (max-width: 767px){
.col-xxl-3.col-lg-6.col-sm-6.col-md-4{
  width:50% !important;    margin-bottom: 1rem;
  }
.profile-settings-area.pat-100.pab-100.section-bg-2 {
    margin-top: 0;
    padding-top: 2rem !important;
}
}
.single-profile-settings-header-title{font-family: var(--body-font);}
.jobFilter-proposal-author-thumb img {
    border-radius: 50%;
    object-fit: cover;
    width: 4rem;
    height: 4rem;
}
.jobFilter-proposal-author-thumb {
    width: auto;
}
.absolute.top-0.right-0.bg-white.p-1.rounded-full a {
	position: relative;
    top: 5rem;
    right: 1rem;
    font-size: 2rem;
    color: #ddcdcd;
    background: #252525a8;
    border-radius: 1rem;
    padding: 0.2rem 1rem;
}
div#upload-project-videos_container{
  background: #eee;
  border-radius: 1rem;
  padding: 3rem;
}
div#upload-project-videos_container button{
  width: 100%;
  margin-top: 1rem;
}
.ts-layer, .ts-layer:hover{
    display: block;
    position: absolute;
    height: 21rem;
    background: url(https://manage.ugceer.com/tugclog.jpg);
    background-position: center;
    background-size: cover;
    width: 20%;
    border-radius: 0.5rem;
    opacity: 0.5;
}
@media screen and (max-width: 1078px){
.ts-layer, .ts-layer:hover{
  	display: block;
    position: absolute;
    height: 21rem;
    background: url(https://manage.ugceer.com/tugclog.jpg);
    background-position: center;
    background-size: cover;
    width: 24%;
    border-radius: 0.5rem;
      opacity: 0.5;
}
}
@media screen and (max-width: 767px){
.ts-layer{
  display:block;
  	position: absolute;
    height: 12rem;
    background:url(https://manage.ugceer.com/tugclog.jpg) ;
  	background-position:center;
  	background-size: cover;
    width: 36%;
    border-radius: 0.5rem;
      opacity: 0.5;
  }
}
@media screen and (max-width: 395px){
.ts-layer{
  display:block;
  	position: absolute;
    height: 12rem;
    background:url(https://manage.ugceer.com/tugclog.jpg) ;
  	background-position:center;
  	background-size: cover;
    width: 41%;
    border-radius: 0.5rem;
      opacity: 0.5;
  }
}

.navbar-nav{padding: 1rem;}
.navbar-collapse{margin-top: 1rem;}
ul.navbar-nav li a{font-weight: 700;}