body {
    margin: 0;
  }
  
  :root {
    /* fonts */
    --button-m: "Maven Pro";
  
    /* font sizes */
    --font-size-base: 1rem;
    --display-3-medium-size: 1.25rem;
    --font-size-5xl: 1.5rem;
    --button-m-size: 0.875rem;
  
    /* Colors */
    --color-text-white: #fafafa;
    --color-gray-100: #1a1a1a;
    --color-primary-500: #ff4d01;
    --button-color-primary-background-default: rgba(255, 77, 1, 0.7);
    --color-text-grey: #b3b3b3;
  
    /* Spacing */
    --radius-radius-lg: 0.625rem;
    --button-size-md-h-padding: 1.5rem;
    --button-size-md-v-padding: 1.25rem;
    --button-radius-md: 1.125rem;
  
    /* Gaps */
    --gap-base: 1rem;
    --gap-5xl: 1.5rem;
    --gap-41xl: 3.75rem;
    --gap-3xs: 0.625rem;
    --gap-5xs: 0.5rem;
  
    /* Paddings */
    --padding-xl: 1.25rem;
    --padding-21xl: 2.5rem;
  
    /* Border radiuses */
    --br-5xl: 24px;
  }
  .navigation-container {
    height: 5rem;
    width: 55.75rem;
    align-items: center;
    justify-content: flex-start;
    padding: 0.687rem 0 0;
    gap: var(--gap-41xl);
  }
  .header {
    width: 120rem;
    height: 9.063rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2rem 2.75rem 0;
    z-index: 17;
    text-align: center;
    font-size: var(--font-size-base);
    color: var(--color-text-white);
    font-family: var(--button-m);
  }
  .card-content .b {
    line-height: 1.2rem;
  }
  .breadcrumbs {
    position: relative;
    line-height: 150%;
    color: var(--color-primary-500);
    cursor: pointer;
    z-index: 17;
  }
  .main-title,
  .subtitle {
    margin: 0;
    position: relative;
    line-height: 100%;
    font-family: inherit;
    z-index: 17;
  }
  .main-title {
    font-size: inherit;
    font-weight: 700;
  }
  .subtitle {
    font-size: var(--font-size-5xl);
    font-weight: 400;
    color: var(--color-primary-500);
  }
  .title-container,
  .title-container-wrapper {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
  .title-container {
    flex-direction: column;
    gap: 0.875rem;
  }
  .title-container-wrapper {
    flex-direction: row;
    padding: 0 0.062rem 1.875rem;
    font-size: 2.5rem;
  }
  .well-being-check-in-1-icon {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .header1 {
    align-self: stretch;
    position: relative;
    line-height: 120%;
  }
  .card-title-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
  .desc-txt{
    margin: 0;
    line-height: 1.7rem;
    color: var(--color-text-grey);
    margin-top: 1rem;
  }
  .card-text-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--gap-base);
  }
  .card-container,
  .card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .card-content {
    align-self: stretch;
    justify-content: flex-start;
    gap: var(--gap-5xl);
  }
  .card-content b {
    white-space: nowrap;
  }
  .card-container {
    flex: 1;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.35);
    border-radius: var(--br-5xl);
    background-color: var(--color-gray-100);
    overflow: hidden;
    justify-content: center;
    padding: var(--padding-21xl);
    box-sizing: border-box;
    gap: var(--gap-base);
    min-width: 15.188rem;
    max-width: 17rem;
   /* cursor: pointer;*/
    z-index: 17;
  }
  .support-group-1-icon {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .explore-link {
    position: relative;
    font-size: var(--font-size-base);
    text-decoration: underline;
    font-weight: 500;
    color: var(--color-primary-500);
    text-align: left;
    cursor: pointer;
  }
  .mindfulness-meditation-1-icon {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .streamlineai-gaming-spark-sol-icon {
    width: 2.5rem;
    height: 2.5rem;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
  }
  .card-container-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 1.75rem;
    text-align: center;
    font-size: var(--font-size-base);
  }
  .main-content,
  .main-content-wrapper {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
  }
  .main-content {
    width: 77.25rem;
    flex-direction: column;
    justify-content: flex-start;
  }
  .main-content-wrapper {
    width: 119rem;
    flex-direction: row;
    justify-content: center;
    padding: 0 var(--padding-xl);
    box-sizing: border-box;
  }
  .background-parent,
  .mental-health {
    position: relative;
    display: flex;
    justify-content: flex-start;
  }
  .mental-health {
    background-color: #fff;
    width: 100%;
    overflow: hidden;
    flex-direction: row;
    align-items: flex-start;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    font-size: var(--button-m-size);
    color: var(--color-text-white);
    font-family: var(--button-m);
  }
  @media screen and (max-width: 900px) {
    .main-title {
      font-size: 2rem;
      line-height: 2rem;
    }
    .background-parent {
      padding-bottom: 19.125rem;
      box-sizing: border-box;
    }
  }
  @media screen and (max-width: 675px) {
    .main-content {
      gap: var(--gap-base);
    }
  }
  @media screen and (max-width: 450px) {
    .main-title {
      font-size: var(--font-size-5xl);
      line-height: 1.5rem;
    }
    .subtitle {
      font-size: 1.188rem;
      line-height: 1.188rem;
    }
    .header1,
    .header3,
    .header5,
    .header7 {
      font-size: var(--font-size-base);
      line-height: 1.188rem;
    }
    .background-parent {
      padding-bottom: 12.438rem;
      box-sizing: border-box;
    }
  }