nb-card {
  @apply com-mx-0 com-my-4;

  nb-card-body {
    @apply com-p-0 com-overflow-hidden;

    .events {
      @apply com-bg-white com-rounded-xl;

      .heading {
        @apply com-m-0 com-pt-9 com-pb-6 com-text-center com-leading-4 com-no-underline com-flex com-items-center com-font-bold com-text-2xl com-text-Dark-Jungle-Green;
        @apply md:com-text-3xl md:com-text-start md:com-py-8 com-ml-6;

        button {
          @apply com-mr-4;
        }
      }
      .upcoming-events-section {
        @apply com-my-0;

        .upcoming-events-container {
          @apply com-flex com-flex-row com-flex-wrap com-mx-4 md:com-mx-6 com-justify-between;

          a {
            @apply com-relative com-no-underline com-mb-4;

            &.upcoming-single-event {
              @apply com-flex-col com-w-full md:com-w-[1220px];
            }

            &.upcoming-multiple-events {
              @apply com-flex-row com-w-full md:com-w-[600px];
            }

            .upcoming-events {
              @apply com-border com-border-solid com-border-Bright-Gray com-overflow-hidden hover:com-shadow-Card com-rounded-lg  com-flex com-flex-row com-flex-wrap com-m-0;

              .upcoming-events-body {
                app-badge {
                  @apply com-absolute com-top-0;
                }

                nb-card-body {
                  nb-icon {
                    @apply com-text-5xl;
                  }
                }

                .no-image-header {
                  @apply com-flex com-items-center com-text-center;
                  aspect-ratio: 16/6;

                  nb-icon {
                    @apply com-m-auto com-text-5xl;
                  }
                }

                .upcoming-details {
                  @apply com-p-4 com-border-t com-border-x-0 com-border-b-0 com-border-solid com-border-Bright-Gray;

                  .upcoming-details-container {
                    .details {
                      @apply md:com-flex md:com-flex-row md:com-justify-between md:com-items-start;

                      .event-name {
                        @apply com-text-xl com-leading-6 com-mt-0 com-font-semibold com-mb-0 com-text-Dark-Jungle-Green com-line-clamp-2;
                        @apply md:com-leading-8 md:com-mt-4;

                        .collaboration {
                          @apply com-text-xs com-font-normal;
                        }
                      }

                      .event_type_button {
                        @apply com-mt-3 com-bg-white com-rounded-lg com-border-Light-Silver com-border com-text-Vampire-Black com-text-sm com-font-normal;
                        @apply md:com-mt-4 md:com-mb-0 md:com-ml-4;

                        fa-icon {
                          @apply com-mr-1 com-text-red-500;
                        }
                      }

                      .event-timing {
                        @apply com-text-sm com-mt-1 com-font-normal com-text-Auro-Metal-Saurus com-mb-0 com-p-0;
                        @apply md:com-mt-2;
                      }
                    }
                  }

                  .interested-members {
                    @apply com-text-xs com-mt-6 com-font-normal com-text-Auro-Metal-Saurus com-items-center;
                    @apply md:com-text-sm md:com-m-0 md:com-flex md:com-justify-between md:com-mt-6;
                    .location {
                      @apply com-mb-2;
                      @apply md:com-mb-0;
                      nb-icon {
                        @apply com-text-2xl;
                      }
                    }
                    div {
                      @apply com-flex com-items-center;
                      nb-icon {
                        @apply com-mr-2 com-text-Dark-Jungle-Green;
                        @apply md:com-mr-6px com-text-2xl;
                      }
                    }
                  }

                  .register-button {
                    @apply com-mt-8 md:com-mt-0;
                  }
                }
              }
            }
          }
        }
      }

      .past-events {
        @apply com-flex com-flex-col com-mx-auto com-my-0;

        .heading {
          @apply com-font-semibold com-text-base com-text-center com-leading-4 com-m-0 com-text-Dark-Jungle-Green;
          @apply md:com-font-bold md:com-text-3xl md:com-text-start md:com-ml-6;

          button {
            @apply com-mr-4;
          }

          fa-icon {
            @apply com-text-2xl;
          }
        }

        .past-events-container {
          @apply com-flex com-flex-row com-flex-wrap com-mx-4 md:com-mx-6 com-gap-x-[22px];
          a {
            @apply com-relative com-w-full md:com-w-[390px] com-no-underline com-mb-6;

            .past-container {
              @apply com-border com-border-solid com-border-Bright-Gray com-overflow-hidden hover:com-shadow-Card com-rounded-xl com-my-0;

              nb-icon {
                @apply com-text-5xl;
              }

              .no-image-header {
                @apply com-h-[148px] com-flex com-items-center com-text-center;

                nb-icon {
                  @apply com-m-auto;
                }
              }

              .past-details {
                @apply com-border-t com-border-x-0 com-border-b-0 com-border-solid com-border-Bright-Gray com-text-3xl com-font-normal com-overflow-hidden com-mb-4;

                .past-details-container {
                  @apply com-h-[124px] com-mb-30px;

                  .detailss {
                    @apply com-flex com-justify-between;

                    .completed {
                      @apply com-flex com-text-sm com-font-medium com-text-Crayola-Green com-mb-0 com-m-4;
                      nb-icon {
                        @apply com-w-14px com-h-14px com-text-Crayola-Green com-ml-1;
                      }
                    }

                    .interested-members {
                      @apply com-text-sm com-m-4 com-font-light com-text-Auro-Metal-Saurus com-items-center com-mb-0;
                      @apply md:com-flex md:com-justify-between;
                    }
                  }

                  .event-name {
                    @apply com-text-Dark-Jungle-Green com-font-semibold com-text-xl com-leading-6 com-mx-4 com-mb-0 com-line-clamp-2 com-mt-4;

                    .collaboration {
                      @apply com-text-sm com-font-normal;
                    }
                  }

                  .event-timings {
                    @apply com-text-sm com-font-normal com-text-Auro-Metal-Saurus com-mx-4 com-mb-0 com-mt-1;
                  }
                }

                .view-details {
                  @apply com-font-medium com-text-base com-text-Charcoal com-mx-4 com-mt-0 com-pt-0;
                }
              }
            }
          }
        }
      }
    }
  }
}

app-pagination,
app-loading-spinner {
  @apply com-p-4;
}

.heading-btn {
  @apply com-flex com-justify-center com-items-center com-px-4 com-py-2 com-bg-[#f7f9fc] com-rounded-lg com-mr-4;
}

fa-icon {
  @apply com-text-2xl com-text-gray-800;
}
