.header {
  @apply com-h-full;
  .background-image {
    @apply com-relative com-m-0 com-p-0 com-w-full com-h-full com-bg-no-repeat com-bg-contain com-bg-center;
  }

  .content {
    @apply com-flex md:com-flex-row com-flex-col md:com-px-0 com-px-4 md:com-text-left com-text-center md:com-max-w-[1280px] com-max-w-full md:com-items-start com-items-center;
  }

  .banner {
    @apply md:com-mt-auto md:com-mb-0 com-my-4 md:com-absolute com-relative md:com-bottom-10;
    z-index: 2;
  }

  .base-layout {
    @apply com-flex com-min-h-0;
  }

  .header-text-banner {
    @apply com-flex com-flex-col com-p-0;

    div {
      ::ng-deep {
        h5 {
          @apply com-m-0;
          span {
            @apply md:com-text-tWhite com-text-black #{!important};
          }
        }
      }
    }

    .title {
      @apply com-text-[32px] com-font-bold md:com-text-tWhite com-text-black com-m-0 md:com-mt-0 com-mt-1 com-mb-3;
    }
  }

  .header-text-no-banner {
    @apply com-flex com-flex-col com-p-0;

    div {
      ::ng-deep {
        h5 {
          @apply com-m-0;
          span {
            @apply com-text-black #{!important};
          }
        }
      }
    }

    .title {
      @apply com-text-[32px] com-font-bold com-text-black com-m-0 com-mb-3 md:com-mt-0 com-mt-2;
    }
  }

  .logo-image {
    @apply com-h-[140px] com-w-[170px] md:com-mr-6 com-mr-0 com-flex com-flex-shrink-0 com-bg-tWhite com-rounded-[20px];
    img {
      @apply com-h-full com-w-full com-rounded-[20px] com-object-cover;
    }
  }

  .gradient-overlay {
    @apply com-absolute com-top-0 com-left-0 com-w-full com-h-full md:com-flex com-hidden;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 85.55%);
    z-index: 1;
  }
}
