:root {
        --font: IBM Plex Sans;
        --alt-font: Literata;
        --accent-color: #003da5;
        --secondary-color: #ff6e08;
        --link-color: #003da5;
        --accent-highlight-color: #003da5;
        --accent-highlight-background-color: #d8e6ff;
        --accent-tinted-color-70: #b3c5e4;
        --accent-tinted-color-80: #ccd8ed;
        --accent-tinted-color-90: #e6ecf6;
        --accent-contrast-color: #fff;
        --accent-contrast-tinted-background-color: #b3b3b3;
        --accent-hover-color: #0050d8;
        --secondary-hover-color: #d45800;
        --secondary-contrast-color: #111;
        --link-hover-color: #0c66ff;
      }
      
body { background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/v1/course-uploads/5b54c88d-4639-4346-8837-b36a3d144089/cygr2tt869wk-bg_production.jpg'); background-attachment: fixed; background-size: cover; }
.company__logo {text-indent: 100%;white-space: nowrap;overflow: hidden;background: url('https://d36ai2hkxl16us.cloudfront.net/thoughtindustries/image/upload/a_exif,c_fit,t_ti_company_logo_hires_v3/v1/course-uploads/5b54c88d-4639-4346-8837-b36a3d144089/ywczbk6ass55-PracticeLHLogo-75px.png') no-repeat center left;background-size: contain;} .company__logo span.h4 {visibility: hidden;}
/*
    DO NOT MODIFY THIS CODE DIRECTLY IN THE THOUGHT INDUSTRIES WEBSITE WITHOUT
    UPDATING THE GIT REPO FIRST.

    Make all changes in the `aledade.thought-industries` repo first, so they
    remain in version control. Once the code has been merged in, you can copy
    and paste it into the website.

    This code is located in the following places
    - Ti URL: https://learninghub.aledade.com/learn/manager/microsite/custom?tab=css
    - Ti Path: Design > Theme > Custom Code > CSS
    - Git: https://gitlab.aledade.com/aledade/aledade.thought-industries/-/blob/trunk/Design/Custom%20Code/css.css
*/


/****************************/
/* Header Navigation Layout */
/****************************/

/* Hides the "Cart" nav link in the top right */

nav.nav.nav--top[role="navigation"] {
    /* Keeps things from squishing if cart is the only link in the nav */
    min-height: 3.125rem; /* 50px */
}

nav.nav.nav--top[role="navigation"] #cart-button {
    display: none;
}

/********************************/
/* Course Detail Sidebar Layout */
/********************************/

/* Second button labeled "Show Purchasing Options or Gift" */
.widget--course-purchase .btn--secondary {
    display: none;
}


/********************/
/* Dashboard Layout */
/********************/

/* Aledade logo */
div.container.sidebar--closed--right > div.header.header--dashboard > div.header__inner > div.row > div:nth-child(1) {
    padding-left: 0rem;
}

/* Custom widget providing header nav */
div.container.sidebar--closed--right > div[role=main] > div.row.widget.widget--html.widget--html_standard {
    padding-left: 1rem; /* 16px */
    padding-top: 0.75rem; /* 12px */
}


/***************************************/
/* Learning Path Detail Sidebar Layout */
/***************************************/

/* "Learning Path Runs {date} */
.course__detail__runs {
    display: none;
}
/* text: "Register now to gain access to this course." */
.enroll--learning-path > p {
    display: none;
}
/* text: "Free", or price */
.enroll__price {
    display: none;
}
/* "Enroll Now" button */
.enroll__buy .btn {
    float: left;
}
/* "Gift This Learning Path" button */
.enroll__secondary-actions {
    display: none;
}

/******************/
/* Snippet Styles */
/******************/

