/** Shopify CDN: Minification failed

Line 22:12 Unexpected "{"
Line 22:21 Expected ":"
Line 22:27 Unexpected "{"
Line 35:12 Unexpected "{"
Line 35:21 Expected ":"
Line 35:27 Unexpected "{"
Line 61:12 Unexpected "{"
Line 61:21 Expected ":"
Line 62:12 Unexpected "{"
Line 62:21 Expected ":"
... and 38 more hidden warnings

**/
/*==============================================================
  WEEKLY PRESS PROCESS
  PART 2A-1
  Global Variables • Reset • Header • SVG • Wrapper
==============================================================*/

#wpprocess-{{ section.id }}{
  background:var(--wp-bg);
  position:relative;
  overflow:hidden;
  padding:100px 0;
  isolation:isolate;
  z-index:0;
}

/*==============================================================
ROOT VARIABLES
==============================================================*/

#wpprocess-{{ section.id }}{

  --wp-container:1320px;

  --wp-radius:22px;

  --wp-transition:.35s ease;

  --wp-shadow:0 12px 35px rgba(0,0,0,.08);

  --wp-shadow-hover:0 20px 55px rgba(0,0,0,.14);

  --wp-gap:42px;

  --wp-card-width:290px;

  --wp-card-padding:34px;

  --wp-line-width:8px;

}

/*==============================================================
RESET
==============================================================*/

#wpprocess-{{ section.id }} *,
#wpprocess-{{ section.id }} *:before,
#wpprocess-{{ section.id }} *:after{

  box-sizing:border-box;

}

#wpprocess-{{ section.id }} img{

  display:block;

  max-width:100%;

  height:auto;

}

#wpprocess-{{ section.id }} svg{

  display:block;

}

#wpprocess-{{ section.id }} a{

  text-decoration:none;

  color:inherit;

}

#wpprocess-{{ section.id }} h1,
#wpprocess-{{ section.id }} h2,
#wpprocess-{{ section.id }} h3,
#wpprocess-{{ section.id }} h4,
#wpprocess-{{ section.id }} h5,
#wpprocess-{{ section.id }} h6,
#wpprocess-{{ section.id }} p{

  margin:0;

}

#wpprocess-{{ section.id }} ul{

  margin:0;

  padding:0;

  list-style:none;

}

/*==============================================================
PAGE WIDTH
==============================================================*/

#wpprocess-{{ section.id }} .page-width{

  max-width:var(--wp-container);

  margin:auto;

  position:relative;

}

/*==============================================================
HEADER
==============================================================*/

.wpprocess-header{

  max-width:760px;

  margin:0 auto 90px;

  text-align:center;

  position:relative;

  z-index:2;

}

/*==============================================================
SUB HEADING
==============================================================*/

.wpprocess-subheading{

  display:flex;

  align-items:center;

  justify-content:center;

  gap:16px;

  margin-bottom:22px;

}

.wpprocess-subheading span{

  width:55px;

  height:2px;

  background:var(--wp-heading);

  opacity:.25;

}

.wpprocess-subheading p{

  font-size:13px;

  font-weight:700;

  letter-spacing:.25em;

  text-transform:uppercase;

  color:var(--wp-heading);

}

/*==============================================================
HEADING
==============================================================*/

.wpprocess-heading{

  font-size:52px;

  line-height:1.15;

  font-weight:700;

  color:var(--wp-heading);

  margin-bottom:24px;

}

.wpprocess-heading strong{

  font-weight:700;

}

/*==============================================================
DESCRIPTION
==============================================================*/

.wpprocess-description{

  font-size:18px;

  line-height:1.8;

  color:var(--wp-text);

  opacity:.85;

}

.wpprocess-description p{

  margin-bottom:14px;

}

.wpprocess-description p:last-child{

  margin-bottom:0;

}

/*==============================================================
PROCESS WRAPPER
==============================================================*/

.wpprocess-flow{

  position:relative;

  width:100%;

  min-height:760px;

  margin:auto;

  overflow:visible;

}

