#utp {
   width: 100%;
   height: 700px;
   background: #3E3E3E;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

#utp picture.bg {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   z-index: 1;
   opacity: 0.5;
}

#utp .wrapper {
   position: relative;
   z-index: 2;
}

#utp h5 {
   font-weight: 400;
   font-size: var(--fz-25);
   text-align: center;
   color: #fff;
   margin: 0 auto;
}

#utp h4 {
   font-weight: 700;
   font-size: 75px;
   text-align: center;
   color: #fff;
   margin: 6px auto 27px;
}

#utp p {
   font-weight: 300;
   font-size: var(--fz-25);
   text-align: center;
   color: #fff;
   margin: 0 auto 34px;
   max-width: 864px;
}

#utp .button {
   font-weight: 500;
   font-size: var(--fz-16);
   color: #fff;
   display: table;
   margin: 0 auto;
}

@keyframes arrowBounce {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-5px);
   }
}

#utp .button i.mso {
   display: table;
   margin: 9px auto 0;
   animation: arrowBounce 1s ease-in-out infinite;
}

#employees {
   width: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-wrap: wrap;
   gap: 80px 15px;
   padding-top: var(--pt-120);
}

#employees .item {
   width: calc(33.333% - 10px);
   cursor: default;
}

#employees .item picture {
   width: 100%;
   height: 500px;
   border-radius: 10px;
}

#employees .item:hover picture img {
   width: 105%;
   height: 105%;
}

#employees .item .name {
   margin-top: 15px;
   margin-bottom: 8px;
   font-weight: 500;
   font-size: 22px;
   text-align: center;
   color: var(--black);
   display: block;
}

#employees .item .jobTitle {
   font-weight: 300;
   font-size: var(--fz-16);
   text-align: center;
   color: var(--black);
}

#employees .item:hover .name,
#employees .item:hover .jobTitle {
   color: var(--blue);
}

#employees .promo {
   width: calc(33.333% - 10px);
   height: 500px;
   display: block;
   border-radius: 10px;
   background: url("../images/bg-emplote-promo.webp") no-repeat var(--blue);
   background-position: 0 205px;
   padding: 40px 30px;
   cursor: default;
}

#employees .promo:hover {
   background-position: 0 180px;
}

#employees .promo h2 {
   font-weight: 500;
   font-size: var(--fz-25);
   line-height: 140%;
   text-transform: uppercase;
   color: #fff;
}

#employees .promo ul {
   margin: 20px 0;
   padding-left: 20px;
}

#employees .promo ul li {
   font-weight: 300;
   font-size: var(--fz-18);
   line-height: 140%;
   color: #fff;
   margin-bottom: 8px;
}

#employees .promo ul li:last-child {
   margin-bottom: 0px;
}

#employees .promo a.button {
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 6px;
   font-weight: 300;
   font-size: var(--fz-18);
   line-height: 140%;
   color: #fff;
}

#employees .promo a.button i.mso {
   font-size: var(--fz-16);
}

#employees .promo a.button:hover {
   gap: 12px;
}

@media only screen and (max-width: 1280px) {}

@media only screen and (max-width: 1180px) {}

@media only screen and (max-width: 1080px) {}

@media only screen and (max-width: 980px) {

   #utp {
      height: 400px;
   }
}

@media only screen and (max-width: 880px) {}

@media only screen and (max-width: 780px) {}

@media only screen and (max-width: 680px) {

   #employees {
      gap: 20px 10px;
      justify-content: space-between;
   }

   #employees .item {
      width: calc(50% - 10px);
   }

   #employees .item picture {
      height: 300px;
   }

   #employees .promo {
      width: 100%;
      height: auto;
      padding: 20px;
   }
}

@media only screen and (max-width: 580px) {}

@media only screen and (max-width: 480px) {}

@media only screen and (max-width: 380px) {}