* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  /* height: 100vh; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    45deg,
    rgba(255, 94, 97, 0.404),
    rgba(255, 153, 0, 0.473)
  );
  & p {
    width: 90%;
    margin-inline: auto;
    margin-block: 50px;
    font-size: 20px;
    font-weight: 500;
    color: #222;
    line-height: 1.6;
  }
  & .qu-box {
    min-width: 70%;
    border: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    & .qu-head {
      width: 100%;
      height: 50px;
      background-color: rgba(0, 0, 255, 0.281);
      border-radius: 22px 22px 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-inline: 30px;
      color: #fff;
      font-size: 20px;
      font-weight: 800;
    }
    & .qu-body {
      height: 100%;
      background-color: #fff;
      padding: 30px;

      & .qu-set {
        & .ch1 {
          margin-top: 40px;
        }
        & :nth-child(5) {
          margin-bottom: 40px;
        }
      }

      & .qu-ans-row {
        background-color: #ddd;
        padding: 10px;
        margin: 20px;
        border-radius: 22px;
        & label {
          margin-left: 15px;
        }
      }

      & .qu-ans {
        display: flex;
        align-items: center;
        padding-inline: 30px;
        margin-bottom: 40px;
        & p {
          margin-block: 5px;
          font-size: 15px;
          font-weight: 800;
          color: green;
        }

        button {
          width: 200px;
          height: 40px;
          background: linear-gradient(
            45deg,
            rgba(92, 92, 160, 0.8),
            rgba(21, 21, 218, 0.8)
          );
          color: #fff;
          font-size: 15px;
          font-weight: 600;
          border: none;
          border-radius: 22px;
          cursor: pointer;
          transition: all 0.5s ease-in-out;
        }

        /* تأثير عند المرور بالماوس */
        button:hover {
          background: linear-gradient(
            45deg,
            rgba(21, 21, 218, 0.9),
            rgba(92, 92, 160, 0.9)
          );
          transform: scale(1.03);
          box-shadow: 0 4px 12px rgba(21, 21, 218, 0.3);
        }

        /* تأثير عند الضغط */
        button:active {
          transform: scale(0.98);
          box-shadow: 0 2px 6px rgba(21, 21, 218, 0.4);
        }
      }
    }
    & .qu-foot {
      width: 100%;
      height: 50px;
      background-color: #fff;
      border-radius: 0px 0px 22px 22px;
      text-align: right;
      padding-right: 30px;
      font-size: 20px;
      font-weight: 800;

      & span {
        cursor: pointer;
      }
    }
  }
}