/*==============================================================
SVG SNAKE
==============================================================*/

.wpprocess-svg-line{

  position:absolute;

  left:0;

  top:0;

  width:100%;

  height:760px;

  z-index:0;

  pointer-events:none;

  color:var(--wp-line);

}

.wpprocess-svg-line path{

  stroke:currentColor;

  stroke-width:var(--wp-line-width);

  fill:none;

  stroke-linecap:round;

  stroke-linejoin:round;

}

/*==============================================================
PROCESS GRID
==============================================================*/

.wpprocess-grid{

  position:relative;

  width:100%;

  height:760px;

  z-index:1;

}

/*==============================================================
DEFAULT CARD
(Desktop positions come in Part 2A-2)
==============================================================*/

.wpprocess-card{

  position:absolute;

  width:var(--wp-card-width);

  transition:all var(--wp-transition);

}

.wpprocess-card:hover{

  z-index:3;

}

/*==============================================================
CARD INNER
==============================================================*/

.wpprocess-card-inner{

  position:relative;

  background:var(--wp-card);

  border-radius: 20px;

  padding:var(--wp-card-padding);

  box-shadow:var(--wp-shadow);

  transition:all var(--wp-transition);

}

.wpprocess-card:hover .wpprocess-card-inner{

  transform:translateY(-8px);

  box-shadow:var(--wp-shadow-hover);

}

/*==============================================================
STEP NUMBER
==============================================================*/

.wpprocess-step-number{

  position:absolute;

  width:52px;

  height:52px;

  border-radius:50%;

  background:var(--wp-circle);

  color:var(--wp-circle-text);

  display:flex;

  align-items:center;

  justify-content:center;

  font-size:18px;

  font-weight:700;

  z-index:4;

  box-shadow:0 8px 20px rgba(0,0,0,.15);

}

/*==============================================================
ICON
==============================================================*/

.wpprocess-icon{

  width:90px;

  height:90px;

  margin:0 auto 24px;

  display:flex;

  align-items:center;

  justify-content:center;

}

.wpprocess-icon-image{

  width:90px;

  height:90px;

  object-fit:contain;

}

/*==============================================================
CONTENT
==============================================================*/

.wpprocess-content{

  text-align:center;

}

.wpprocess-title{

  font-size:22px;

  font-weight:700;

  line-height:1.3;

  color:var(--wp-heading);

  margin-bottom:16px;

}

.wpprocess-text{

  font-size:15px;

  line-height:1.75;

  color:var(--wp-text);

}

/*==============================================================
  PART 2A-2A
  DESKTOP POSITIONING (STEPS 1–4)
==============================================================*/

