style.scss

//Font

@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;700&display=swap");
$primary-ff: "Kumbh Sans", sans-serif;

// Color

$dark-desaturated-blue: hsl(238, 29%, 16%);
$soft-red: hsl(14, 88%, 65%);
$soft-violet: hsl(273, 75%, 66%);
$soft-blue: hsl(240, 73%, 65%);

$very-dark-grayish-blue: hsl(237, 12%, 33%);
$dark-grayish-blue: hsl(240, 6%, 50%);
$light-grayish-blue: hsl(240, 5%, 91%);

*,
*::before,
*::after {
  font-family: $primary-ff;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 12px;
  color: $dark-grayish-blue;
}

h1 {
  font-size: 2rem;
  color: $very-dark-grayish-blue;
}

// Style

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: linear-gradient(180deg, $soft-violet, $soft-blue);

  .component {
    width: 90%;
    background-color: white;
    border-radius: 1.5rem;

    .head-image {
      display: flex;
      justify-content: center;
      margin-top: -35%;
      img {
        max-width: 80%;
      }
    }

    .faq-container {
      padding: 1rem 2rem 4rem 2rem;
      > h1 {
        text-align: center;
        margin: 1.5rem 0;
      }

      .accordion-item {
        border-bottom: solid 1px $light-grayish-blue;

        .accordion-head {
          display: flex;
          justify-content: space-between;
          padding: 1rem 1rem 0 1rem;
          font-weight: 400;
          overflow: hidden;
          &:hover {
            font-weight: 700;
            cursor: pointer;
          }
        }

        .accordion-content {
          visibility: hidden;
          // display: none;
          max-height: 0;
          overflow: hidden;
          padding: 1rem;
          transition: all 500ms ease-in-out;
        }
      }
    }
  }
}

// Animation