.res-hero {
  padding-top: var(--spacing_large);
  padding-bottom: var(--spacing_large);

  .container {
    display: flex;
    gap: var(--column_spacing_large);

    .hero-left {
      flex: 4;

      p {
        color: var(--res5) !important;
      }

      .hero-buttons {
        @media screen and (max-width: 767px) {
          flex-direction: column;
        }
      }
    }

    .hero-right {
      flex: 6;
      padding: 0 var(--spacing_large);
      img {
        border-radius: var(--border_radius);
        height: 100%;
        object-fit: cover;
      }

      @media screen and (max-width: 991px) {
        padding: 0;


      }
    }

    @media screen and (max-width: 767px) {
      flex-direction: column-reverse;

      .hero-left {

      }

      .hero-right {

      }
    }
  }
}