@media screen and (min-width: 991px){

  /*============================================================
    DESKTOP WRAPPER
  ============================================================*/

  .wpprocess-flow{
    min-height: 820px;
  }

  .wpprocess-grid{
    position: relative;
    width: 100%;
    height: 820px;
  }

  .wpprocess-svg-line{
    height: 820px;
  }

  /*============================================================
    COMMON CARD
  ============================================================*/

  .wpprocess-card{
    width: 285px;
    position: absolute;
    z-index: 1;
  }

  .wpprocess-card-inner{
    min-height: 245px;
  }

  .wpprocess-card:hover{
    z-index: 3;
  }

  .wpprocess-card:hover .wpprocess-card-inner{
    transform: translateY(-8px);
  }

  /*============================================================
    STEP NUMBER
  ============================================================*/

  .wpprocess-step-number{
    width: 56px;
    height: 56px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50%;
  }

  /*============================================================
    STEP 1
  ============================================================*/

  .wpprocess-card--1{
    top: 18px;
    left: 4%;
  }

  .wpprocess-card--1 .wpprocess-step-number{
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*============================================================
    STEP 2
  ============================================================*/

  .wpprocess-card--2{
    top: 18px;
    left: 30%;
  }

  .wpprocess-card--2 .wpprocess-step-number{
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*============================================================
    STEP 3
  ============================================================*/

  .wpprocess-card--3{
    top: 18px;
    left: 55%;
    /* left: 676px; */
  }

  .wpprocess-card--3 .wpprocess-step-number{
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*============================================================
    STEP 4
  ============================================================*/

  .wpprocess-card--4{
    top: 18px;
    right: 3%;
  }

  .wpprocess-card--4 .wpprocess-step-number{
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
  }

  /*============================================================
    ICON ALIGNMENT
  ============================================================*/

  .wpprocess-icon{
    width: 82px;
    height: 82px;
    margin: 0 auto 22px;
  }

  .wpprocess-icon-image{
    width: 82px;
    height: 82px;
    object-fit: contain;
  }

  /*============================================================
    CONTENT
  ============================================================*/

  .wpprocess-content{
    text-align: center;
  }

  .wpprocess-title{
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 14px;
  }

  .wpprocess-text{
    font-size: 15px;
    line-height: 1.75;
  }

}

/*==============================================================
  PART 2A-2B
  DESKTOP POSITIONING (STEPS 5–7)
  SECOND ROW ALIGNMENT
==============================================================*/

@media screen and (min-width: 991px){

  /*============================================================
    STEP 5
    (Bottom Right)
  ============================================================*/

  .wpprocess-card--5{
    position:absolute;
top: 390px;
        left: 18%;
  }

  .wpprocess-card--5 .wpprocess-step-number{
    top:-28px;
    left:50%;
    transform:translateX(-50%);
  }

  /*============================================================
    STEP 6
    (Bottom Center)
  ============================================================*/

  .wpprocess-card--6{
    position:absolute;
    top: 390px;
    left: 46%;
    transform:translateX(-50%);
  }

  .wpprocess-card--6 .wpprocess-step-number{
    top:-28px;
    left:50%;
    transform:translateX(-50%);
  }

  /*============================================================
    STEP 7
    (Bottom Left)
  ============================================================*/

  .wpprocess-card--7{
    position:absolute;
    top: 390px;
    right: 8%;
  }

  .wpprocess-card--7 .wpprocess-step-number{
    top:-28px;
    left:50%;
    transform:translateX(-50%);
  }

  /*============================================================
    CARD SPACING
  ============================================================*/

  .wpprocess-card{
    will-change:transform;
    transition:
      transform .35s ease,
      box-shadow .35s ease,
      opacity .35s ease;
  }

  .wpprocess-card-inner{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-direction: row;
        align-items: center;
        height: 100%;
        padding: 16px;
  }

  /*============================================================
    ICON
  ============================================================*/

  .wpprocess-icon{
    flex:0 0 auto;
  }

  .wpprocess-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  /*============================================================
    TITLE
  ============================================================*/

  .wpprocess-title{

    color:var(--wp-heading);

    font-size:22px;

    font-weight:700;

    line-height:1.3;

    margin-bottom:14px;

  }

  /*============================================================
    DESCRIPTION
  ============================================================*/

  .wpprocess-text{

    color:var(--wp-text);

    font-size:15px;

    line-height:1.75;

  }

  .wpprocess-text p:last-child{
    margin-bottom:0;
  }

  /*============================================================
    HOVER EFFECT
  ============================================================*/

  .wpprocess-card:hover .wpprocess-card-inner{

    transform:translateY(-10px);

    box-shadow:
      0 24px 60px rgba(0,0,0,.14);

  }

  .wpprocess-card:hover .wpprocess-step-number{

    transform:
      translateX(-50%)
      scale(1.08);

  }

  .wpprocess-step-number{

    transition:
      transform .35s ease,
      background .35s ease;

  }

  .wpprocess-icon-image{

    transition:
      transform .35s ease;

  }

  .wpprocess-card:hover .wpprocess-icon-image{

    transform:scale(1.08);

  }

  /*============================================================
    SVG LAYER
  ============================================================*/

  .wpprocess-svg-line{

    z-index:0;

  }

  .wpprocess-grid{

    z-index:1;

  }

  /*============================================================
    KEEP CARDS ABOVE SVG
  ============================================================*/

  .wpprocess-card{

    z-index:1;

  }

  /*============================================================
    FEATURE SECTION SPACING
    (Part 2B will style the feature cards)
  ============================================================*/

  .wpprocess-feature-area{

    margin-top:90px;

    position:relative;

    z-index:2;

  }

}

/*==============================================================
  PART 2B-1
  BOTTOM FEATURE SECTION
==============================================================*/

.wpprocess-feature-area{
  position: relative;
  margin-top: 110px;
  z-index: 2;
}

.wpprocess-feature-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}

/*==============================================================
FEATURE CARD
==============================================================*/

.wpprocess-feature-item{
  position: relative;
  background: var(--wp-card);
  border-radius: 22px;
  padding: 40px 35px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: all .35s ease;
  text-align: center;
  height: 100%;
}

.wpprocess-feature-item:hover{
  transform: translateY(-10px);
  box-shadow: 0 25px 55px rgba(0,0,0,.12);
}

/*==============================================================
TOP BORDER
==============================================================*/

.wpprocess-feature-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: var(--wp-circle);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}

.wpprocess-feature-item:hover::before{
  transform: scaleX(1);
}

/*==============================================================
ICON WRAPPER
==============================================================*/

.wpprocess-feature-icon{
  width: 95px;
  height: 95px;
  margin: 0 auto 25px;
  border-radius: 50%;
  background: rgba(22,52,91,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease;
}

.wpprocess-feature-item:hover .wpprocess-feature-icon{
  background: rgba(22,52,91,.12);
  transform: rotate(6deg);
}

/*==============================================================
ICON IMAGE
==============================================================*/

.wpprocess-feature-image{
  width: 52px;
  height: 52px;
  object-fit: contain;
  transition: transform .35s ease;
}

.wpprocess-feature-item:hover .wpprocess-feature-image{
  transform: scale(1.12);
}

/*==============================================================
CONTENT
==============================================================*/

.wpprocess-feature-content{
  width: 100%;
}

.wpprocess-feature-title{
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp-heading);
  margin-bottom: 14px;
}

.wpprocess-feature-text{
  color: var(--wp-text);
  font-size: 16px;
  line-height: 1.8;
}

.wpprocess-feature-text p:last-child{
  margin-bottom: 0;
}

/*==============================================================
OPTIONAL DIVIDER
==============================================================*/

.wpprocess-feature-title::after{
  content: "";
  display: block;
  width: 55px;
  height: 2px;
  background: rgba(22,52,91,.18);
  margin: 16px auto 0;
}

/*==============================================================
FOCUS
==============================================================*/

.wpprocess-feature-item:focus-within{
  outline: 2px solid var(--wp-circle);
  outline-offset: 4px;
}

/*==============================================================
SMOOTH TRANSITIONS
==============================================================*/

.wpprocess-feature-item,
.wpprocess-feature-icon,
.wpprocess-feature-image,
.wpprocess-feature-title,
.wpprocess-feature-text{
  transition: all .35s ease;
}

/*==============================================================
SUBTLE BACKGROUND DECORATION
==============================================================*/

.wpprocess-feature-item::after{
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: rgba(22,52,91,.03);
  right: -70px;
  bottom: -70px;
  transition: all .4s ease;
}

.wpprocess-feature-item:hover::after{
  transform: scale(1.25);
}

/*==============================================================
EQUAL HEIGHT CONTENT
==============================================================*/

.wpprocess-feature-content{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/*==============================================================
ANIMATION
==============================================================*/

@keyframes wpprocessFeatureFloat{

  0%{
    transform: translateY(0);
  }

  50%{
    transform: translateY(-5px);
  }

  100%{
    transform: translateY(0);
  }

}

.wpprocess-feature-item:hover .wpprocess-feature-icon{
  animation: wpprocessFeatureFloat 2.5s ease infinite;
}

/*==============================================================
LAST SPACING
==============================================================*/

.wpprocess-feature-area:last-child{
  margin-bottom: 0;
}

/*==============================================================
  PART 2B-2
  TABLET RESPONSIVE
  (1200px • 1024px • 990px • 768px)
==============================================================*/

/*==============================================================
  LARGE TABLET
==============================================================*/

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

  .wpprocess-header{
    max-width:720px;
    margin-bottom:70px;
  }

  .wpprocess-heading{
    font-size:44px;
  }

  .wpprocess-description{
    font-size:17px;
  }

  .wpprocess-flow,
  .wpprocess-grid,
  .wpprocess-svg-line{
    height:760px;
    min-height:760px;
  }

  .wpprocess-card{
    width:250px;
  }

  .wpprocess-card-inner{
    padding:28px;
    min-height:225px;
  }

  .wpprocess-icon{
    width:75px;
    height:75px;
  }

  .wpprocess-icon-image{
    width:75px;
    height:75px;
  }

  .wpprocess-title{
    font-size:20px;
  }

  .wpprocess-text{
    font-size:14px;
    line-height:1.7;
  }

  /*----------------------------
  Top Row
  -----------------------------*/

  .wpprocess-card--1{
    left:0;
  }

  .wpprocess-card--2{
    left:280px;
  }

  .wpprocess-card--3{
    left:560px;
  }

  .wpprocess-card--4{
    right:0;
  }

  /*----------------------------
  Bottom Row
  -----------------------------*/

  .wpprocess-card--5{
    left:8%;
    top:400px;
  }

  .wpprocess-card--6{
    top:400px;
    left: 46%;
    transform:translateX(-50%);
  }

  .wpprocess-card--7{
    right: 13px;
    top:400px;
  }

  /*----------------------------
  Features
  -----------------------------*/

  .wpprocess-feature-grid{
    gap:24px;
  }

  .wpprocess-feature-item{
    padding:32px 26px;
  }

}

/*==============================================================
  TABLET
==============================================================*/

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

  #wpprocess-{{ section.id }}{
    padding:80px 0;
  }

  .wpprocess-heading{
    font-size:38px;
  }

  .wpprocess-description{
    font-size:16px;
  }

  .wpprocess-flow,
  .wpprocess-grid,
  .wpprocess-svg-line{

    height:700px;
    min-height:700px;

  }

  .wpprocess-card{

    width:220px;

  }

  .wpprocess-card-inner{

    padding:24px;

    min-height:210px;

  }

  .wpprocess-step-number{

    width:50px;
    height:50px;
    font-size:16px;

  }

  /*----------------------------
  Positioning
  -----------------------------*/

  .wpprocess-card--1{
    left:0;
  }

  .wpprocess-card--2{
    left:245px;
  }

  .wpprocess-card--3{
    left:490px;
  }

  .wpprocess-card--4{
    right:0;
  }

  .wpprocess-card--5{
    top:380px;
    right:0;
  }

  .wpprocess-card--6{
    top:380px;
    left:50%;
    transform:translateX(-50%);
  }

  .wpprocess-card--7{
    top:380px;
    left:0;
  }

  .wpprocess-feature-grid{

    gap:20px;

  }

  .wpprocess-feature-title{

    font-size:20px;

  }

  .wpprocess-feature-text{

    font-size:15px;

  }

}

