/* this is the class og the whole section. not only the inner section on the left that is called sub-hero-grid */
.cfosj-sub-hero{

}


/* section on the right but as a stand alone */
.cfosj-sub-hero .sub-hero-grid{
}

/* section on the right but WITH class right-side so it can have some specific rules when its's as as right column element */
.cfosj-sub-hero .sub-hero-grid.right-side{
}

.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .content-inner .title a{
   font-family: 'Epilogue', sans-serif;
   font-weight: 600;
   font-stretch: normal;
   font-style: normal;
   line-height: 1;
   letter-spacing: normal;
   color: var(--cfosj-black);
}

.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .content-inner .title a:hover{
   color: var(--cfosj-yellow);
}

.elementor .cfosj-sub-hero.elementor-element .gsc-heading h2.title {
   font-family: 'Epilogue', sans-serif;
   font-size: 32px;
   font-weight: 600;
   font-stretch: normal;
   font-style: normal;
   line-height: 1.11;
   letter-spacing: normal;
   color: #fff;
}

.elementor .cfosj-sub-hero.elementor-element .gsc-heading .heading-icon{
   display: none;
}

.elementor-4004 .elementor-element.elementor-element-1dda056.column-bg-skew-right{
   padding-right: 80px;
}

.elementor-4004 .elementor-element.elementor-element-f706961 > .elementor-widget-container{
   padding-top: 100px;
}


/* .elementor-4004 .elementor-element.elementor-element-8fa1383 .gsc-icon-box-styles.style-1 .icon-inner::before,  */
.elementor .sub-hero-grid .gsc-icon-box-styles.style-1:before, .elementor .sub-hero-grid .gsc-icon-box-styles.style-1:after,
.elementor-4004 .elementor-element.elementor-element-8fa1383 .gsc-icon-box-styles.style-1 .icon-inner::after
{
   content: none;
}

.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner{
   height: 243px;
   width: 100%;
   padding: 0;
}

.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .content-inner{
   text-align: left;
}

/* .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner:before, */
.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner:after{
   content: none;
}

/* .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner a::after */
.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner::before
{
   /* background: var(--cfosj-coral); */
   content: "";
   position: absolute;
   display: block;
   width: 100%;
   height: 100.5%;
   /* bottom: -0.5px; */
   /* height: 100%; */
   bottom: 0;
   top: unset;
   left: 0;
   z-index: 10;
   clip-path: polygon(0 0, 40% 0, 25% 100%, 0% 100%);
   opacity: 0.8;
}


/* .elementor .sub-hero-grid .elementor-column.elementor-inner-column.column-top:nth-child(2n) .gsc-icon-box-styles.style-1 .icon-inner a::after{
   background: var(--cfosj-purple);
}
.elementor .sub-hero-grid .elementor-column.elementor-inner-column.column-top:nth-child(3n) .gsc-icon-box-styles.style-1 .icon-inner a::after{
   background: var(--cfosj-yellow);
} */

.elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner .icon img{
   object-fit: cover;
   width: 100%;
   height: 100%;
}


.elementor .sub-hero-grid .elementor-column-gap-default>.elementor-column>.elementor-element-populated{
   padding: 10px 10px;
}


/* .elementor .sub-hero-grid .elementor-column.elementor-col-33:nth-of-type(3n+1) .elementor-element-populated{
   padding-left: 0px;
}

.elementor .sub-hero-grid .elementor-column.elementor-col-33:nth-of-type(3n) .elementor-element-populated{
   padding-right: 0px;
} */

@media screen and (max-width: 1024px) {
.elementor .sub-hero-grid > .elementor-element-populated,
.elementor-4004 .elementor-element.elementor-element-85579cd > .elementor-element-populated
{
   /* padding: 0px 15px 0px 15px; */
   /* padding: 30px 15px; */
   padding: 30px 0px;
}

.elementor .sub-hero-grid .elementor-column-gap-default>.elementor-column>.elementor-element-populated{
   padding: 15px;
}

}

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

   /* .elementor .sub-hero-grid .elementor-column-gap-default>.elementor-column>.elementor-element-populated{
      padding: 10px 0px;
   } */

   .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner{
      padding: 0;

      /* height: auto;
      max-width: 450px; */
  
      height: 400px;
      width: 100%;
 
      

   }

   .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .icon-inner .icon img{
      /* max-height: 332px; */
   }

   .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .content-inner{
      /* text-align: center; */
      
      max-width: 450px;
      position: relative;
      display: block;
      margin: 0 auto;
   
   }

   .elementor .sub-hero-grid .gsc-icon-box-styles.style-1 .content-inner .title{
      text-align: left;
   }


 }