/* Built Solutions section styling, extracted verbatim from the homepage
   stylesheet (assets/styles/style.css) so the section on /web-development
   renders identically to the home page. The page's marketingPage/style.css
   carries an older variant of these rules; this file is loaded after it to
   override them. */

@media (max-width: 767px) {
  #built-solution .container {padding-left: 0;
    padding-right: 0;}
}

#built-solution {gap: 18px;}

@media (max-width: 767px) {
  #built-solution {gap: 60px;}
}

#built-solution .title-block {margin-top: 28px;}

@media (max-width: 767px) {
  #built-solution .title-block {margin-top: 0;}
}

#built-solution .content {overflow: hidden;
  margin-top: 0;}

@media (max-width: 767px) {
  #built-solution .content {margin-top: 40px;}
}

#built-solution .slider-built-solution {display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;}

#built-solution .slider-built-solution .text-infortion-slider {position: absolute;
  right: 0;
  top: 42px;
  margin-left: auto;
  margin-right: 40px;
  display: flex;
  height: 100px;}

@media (max-width: 767px) {
  #built-solution .slider-built-solution .text-infortion-slider {display: none;}
}

#built-solution .slider-built-solution .text-slide .text-block {display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;}

#built-solution .slider-built-solution .text-slide .text-block h3 {font-weight: 600;
  font-size: 20px;}

#built-solution .slider-built-solution .text-slide .text-block h4 a,
#built-solution .slider-built-solution .text-slide .text-block h4 a:visited {color: #fff;}

#built-solution .slider-built-solution .text-slide .text-block span {font-weight: 400;
  font-size: 16px;
  opacity: 0.5;}

#built-solution .slider-built-solution .tablet-wrapper {position: relative;
  width: 100%;
  max-width: 100%;}

@media (max-width: 767px) {
  #built-solution .slider-built-solution .tablet-wrapper {width: 155%;
    max-width: 155%;}
}

#built-solution .slider-built-solution .tablet-wrapper .bs-swiper-button-prev {position: absolute;
  display: flex;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  z-index: 10;
  left: 11%;}

@media (max-width: 767px) {
  #built-solution .slider-built-solution .tablet-wrapper .bs-swiper-button-prev {display: none;}
}

#built-solution .slider-built-solution .tablet-wrapper .bs-swiper-button-next {position: absolute;
  display: flex;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  z-index: 10;
  right: 13%;}

@media (max-width: 767px) {
  #built-solution .slider-built-solution .tablet-wrapper .bs-swiper-button-next {display: none;}
}

#built-solution .bs-swiper {position: absolute;
  inset: 0;
  width: 63%;
  margin-top: 10.2%;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16/9;
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;}

#built-solution .bs-swiper .swiper-slide img {width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;}

#built-solution .text-slider-mobile {display: flex;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 20px;}

@media (min-width: 1280px) {
  #built-solution .text-slider-mobile {display: none;}
}

@media (min-width: 768px) and (max-width: 1024px) {
  #built-solution .text-slider-mobile {display: none;}
}

#built-solution .text-slider-mobile .bs-text-swiper-mobile .swiper-slide {display: flex;
  justify-content: center;}

#built-solution .text-slider-mobile .bs-text-swiper-mobile .swiper-slide .text-block {align-items: center;}

#built-solution .text-slider-mobile .bs-text-swiper-mobile .bs-swiper-button-prev {position: absolute;
  display: flex;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  z-index: 10;
  left: 11%;}

#built-solution .text-slider-mobile .bs-text-swiper-mobile .bs-swiper-button-next {position: absolute;
  display: flex;
  aspect-ratio: 1;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 44px;
  z-index: 10;
  right: 13%;}

#built-solution .tablet-image {position: relative;
  width: 100%;
  z-index: 5;
  pointer-events: none;
  display: block;}