.community-group {
  .header {
    @apply com-flex com-flex-col com-bg-white com-m-0 com-mb-4;
    .banner {
      @apply com-m-0 com-mt-4;
      .banner-image {
        @apply com-bg-green-800 com-w-full com-h-[192px] com-object-contain md:com-w-[1280px] com-rounded-tl-lg com-rounded-tr-lg;
      }
    }

    .page-header {
      @apply com-flex md:com-flex-row com-flex-col com-items-center md:com-items-start com-content-start com-mx-0 com-pb-4;

      .logo-section {
        @apply com-w-44 com-h-44 md:com-w-[200px] md:com-h-[200px] com-rounded-[20px] -com-mt-20 md:-com-mt-28 md:com-mx-6 com-bg-tWhite com-shadow-md com-flex com-justify-center com-border com-border-solid com-border-Bright-Gray com-flex-shrink-0;

        .logo {
          @apply com-my-0 com-mx-auto com-px-2 com-w-full com-h-auto com-object-contain com-rounded-xl;
        }
      }

      .details {
        @apply com-flex com-flex-col com-items-center md:com-items-start md:com-mx-0 com-mx-4 com-mt-3 md:com-mr-6 md:com-mb-6 com-mb-0 com-w-full;

        .heading {
          @apply com-m-0 com-mb-6px com-flex md:com-flex-row com-flex-col com-items-center com-justify-between com-w-full;

          .name-logo {
            @apply com-flex com-flex-row com-items-center;
            .name {
              @apply com-text-2xl com-font-bold com-text-Yankees-Blue com-m-0;
            }

            .logo {
              @apply com-w-6 com-h-6 com-flex com-items-center com-justify-center com-rounded-full com-border com-border-solid com-text-Yankees-Blue com-border-Yankees-Blue com-p-6px com-m-0 com-ml-2  com-flex-shrink-0;

              fa-icon {
                @apply com-text-xs;
              }
            }
          }

          .social-links {
            @apply com-flex com-flex-row com-space-x-4 com-justify-end com-items-center;
            a {
              @apply com-flex com-justify-center com-items-center com-border com-border-solid com-border-Bright-Gray com-p-2px;
              nb-icon {
                @apply com-text-base;
              }
            }
          }
        }

        .mini-description {
          @apply com-text-sm com-font-normal com-text-Auro-Metal-Saurus com-m-0 com-mb-4 md:com-w-full com-w-[80%] md:com-text-start com-text-center;
        }

        .links {
          @apply com-flex md:com-flex-row com-flex-col md:com-justify-between com-items-center com-w-full;

          app-badge {
            @apply com-m-0 md:com-mb-0 com-mb-2;
          }
        }
      }
    }
  }

  .page-menu {
    @apply com-sticky com-top-16 com-z-20 com-bg-white com-m-0 com-overflow-scroll md:com-overflow-hidden com-pt-3 com-shadow-lg com-rounded-bl-lg com-rounded-br-lg com-pl-1;

    .menu-items {
      a {
        @apply com-text-gunmetal com-text-sm com-leading-4 com-h-fit com-m-0 com-pt-0 com-px-5 com-pb-3 com-cursor-pointer com-no-underline;

        fa-icon {
          @apply com-text-gunmetal com-opacity-80 com-text-xl md:com-text-lg;
        }

        .title {
          @apply com-self-center com-ml-2;
        }

        span {
          @apply com-hidden;
          @apply md:com-inline;
        }
      }

      .active {
        @apply com-border-0 com-border-b-3 com-border-solid com-border-primary-500;

        fa-icon,
        .title {
          @apply com-text-primary-500;
        }
      }
    }
  }
}
