/* Hero */
.cfosj-hero{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    /* min-height: 700px; */
    font-size: 24px;
    color: var(--cfosj-cream);
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.5px;

    overflow: hidden;
    text-underline-offset: 10px;
    position: relative;
   }

.cfosj-hero::before{
   position: absolute;
   width: 50%;
   height: 100%;
   top: 0px;
   left: 0px;
   content: "";
   background-image: url("../images/SJCF_Graphics-03.svg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: initial;
   opacity: 0.8;
}

.cfosj-hero .hero-sub-title{
   font-family: 'Epilogue', sans-serif;
   font-size: 24px;
   font-weight: normal;
   font-stretch: normal;
   font-style: normal;
   line-height: normal;
   letter-spacing: 0.5px;
   color: var(--cfosj-cream);

}

.cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
   font-family: 'Epilogue', sans-serif;
   font-size: 83px;
   font-weight: bold;
   font-stretch: normal;
   font-style: normal;
   line-height: 0.95;
   letter-spacing: normal;
   color: #fff;
}


.cfosj-hero.elementor-section.elementor-section-boxed > .elementor-container {
   padding-top: 200px;
   padding-bottom: 70px;
}

@media screen and (max-width: 1800px) {
   .cfosj-hero.elementor-section.elementor-section-boxed > .elementor-container {
      padding-top: 110px;
      padding-bottom: 35px;
   }
 }


 @media screen and (max-width: 1270px) {
   .cfosj-hero::before{
      top: unset;
      bottom: -27px;
      left: -60px;
   }
 }

 @media screen and (max-width: 1100px) {
   .cfosj-hero::before{
      top: unset;
      bottom: -80px;
   }
   .cfosj-hero.elementor-section.elementor-section-boxed > .elementor-container {
      padding-top: 80px;
      padding-bottom: 20px;
   }
 }

 @media screen and (max-width: 996px) {
   .cfosj-hero::before{
      bottom: -46%;
      left: 0;
      height: 135%;
   }
 }

 @media screen and (max-width: 944px) {
   .cfosj-hero::before{
      /* bottom: -170px; */
   }
 }

 @media screen and (max-width: 900px) {
   .cfosj-hero::before{
      top: unset;
      bottom: -308px;
      left: 0;
      height: 141%;
      width: 52%;
      background-position: -190px;
   }
   .cfosj-hero{
      /* font-size: 18px; */
   }
   .cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
      /* font-size: 50px; */
   }
 }

 @media screen and (max-width: 880.5px) {
   .cfosj-hero .elementor-column.elementor-col-50{
      width: 100%;
   }

   .cfosj-hero::before{
      /* bottom: -140px; */
   }

   .cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
      /* font-size: 38px; */
   }

   .cfosj-hero a.elementor-button{
      line-height: 1.5rem;
   }
 }


 @media screen and (max-width: 810px) {
   .cfosj-hero::before{
      /* bottom: -50px; */
   }

 }

 @media screen and (max-width: 767px) {

   .cfosj-hero::before{
      bottom: 0;
      width: 100%;
      top: unset;
      background-position: top;
      height: 100%;
   }


   .cfosj-hero .elementor-column-gap-narrow>.elementor-column>.elementor-element-populated{
      padding-left: 0px;
      padding-right: 0px;
   }


 }

 @media screen and (max-width: 612px) {

   .cfosj-hero::before{
      width: 150%;
      top: unset;
      background-position: top;
      background-position-x: -190px;
      height: 100%;
      bottom: -10%;
      left: 0;
   }
 }

 @media screen and (max-width: 405px) {

   .cfosj-hero::before{
      width: 100%;
      background-position-x: -187px;
      height: 120%;
      bottom: -36%;
   }


   .cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
      font-size: 77px;
   }
 }


 @media screen and (max-width: 375px) {

   .cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
      font-size: 68px;
   }
 }

 @media screen and (max-width: 334px) {

   .cfosj-hero .elementor-widget-heading h1.elementor-heading-title{
      font-size: 48px;
   }
 }






/* home hero v2 */
.cfosj-home-hero .elementor-container .elementor-widget-wrap {
position: relative;

}