/*==============================================================
  SMALL TABLET
==============================================================*/

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

  .wpprocess-header{

    margin-bottom:55px;

  }

  .wpprocess-heading{

    font-size:34px;

  }

  .wpprocess-description{

    font-size:15px;

  }

  /*==========================================================
    Convert Snake Layout
  ==========================================================*/

  .wpprocess-flow{

    height: auto;

    min-height: 0;

  }

  .wpprocess-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

    height:auto;

  }

  .wpprocess-card{

    position:relative;

    width:100%;

    left:auto !important;

    right:auto !important;

    top:auto !important;

    transform:none !important;

  }

  .wpprocess-step-number{

    top:-25px;

    left:50%;

    transform:translateX(-50%) !important;

  }

  .wpprocess-svg-line{

    display:none;

  }

  .wpprocess-card-inner{

    min-height:auto;

  }

  .wpprocess-feature-area{

    margin-top:70px;

  }

  .wpprocess-feature-grid{

    grid-template-columns:repeat(2,1fr);

    gap:24px;

  }

}

/*==============================================================
  TABLET PORTRAIT
==============================================================*/

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

  #wpprocess-{{ section.id }}{

    padding:70px 0;

  }

  .wpprocess-header{

    margin-bottom:45px;

  }

  .wpprocess-subheading{

    gap:10px;

  }

  .wpprocess-subheading span{

    width:35px;

  }

  .wpprocess-heading{

    font-size:30px;

    line-height:1.2;

  }

  .wpprocess-description{

    font-size:15px;

    line-height:1.7;

  }

  .wpprocess-grid{

    gap:24px;

  }

  .wpprocess-card-inner{

    padding:22px;

  }

  .wpprocess-icon{

    width:70px;
    height:70px;
  }

  .wpprocess-icon-image{

    width:70px;
    height:70px;

  }

  .wpprocess-title{

    font-size:18px;

  }

  .wpprocess-text{

    font-size:14px;

  }

  .wpprocess-feature-grid{

    grid-template-columns:1fr;

    gap:22px;

  }

  .wpprocess-feature-item{

    padding:28px 22px;

  }

  .wpprocess-feature-icon{

    width:80px;
    height:80px;

  }

  .wpprocess-feature-image{

    width:46px;
    height:46px;

  }

  .wpprocess-feature-title{

    font-size:20px;

  }

}

