:root {
  --bs-body-font-family: 'Fira Sans', sans-serif;
  --primary-color: #FF6B00;
  --background-card: #F0F0F0;
  --color-error: #ff3333;

}
.card {
  --bs-card-border-color: transparent;
  --bs-card-border-width: 0;
}

.main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: space-between;
  max-width: 100vw;
  overflow-x: hidden;
}
.main-wrapper>main {
  flex-grow: 1;
}

#projects p {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}
#projects .p-orange-line {
  color: #FF6B00;
  font-size: 16px;
  font-weight: 500;
  line-height: 22.4px; 
}
#projects .orange-spn {
  color: #FF6B00;
  font-weight: 500;
}
.card-projects h2 {
  color: #FFF;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}
#projects .banner-img-headline {
  color: #FFF;
  font-size: 24px;
  font-style: normal;
  font-weight: 500;
  line-height: 26px;
}
#projects .banner-img-underline {
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 21px;
}
.card-projects p {
  color: #FFF;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  }
#projects ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
#projects li {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 21px;
}
#projects img {
  object-fit:contain;
}

#projects #card-dark{
  padding: 24px;
  border-radius: 16px;
  background-color: #25292C;
  color: #fff;
}
#projects .card-dark-for-img {
  padding: 24px;
  border-radius: 16px;
  background-color: #25292C;
  color: #fff;
  max-width: 100%;;
}
#projects .card-dark-for-img img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
#projects #orange-step{
  color: var(--primary-color);
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
#projects .orange-link a{
  color: var(--primary-color);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 28px;
}

#steps .wp-block-columns {
  display: flex;
  gap: 0;
  margin-top: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  background: transparent;
}
#steps .wp-block-column {

  padding: .5rem .8rem;
  position: relative;
  background: #fff;
  transition: all 0.2s ease;
}

#steps .wp-block-column:not(:last-child)::after {
  content: '';
  display: block;
  position: absolute;
  top: auto;
  bottom: 0;
  left: 1em;
  right: 1em;
  height: 2px;
  background: #D3D3D3;
  transform: translateY(1.5em);
}
#projects .content-wrapper {
  overflow: hidden;
}

@media screen and (min-width: 782px) {
  #steps .wp-block-column {
      flex: 1;
      padding: 1.5rem 1.8rem;
      position: relative;
      background: #fff;
      transition: all 0.2s ease;
    }

    #steps .wp-block-column:not(:last-child)::after {
      right: 0;
      left: auto;
      bottom: 1em;
      top: 1em;
      width: 2px;
      height: auto;
      transform: translateY(0) translateX(1em);
    }
}

@media screen and (min-width: 991px) {
  .wp-block-gallery.owl-carousel .owl-stage-outer:before {
      width: 100%;
      content: '';
      display: block;
      height: 100%;
      top: 0;
      position: absolute;
      left: -100%;
      background: #fff;
      z-index: 3;
    }

}
@media screen and (min-width: 1200px) {
  #projects p {
    font-size: 18px;
    line-height: 25.2px;
  }
  #projects .p-orange-line {
    font-size: 24px;
    line-height: 33.6px; 
  }
  #projects li {
    font-size: 18px;
    line-height: 25.2px;
  }
  .card-projects h2 {
    font-size: 32px;
  }
  .card-projects p {
    font-size: 20px;
  }
  #projects #card-dark{
    padding: 60px;
    border-radius: 24px;
    background-color: #25292C;
    color: #fff;
  }
  #projects .card-dark-for-img {
    padding: 40px;
    border-radius: 32px;
    background-color: #25292C;
    color: #fff;
    max-width: 35vw;
    height: auto;
  }
  #projects #orange-step{
    font-size: 64px;
  }
  #projects .orange-link a{
    font-size: 24px;
  }
  #projects .banner-img-headline {
    color: #FFF;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 38.4px;
  }
  #projects .banner-img-underline {
    color: #FFF;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: -0.18px;
  }
}