/* Targeted alignment fixes for existing SmartBiz components. */

.services-three .row {
  align-items: stretch;
}

.services-three .row > [class*="col-"] {
  display: flex;
}

.services-three .row > [class*="col-"] > * {
  display: flex;
  width: 100%;
}

.services-three__single {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
}

.services-three__explore-more {
  margin-top: auto;
}

.testimonial-one .swiper-wrapper {
  align-items: stretch;
}

.testimonial-one .swiper-slide {
  display: flex;
  height: auto;
}

.testimonial-one .swiper-slide > .item {
  display: flex;
  width: 100%;
}

.testimonial-one__single {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

.testimonial-one__single-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

.testimonial-one__author {
  margin-top: auto;
}

.news-two__title a,
.news-page__title a {
  display: -webkit-box;
  min-height: 64px;
  max-height: 64px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Keep the original service-card composition, with clean joined corners. */
.feature-one .row,
.project-one .filter-layout,
.services-one .row {
  align-items: stretch;
}

.feature-one .row > [class*="col-"],
.project-one .filter-layout > [class*="col-"],
.services-one .row > [class*="col-"] {
  display: flex;
}

.feature-one .row > [class*="col-"] > *,
.services-one .row > [class*="col-"] > * {
  display: flex;
  width: 100%;
}

.feature-one__single {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 30px);
}

.feature-one__img-box,
.feature-one__img {
  width: 100%;
}

.feature-one__img {
  aspect-ratio: 3 / 2;
  border-radius: 20px 20px 0 0;
}

.feature-one__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-one__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  border-radius: 0 0 20px 20px;
}

.feature-one__btn {
  margin-top: auto;
}

/* Dynamic project images retain the original template's 420 x 500 frame. */
.project-one .filter-layout {
  justify-content: center;
}

.project-one__single {
  width: 100%;
}

.project-one__single-img {
  width: 100%;
  aspect-ratio: 420 / 500;
}

.project-one__single-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Preserve the original Who We Are blob geometry for replacement images. */
.about-one__img {
  aspect-ratio: 645 / 600;
  overflow: hidden;
}

.about-one__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Use the existing icon treatment with the related Font Awesome glyphs. */
.services-one__icon .fab,
.services-one__icon .fas {
  color: var(--smartbiz-base);
  font-size: 52px;
}

.services-one__single {
  width: 100%;
  min-height: 230px;
  height: calc(100% - 30px);
}

.services-one__icon {
  flex: 0 0 60px;
}

.services-one__content {
  display: flex;
  flex-direction: column;
}

.services-one__learn-more {
  margin-top: auto;
}

/* Keep breathing room before Latest Insights. */
.testimonial-one {
  padding-bottom: 70px;
}

.news-one {
  padding-top: 60px;
}

/* Make the technology stack more prominent without changing its carousel. */
.brand-one .swiper-slide img {
  width: auto;
  height: 68px;
  max-width: 180px;
  object-fit: contain;
}

@media (min-width: 768px) and (max-width: 1199px) {
  /* The final Core Services card belongs at the left of the next row. */
  .feature-one .row {
    justify-content: flex-start;
  }

  /* The About visual should use the complete tablet content width. */
  .about-one__left {
    width: 100%;
    max-width: none;
  }

  .about-one__img,
  .about-one__img img {
    width: 100%;
  }

  /* Preserve the alternating process design while removing excess gaps. */
  .how-it-work .row {
    row-gap: 24px;
  }

  .how-it-work__single,
  .how-it-work__single-2 {
    margin-bottom: 0;
  }

  .how-it-work__title {
    margin-top: 24px;
    margin-bottom: 12px;
  }

  .how-it-work__single-2 .how-it-work__title {
    margin-top: 0;
  }

  .how-it-work__single-2 .how-it-work__text {
    margin-bottom: 16px;
  }
}

@media (max-width: 767px) {
  .news-two__title a,
  .news-page__title a {
    min-height: 58px;
    max-height: 58px;
  }

  .about-one__left {
    width: 100%;
    max-width: none;
  }

  .about-one__img,
  .about-one__img img {
    width: 100%;
  }

  .brand-one .swiper-slide img {
    height: 58px;
    max-width: 150px;
  }
}