:root {
  --primary: #F9BF2B;
  --mild-yellow: #F4C643;
  --red: #F4C643;
  --white: #ffffff;
  --gray: #282827;
  --medium-gray: #E9E9EC;
  --light-gray: #F2F2F8;
  --dark: #3c3c3c;
  --black: #0E0E0E;
}

.header-with-image {
  min-height: 320px;
  overflow-x: clip;
}
.header-with-image h1 {
  font-size: 2.625rem;
}
.header-with-image p {
  max-width: 500px;
}
.header-with-image .image {
  right: 0;
}
@media screen and (min-width: 1921px) {
  .header-with-image .image {
    right: initial;
    left: 50%;
  }
}
.header-with-image .image img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: 50vw;
  min-width: 50vw;
  height: 100%;
}
@media screen and (max-width: 991.98px) {
  .header-with-image .image img {
    max-width: 100%;
    border-radius: 20px;
    min-height: 200px;
    margin-bottom: -30px;
  }
}

.media-item {
  margin-bottom: 50px;
}
.media-item .wrapper {
  padding-left: 4.5rem;
}
@media screen and (max-width: 991.98px) {
  .media-item .wrapper {
    padding-left: 0;
  }
}
.media-item .wrapper .content .logo {
  width: 200px;
  height: auto;
  margin-bottom: 40px;
}
.media-item .wrapper .content h2 {
  max-width: 350px;
  font-size: 2rem;
}
.media-item .wrapper .content p {
  max-width: 530px;
}
.media-item .wrapper .image a {
  position: relative;
  display: flex;
}
.media-item .wrapper .image a picture {
  width: 100%;
}
.media-item .wrapper .image a picture img {
  width: 100%;
  height: 460px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
}
@media screen and (max-width: 767.98px) {
  .media-item .wrapper .image a picture img {
    height: 300px;
  }
}
.media-item .wrapper .image a .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(from var(--primary) r g b/0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}
.media-item .wrapper .image a .overlay p {
  font-weight: bold;
  font-size: 22px;
  color: var(--black);
}
.media-item .wrapper .image a:hover .overlay {
  opacity: 1;
}

.products-banner-services .product-wrapper *:not(a) {
  color: var(--white);
}
.products-banner-services .product-wrapper p {
  max-width: 520px;
  margin: auto;
  font-size: 1.125rem;
}
.products-banner-services .product-wrapper .product-count b {
  font-size: 3.125rem;
}
.products-banner-services .product-wrapper .screen, .products-banner-services .product-wrapper .poster {
  position: absolute;
  bottom: 0;
}
.products-banner-services .product-wrapper .screen {
  left: -2px;
}
@media screen and (max-width: 1100px) {
  .products-banner-services .product-wrapper .screen {
    left: -35px;
  }
}
@media screen and (max-width: 767.98px) {
  .products-banner-services .product-wrapper .screen {
    display: none;
  }
}
.products-banner-services .product-wrapper .poster {
  right: 0;
}
@media screen and (max-width: 1199.98px) {
  .products-banner-services .product-wrapper .poster {
    display: none;
  }
}
@media screen and (max-width: 991.98px) {
  .products-banner-services .product-wrapper .poster {
    display: block;
  }
}
@media screen and (max-width: 767.98px) {
  .products-banner-services .product-wrapper .poster {
    display: none;
  }
}
.products-banner-services .product-wrapper .poster img {
  display: block;
  width: 100%;
  height: 100%;
}
.products-banner-services .product-wrapper .poster img.moved {
  transform: translateY(40px) translateX(60px);
  max-height: 470px;
}
.products-banner-services .services-wrapper {
  max-width: 450px;
}
@media screen and (max-width: 991.98px) {
  .products-banner-services .services-wrapper {
    max-width: 100%;
  }
}
.products-banner-services .services-wrapper h3 {
  font-size: 1.5rem;
  font-weight: 600;
}
.products-banner-services .services-wrapper .service img {
  margin-right: 1rem;
}
.products-banner-services .services-wrapper .service h4 {
  font-size: 1rem;
}