/*==============================================================
  PART 2C
  MOBILE RESPONSIVE (767px and below)
  Vertical Timeline + Animations + Final Polish
==============================================================*/

/*==============================================================
  MOBILE
==============================================================*/

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

  #wpprocess-{{ section.id }}{
    padding:60px 0;
  }

  /*==============================
    HEADER
  ==============================*/

  .wpprocess-header{
    max-width:100%;
    margin-bottom:40px;
    padding:0 10px;
  }

  .wpprocess-subheading{
    gap:10px;
    margin-bottom:15px;
  }

  .wpprocess-subheading span{
    width:30px;
  }

  .wpprocess-subheading p{
    font-size:11px;
    letter-spacing:.18em;
  }

  .wpprocess-heading{
    font-size:28px;
    line-height:1.2;
    margin-bottom:18px;
  }

  .wpprocess-description{
    font-size:15px;
    line-height:1.7;
  }

  /*==============================
    REMOVE DESKTOP SVG
  ==============================*/

  .wpprocess-svg-line{
    display:none;
  }

  .wpprocess-flow{
    height: auto;
    min-height: 0;
    padding: 0 18px;
  }

  .wpprocess-grid{

    display:flex;
    flex-direction:column;
    gap:34px;

    position:relative;
    height:auto;

    padding-left:42px;

  }

  /*==============================
    VERTICAL TIMELINE
  ==============================*/

  .wpprocess-grid::before{

    content:"";

    position:absolute;

    left:24px;
    top:0;
    bottom:0;

    width:3px;

    background:var(--wp-line);

    border-radius:10px;

  }

  /*==============================
    CARD
  ==============================*/

  .wpprocess-card{

    position:relative;

    width:100%;

    left:auto!important;
    right:auto!important;
    top:auto!important;

    transform:none!important;

    z-index:2;

  }

  .wpprocess-card-inner{

    min-height:auto;

    padding:26px 22px;

    border-radius:18px;

  }

  /*==============================
    NUMBER
  ==============================*/

  .wpprocess-step-number{

    position:absolute;

    left:-44px;

    top:28px;

    transform:none!important;

    width:46px;

    height:46px;

    font-size:16px;

    z-index:4;

  }

  /*==============================
    ICON
  ==============================*/

  .wpprocess-icon{

    width:68px;

    height:68px;

    margin:0 auto 18px;

  }

  .wpprocess-icon-image{

    width:68px;

    height:68px;

  }

  /*==============================
    CONTENT
  ==============================*/

  .wpprocess-title{

    font-size:20px;

    margin-bottom:12px;

  }

  .wpprocess-text{

    font-size:14px;

    line-height:1.7;

  }

  /*==============================
    FEATURES
  ==============================*/

  .wpprocess-feature-area{

    margin-top:0px;

  }
  .wpprocess-video-wrapper{
    margin: 50px auto;
    border-radius: 12px;
    padding: 0px 20px;
  }

  .wpprocess-feature-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

  }

  .wpprocess-feature-item{

    padding:26px 22px;

  }

  .wpprocess-feature-icon{

    width:74px;

    height:74px;

    margin-bottom:18px;

  }

  .wpprocess-feature-image{

    width:42px;

    height:42px;

  }

  .wpprocess-feature-title{

    font-size:20px;

  }

  .wpprocess-feature-text{

    font-size:14px;

  }

}

