/* team carousel */
/* .team-block.team-v2.text-light:hover */


.cfosj-team .team-block.team-v2:hover .team-image .socials-team{
   display: flex;
   height: 100%;
   background-color: var(--cfosj-coral);
   opacity: 0.8;
   align-items: center;
   justify-content: center;

   /* to remove the black gradient effect */
   background: none;
   /* to add a default overlay in case theres a more specific match like turqouise, tomato etc */
   background-color: var(--cfosj-black);

}

.cfosj-team .team-block.team-v2:hover .team-image .socials-team.cfosjcream{
   /* background-color: #0071bc; */
   background-color: var(--cfosj-cream);
}

.cfosj-team .team-block.team-v2:hover .team-image .socials-team.turquoise,
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.cfosjblue
{
   /* background-color: #0071bc; */
   background-color: var(--cfosj-blue);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.tomato,
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.cfosjcoral
{
   /* background-color: #f44c4b; */
   background-color: var(--cfosj-coral);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.goldenrod,
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.cfosjyellow
{
   /* background-color: #ffa800; */
   background-color: var(--cfosj-yellow);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.violet{
   /* background-color: #9610ad; */
   background-color: var(--cfosj-purple);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.brown{
   /* background-color: #ffa800; */
   /* background-color: #1a1a1a; */
   background-color: var(--cfosj-black);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.pink{
   /* background-color: #f44c4b; */
   background-color: var(--cfosj-coral);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.green{
   /* background-color: #0071bc; */
   background-color: var(--cfosj-blue);
}
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.purple,
.cfosj-team .team-block.team-v2:hover .team-image .socials-team.cfosjpurple
{
   /* background-color: #9610ad; */
   background-color: var(--cfosj-purple);
}

/* team list names hover effect */
.team-block.team-v2 .team-name:hover, .team-block.team-v2 .team-name a:hover{
   color: var(--cfosj-black);
}
.team-block.team-v2.brown .team-name:hover, .team-block.team-v2.brown .team-name a:hover,
.team-block.team-v2.cfosjblack .team-name:hover, .team-block.team-v2.cfosjblack .team-name a:hover
{
   color: var(--cfosj-yellow);
}

.elementor-element.cfosj-team .team-block.team-v2 .team-image .socials-team a{
   font-size: 24px;
   color: #fff;
}

.elementor-element.cfosj-team .team-block.team-v2 .bg-overlay .bg-overlay-1{
   height: 99%;
}
/*  */

.cfosj-team i.fa{
   display: inline-block;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   
   font: normal normal normal 24px/1 FontAwesome;
   font-size: 24px;
   /* font-family: "Font Awesome 5 Brands"; */
}

.fa.fa-facebook:before{
   content: "\f09a" !important;
}


/* icons color */
.elementor .elementor-element.cfosj-team .team-block.team-v2 .team-image .socials-team a{
   font-size: 24px;
   color: #fff;
}
/* icons color on hover */
.elementor .elementor-element.cfosj-team .team-block.team-v2 .team-image .socials-team a:hover{
   color: var(--cfosj-yellow);
}


.elementor .elementor-element.cfosj-team .team-block.team-v2 .team-image .socials-team.socials-team.goldenrod a:hover,
.elementor .elementor-element.cfosj-team .team-block.team-v2 .team-image .socials-team.socials-team.cfosjyellow a:hover
{
   color: var(--cfosj-purple);
}

.owl-carousel .owl-nav > div, .owl-carousel .owl-nav > div::before{
   background-color: var(--cfosj-yellow);
}

.owl-carousel .owl-nav > div:hover, .owl-carousel .owl-nav > div:hover::before{
   background-color: var(--cfosj-coral);
}

/* cfosj-team */
.cfosj-team img,
.cfosj-team .owl-carousel .owl-item img
{
   width: 100% !important;
}




/* team bio
*
* 
*/
.cfosj-team-single .cfosj-team-name-job{
   position: relative;
   text-align: center;


   display: flex;
   justify-content: left;
   flex-direction: row;
   align-items: center;
   flex: 1;
}

.cfosj-team-single .cfosj-team-name-job.on-mobile{
   display: none;
   width: 300px;
}

.cfosj-team-single .cfosj-team-name-job.on-mobile .child-left{
   width: 100%;
}

/* show the name and job section beneath image if is  mobile screen size */
 @media screen and (max-width: 767px) {
   .cfosj-team-single .cfosj-team-name-job{
      display: none;
   }
   .cfosj-team-single .cfosj-team-name-job.on-mobile{
      display: flex;
   }
 }


@media screen and (max-width: 992px) {
   .cfosj-team-single .cfosj-team-name-job{
      margin: 10px 0;
   }
 }

.cfosj-team-single .cfosj-team-name-job .child-left{
   position: relative;
}

.cfosj-team-single .cfosj-team-name-job .pink.bg-overlay {
   /* background: #F2752E; */
   background-color: var(--cfosj-coral);
}


.cfosj-team-single .cfosj-team-name-job .bg-overlay-1 {
   position: absolute;
   height: 100%;
   top: 0;
   left: 0;
   right: 40px;
   z-index: 1;
   background: inherit;
}

.cfosj-team-single .cfosj-team-name-job .bg-overlay-2 {
   position: absolute;
   display: block;
   height: 100%;
   top: 0;
   left: 0;
   right: 22px;
   z-index: 1;
   background: inherit;
   -webkit-transform-origin: bottom left;
   transform-origin: bottom left;
   -webkit-transform: skew(-12deg, 0deg);
   transform: skew(-12deg, 0deg);
   -webkit-transition: all 0.35s;
   transition: all 0.35s;
   -moz-transition: all 0.35s;
   -ms-transition: all 0.35s;
}


.cfosj-team-single .cfosj-team-name-job .team-content-inner {
   position: relative;
    z-index: 2;
    padding: 25px 10px;
}

.cfosj-team-single .cfosj-team-name-job .team-content-inner .team-name, .cfosj-team-single .cfosj-team-name-job .team-content-inner .team-job{
   color: #fff;
   font-family: 'Epilogue', sans-serif;
   line-height: 1.3;
   padding: 0 2em;
}
.cfosj-team-single .cfosj-team-name-job .team-content-inner .team-job{
   text-transform: uppercase;
}

.single-gva_team .socials a i.fa{
   font-family: inherit;
   font-weight: 400;
   display: inline-block;
   font-size: inherit;
   text-rendering: auto;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font: normal normal normal 14px/1 FontAwesome;
   padding: 9px;
}

.cfosj-team-single .team__progress-bar, 
.cfosj-team-single .team-progress-wrapper .team__progress .team__progress-bar, 
.cfosj-team-single .team-progress-wrapper .team__progress .team__progress-bar .percentage{
   background: var(--cfosj-yellow);
}
.cfosj-team-single .team-progress-wrapper .team__progress .team__progress-bar .percentage::after{
border-top-color: var(--cfosj-yellow);
}

.team-block-single .heading:after{
   background: var(--cfosj-yellow);
}

/* case studies / portfolio
*
*
*/
/* .portfolio-v1:active .images a.link, .portfolio-v1:focus .images a.link */

.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .images a.link,
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:active .images a.link,
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:focus .images a.link
{
   opacity: 0;
}

.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .images a.link-image-content::after,
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:active .images a.link-image-content::after,
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:focus .images a.link-image-content::after
{
   /* background-color: var(--cfosj-coral); */
}


/* make the images always same size */
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1 .images img{
   height: 351px;
   object-fit: cover;
   width: 100%;
}

@media screen and (max-width: 767px) {
   .elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1 .images img
   {
      /* height: auto; */
      height: 277px;
      object-fit: cover;
      width: 100%;
      max-height: 329px;
   }
 }

 .elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1 .images a.link-image-content:after{
    content: none;
 }

/* , .portfolio-v1:active .content-inner, .portfolio-v1:focus .content-inner */
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .content-inner{
   display: flex;
   height: 100%;
   /* opacity: 0.8; */
   opacity: 1;
   align-items: flex-start;
   justify-content: space-between;
   flex-direction: column;
   background-color: unset;
   /* background-color: var(--cfosj-coral); */
   /* clip-path: polygon(0 0, 79% 0, 56% 100%, 0% 100%); */
}

.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .content-inner::before{
   background-color: var(--cfosj-coral);
   clip-path: polygon(0 0, 79% 0, 56% 100%, 0% 100%);

   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100.5%;
   bottom: -1px;
   left: -1px;
   /* z-index: 10; */
   z-index: -1;
   /* clip-path: polygon(0 0, 40% 0, 25% 100%, 0% 100%); */
   /* opacity: 1; */
   opacity: 0.8;
}

.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .content-inner .title, 
.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1:hover .content-inner .category{
   width: 100%;
   padding: 10px 0;
   font-family: 'Epilogue', sans-serif;
   font-weight: 600;
   font-stretch: normal;
   font-style: normal;
   line-height: 1;
   letter-spacing: normal;
   color: #fff;

}

.elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1 .content-inner .title a{
   font-size: 32px;
   /* margin-top: 65px; */
   padding-top: 90px;
 }
 .elementor-element .elementor-widget-container .gva-element-gva-portfolio .portfolio-v1 .content-inner .category a{
   color: #fff;
 }




 /* accordion 
 *
 *
 *
 *
 *
 */

 .elementor-accordion .elementor-accordion-item .elementor-tab-title.elementor-active{
   background-color: var(--cfosj-coral) !important;
}