.cfosj-home-hero .elementor-container .elementor-widget-wrap::after{
   position: absolute;
   width: 50%;
   height: 100%;
   top: 0px;
   left: 0px;
   content: "";
   background-image: url("../images/SJCF_Graphics-03.svg");
   background-size: cover;
   background-repeat: no-repeat;
   background-position: initial;
   opacity: 0.8;
}






/* rev slider. add this class to the revslider module on rev slider. not on elementor. */
.cfosj-rev-slider{

}


.cfosj-rev-slider img.tp-rs-img.rs-lazyload{
   opacity: 0.8;
}

.cfosj-rev-slider .rs-layer.sub-title{
   font-family: 'Epilogue', sans-serif !important;
   /* font-size: 24px !important; */
   /* font-weight: normal !important;
   font-stretch: normal !important;
   font-style: normal !important;
   line-height: normal !important;
   letter-spacing: 0.5px !important; */
   color: var(--cfosj-cream) !important;
}


.cfosj-rev-slider .rs-layer.title{
   font-family: 'Epilogue', sans-serif !important;
   /* font-size: 83px !important; */
   font-weight: bold !important;
   font-style: normal !important;
   line-height: 0.95 !important;
   letter-spacing: normal !important;
   color: #fff !important;
   font-stretch: normal !important;
   /* white-space: normal !important; */

   /* width: 40% !important; */
}

/* rev slider button */
.cfosj-rev-slider rs-layer a.btn-theme{
   margin-top: 0px !important;
   background-color: var(--cfosj-cream) !important;
   color: var(--cfosj-black) !important;
   padding: 13px 41px 12px 42px !important;
   margin: 20px !important;
   margin-left: 0px !important;
   font-size: 16px !important;
   font-weight: bold !important;
   font-stretch: normal !important;
   font-style: normal !important;
   line-height: normal !important;
   letter-spacing: 1.5px !important;
   text-align: center !important;
   text-transform: none !important;
   position: relative !important;
   z-index: 9 !important;
   text-decoration: none !important;
   border: none !important;
   line-height: 2rem !important;
}

.cfosj-rev-slider rs-layer a.btn-theme::before
{

   background-color: var(--cfosj-cream)!important;

}

.cfosj-rev-slider rs-layer a.btn-theme:hover,
.cfosj-rev-slider rs-layer a.btn-theme:hover::before
{
   background-color: var(--cfosj-yellow) !important;
   color: var(--cfosj-black) !important;
}





/* cta */
.cfosj-rev-slider rs-layer a.btn-theme.cfosj-button-cta,
.cfosj-rev-slider rs-layer a.btn-theme.cfosj-button-cta::before
{
   background-color: var(--cfosj-black) !important;
   color: var(--cfosj-cream) !important;
}

.cfosj-rev-slider rs-layer a.btn-theme.cfosj-button-cta:hover,
.cfosj-rev-slider rs-layer a.btn-theme.cfosj-button-cta:hover::before
{
   background-color: var(--cfosj-purple) !important;
}



@media screen and (max-width: 991px) {
   .cfosj-rev-slider .rs-layer.title{
      /* white-space: nowrap; */
      /* font-size: 42px !important; */
   }   
}

@media screen and (max-width: 777px) {
   rs-module-wrap,
   .cfosj-rev-slider{
   }

   .cfosj-rev-slider img.tp-rs-img.rs-lazyload{
      /* width: 50% !important; */
   }

   .cfosj-rev-slider .rs-layer.title{
      /* font-size: 52px !important; */
      /* max-width: 350px !important; */
   }


   .cfosj-rev-slider rs-layer a.btn-theme{
      font-size: 12px !important;
      margin: 15px !important;
      margin-left: 0px !important;
      padding: 7px 21px 6px 22px !important;
   }
}

/* @media screen and (max-width: 480px) {
   .cfosj-rev-slider rs-layer a.btn-theme{
      font-size: 12px !important;
      margin: 15px !important;
      margin-left: 0px !important;
      padding: 7px 21px 6px 22px !important;
   }
} */