/*!**********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./components/blocks/ons-process/styles/src/ons-process.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************************/
:root{
  --spacing-m:clamp(10rem, 35vh, 20rem);
  --spacing-s:calc(var(--spacing-m)/2);
  --col-default:content;
  --col-full:1 / -1;
  --col-left:full-width-start / center-start;
  --col-right:center-start / content-end;
  --col-right-extended:center-start / -1;
  --border-radius-l:10rem;
  --border-radius-ml:6rem;
  --border-radius-m:4rem;
  --border-radius-s:2rem;
  --border-l:0 0 var(--border-radius-l) 0;
  --border-ml:0 0 var(--border-radius-ml) 0;
  --border-m:0 0 var(--border-radius-m) 0;
  --border-s:0 0 var(--border-radius-s) 0;
  --ease-smooth:cubic-bezier(0.5, 0.05, 0, 1);
}

[data-wp-router-region=content].is-loading{
  opacity:.7;
  pointer-events:none;
  position:relative;
  transition:opacity .3s ease-in-out;
}

[data-wp-router-region=content].is-loading:after{
  background:hsla(0,0%,100%,.8);
  bottom:0;
  content:"";
  left:0;
  position:absolute;
  right:0;
  top:0;
  z-index:4;
}

.footer__menu a.is-active,.footer__sub-menu a.is-active,.header__menu a.is-active{
  font-weight:700;
  position:relative;
}

.footer__menu a.is-active:after,.footer__sub-menu a.is-active:after,.header__menu a.is-active:after{
  background-color:currentColor;
  bottom:-4px;
  content:"";
  height:2px;
  left:0;
  position:absolute;
  right:0;
}

.footer__menu a,.footer__sub-menu a,.header__menu a{
  transition:all .2s ease-in-out;
}

.footer__menu a:hover,.footer__sub-menu a:hover,.header__menu a:hover{
  opacity:.8;
}

.ons-process{
  --column:var(--col-full);
  display:grid;
  gap:2rem;
  grid-auto-rows:1fr;
  grid-template-columns:repeat(auto-fit, minmax(25rem, 1fr));
}

.ons-process-item{
  min-height:35rem;
  overflow:hidden;
  position:relative;
}
.ons-process-item:before{
  background:linear-gradient(0deg, #09372e, rgba(9,55,46,0));
  height:60%;
  transition:transform .6s var(--ease-smooth), opacity .6s var(--ease-smooth);
}
.ons-process-item:after,.ons-process-item:before{
  bottom:0;
  content:"";
  display:block;
  left:0;
  position:absolute;
  width:100%;
  z-index:1;
}
.ons-process-item:after{
  background-color:var(--color-green);
  height:100%;
  opacity:0;
  transition:opacity .6s var(--ease-smooth);
}
.ons-process-item .indicator{
  background:url(/wp-content/themes/apicem/assets/img/number-shape.svg);
  background-position:0 100%;
  background-repeat:no-repeat;
  background-size:cover;
  color:#fff;
  display:grid;
  font-family:Literata,serif;
  font-size:clamp(2rem, 6vw, 3rem);
  font-variation-settings:"wght" 300;
  height:6rem;
  line-height:.95;
  place-items:center;
  position:absolute;
  right:0;
  top:0;
  transform-origin:top right;
  transition:transform .6s var(--ease-smooth);
  width:8rem;
  z-index:3;
}
.ons-process-item .indicator span{
  transform:translate(21px, -5px);
}
.ons-process-item:last-of-type{
  border-radius:var(--border-m);
}
.ons-process-item .wp-block-image{
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%;
}
.ons-process-item .wp-block-image img{
  border-radius:0;
  height:100%;
  width:100%;
}
.ons-process-item .wp-block-group{
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:end;
  padding:6rem 2rem 2rem;
  position:relative;
  transition:transform .5s var(--ease-smooth);
  z-index:2;
}
.ons-process-item .wp-block-heading{
  color:#fff;
  margin-bottom:2rem;
  transition:color .5s var(--ease-smooth);
}
.ons-process-item p{
  color:#fff;
  margin:0;
}
.ons-process-item:focus:after,.ons-process-item:hover:after{
  opacity:1;
}
.ons-process-item:focus .wp-block-group,.ons-process-item:hover .wp-block-group{
  transform:none !important;
}
.ons-process-item:focus .wp-block-heading,.ons-process-item:hover .wp-block-heading{
  color:var(--color-gold);
}
.ons-process-item:focus .indicator,.ons-process-item:hover .indicator{
  transform:scale(.7);
}

/*! Add Soul */
/*# sourceMappingURL=ons-process.css.map*/