/*==============================================================
  SMALL MOBILE
==============================================================*/

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

  #wpprocess-{{ section.id }}{

    padding:50px 0;

  }

  .wpprocess-heading{
    font-size: 30px;
    font-weight: 500;
  }

  .wpprocess-description{

    font-size: 16px;

  }

  .wpprocess-grid{

    padding-left:34px;

    padding-right: 4px;

    gap:28px;

  }

  .wpprocess-grid::before{

    left:18px;

  }

  .wpprocess-step-number{

    width:40px;

    height:40px;

    left:-34px;

    top:24px;

    font-size:14px;

  }

  .wpprocess-card-inner{

    padding:20px 18px;

  }

  .wpprocess-icon{

    width:60px;

    height:60px;

  }

  .wpprocess-icon-image{

    width:60px;

    height:60px;

  }

  .wpprocess-title{

    font-size:18px;

  }

  .wpprocess-text{

    font-size:13px;

  }

  .wpprocess-feature-item{

    padding:22px 18px;

  }

}

/*==============================================================
  SCROLL REVEAL
==============================================================*/

.wpprocess-card,
.wpprocess-feature-item{

  opacity: 1;

  transform:translateY(40px);

  transition:

    opacity .7s ease,

    transform .7s ease;

}

.wpprocess-card.wpprocess-visible,
.wpprocess-feature-item.wpprocess-visible{

  opacity:1;

  transform:translateY(0);

}

