.locked-scroll {

  --themeBg: transparent;
  --themeInactive: #707070;
  --themeColor: var(--color__black);
  --themeActive: var(--color__red);

  position: relative;
  background-color: var(--themeBg);
  color: var(--themeColor);
}

.locked-scroll h2, 
.locked-scroll h3, 
.locked-scroll h4, 
.locked-scroll p, 
.locked-scroll li, 
.locked-scroll .secondary-btn { color: inherit!important; }

.locked-scroll__nav h2 { text-align: left; }

.locked-scroll.theme-dark {
  --themeBg: var(--color__black);
  --themeInactive: #fff;
  --themeActive: var(--color__teal);
  --themeColor: #fff;
  margin: 0;
  padding: var(--spacer) 0;
}

.locked-scroll__cols {
  display: grid;
  grid-template-columns: 33fr 66fr;
  gap: 90px;
}

.locked-scroll__nav {
  position: sticky;
  top: 150px;
  display: grid;
  gap: 30px;
  align-self: flex-start;
}

.admin-bar .locked-scroll__nav { top: 182px; } 

.locked-scroll__nav ul,
.locked-scroll__nav ol {
  position: relative;
  display: grid;
  padding: 0;
  gap: 1.5em;
}

.locked-scroll__nav li {
  position: relative;
  padding-left: 45px;
  list-style-type: none;
  counter-increment: liCounter;
  cursor: pointer;
  transition: all 0.3s;
}

.locked-scroll__nav li:before,
.locked-scroll__nav li a:before {
  position: absolute;
  display: block;
}

.locked-scroll__nav ul li:before {
  top: 6px;
  left: 0;
  width: 24px;
  height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  content: '';
}

.locked-scroll__nav ol li:before {
  top: 0;
  left: 0;
  width: 24px;
  text-align: center;
  content: counter(liCounter) ".";
  transition: all 0.3s;
}

.locked-scroll__nav li:not(:last-child):after {
  position: absolute;
  top: 35px;
  bottom: 0;
  left: 12px;
  margin-top: 3px;
  width: 1px;
  height: calc(100% - 49px + 1.5em);
  background: currentColor;
  content: '';
}

.locked-scroll__nav ol li:not(:last-child):after { top: 40px; }

.locked-scroll__nav li a,
.locked-scroll__nav ol li:before { 
  font-family: var(--font__barlow_semi_condensed);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.019em;
  color: var(--themeInactive);
}

.locked-scroll__nav a:hover,
.locked-scroll__nav li:hover a,
.locked-scroll__nav li.active a,
.locked-scroll ol li:hover:before,
.locked-scroll ol li.active:before { color: var(--themeActive); }

.locked-scroll__nav li.active a { text-decoration: underline; }

.locked-scroll__nav ul li a:before {
  top: 11px;
  left: 5px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--themeColor);
  background-color: var(--themeActive);
  border-radius: 50%;
  content: '';
  transform: scale(0);
  transition: all 0.3s;
}

.locked-scroll__nav ul li.active a:before {
  transform: scale(1);
}

.locked-scroll__content {
  display: grid;
  gap: 90px;
}

.locked-scroll__i {
  display: grid;
  gap: 2em;
  text-align: left;
}

.locked-scroll__i h3 { font-weight: normal; }

.locked-scroll__btn a.secondary-btn { margin-top: 0; margin-left: 0; }

.icon-items {
  display: grid;
  grid-template-columns: 110px auto;
  grid-column-gap: 40px;
  grid-row-gap: 60px;
  margin: 45px 0;
}

.icon-items h4 {
  margin-bottom: 0.5em;
  font-family: var(--font__barlow);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.019em;
}

.icon-items__text { 
  line-height: 1.5;
}

@media (max-width: 991px) {

  .locked-scroll__content,
  .locked-scroll__cols { gap: 60px; }

  .locked-scroll__cols { grid-template-columns: auto; }

  .locked-scroll__nav { position: static; }

  .locked-scroll__nav ol li:not(:last-child):after { top: 38px; }

  .locked-scroll__nav li:not(:last-child):after { height: calc(100% - 40px + 1.5em); }

  .locked-scroll__nav li a,
  .locked-scroll__nav ol li:before { font-size: 26px; }

  .icon-items { margin: 30px 0; }

  .icon-items h4 { font-size: 20px; }

@media (max-width: 767px) {
  .icon-items { margin: 0; grid-template-columns: auto; }
  .icon-items img { margin-bottom: -30px; }
  .locked-scroll__i { gap: 1.5em; }
}