_asif.scss

.asif {
  height: 1248px;
  background-color: #888bb6;

  @media (max-width: 768px) {
    height: auto;
  }
  h2 {
    color: var(--Text_White, #fff);

    font-family: DM Serif Display;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
  }

  p {
    color: var(--Text_White, #fff);
    text-align: center;

    font-family: DM Sans;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
  }
  display: flex;
  flex-direction: column;

  background-color: rgb(240, 8, 8);

  #sub-1 {
    display: flex;
    flex-direction: column;
    background: #434ccc;
    height: 480px;
    @media (max-width: 768px) {
      height: auto;
    }

    .upper {
      text-align: center;
      height: 252px;

      h1 {
        color: var(--Text_White, #fff);
        text-align: center;

        font-family: DM Serif Display;
        font-size: 72px;
        font-style: normal;
        font-weight: 400;
      }
      p {
        width: 770px;
        text-align: center;
        margin: auto;
      }
    }

    .bottom {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      height: 228px;
      width: 85%;
      margin: auto;

      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        height: auto;
        .item {
          width: 100%;
          margin-bottom: 20px;
        }
      }

      .item {
        display: flex;
        flex-direction: column;
      }

      p {
        color: var(--text-white-50, rgba(255, 255, 255, 0.5));
        text-align: center;

        font-family: DM Sans;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin-top: 0px;
      }

      h1 {
        color: var(--Text_White, #fff);
        text-align: center;
        margin-bottom: 0px;

        font-family: DM Serif Display;
        font-size: 72px;
        font-style: normal;
        font-weight: 400;
        line-height: 80px;
      }
    }
  }

  .sub2 {
    display: flex;
    background-color: #f5f6fc;
    height: 768px;
    width: 100%;
    justify-content: center;
    align-items: center;

    @media (max-width: 768px) {
      height: auto;
      flex-direction: column;
      padding: 20px 0;
    }
    .wrap {
      display: flex;
      justify-content: space-between;
      height: 70%;
      width: 85%;
      margin: auto;

      @media (max-width: 768px) {
        flex-direction: column;
        // margin-top: 110px;
      }

      .chx1 {
        width: 45%;
        margin-top: -28px;

        h5 {
          color: var(--Text_Black, #000);
          font-family: DM Sans;
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: 24px;
          letter-spacing: 4.8px;
          text-transform: uppercase;
        }

        h3 {
          color: var(--Text_Black, #000);
          margin-top: 30px;
          font-family: DM Serif Display;
          font-size: 56px;
          font-style: normal;
          font-weight: 400;
          line-height: 64px;
          @media (max-width: 768px) {
            color: var(--Text_Black, #000);
            font-size: 40px;
            font-style: normal;
            line-height: 48px;
            width: 171px;
          }
        }
        p {
          color: var(--Text_Black, #000);
          font-family: DM Sans;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
          text-align: left;
          width: 338px;
          height: 230px;
          flex-shrink: 0;
          margin-top: -34px;
        }
        .ex {
          width: 170px;
          height: 48px;
          flex-shrink: 0;
          border-color: #bcc0ed;
          cursor: pointer;
          width: 170px;
          height: 48px;
          border-radius: 5px;
          background-color: transparent;
          color: #434ccc;
          font-family: "DM Sans";
          font-weight: 700;
          background-color: #f5f6fc;

          @media (max-width: 768px) {
            margin-top: 33px;
            margin-bottom: 72px;
          }
        }
      }

      .chx2 {
        display: grid;
        width: 50%;
        gap: 8% 8%;
        width: 80%;
        padding-top: 60px;
        grid-template-columns: repeat(2, 1fr);

        @media (max-width: 768px) {
          height: auto;
          grid-template-columns: 1fr;
          width: 100%;
          margin-bottom: 300px;

          .card {
            width: 100%;
          }
        }

        .card {
          display: flex;

          .con {
            margin-left: 20px;
          }

          h4 {
            margin-top: 0px;
            color: var(--Text_Black, #000);
            font-family: DM Serif Display;
            font-size: 24px;
            font-style: normal;
            font-weight: 400;
            line-height: 32px;
          }

          p {
            color: var(--text-black-50, rgba(0, 0, 0, 0.5));
            font-family: DM Sans;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
            width: 270px;
            text-align: left;
            margin-top: -25px;
          }
        }
      }
    }
  }

  @media (max-width: 768px) {
    #sub-1 {
      height: auto;
      .upper {
        p {
          color: var(--Text_White, #fff);
          text-align: center;
          width: 346px;
          font-family: DM Sans;
          font-size: 20px;
          font-style: normal;
          font-weight: 400;
          line-height: 32px;
        }
      }
    }
  }
}