.everops-before-and-after {
  padding: 4rem 0;
}
@media (min-width: 55rem) {
  .everops-before-and-after {
    padding: 0;
    position: relative;
    height: 100vh;
    overflow: hidden;
  }
}
.everops-before-and-after .everops-baa-title i {
  color: #42FFD6;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-title {
    padding-top: 12rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #42FFD6;
    font-size: 1.5rem;
    position: relative;
    height: 14.95rem;
    margin: 0;
    z-index: 2;
    background: #14101E;
  }
}
.everops-before-and-after .everops-baa-item-container {
  position: relative;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item-container {
    padding: 210px 0 0;
  }
}
.everops-before-and-after .sticky-top {
  background: linear-gradient(to bottom, #14101E 0, #14101E 160px, transparent 100%);
  height: 200px;
  grid-template-columns: 384px 1fr 384px;
  align-items: end;
  top: calc(100% + 1px);
  position: absolute;
  left: 0;
  right: 0;
  display: none;
}
@media (min-width: 55rem) {
  .everops-before-and-after .sticky-top {
    display: grid;
  }
}
.everops-before-and-after .sticky-top span {
  padding-bottom: 40px;
  display: block;
  text-align: center;
  opacity: 0.5;
  font-style: italic;
  font-size: 1.125rem;
}
.everops-before-and-after .sticky-top span:last-child {
  grid-column: 3/4;
}
.everops-before-and-after .sticky-bottom {
  background: linear-gradient(to top, #14101E 0, #14101E calc(100% - 160px), transparent 100%);
  position: absolute;
  top: calc(100% + 243px + 200px + 1px);
  left: 0;
  right: 0;
  height: calc(100vh - 243px - 200px - 14.95rem);
  display: none;
}
@media (min-width: 55rem) {
  .everops-before-and-after .sticky-bottom {
    display: block;
  }
}
.everops-before-and-after .sticky-middle {
  position: absolute;
  top: calc(100% + 243px + 1px);
  left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 789/167;
  width: calc(100% - 800px);
  background: url("../img/before-and-after.png") no-repeat center;
  background-size: contain;
  pointer-events: none;
  display: none;
}
@media (min-width: 55rem) {
  .everops-before-and-after .sticky-middle {
    display: block;
  }
}
.everops-before-and-after .everops-baa-items {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-items {
    padding: 0;
  }
}
.everops-before-and-after .everops-baa-item {
  border: 1.5px solid #42FFD6;
  padding: 2rem 1.5rem;
  border-radius: 1rem;
  font-weight: 500;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item {
    display: grid;
    grid-template-columns: 384px 1fr 384px;
    border: none;
    padding: 1rem 0;
    border-radius: 0;
    align-items: center;
  }
}
.everops-before-and-after .everops-baa-item .mobile-down-arrow {
  color: #42FFD6;
  margin: 0.25rem 0;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item .mobile-down-arrow {
    opacity: 0;
  }
}
.everops-before-and-after .everops-baa-item .mobile-title {
  font-size: 0.875rem;
  opacity: 0.5;
  margin: 0;
  line-height: 2rem;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item .mobile-title {
    display: none;
  }
}
.everops-before-and-after .everops-baa-item .before-content,
.everops-before-and-after .everops-baa-item .after-content {
  font-size: 1rem;
  display: grid;
  gap: 0.5rem;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item .before-content,
  .everops-before-and-after .everops-baa-item .after-content {
    border: 1.5px solid #42FFD6;
    padding: 2rem 1.5rem;
    border-radius: 100px;
    height: 140px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
}
.everops-before-and-after .everops-baa-item .before-content p,
.everops-before-and-after .everops-baa-item .after-content p {
  font-size: 1rem;
  margin: 0;
  width: 100%;
}
@media (min-width: 55rem) {
  .everops-before-and-after .everops-baa-item .before-content p,
  .everops-before-and-after .everops-baa-item .after-content p {
    font-size: 1.125rem;
  }
}
.everops-before-and-after .everops-baa-item .before-content a,
.everops-before-and-after .everops-baa-item .after-content a {
  color: #42FFD6;
  font-style: italic;
}