/* === Banner Expertise === */
.expertise-banner {
  padding: 0 34px;
  margin-bottom: 175px;
  position: relative;
  overflow: visible;
  z-index: 0;
}

.expertise-banner img {
  width: 100%;
  display: block;
}

.expertise-banner img:first-child {
  margin-bottom: 32px;
}

.expertise-banner img:last-child {
  transform-origin: center center;
  transition: transform 0.2s ease-out;
}



/* === Lottie Wrapper === */
.lottie-wrapper {
  position: absolute;
  bottom: -20px;
  left: 85%;
  transform: translateX(-50%);
  width: 100px;
  height: 100px;
  pointer-events: none;
  z-index: 0;
}

.lottie-wrapper dotlottie-player {
  width: 100% !important;
  height: 100% !important;
  display: block;
  visibility: visible;
  opacity: 1;
}
  
  /** === Info Expertise === */
  .expertise-info {
    display: flex;
    padding: 0 34px;
    margin-bottom: 216px;
    position: relative;
    z-index: 0;
  }
  
  .expertise-info .title {
    width: 50%;
    font-size: 48px;
    font-weight: 700;
    margin: 0;
    font-family: "Uncut Sans";
  }
  
  .expertise-info .info {
    font-size: 24px;
    font-weight: 400;
    margin: 0;
    font-family: "Uncut Sans";
  }
  
  .expertise-info .subtitle {
    font-size: 12px;
    font-weight: 400;
    margin: 0 0 24px 0;
  }
  
  .expertise-info > div {
    width: 50%;
  }
  
  /** === Mobile Styles === */
  @media (max-width: 768px) {
    .expertise-banner {
      padding: 0 15px;
      margin-bottom: 60px;
    }
  
    .expertise-banner img:first-child {
      margin-bottom: 10px;
    }
  
    .lottie-wrapper {
      left: 85%;
      bottom: -80px;
      width: 80px;
      height: 80px;
    }
  
    .expertise-info {
      flex-wrap: wrap;
      padding: 0 15px;
      margin-bottom: 64px;
    }
  
    .expertise-info .title {
      width: 100%;
      font-size: 35px;
      margin-bottom: 1rem;
    }
  
    .expertise-info > div {
      width: 100%;
    }
  
    .expertise-info .info {
      font-size: 18px;
      line-height: normal;
    }
  }