#contact-section {
  background-image: url("../../assets/index/contact-us-bg.webp");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 400px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 1;
  }

  .overlay-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    > * {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }

    &.visible {
      > .title {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0s;
      }

      > h2 {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.2s;
      }

      > .contact-us-page-btn {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.4s;
      }
    }

    .title {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 0.5rem;
    }

    .subtitle {
      font-size: clamp(1rem, 3vw, 2rem);
      margin-bottom: 1rem;
    }

    h2 {
      font-size: clamp(1.5rem, 2.5vw, 1.25rem);
    }

    .contact-us-page-btn {
      .btn {
        padding: 8px 16px;
        /* font-size: 1rem; */
        font-weight: bold;
        border-radius: 0.5rem;
        background-color: var(--color-primary);
        color: var(--color-text-white);
        text-decoration: none;
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-8px);
          background-color: var(--color-primary-hover);
          color: var(--color-text-white);
        }
      }
    }
  }

  @media (max-width: 768px) {
    height: 400px;
  }
}