.elementor-15 .elementor-element.elementor-element-f7ed435{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:80px 80px;--row-gap:80px;--column-gap:80px;--padding-top:5rem;--padding-bottom:5rem;--padding-left:2.5rem;--padding-right:2.5rem;}.elementor-15 .elementor-element.elementor-element-04ba88d{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-994ce3a{text-align:center;}.elementor-15 .elementor-element.elementor-element-994ce3a .elementor-heading-title{font-size:62px;font-weight:500;color:var( --e-global-color-primary );}.elementor-15 .elementor-element.elementor-element-1808725{width:var( --container-widget-width, 850px );max-width:850px;--container-widget-width:850px;--container-widget-flex-grow:0;text-align:center;}.elementor-15 .elementor-element.elementor-element-1808725 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-15 .elementor-element.elementor-element-0a5fec1{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:50px 50px;--row-gap:50px;--column-gap:50px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-15 .elementor-element.elementor-element-050fdc4{text-align:center;}.elementor-15 .elementor-element.elementor-element-050fdc4 .elementor-heading-title{font-size:34px;font-weight:600;text-transform:capitalize;}.elementor-15 .elementor-element.elementor-element-5fc9ab9{width:var( --container-widget-width, 950px );max-width:950px;--container-widget-width:950px;--container-widget-flex-grow:0;}.elementor-15 .elementor-element.elementor-element-5fc9ab9.elementor-element{--align-self:center;}.elementor-15 .elementor-element.elementor-element-3f516ec{--display:flex;--min-height:450px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--overlay-opacity:0.75;--padding-top:5rem;--padding-bottom:5rem;--padding-left:2.5rem;--padding-right:2.5rem;}.elementor-15 .elementor-element.elementor-element-3f516ec:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-3f516ec > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.assemble.kitchen/wp-content/uploads/2025/10/87Taylors.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15 .elementor-element.elementor-element-3f516ec::before, .elementor-15 .elementor-element.elementor-element-3f516ec > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-3f516ec > .e-con-inner > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-3f516ec > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-3f516ec > .e-con-inner > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-3f516ec > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-primary );--background-overlay:'';}.elementor-15 .elementor-element.elementor-element-c6aaf42{width:var( --container-widget-width, 410px );max-width:410px;--container-widget-width:410px;--container-widget-flex-grow:0;text-align:center;}.elementor-15 .elementor-element.elementor-element-c6aaf42 .elementor-heading-title{font-size:42px;font-weight:600;text-transform:capitalize;line-height:1.2;color:var( --e-global-color-f8b3f8e );}.elementor-15 .elementor-element.elementor-element-33417f3{width:var( --container-widget-width, 200px );max-width:200px;--container-widget-width:200px;--container-widget-flex-grow:0;}.elementor-15 .elementor-element.elementor-element-33417f3 .elementor-button{font-size:18px;}@media(max-width:1024px){.elementor-15 .elementor-element.elementor-element-f7ed435{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1.5rem;--padding-right:1.5rem;}.elementor-15 .elementor-element.elementor-element-994ce3a .elementor-heading-title{font-size:56px;}.elementor-15 .elementor-element.elementor-element-0a5fec1{--gap:40px 40px;--row-gap:40px;--column-gap:40px;}.elementor-15 .elementor-element.elementor-element-050fdc4 .elementor-heading-title{font-size:28px;}.elementor-15 .elementor-element.elementor-element-3f516ec{--min-height:400px;--padding-top:4rem;--padding-bottom:4rem;--padding-left:1.5rem;--padding-right:1.5rem;}.elementor-15 .elementor-element.elementor-element-c6aaf42{--container-widget-width:400px;--container-widget-flex-grow:0;width:var( --container-widget-width, 400px );max-width:400px;}.elementor-15 .elementor-element.elementor-element-c6aaf42 .elementor-heading-title{font-size:34px;}.elementor-15 .elementor-element.elementor-element-33417f3{width:auto;max-width:auto;}}@media(max-width:767px){.elementor-15 .elementor-element.elementor-element-f7ed435{--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-15 .elementor-element.elementor-element-050fdc4 .elementor-heading-title{font-size:28px;}.elementor-15 .elementor-element.elementor-element-3f516ec{--min-height:350px;--padding-top:4rem;--padding-bottom:4rem;--padding-left:1rem;--padding-right:1rem;}.elementor-15 .elementor-element.elementor-element-c6aaf42{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;}.elementor-15 .elementor-element.elementor-element-c6aaf42 .elementor-heading-title{font-size:28px;}.elementor-15 .elementor-element.elementor-element-33417f3 .elementor-button{padding:14px 20px 14px 20px;}}/* Start custom CSS for html, class: .elementor-element-5fc9ab9 *//* --- Main Section --- */
.how-it-works-v2-section {
  font-family: Arial, sans-serif;
  padding: 80px 20px;
  max-width: 900px;
  margin: 0 auto;
  
  /* Set your page's background color here */
  /* This example assumes a white page background */
  background-color: #ffffff; 
}

/* --- Header Styling (same as video) --- */
.how-it-works-header {
  text-align: center;
  margin-bottom: 60px;
}
.how-it-works-pills {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  color: #888;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 6px 12px;
  margin-bottom: 15px;
}
.how-it-works-header h2 {
  font-size: 48px;
  color: #1a1a1a; /* Dark text for light bg */
  margin: 0;
}
.how-it-works-header p {
  font-size: 18px;
  color: #555; /* Dark text for light bg */
  max-width: 600px;
  margin: 10px auto 0;
}

/* --- Stepper Layout --- */
.how-it-works-stepper {
  position: relative;
}

/* --- New Dotted Line CSS --- */
.step-icon-wrapper {
  position: relative; /* Make sure this is relative */
}

/* --- New Dotted Line CSS --- */
.step-icon-wrapper {
  position: relative; /* Make sure this is relative */
}

/* This is the new dotted line connector */
.step-timeline-connector {
  position: absolute;
  left: 34px; /* Adjust to center with your icon */
  top: 50px;  /* Start just below the icon */
  width: 2px;
  
  /* Calculates the full height to the next item */
  /* 100% of the wrapper + 20px margin-bottom */
  height: calc(100% - 40px + 20px); 
  
  background-image: linear-gradient(to bottom, #aaa 3px, transparent 3px);
  background-size: 100% 6px;
  z-index: -1; /* Place it behind the icon */
}

/* This adds the small line *above* the Step 1 icon */
.step-item:first-child .step-icon-wrapper::before {
  content: '';
  position: absolute;
  left: 38px; /* Match the line's position */
  top: 0;
  height: 10px; /* Adjust as needed */
  width: 2px;
  background-image: linear-gradient(to bottom, #aaa 3px, transparent 3px);
  background-size: 100% 6px;
}

/* This adds the small line *above* the Step 1 icon */
.step-item:first-child .step-icon-wrapper::before {
  content: '';
  position: absolute;
  left: 38px; /* Match the line's position */
  top: 0;
  height: 0px; /* Adjust as needed */
  width: 2px;
  background-image: linear-gradient(to bottom, #aaa 3px, transparent 3px);
  background-size: 100% 6px;
}

.step-item {
  display: flex;
  position: relative;
  z-index: 1; /* Keep content above the line */
  margin-bottom: 20px; /* Space between cards */
}

/* Left column (icon) */
.step-icon-wrapper {
  width: 80px;
  flex-shrink: 0;
  position: relative;
  padding-top: 10px;
}

.step-icon {
  display: inline-block;
  font-weight: bold;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 20px;
  
  /* --- ANIMATION START STATE --- */
  background-color: #eee; /* Start as light grey */
  color: #888;
}

/* Right column (card) */
.step-card {
  width: 100%;
  border-radius: 12px;
  padding: 25px;
  border: 1px solid #eee;
  
  /* --- ANIMATION START STATE --- */
  background-color: #ffffff;
  color: #1a1a1a;
}

.step-card-content h3 {
  font-size: 24px;
  margin: 0 0 10px 0;
  /* --- ANIMATION START STATE --- */
  color: #1a1a1a;
}

.step-card-content p {
  font-size: 16px;
  margin: 0;
  line-height: 1.6;
  /* --- ANIMATION START STATE --- */
  color: #555;
}/* End custom CSS */