.split {
  opacity: 1;
  will-change: transform;
}

.split > div {
  display: inline-block;
  will-change: transform;
}


.card {
  position: sticky;
  top: 80px;
  z-index: 1;
}


.card__inner {
  will-change: transform;
  display: flex;
  overflow: hidden;
  transform-origin: center top;
}

.cards {
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-rows: repeat(var(--cards-count), var(--card-height));
  gap: 40px 0;
}


.space {
  height: 90vh;
}

.space--small {
  height: 40vh;
}

@media (max-width: 600px) {
  .card__inner {
    flex-direction: column;
  }

}

#services .third-containers .image {
  height: 250px;
  background-size: cover;
  background-position: center;
}

#services .third-containers {
    align-items: center
}

.image-container .light-green-bg, .image-container .color-dark-beige, .image-container .color-light-blue {
    width: 100%;
    padding: 34px 40px;
}

.third-containers .image-container {
    width: 100%;
}

.bottom-border {
    border-bottom: 1px solid black;
    padding: 10px 0;
}

.iamge.active-img {
    height: 350px;
}

.bottom-border p {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  transition: color 0.3s ease;
}

.hover-arrow {
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.3s ease;
  font-size: 1rem;
  color: inherit;
}

.bottom-border:hover .hover-arrow {
  opacity: 1;
  transform: translateX(0);
}

.image-container {
  overflow: hidden;
  transition: transform 0.4s ease;
}

.image-container .image {
  transition: transform 0.4s ease;
}

.image-container:hover .image {
  transform: scale(1.05);
}

/* Prevent CSS transitions from interfering with fade */
.card,
.project,
.project .logo,
.project h3,
.project p,
.project .tags,
.project .btn,
.project .text-button-group {
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
}

/* Remove inherited transitions from buttons, paragraphs, etc */
p, button, .text-button-group *, .card *, .project * {
  transition: none !important;
}

/* Ensure .card starts visible and can fade correctly */
.card {
  opacity: 1;
  visibility: visible;
}

/* Optional: hide pseudo-elements during fade if needed */
.project::before,
.project-img::before {
  opacity: 1;
  visibility: visible;
  transition: none;
}

.image-group .text-group {
    margin: 0;
    gap: 0px;
}

.image-group .bottom-border {
    padding-top: 20px;
}

.large-bottom-border {
    padding: 42px 40px;
    border-bottom: 2px solid var(--secondary-color);
}



aside {
  position: -webkit-sticky;
  position: sticky;
  top: 120px;
  padding-top: 100px;
}
.sticky-trigger {
  height: 120px;
  position: relative;
  top: -120px;
}

.colored-boxes {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.colored-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-beige-color);
    padding: 0 42px 40px 42px;
    text-align: center;
    border-radius: 8px;
}

.lottie-player {
    width: 140px;
    height: 140px;
}

.colored-box .icon-group {
    padding: 40px 10px;
}

.colored-box .text-group {
        gap: 12px;
}

.mobile .large-bottom-border {
    padding-left: 0;
    padding-right: 0;
}

.container.bg-img {
    border-radius: 8px;
}