/* ---- Mix ---- */

.mzd {font-size: 80%; white-space: nowrap; text-transform: lowercase;}
.inner-banner-one h1 span.mzd {color: #fff; font-weight: 700; font-size: 60%; text-transform: lowercase;}
.bg-grey {background: #f2f2f2;}
.alert {border: 0; border-radius: 0;}

.kar-square {
   width: 50%;
   height: 100%;
   aspect-ratio: 1;
   position: absolute;
   right: -10%;
   bottom: 0;
   background-size: cover;
   background-position: 50% 50%;
   -webkit-clip-path: polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%);
   clip-path: polygon(28% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.kar-square:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .7;
  background: rgb(183,9,98);
  background: linear-gradient(324deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 20%, rgba(255,150,40,1) 54%, rgba(255,126,40,1) 100%);
  background: rgb(183,9,98);
  background: linear-gradient(352deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 12%, rgba(255,150,40,1) 44%, rgba(255,126,40,1) 100%);
  background: rgb(183,9,98);
  background: linear-gradient(184deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 19%, rgba(255,150,40,1) 60%, rgba(255,126,40,1) 100%);
  background: rgb(183,9,98);
  background: linear-gradient(202deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 19%, rgba(255,150,40,1) 60%, rgba(255,126,40,1) 100%);
}

.hero-banner-one .kar-square {width: 60%; height: 100%;}



/* ---- Hero ---- */
.hero-banner-one, .inner-banner-one {margin-top: -90px;}
.title-wrap {z-index: 1;} 

@media (max-width: 767px) {
  .kar-square {width: 65%; opacity: .8;
  }
  
}

/* ---- Right widget ---- */
.right-widget .btn-five {
    color: #fff;
    font-weight: 600;
    padding-right: 15px;
    margin-right: 15px;
    line-height: 14px;
}
.right-widget .btn-five:hover {opacity: .8;}
.main-header-fixed--pin .right-widget .btn-five:hover {opacity: 1; color: var(--kar-orange);}
.right-widget .btn-line {border-right: 1px solid rgba(255, 255, 255, 0.27);}



/*---- Search ----*/

.job-search-one .search-results {background: #fff; position: absolute; top: 98px; width: 77.2%; padding: 20px;}
.search-box {border-bottom: 1px solid #aaa; margin-bottom: 20px; padding-bottom: 10px;}
.job-search-one .search-results ul li {padding: 5px 0}
.job-search-one .search-results-jobs h4 {font-size: 18px; color:#222; font-weight: 500; line-height: 1.5; margin: 0 0 0px 0;}

.job-search-one  .jobitem-meta {
  margin: 0 0px 10px 0;
}
.job-search-one .search-results .jobitem-meta li {
  margin: 0 4px 5px;
  padding: 2px 4px;
  font-size: 12px;
  font-weight: 500;
  color: #222;
  background: rgb(184 184 184 / 10%);
}
.job-search-one .jobitem-meta li i {font-size: 11px;}
.job-search-one mark {background: #ddd;}

@media (max-width: 767px) {
  .job-search-one .search-results {top:130px;}
}

/* ---- Hero images ---- */

.bg-side {
    position: absolute;
    opacity: .8;
    right: -24%;
    bottom: 0;
    content: "";
    width: 60%;
    height: 81%;
    background: var(--deep-yellow);
    transform: rotate(-45deg);
    z-index: -1;
    background-size: cover;
}

.bg-side:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: .4;
  background: rgb(183,9,98);
  background: linear-gradient(324deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 20%, rgba(255,150,40,1) 54%, rgba(255,126,40,1) 100%);
  
  background: rgb(183,9,98);
  background: linear-gradient(352deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 12%, rgba(255,150,40,1) 44%, rgba(255,126,40,1) 100%);
  
}


/* ---- Aside ---- */

.categories ul li {font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #efefef;}
.categories ul li a {padding: 8px 0;}
.categories ul li a:hover, .categories ul li a:focus, .categories ul li.active {color: var(--kar-orange);}

/* ---- links ---- */
.link-primary {
    color: var(--kar-orange);
}

.link-primary:focus,.link-primary:hover {
    color: var(--text-color);
}
/* ----buttons ---- */

.btn-one {
  font-weight: 600;
  padding: 10px 28px;
  text-align: center;
  color: #fff;
  transition: all 0.3s ease-in-out 0s;
  text-transform: uppercase;
 
  background: rgb(183,9,98);
  background: linear-gradient(324deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 7%, rgba(255,150,40,1) 38%, rgba(255,126,40,1) 100%);
}
.btn-one.lg {
  padding: 16px 32px;
}

.btn-transparent .btn-one {background: transparent;}

.btn-one:hover {
  background: rgb(9, 74, 108);
  background: linear-gradient(148deg, rgba(9, 74, 108, 1) 0%, rgba(19, 41, 75, 1) 52%, rgba(69, 24, 55, 1) 100%);
  color: #fff;
}

.btn-one.invert-btn {
  background: rgb(9, 74, 108);
  background: linear-gradient(148deg, rgba(9, 74, 108, 1) 0%, rgba(19, 41, 75, 1) 52%, rgba(69, 24, 55, 1) 100%);
  color: #fff;
}

.btn-one.invert-btn:hover {
  background: rgb(183,9,98);
  background: linear-gradient(324deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 7%, rgba(255,150,40,1) 38%, rgba(255,126,40,1) 100%);
  color: #fff;
}

.btn-two {
  font-weight: 500;
  color: var(--kar-orange );
  position: relative;
  padding-right: 12px;
  border-bottom: 2px solid var(--kar-orange );
  transition: all 0.3s ease-in-out 0s;
}
.btn-two:hover {
  color: var(--kar-orange );
  letter-spacing: 0.2px;
}
.btn-two:after {
  border-bottom: 2px solid var(--kar-orange );
  border-right: 2px solid var(--kar-orange );
  content: "";
  display: block;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: rotate(-45deg);
  transition: all 0.15s ease-in-out;
  height: 8px;
  width: 8px;
}

.btn-three {
  font-weight: 500;
  padding: 13px 26px;
  text-align: center;
  border: 1px solid var(--kar-orange);
  transition: all 0.3s ease-in-out 0s;
}
.btn-three:hover {
  background: var(--kar-orange);
  color: #fff;
}

.btn-four {
  font-weight: 500;
  font-size: 14px;
  padding: 6px 20px;
  min-width: 150px;
  text-align: center;
  border:1px solid var(--kar-orange );
  border-radius: 0;
  transition: all 0.3s ease-in-out 0s;
}
.btn-four:hover {
  border-color: #222;
}


.btn-six {
  font-weight: 500;
  padding: 15px 26px;
  min-width: 150px;
  text-align: center;
  border-radius: 6px;
  color: var(--kar-cyan);
  background: var(--kar-orange );
  transition: all 0.3s ease-in-out 0s;
}
.btn-six:hover {
  background: var(--kar-cyan);
  color: #fff;
}



/* ---- Titles ---- */

.title-style-one .upper-title {
  font-size: 16px;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 2px;
  padding-bottom: 10px;
}
.title-style-one .title {
  font-weight: 800;
  text-transform: uppercase;
  font-size: 60px;
  line-height: 1.16em;
  margin-bottom: 0;
}
.title-style-one.white-vr .title {color: #fff;}

.title-style-one .title span:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--red-one);
  left: 0;
  bottom: 2px;
}
.title-style-two .title {
  
  font-weight: normal;
  font-size: 48px;
  line-height: 1.25em;
  font-weight: 800;
}
.title-style-two .title span {
  color: var(--red-one); 
  position: relative;
  display: inline-block;
}
.title-style-two .title span:before {
  content: '';
  position: absolute;
  width: 98%;
  height: 3px;
  background: var(--red-one);
  left: 2px;
  bottom: 4px;
}
.title-style-three .title {
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
}
.title-style-three .title span {
  color: var(--red-one); 
  position: relative;
  display: inline-block;
}

.title-style-four .title {
  
  font-size: 58px;
  line-height: 1.24em;
  margin-bottom: 0;
}

.pretitle {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: 600;
}

/*Grid lg Start*/
@media (max-width: 1199px) {
  .text-lg {font-size: 19px;}
  .title-style-one .title {font-size: 40px;}
  .title-style-two .title,.title-style-six .title {font-size: 42px;}
  .title-style-three .title {font-size: 38px;}
  .title-style-four .title {font-size: 42px;}
}


@media (max-width: 767px) {
  .text-lg {font-size: 18px;}
  .title-style-one .title {font-size: 33px;}
  .title-style-two .title,.title-style-six .title {font-size: 33px;}
  .title-style-three .title {font-size: 30px;}
  .title-style-four .title {font-size: 33px;}
}

/* ---- Breadcrumbs ---- */




/* ---- Share icons ---- */

.share-icon li:first-child {
  font-weight: 500;
  color: var(--text-color);
}
.share-icon a, .share-icon button {
  width: 38px;
  height: 38px;
  line-height: 38px;
  border-radius: 50%;
  background: #EEEDED;
  text-align: center;
  color: #000;
  font-size: 16px;
  margin-left: 10px;
  transition: all 0.2s ease-in-out 0s;
}
.share-icon a:hover, .share-icon button:hover {
  background: var(--kar-orange);
  color: #fff;
}


.jobitem-icon i {font-size: 28px;}
.job-search-one .tags li a:hover {
  color: #fff;
}

.fancy-banner-one img {width: 400px;}
.job-search-one .tags.tagcloud li a {
  background: #0f3d5e;
  color: #fff;
  transition: all 0.2s ease-in-out 0s;
  padding: 1px 10px; 
  border-radius: 4px;
  margin: 0 5px 5px 0;
  font-weight: 500;
}
.job-search-one .tags.tagcloud li a:hover {
  background: var(--kar-orange);
}

/* -- filter  -- */
.filter-area-tab .filter-block.bottom-line h4 {text-transform: uppercase; font-weight: 700; font-size: 13px;}

@media (min-width: 1400px){
.filter-area-tab .light-bg {
    margin-right: -3rem;
  }
}


/* -- banner three -- */
.fancy-banner-three .bg-wrapper {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 1;
}
.fancy-banner-three .bg-wrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 21.24%, rgba(0, 0, 0, 0.65) 90.88%);
  opacity: 0.5;
  z-index: -1;
}
.fancy-banner-three .bg-wrapper::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  background: linear-gradient(269.96deg, rgba(0, 0, 0, 0.74) 1.09%, rgb(96 31 0 / 50%) 58.13%, rgba(0, 0, 0, 0) 99.96%);
  z-index: -1;
}
.fancy-banner-three .bg-wrapper .text-wrapper {
  padding: 85px 55px 90px 0;
}
.fancy-banner-three .bg-wrapper .text-wrapper .video-icon {
  width: 65px;
  height: 65px;
  color: #fff;
  font-size: 40px;
  padding-left: 5px;
  background: #00BF58;
}
.fancy-banner-three .bg-wrapper .text-wrapper .video-icon:hover {
  background: var(--kar-orange );
  color: var(--kar-cyan);;
}
.fancy-banner-three .bg-wrapper .bottom-content {
  padding: 25px 40px 45px;
}
.fancy-banner-three .bg-wrapper .bottom-content:after {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  position: absolute;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(7.5px);
          backdrop-filter: blur(7.5px);
}
.fancy-banner-three .bg-wrapper .bottom-content .count {
  width: 35px;
  height: 35px;
  font-size: 18px;
  background: #00BF58;
}
.fancy-banner-three .bg-wrapper .bottom-content .text {
  width: calc(100% - 35px);
}
.fancy-banner-three .bg-wrapper .bottom-content .text a {
  font-size: 12px;
  letter-spacing: 1px;
  color: #00BF58;
}
.fancy-banner-three .bg-wrapper .bottom-content .text a:hover {
  text-decoration: underline;
}

/* -- banner four -- */

.fancy-banner-four .bg-wrapper {
  background: var(--kar-orange);
}
.fancy-banner-four .bg-wrapper .text-wrapper {
  padding: 80px 90px 100px 65px;
}
.fancy-banner-four .bg-wrapper .text-wrapper .find-job-btn {
  border: 1px solid #fff;
  border-radius: 30px;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out 0s;
}
.fancy-banner-four .bg-wrapper .text-wrapper .find-job-btn:hover {
  background: var(--kar-cyan);;
  border-color: var(--kar-cyan);;
}
.fancy-banner-four .bg-wrapper .img-meta {
  background: no-repeat center top;
  background-size: cover;
  height: 100%;
}
.fancy-banner-four .bg-wrapper .img-meta .screen_01 {
  right: -12%;
  bottom: -22%;
  width: 61%;
  max-width: 380px;
}

/* -- partner slider -- */

.feedback-section-one .slick-arrow-one {
  position: absolute;
  right: 0;
  top: 70px;
}

.feedback-block-one {
  background: #fff;
  padding: 0 0 0 50px;
  transition: all 0.25s ease-in-out 0s;
  position: relative;
}
.feedback-block-one .name {font-weight: 800; font-size: 20px;}
.feedback-block-one .name span {display: block; font-weight: 400; font-size: 15px;}
.feedback-block-one .icon {position: absolute; left: 0; top:-3px; font-size: 40px; color: var(--kar-orange);}

.feedback-block-one .logo {
  width: 200px;
}

.feedback-block-one .logo img {
  max-height: 60px;
}
.feedback-block-one .quote {
  font-size: 18px;
  line-height: 1.3888em;
  color: #222;
}
.feedback-block-one .review {
  border-top: 2px solid #000;
}
.feedback-block-one .review ul li a {
  font-size: 15px;
  color: #000;
  margin-left: 5px;
}


/* -- front top jobs no image -- */ 

.card-style-five {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  min-height: 140px;
}
.card-style-five:before {
  content: "";
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 0;
  z-index: -1;
  position: absolute;
  transition: all 0.2s ease-in-out 0s;
  background: rgb(183, 9, 98) !important;
  background: linear-gradient(131deg, rgba(183, 9, 98, 1) 0%, rgba(254, 19, 30, 1) 20%, rgba(255, 150, 40, 1) 54%, rgba(255, 126, 40, 1) 100%) !important;
}
.card-style-five:hover:before {
  height: 100%;
}
.card-style-five .title {
    font-size: 16px;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 700;
    margin: 3px 0 8px;
    width: 90%;
}

.card-style-five ul li {color: #fff; margin-right: 10px; font-size: 14px;}

.card-style-five .icon {position: absolute; right: 20px; color:#fff;}

/* -- front top jobs -- */

.hotjobs-section .slider-arrows {
  position: absolute;
  right: 0;
  top: 22px;
}

.card-style-six {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
  height: 350px;
}
.card-style-six:before {
  content: "";
  width: 100%;
  height: 80%;
  bottom: 0;
  left: 0;
  z-index: -1;
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  transition: all 0.2s ease-in-out 0s;
  background: linear-gradient(353deg, rgb(0 0 0 / 87%) 1.09%, rgb(96 31 0 / 49%) 58.13%, rgba(0, 0, 0, 0) 99.96%);
}
.card-style-six:hover:before {
  height: 100%;
}
.card-style-six .title {
    font-size: 17px;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 700;
    margin: 3px 0 8px;
    width: 90%;
}

.card-style-six ul li {color: #fff; margin-right: 10px; font-size: 14px;}

.slick-arrow-one {
  margin-left: -2px;
  margin-right: -2px;
}
.slick-arrow-one li {
  cursor: pointer;
  display: block;
  width: 50px;
  height: 50px;
  color: #000;
  text-align: center;
  line-height: 50px;
  font-size: 22px;
  transition: all 0.2s ease-in-out 0s;
  background: var(--kar-pink);
  color:#fff;
  margin-left: 5px;
  
}
.slick-arrow-one li:hover {
  background: var(--kar-orange);
}



/*------ Header one triangle  --------*/
#triangle2 {
  position: absolute;
  bottom: 0;
  right: -15%;
  width: 25%;
  height: 35%;
  background-size: cover;
  background-position: 30% 20%;
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 120% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 120% 100%);
 z-index: -1;
}

#triangle2:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  background: rgb(183,9,98);
  background: linear-gradient(324deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 20%, rgba(255,150,40,1) 54%, rgba(255,126,40,1) 100%);
  
  background: rgb(183,9,98);
  background: linear-gradient(352deg, rgba(183,9,98,1) 0%, rgba(254,19,30,1) 12%, rgba(255,150,40,1) 44%, rgba(255,126,40,1) 100%);
  
}

.bg-triangle {
   position: absolute;
   right: -20%;
   top: -28%;
   content: "";
   width: 70%;
   height: 53%;
   background: rgb(183, 9, 98);
   background: linear-gradient(352deg, rgba(183, 9, 98, 1) 0%, rgba(254, 19, 30, 1) 12%, rgba(255, 150, 40, 1) 44%, rgba(255, 126, 40, 1) 100%);
   transform: rotate(38deg);
   z-index: -1;
}


/* ---- Avatar ---- */
.user-avatar .image img {width: 50px; border: 2px solid var(--kar-orange); border-radius: 50%; padding: 4px;}
.user-avatar .name h4 {font-size: 16px; font-weight: 700; margin-bottom: 0}
.user-avatar .name span.date {font-size: 12px; text-transform: uppercase; font-weight: 600; line-height: 1;}

.user-avatar.blog-view .image img {width: 40px; border-width: 1px; padding: 2px;}
.user-avatar.blog-view .name {line-height: 1;}
.user-avatar.blog-view .name h4 {font-size: 15px; line-height: 1;}
.user-avatar.blog-view .name span {font-size: 11px; text-transform: uppercase; font-weight: 600; line-height: 1;}

.user-avatar-contacts {font-size: 18px;}
.user-avatar-contacts a:hover {color: var(--kar-orange);}


/* ---- Job View ---- */

.job-header .kar-square {
  width: 50%;
  -webkit-clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
  clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
 
}
.job-header .kar-square:before {
  background: rgb(183,9,98);
  background: linear-gradient(229deg, rgba(183,9,98,1) 32%, rgba(254,19,30,1) 75%, rgba(255,150,40,1) 94%, rgba(255,126,40,1) 100%);
  background: rgb(183,9,98);
  background: linear-gradient(229deg, rgba(183,9,98,1) 13%, rgba(254,19,30,1) 29%, rgba(255,150,40,1) 91%, rgba(255,126,40,1) 100%);
  opacity: 1;
  
}

.job-header .jobitem-meta li {
  margin: 0 2px 5px;
  line-height: 25px;
  padding: 3px 14px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(0 0 0 / 71%);
  background: rgb(184 184 184 / 10%);
}
.job-header .jobitem-meta li.tag {
  font-size: 14px;
  padding: 1px 14px;
  font-weight: 500;
  background: var(--kar-teal);
  color: #fff;
}
.job-header .jobitem-meta li.teaser {
  background: var(--kar-teal);
  color: #fff;
}
.job-header .jobitem-meta li.student {
  background: var(--kar-lightpink);
  color: #fff;
}

.job-header .job-basic-info {color: #fff; font-size: 16px; font-weight: 400;}
.job-header .job-basic-info span {text-transform: uppercase; font-size: 11px; letter-spacing: 2px; font-weight: 600;}
.job-header .user-avatar,.job-header .user-avatar .name h4 {color: #fff;}
.job-header .user-avatar .image img {border-color: #fff;}
.job-header .user-avatar-contacts  {color: #fff; font-weight: 500;}
.job-header .user-avatar-contacts li a {font-size: 18px; padding: 1px 0;}
.job-header .user-avatar-contacts li i {vertical-align: middle;}
.job-header .user-avatar-contacts li a:hover {color: #222;}
.job-header .user-avatar-contacts li.text-lg a {font-size: 22px;}

.job-info-wrap {z-index: 1;}

.job-header .pay-info span {font-size: 12px;}
.job-header .pay-info .pay-neto {font-weight: 700;}
.job-header .pay-info .pay-divider {margin: 0px 10px}

@media (max-width: 767px) {

  
  .job-header .kar-square {
    -webkit-clip-path: polygon(55% 0%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(55% 0%, 100% 0%, 100% 100%, 0% 100%);
  }
  
}

/* -- Job bullets -- */

.job-details .post-block ul {
	list-style: none;
	padding-left: 0;}
.job-details .post-block li {
  position: relative;
  font-size: 16px;
  margin-top: 0px;
  padding-left: 30px;
  line-height: 1.682em;
  font-weight: 500;
}
.job-details .post-block li:first-child {
  margin-top: 12px;
}
.job-details .post-block li:before {
  content: "\f058";
  font-family: Font Awesome\ 6 Pro;
  position: absolute;
  left: 0;
  top: 0;
  color: var(--kar-orange);
  font-weight: 400;
  font-size: 15px;
}

.job-highlights ul {list-style: none; margin-left: 25px; padding: 0;}
.job-highlights ul li {font-size: 22px; position: relative; font-weight: 400; color: var(--kar-text);}
.job-highlights ul li:before {
    content: "\e09f";
    font-family: Font Awesome\ 6 Pro;
    position: absolute;
    left: -23px;
    top: 3px;
    color: var(--kar-orange);
    font-weight: 400;
    font-size: 20px;
}
.job-logo {margin-bottom: 30px;}
.job-logo img {max-width: 200px;}

.job-sidebar .share-icon {border-top: 1px solid #efefef; padding-top: 20px;}
.job-sidebar #urlToCopy {height: 0px; text-indent: -2000px; opacity: 0;}
.job-sidebar #copyResult {visibility: hidden; font-size: 13px; padding: 2px 4px; background: var(--kar-cyan); color: #fff;}
.job-sidebar #copyResult.active {visibility: visible;}

/* ---- Cards ---- */

.card-box {
  display: block; 
  position: relative;
  min-height: 200px;
  height: 100%;
  background: rgb(9, 74, 108);
  background: linear-gradient(148deg, rgba(9, 74, 108, 1) 0%, rgba(19, 41, 75, 1) 52%, rgba(69, 24, 55, 1) 100%);
  padding: 20px;
  overflow: hidden;
}
.card-box-info {width: 50%;}
.card-box h2 {
  color: #fff;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.card-box .kar-square {
  width: 52%;
  right: 0;
  height: 100%;}
  
.card-box:hover {opacity: .9;}
.card-box:hover .kar-square {right: -.5%;}

@media (min-width: 991px) {
    .card-box h2 {
        font-size: 24px;
    }
    .card-box-info {width: 60%;}
    .card-box .kar-square { width: 35%;}
}

/* ---- Team cards ---- */

.team-section .kar-square {width: 65%; opacity: .3;}
.team-cards-wrap {position: relative; z-index: 1;}
.team-card .person-name h2 {
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  text-transform: uppercase;
}
.team-card .person-name .position {font-size: 13px; line-height: 1.1;}
.team-card ul li {font-size: 13px; font-weight: 500;}
.team-card ul li i {vertical-align: middle; color: var(--kar-orange);}
.team-card ul li a:hover, .team-card ul li a:focus {color: var(--kar-orange);}
/*-- Inner cards  --*/
.inner-card {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 25px 35px 20px;
}
.inner-card.border-style {
  border: 1px solid #DEDEDE;
  position: relative;
  border-radius: 15px;
  padding: 35px 35px 20px;
}
.inner-card.border-style .title {
  position: absolute;
  background: #fff;
  padding: 0 10px;
  top: -18px;
  left: 25px;
  z-index: 1;
}
/*------ Job info timeline --------*/
.time-line-data .info {
  padding: 0 0 45px 65px;
}
.time-line-data .info:before {
  content: "";
  position: absolute;
  left: 22px;
  top: 66px;
  bottom: 7%;
  width: 1px;
  background: #E1E1E1;
}
.time-line-data .info:last-child {
  padding-bottom: 0;
}
.time-line-data .info:last-child::before {
  display: none;
}
.time-line-data .info .numb {
  width: 45px;
  height: 45px;
  color: var(--kar-teal);
  border: 1px solid var(--kar-teal);
  position: absolute;
  left: 0;
  top: 3px;
}
.time-line-data .info .text_1 {
  font-size: 14px;
  color: var(--kar-teal);
}
.time-line-data .info h4 {
  font-size: 18px;
  
  margin: 5px 0 12px;
}



/* ----  Job register ---- */

/* -- job-apply-info-- */

.job-apply-info .jobitem-info span {text-transform: uppercase; font-weight: 700; font-size: 10px; letter-spacing: 2px;}

/* -- Forms-- */
.userforms-section {background: #f2f2f2;}

.userforms-section .border-15 {
  border-radius: 15px;
}
.userforms-section .border-20 {
  border-radius: 20px;
}
.userforms-section .border-30 {
  border-radius: 30px;
}
.userforms-section .register-area {
  padding: 45px 60px 50px;
}
.userforms-section .register-area .userarea-user-basicinfo i {font-size: 40px;}


.form-section-title {border-bottom: 1px solid #eaeaea; margin: 20px 0 20px;}
.form-section-title h3 {font-size: 14px; text-transform: uppercase; font-weight: 800;}

.userforms-section .dash-title-three {
  
  font-size: 24px;
  color: var(--kar-cyan);
  margin: 0 0 30px;
}
.userforms-section .dash-btn-one {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.15px;
  color: var(--kar-cyan);
  border-radius: 7px;
  line-height: 40px;
  padding: 0 15px;
  min-width: 135px;
  text-align: center;
  background: rgba(63, 99, 77, 0.2);
  transition: all 0.2s ease-in-out 0s;
}
.userforms-section .dash-btn-one i {
  font-size: 1.5em;
  font-weight: bold;
  vertical-align: -5px;
  margin-right: 2px;
}
.userforms-section .dash-btn-one:hover {
  background: var(--kar-cyan);
  color: #fff;
}
.userforms-section .dash-btn-one input[type=file] {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.userforms-section .dash-btn-two {
  font-weight: 500;
  color: #fff;
  min-width: 125px;
  text-align: center;
  padding: 0 15px;
  line-height: 45px;
  border-radius: 50px;
  background: #13294B;
}
.userforms-section .dash-btn-two:hover {
  background: #FF4F00;
  color: #13294B;
}
.userforms-section .dash-cancel-btn {
  font-weight: 500;
  color: var(--kar-cyan);
}
.userforms-section .dash-cancel-btn:hover {
  color: #13294B;
}
.userforms-section .dash-input-wrapper label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-color );
  margin-bottom: 8px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 2px;
}
.userforms-section .dash-input-wrapper .alert-text {
  font-size: 14px;
  letter-spacing: -0.14px;
  color: rgba(0, 0, 0, 0.5);
}
.userforms-section .dash-input-wrapper input {
  width: 100%;
  height: 45px;
  letter-spacing: -0.16px;
  border: 1px solid #222;
  padding: 0 20px;
}

.userforms-section .dash-input-wrapper textarea {
  border: 1px solid #222222;
  border-radius: 0px;
  padding: 15px 20px;
  max-width: 100%;
  width: 100%;
  resize: none;
}
.userforms-section .dash-input-wrapper textarea.size-lg {
  height: 230px;
  max-height: 200px;
}
.userforms-section .dash-input-wrapper .nice-select {
  height: 55px;
  line-height: 55px;
  letter-spacing: -0.16px;
  border: 1px solid #E5E5E5;
  border-radius: 7px;
  padding: 0 25px 0 20px;
}
.userforms-section .dash-input-wrapper .nice-select .option {
  line-height: 38px;
}
.userforms-section .dash-input-wrapper .map-frame {
  height: 290px;
  border-radius: 8px;
  overflow: hidden;
}
.userforms-section .dash-input-wrapper .location-pin {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 60px;
  opacity: 0.18;
}
.userforms-section .dash-input-wrapper .location-pin:hover {
  opacity: 1;
}
.userforms-section .dash-input-wrapper .attached-file {
  height: 60px;
  width: 100%;
  border-radius: 10px;
  background: #EDF2F7;
  padding: 0 20px;
}
.userforms-section .dash-input-wrapper .attached-file span {
  font-size: 14px;
}
.userforms-section .dash-input-wrapper .attached-file .remove-btn {
  font-size: 22px;
  font-weight: 700;
  color: var(--kar-cyan);
}
.userforms-section .dash-input-wrapper .attached-file .remove-btn:hover {
  color: #ff5b5b;
}
.userforms-section .dash-input-wrapper .info-text {
  font-size: 14px;
}
.userforms-section .dash-input-wrapper .info-text p {
  color: rgba(0, 0, 0, 0.5);
}
.userforms-section .dash-input-wrapper .info-text p a {
  color: var(--kar-cyan);
}
.userforms-section .dash-input-wrapper .info-text p a:hover {
  text-decoration: underline;
}
.userforms-section .dash-input-wrapper .info-text .chng-pass {
  color: var(--kar-cyan);
  text-decoration: underline;
}
.userforms-section .dash-input-wrapper .skill-input-data {
  margin: 0 -3px;
}
.userforms-section .dash-input-wrapper .skill-input-data button {
  font-size: 12px;
  font-weight: 500;
  margin: 10px 3px 0;
  padding: 0 14px;
  height: 25px;
  background: rgba(49, 121, 90, 0.1);
  border-radius: 30px;
  transition: all 0.2s ease-in-out 0s;
}
.userforms-section .dash-input-wrapper .skill-input-data button:hover {
  background: #13294B;
  color: #fff;
}

.userforms-section .dash-input-wrapper input[type=file] {
  height: 0;
  overflow: hidden;
  width: 0;
  border: 0;
  padding: 0;
}

.userforms-section .dash-input-wrapper input[type=file] + label {
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  outline: none;
  padding: 14px 20px;
  height: 45px;
  position: relative;
  transition: all 0.3s;
  vertical-align: middle;
  width: 98%;
}
.userforms-section .dash-input-wrapper input[type=file] + label:hover {
  background-color: var(--kar-orange);
}

.userforms-section .dash-input-wrapper input[type=file] + label.btn-3 {
  background-color: var(--kar-cyan);
  border-radius: 0;
  overflow: hidden;
  text-align: center;
}
.userforms-section .dash-input-wrapper input[type=file] + label.btn-3 span {
  display: inline-block;
  height: 100%;
  transition: all 0.3s;
  width: 100%;
}
.userforms-section .dash-input-wrapper input[type=file] + label.btn-3::before {
  color: #fff;
  content: "\f093";
  font-family: "Font Awesome 6 Pro";
  font-weight: 400;
  font-size: 130%;
  height: 100%;
  left: 0;
  line-height: 2.6;
  position: absolute;
  top: -180%;
  transition: all 0.3s;
  width: 100%;
}
.userforms-section .dash-input-wrapper input[type=file] + label.btn-3:hover {
  background-color: var(--text-color);
}
.userforms-section .dash-input-wrapper input[type=file] + label.btn-3:hover span {
  transform: translateY(300%);
}
.userforms-section .dash-input-wrapper input[type=file] + label.btn-3:hover::before {
  top: 0;
}

.legalinfo {font-size: 14px;}

/* -- user area  -- */

.userarea-userinfo-data h3 {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 20px;
}
.userarea-userinfo-data .user-info li {font-size: 22px; margin-bottom: 15px;}
.userarea-userinfo-data .user-info li span {
display: block;
font-size: 11px;
font-weight: 500;
color: var(--text-color );
margin-bottom: 0px;
text-transform: uppercase;
font-weight: 700;
letter-spacing: 2px;
}


.dash-input-wrapper span.comment {
    font-size: 11px;
    margin-bottom: 10px;
    display: block;
}

.dash-input-wrapper span#filename {
    font-size: 12px;
    margin-bottom: 10px;
    display: block;
    word-break: break-word;
    padding: 3px;
    background: #efefef;
}

/* -- select2 job register -- */

.job-register .select2-container--bootstrap-5 .select2-selection--single{
  height: 45px;
  letter-spacing: -0.16px;
  border: 1px solid #222;
  padding: 10px 20px;
}

.dash-input-wrapper .select2-container--bootstrap-5.select2-container--focus .select2-selection,
.dash-input-wrapper .select2-container--bootstrap-5.select2-container--open .select2-selection, 
.dash-input-wrapper .select2-container--bootstrap-5 .select2-selection  {
    min-height: 45px;
    letter-spacing: -0.16px;
    border: 1px solid #222;
    padding: 10px 20px;
}

.select2-container--bootstrap-5 .select2-selection {}

/* ---- inner styling ---- */
.blog-details-meta p.excerpt {font-size: 22px; font-weight: 600; line-height: 1.5;}
.content-inner h2 {text-transform: uppercase; font-size: 24px; font-weight: 800; line-height: 1.3; margin: 60px 0 8px 0;}
.content-inner h3 {text-transform: uppercase; font-size: 20px; font-weight: 800; letter-spacing: .5px; line-height: 1.3; margin: 30px 0 8px 0;}
.content-inner h3 strong {font-weight: 800; letter-spacing: .1px;}
.content-inner h4 {text-transform: uppercase; font-size: 18px; font-weight: 600; line-height: 1.3; margin: 30px 0 8px 0;}

.content-inner p {font-size: 18px;}
.content-inner p.par-big {font-size: 130%;}
.content-inner p.par-small {font-size: 90%;}
.content-inner p.par-highlight {background: #434343; color: #fff; padding: 15px; margin: 20px -15px;}
.content-inner p.par-alternative {border-top: 2px solid #ff4d00; border-bottom: 2px solid #ff4d00; padding: 10px 0;}
.content-inner p.par-comment {background: #ff4d00; padding: 20px; color: #fff;  float: right; width: 30%; margin: 10px;}
.content-inner .fr-class-highlighted {background: #ffd3bf;}
.content-inner a {color: var(--kar-orange); font-weight: 600; display: inline;}
.content-inner a:hover {color: var(--kar-pink);}
.content-inner ul li {font-size: 18px; margin-bottom: 6px;}



.boost-template {
  background: #eeeded;
  padding: 10px 20px;
  margin: 0 -20px 20px -20px;}
  


  
@media (max-width: 767px) {
  .content-inner p.par-comment {width: 100%;}
}

.content-inner table {width: 100%; margin-bottom: 40px; background: #f2f2f2;}
.content-innertr:nth-child(odd) td, tr:nth-child(odd) td { background: #f8f8f8; }
.content-inner thead tr td, .content-inner thead tr th {
  color: #333;
  border-right: 1px solid #efefef;
  padding: 10px 15px;
}
.content-inner tr td {padding: 10px 15px; font-size: 16px; border-bottom: 1px solid #fff;}
.content-inner tr th p,.content-inner tr td p {margin-bottom: 0; font-size: 16px; line-height: 1.4;}

.content-inner tr td.cell-bg { background: linear-gradient(148deg, rgba(9, 74, 108, 1) 0%, rgba(19, 41, 75, 1) 52%, rgba(69, 24, 55, 1) 100%); color:#fff; font-weight: 600;}

.content-inner .fr-img-caption {display: inline-block; text-align: left;}
.content-inner .fr-img-caption img {margin-bottom: 4px;}
.content-inner .fr-img-caption .fr-inner {border-bottom: 1px dashed #fff; font-size: 15px; padding: 2px 0; display: block;}

blockquote {
    margin: 10px 10px 40px 80px;
    padding: 0 20px;
    border-left: 4px solid #ff4d00;
    font-size: 24px;
}
.content-inner blockquote p {font-size: 24px; line-height: 1.3; color: #ff4d00;}
.content-inner {margin-bottom: 40px;}
/*------ content images -----------*/

.fr-img-caption .fr-img-wrap {
    padding: 0;
    display: inline-block;
    width: 100%;
    margin: auto;
}

.content-inner img.fr-dii.fr-fir {
    float: right;
    margin: 5px 0 5px 5px;
    max-width: calc(100% - 5px);
}

.content-inner img.fr-dii.fr-fil {
    float: left;
    margin: 5px 15px 5px 0;
    max-width: calc(100% - 5px);
}

.content-inner .fr-img-caption.fr-dii.fr-fil {
    float: left;
    margin: 5px 25px 5px 0;
    max-width: calc(100% - 5px);
}

.content-inner .fr-img-caption.fr-dii.fr-fir {
    float: left;
    margin: 5px 5px 5px 0;
    max-width: calc(100% - 5px);
}

.content-inner .fr-file:before {
    position: relative;
    font-family: FontAwesome;
    content: "\f15c";
    font-weight: 400;
    margin-right: 5px;
    font-size: 15px;
}

/*---- Files ----*/
.content-files ul {list-style: none; padding: 0; margin: 0;}
.content-files ul li {padding: 2px 0;}
.content-files ul li a {font-size: 18px; font-weight: 500; color: #222; letter-spacing: 0;}
.content-files ul li a:hover {color: #888;}
.content-files ul li a i {color: var(--kar-pink);}
.content-files ul li span {font-size: 14px;}
.content-files ul li a span.file {font-size: 11px;}

/*---- Contact ----*/

.contact-section h3 {font-weight: 700; text-transform: uppercase; font-size: 24px;}
.contact-section h4 {font-weight: 700; text-transform: uppercase; font-size: 16px;}
.contact-section p a  {
    color: var(--kar-orange);
}

.contact-section p a:focus,.contact-section p a:hover {
    color: var(--text-color);
}

/*---- Daktela ----*
#daktela-web.dw-design-tint-DARK .dw-header, #daktela-web.dw-design-tint-LIGHT .dw-header {
  background: rgb(183, 9, 98) !important;
  background: linear-gradient(324deg, rgba(183, 9, 98, 1) 0%, rgba(254, 19, 30, 1) 20%, rgba(255, 150, 40, 1) 54%, rgba(255, 126, 40, 1) 100%) !important;
}
#daktela-web .dw-header {
    padding: 14px 20px 10px 20px !important;
}
#daktela-web .dw-body {box-shadow: none !important;}
#daktela-web.dw-design-button-BOOKMARK .dw-body {min-height: 44px !important;}

/* ---- Optius ---- */

@media (min-width: 768px) {
    .optius .container {
        max-width: 920px;
    }
}