.al-font-nunito {
    font-family: 'Nunito', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

.al-font-bold {
  font-weight: bold;
}

.al-font-18 {
    font-size: 1.125rem !important; /* 18px */
    line-height: 1.28;
}

.al-font-14 {
    font-size: 0.875rem !important; /* 14px */
    line-height: 1.25;
}

.al-font-navy {
    color: #20254F !important;
}

.al-margin-0 {
    margin: 0 !important;
}

.al-headline-box {
    background-color: #6FD4F2;
    border-radius: 0.1875rem; /* 3px */
    padding: 0;
    max-width: 19.6875rem; /* 315px */
    position: relative;
}

.al-headline-link {
  min-height: 5.375rem; /* 86px */
  height: 100%;
  width: 100%;
  padding-block: 0.625rem; /* 10px */
  padding-inline: 1.25rem; /* 20px */
}

.al-flex-column {
    display: flex;
    flex-direction: column;
}

.al-flex-center-all {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/**********************/
/* Global Site Layout */
/**********************/

/* Media queries to force a responsive centered layout */
@media(min-width: 1024px){.container{max-width:1024px;}}
@media(min-width: 1440px){.container{max-width:1440px;}}


/****************/
/* New Snippets */
/****************/

/* Declare color palette, refer to variables with 'var(--NAME)' */
:root {
  --color-primary: #003da5;         /* Aledade Blue */
  --color-primary-hover: #002270;    /* Darker Blue */
  --color-secondary: #F8F9FA;       /* Light Gray */
  --color-text: #ffffff;            /* White */
}


/* Define colorblock container */
.snippet.body-colorblock {
  display:flex;
  flex-direction:row;
  border-radius:15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* Define vertical colorblock container */
.snippet.body-colorblock-vert {
  display:flex;
  flex-direction:column;
  border-radius:15px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* Border radius for top colorblock */
.colorblock-top {
  border-radius:15px 15px 0 0;
  padding: 10px 10px 10px 20px;
  height:auto;
}

/* Remove padding and margins for headers in top colorblock */
.colorblock-top > h1,h2,h3,h4,h5,h6 {
  padding:0;
  margin:0;
}

/* Border radius for bottom colorblock */
.colorblock-bottom {
  border-radius:0 0 15px 15px;
  padding:20px;
  height:auto;
  background-color:var(--color-secondary);
}

/* Border radius for left colorblock */
.colorblock-left {
  border-radius:15px 0 0 15px;
  padding:20px;
  height:auto;
}

/* Border radius for right colorblock */
.colorblock-right {
  border-radius:0 15px 15px 0;
  padding:20px;
  height:auto;
}

/* Sizing for 7% width block */
.colorblock-7 {
  flex:1;
  max-width:7%;
  flex-basis:7%;
  background-color:var(--color-secondary);
}

/* Sizing for 25% width block */
.colorblock-25 {
  flex:1;
  max-width:25%;
  flex-basis:25%;
  background-color:var(--color-secondary);
}

/* Sizing for 50% width block */
.colorblock-50 {
  flex:1;
  max-width:50%;
  flex-basis:50%;
  background-color:var(--color-secondary);
}

/* Sizing for 75% width block */
.colorblock-75 {
  flex:2;
  background-color:var(--color-secondary);
}

/* Color the highlighted block and text */
.colorblock-highlight {background-color:#003da5;}
.colorblock-highlight > * {color:var(--color-text);}
.colorblock-highlight a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}

.colorblock-highlight-green {background-color:#0d5257;}
.colorblock-highlight-green > * {color:var(--color-text)}
.colorblock-highlight-green a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight-green a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}

.colorblock-highlight-yellow {background-color:#976400;}
.colorblock-highlight-yellow > * {color:var(--color-text)}
.colorblock-highlight-yellow a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight-yellow a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}

.colorblock-highlight-pink {background-color:#905e74;}
.colorblock-highlight-pink > * {color:var(--color-text)}
.colorblock-highlight-pink a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight-pink a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}

.colorblock-highlight-countryblue {background-color:#437790;}
.colorblock-highlight-countryblue > * {color:var(--color-text)}
.colorblock-highlight-countryblue a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight-countryblue a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}

.colorblock-highlight-orange {background-color:#c63300;}
.colorblock-highlight-orange > * {color:var(--color-text)}
.colorblock-highlight-orange a:link {color:var(--color-text);font-weight:bold;text-decoration:underline;}
.colorblock-highlight-orange a:visited {color:var(--color-text);font-weight:bold;text-decoration:underline;}


/* Button with Primary Color background */
.snippet.body-button1 {
  cursor: pointer;
  background-color:var(--color-primary);
  border-color:var(--color-primary);
  border-radius:.25rem;
  border: 1px solid transparent;
  display:inline-block;
  text-align:center;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-weight:400;
  line-height:1.5;
  padding:6px 12px;
}


/* Button with Primary Color hover state */
.snippet.body-button1:hover {
  background-color:#002270;
}

/* Button with Secondary Color background */
.snippet.body-button2 {
  cursor: pointer;
  background-color:var(--color-secondary);
  border-radius:.25rem;
  border: 2px solid var(--color-primary);
  display:inline-block;
  text-align:center;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  font-weight:400;
  line-height:1.5;
  padding:6px 12px;
  font-size:1em;
  text-decoration:none;
}

/* Button with Secondary Color hover state */
.snippet.body-button2:hover {
  background-color:#e3e3e3;
}

/* Color links in buttons */
.snippet.body-button1 a {color:var(--color-text);}
.snippet.body-button1 a:hover {color:var(--color-text);text-decoration:none;}
.snippet.body-button2 a {color:black;}
.snippet.body-button2 a:hover {color:black;text-decoration:none;}

/* Flex container for body box */
.snippet.body-container {
  display:flex;
  flex-direction:row;
}

/* Sizing the image */
.element-icon {
  flex:0 1 10%;
}

/* Sizing and spacing the text */
.element-text {
  flex:2 2 80%;
  padding-left:30px;
}

/* Callout box with light background */
.snippet.callout-objectives {
  background-color:var(--color-secondary);
  border:2px solid var(--color-primary);
  height:auto;
  width:100%;
  font-size:1.2em;
  border-radius:15px;
  padding:10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

/* Remove internal margin on callout box */
.snippet.callout-objectives p {
  margin:0;
}

.snippet.callout-highlight p {
  margin:0;
}

.snippet.callout-tip p {
  margin:0;
}


/* Callout box with highlight background */
.snippet.callout-highlight {
  background-color:var(--color-primary);
  color:var(--color-text);
  height:auto;
  width:100%;
  font-size:1.2em;
  border-radius:15px;
  padding:10px;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.snippet.callout-tip {
  background-color:#FFF2CC;
  color:#000000;
  height:auto;
  font-size:1em;
  border-radius:5px;
  padding:10px;
  max-width: max-content;
}
  
/* Card grid container */
.snippet.card-container {
  display:grid;
  gap: 15px;
}

/* Set grid layout for cards */
.card-container.card-2col {grid-template-columns: 1fr 1fr;}
.card-container.card-3col {grid-template-columns: 1fr 1fr 1fr;}
.card-container.card-4col {grid-template-columns: 1fr 1fr 1fr 1fr;}

/* Style the cards for a card grid */
.card-content {
  display:flex;
  flex-direction:column;
  background-color:var(--color-secondary);
  border-radius:15px;
  padding: 10px 30px;
  flex:1;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
}

/* Style the colorblock card */
.card-colorblock {
  display:flex;
  flex-direction:column;
  background-color:var(--color-secondary);
  border-radius:15px;
  flex:1;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 4px;
}

.card-colorblock .colorblock-bottom {
  display:flex;
  flex-direction:column;
}

.card-colorblock .colorblock-bottom p {flex-grow:1;}

/* Card headers */
.card-header {
  font-size:1.5em;
  margin-bottom:1px;
  color:var(--color-primary);
  padding:5px;
}

/* Extra large card headers for statistics */
.card-header-stat{
  font-size:2.5em;
  color:var(--color-primary);
  text-align:center;
  padding:5px;
}

.card-header-custom {
  margin-bottom:1px;
  color:var(--color-primary);
  padding:5px;
  min-height:3.5rem;
}

/* Card body text */
.card-content  > p {
  text-align:left;
  padding:10px;
  flex-grow:1;
}

/* Large headers */
.header-large > h1 {
  font-size:2em;
  color:#003da5;
  margin-bottom:0.3em;
}

/* Medium Headers */
.header-medium > h2 {
  font-size:1.6em;
}

/* Small Headers */
.header-small > h3 {
  font-size:1.3em;
}

/* Sizing body images */
.body-image.image-full {max-width:100%;}
.body-image.image-xlarge {max-width:80%;}
.body-image.image-large {max-width:60%;}
.body-image.image-medium {max-width:40%;}
.body-image.image-small {max-width:20%;}


/* Figure tag for images */
.body-image figure {
  border: thin #c0c0c0 solid;
  display: flex;
  flex-flow: column;
  padding: 5px;
  margin-left: 0;
}

/* Figure tag captions */
.body-image figcaption {
  color: #000000;
  font: italic smaller sans-serif;
  padding: 3px;
  text-align: center;
}


/* Lightbox for expandable images */
.lightbox-full {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox-full:target {
  display: block;
}

.lightbox-full span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;
  margin:auto;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.lightbox-thumbnail {
  max-height:40vh;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  
}

/* Style table headers */
.table-2col th, .table-3col th, .table-4col th, .table-5col th, .table-6col th, .table-7col th, .table-8col th {
  background-color:var(--color-primary);
	color:var(--color-text);
}


/* Reduce spacing between table list items */
.table-2col li {
  line-height:1.25em;
}

/* Reduce spacing between table list items */
.table-3col li, .table-4col li, .table-5col li, .table-6col li, .table-7col li, .table-8col li {
  line-height:1em;
}

.table-custom ul {
  margin-left:0;
}

/* Color full width table rows */
.table-full-row {
	background-color:var(--color-secondary);
}

/* Align first column text to top left of cell */
.table-2col td:first-child {
    text-align: left;
    vertical-align:top;
}

/* Set tables to equal columns */
.table-2col table, .table-3col table, .table-4col table, .table-5col table, .table-6col table, .table-7col table, .table-8col table {
  table-layout: fixed;
  text-align:left;
}

/* Float table icons to the right */
.table-icon {max-width:50px; float:right;margin-right:20px;}

/* Gentle background colors for table cells */
.table-green {background-color:#e5f0e4;}
.table-yellow {background-color:#FFF2CC;}
.table-red {background-color:#FFB6C1;}

/* Reduce indent on ordered lists */
.list-ordered > ul {
  margin-left:0;
}

/* Reduce indent on unordered lists */
.list-unordered > ul {
  margin-left:0;
}

/* Reduce indent on custom lists */
.list-custom > ul {
  margin-left:0;
}

/* Media query to vertically stack colorblocks on small screens and limit card grids to two columns*/
@media (max-width: 1023px){
  .snippet.body-colorblock {flex-direction:column;}
  .colorblock-left {max-width:100%;border-radius:15px 15px 0 0;}
  .colorblock-right {max-width:100%;border-radius:0 0 15px 15px;}
  .card-container.card-3col {grid-template-columns: 1fr 1fr;}
}

@media (max-width: 500px){
  .card-container.card-3col {grid-template-columns: 1fr;}
  .card-container.card-2col {grid-template-columns: 1fr;}
}

/* Expandable Box */
.expand-large {
  width: 100%;
  margin: 0 auto;
  margin-bottom:0.5em;
  border-radius: 5px;
  overflow: hidden;
}

/* Expandable Box - Summary */
.expand-large summary {
  padding: 1rem;
  display: block;
  padding-left: 2.2rem;
  position: relative;
  cursor: pointer;
  user-select: none;
}

/* Expandable Box - Chevron icon behavior */
.expand-large summary:before {
  content: '';
  border-width: .5rem;
  border-style: solid;
  border-color: transparent transparent transparent #000;
  position: absolute;
  top: 1.3rem;
  left: 1rem;
  transform: rotate(0);
  transform-origin: .2rem 50%;
  transition: .25s transform ease;
}

/* Expandable Box - Chevron icon behavior */
.expand-large[open] > summary:before {
  transform: rotate(90deg);
}

/* Expandable Box - Chevron icon behavior */
.expand-large summary::-webkit-details-marker {
  display:none;
}

/* Expandable Box - Styling the expanded section */
.expand-large > * {
  padding:1rem;
  margin:0;
}

/* Small Expandable Box - Summary */
.expand-small > summary {
  display: inline-flex;
  border: 1px solid #999999;
  border-radius:0.4em;
  padding:0.3em 1em 0.3em 1em;
  text-align:center;
  cursor: pointer;
}

/* Small Expandable Box - Chevron icon behavior */
.chevron {display:inline-block;}

/* Small Expandable Box - Chevron icon behavior */
.expand-small > summary .chevron {
  transition: rotate 0.5s;
}

/* Small Expandable Box - Chevron icon behavior */
.expand-small[open] > summary .chevron {
  rotate: 90deg;
  text-wrap: wrap;
}

/* Small Expandable Box - Styling the expanded section */
.expand-small > * {
  padding:1rem;
  margin:0;
}

/* Body CTA buttons */
.body-cta {
  background-color:var(--color-primary);
  color:var(--color-text);
  cursor: pointer;
}

/* Change resource lists to use the link icon */
.list-resources {margin:0;}
.list-resources li::marker {content: '🔗 ';font-size: 1.2em;}

/* Add horizontal scrollbar to wide tables on smaller screens */
@media (max-width: 1439px) {
    .table-wide {
      display: block;
      max-width: -moz-fit-content;
      max-width: fit-content;
      margin: 0 auto;
      overflow-x: auto;
      white-space: nowrap;
    }
}

.list-timeline {list-style: none;padding: 0;}
.time {list-style: none;padding: 0;}

.container-timeline p{
  font-size:1.2em;
  color: #4f4f4f;
  font-family: sans-serif;
  line-height: 1.5;
  margin-top:0.4rem;
  margin-bottom:0;
}

.list-timeline{
  margin-top: 2rem;
  border-radius: 12px;
  position: relative;
}

.list-timeline li{
  padding-bottom: 1.5rem;
  border-left: 1px solid #003da5;
  position: relative;
  padding-left: 20px;
  margin-left: 10px;
}

.list-timeline li:last-child {
  border: 0px;
  padding-bottom: 0;
  }

.list-timeline li:before {
    content: '';
    width: 15px;
    height: 15px;
    background: white;
    border: 1px solid #003da5;
    box-shadow: 3px 3px 0px #95bcff;
    border-radius: 50%;
    position: absolute;
    left: -10px;
    top: 0px;
}

.list-timeline .time{
  font-family: "Literata";
  font-weight: bold;
  font-size:1.2rem;

}

.timeline-cards {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 10px;
    box-sizing: border-box;
}

.timeline-grid {
    display: grid;
    /* Forces 4 equal columns. */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    position: relative;
    align-items: stretch; /* Ensures columns stretch to same height */
}

/* The Connecting Line (Desktop) */
.timeline-grid::before {
    content: '';
    position: absolute;
    top: 25px; /* Centers with the 50px marker */
    left: 50px; /* Starts after half the first marker */
    right: 50px; /* Ends before half the last marker */
    height: 4px;
    background: #e0e0e0;
    border-radius: 2px;
    z-index: 0;
}

.timeline-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /* Important for equal height cards */
    z-index: 1; 
}

/* The Circle Marker */
.timeline-marker {
    width: 50px;
    height: 50px;
    background-color: #003da5; 
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    border: 4px solid #fff; 
    margin-bottom: 20px; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0; 
}

/* The Content Card */
.timeline-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 5px solid #003da5; 
    border-radius: 4px;
    padding: 15px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    text-align: left;
    transition: transform 0.2s;
    /* Flex properties to fill height */
    flex: 1; 
    display: flex;
    flex-direction: column;
}

.timeline-card:hover {
    transform: translateY(-5px);
}

.timeline-card-title {
    margin: 0 0 12px 0;
    color: #003da5; 
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.timeline-card-description {
    color: #444;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px; /* Space between rows */
}

.timeline-card-description:last-child {
    margin-bottom: 0;
}

.timeline-card-highlight {
    font-weight: 600;
    color: #003da5;
    margin-right: 4px;
}

/* RESPONSIVE: Switch to Vertical Layout sooner (Tablet & Mobile) */
@media (max-width: 900px) {
    .timeline-grid {
        grid-template-columns: 1fr; /* Stack in 1 column */
        gap: 0;
    }

    /* Change Line to Vertical */
    .timeline-grid::before {
        top: 0;
        bottom: 0;
        left: 24px; /* Aligns with center of marker */
        width: 4px;
        height: auto;
        right: auto;
    }

    .timeline-container {
        flex-direction: row; /* Marker on Left, Content on Right */
        align-items: flex-start;
        margin-bottom: 30px;
        height: auto; /* Reset height for stack */
        padding-left: 0;
    }

    .timeline-marker {
        margin-right: 20px;
        margin-bottom: 0;
    }

    .timeline-card {
        border-top: 1px solid #e0e0e0;
        border-left: 5px solid #003da5; /* Switch accent to left */
        flex: 1; /* Still take available width */
    }
    
    .timeline-card:hover {
        transform: translateX(5px);
    }
}


  /* Snippet container for step sequence */
  .body-step-sequence {
    max-width: 100%;
    margin: 1rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  /* Individual step container */
  .step-sequence-container {
    position: relative;
    padding-left: 35px; /* Makes room for the overlapping circle */
    transition: transform 0.2s ease-in-out;
  }

  /* Interactive Hover Effect */
  .step-sequence-container:hover {
    transform: translateX(5px);
  }

  /* --- Indent sequence steps --- */
  /* Extra step included for future use */
  .step-sequence-container:nth-child(1) {margin-left: 0;}
  .step-sequence-container:nth-child(2) {margin-left: 2.5rem;}
  .step-sequence-container:nth-child(3) {margin-left: 5rem;}
  .step-sequence-container:nth-child(4) {margin-left: 7.5rem;}

  /* Step number badge */
  .step-sequence-badge {
    position: absolute;
    left: 15px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.5rem;
    font-family: var(--alt-font);
    font-weight: 600;
    z-index: 10;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px;
  }

  /* Badge and header colors based on Aledade Creative Identity Guide */
  .step-sequence-container:nth-child(1) .colorblock-top {
    background-color: #c5dcdd;} /* Sierra Green-20 */ 
  .step-sequence-container:nth-child(1) .step-sequence-badge {
    background-color: #0d5257;} /* Sierra Green-80 */   

  .step-sequence-container:nth-child(2) .colorblock-top {
    background-color: #bed8ff;} /* Aledade Blue-20 */ 
  .step-sequence-container:nth-child(2) .step-sequence-badge {
    background-color: #003da5;} /* Aledade Blue-80 */ 
  
  .step-sequence-container:nth-child(3) .colorblock-top {
    background-color: #b3e0e7;} /* Robin Egg Blue-20 */
  .step-sequence-container:nth-child(3) .step-sequence-badge {
    background-color: #005061;} /* Robin Egg Blue-80 */ 

  .step-sequence-container:nth-child(4) .colorblock-top {
    background-color: #c6dae5;} /* Country Blue-20 */
  .step-sequence-container:nth-child(4) .step-sequence-badge {
    background-color: #15475d;} /* Country Blue-80 */ 


  /* Adapting colorblock snippet */
  .step-sequence-container .body-colorblock-vert {
    position: relative;
    z-index: 1;
  }


  .step-sequence-container .colorblock-top {
    padding: 15px 20px 15px 50px; /* Extra left padding so text clears the badge */
    display: flex;
    align-items: center;
  }

  .step-sequence-container .colorblock-bottom {
    padding: 15px 20px 15px 40px;
    box-shadow:rgba(0, 0, 0, 0.16) 0px 1px 4px;
  }

  
  /* Mobile Responsiveness: Remove the severe indent on small screens */
  @media (max-width: 1023px) {
    .step-sequence-container:nth-child(n) {margin-left: 0;}
  }