/*==============================================================
  HOVER
==============================================================*/

.wpprocess-card-inner,
.wpprocess-feature-item{

  transition:

    transform .35s ease,

    box-shadow .35s ease;

}

.wpprocess-card:hover .wpprocess-card-inner{

  transform:translateY(-8px);

}

.wpprocess-feature-item:hover{

  transform:translateY(-8px);

}

/*==============================================================
  ICON ANIMATION
==============================================================*/

.wpprocess-icon-image,
.wpprocess-feature-image{

  transition:

    transform .35s ease;

}

.wpprocess-card:hover .wpprocess-icon-image,
.wpprocess-feature-item:hover .wpprocess-feature-image{

  transform:scale(1.08);

}

/*==============================================================
  ACCESSIBILITY
==============================================================*/

.wpprocess-card:focus-within,
.wpprocess-feature-item:focus-within{

  outline:2px solid var(--wp-circle);

  outline-offset:4px;

}

/*==============================================================
  REDUCE MOTION
==============================================================*/

@media (prefers-reduced-motion:reduce){

  .wpprocess-card,
  .wpprocess-feature-item,
  .wpprocess-card-inner,
  .wpprocess-feature-item,
  .wpprocess-icon-image,
  .wpprocess-feature-image{

    transition:none!important;

    animation:none!important;

  }

}