.customer {
  background: #f3f3f3;
  width: 100%;
  position: relative;

  .customer-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    padding: 80px 0px;
    gap: 50px;

    width: 1410px;
    height: 658px;
    left: calc(50% - 1410px / 2);
    top: 0px;

    .main-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0px;
      gap: 10px;

      width: 864px;
      height: 87px;

      /* Inside auto layout */

      flex: none;
      order: 0;
      flex-grow: 0;

      .content1 {
        height: 57px;

        /* h2 */

        font-family: "Montserrat";
        font-style: normal;
        font-weight: 700;
        font-size: 40px;
        line-height: 57px;
        /* identical to box height, or 142% */

        letter-spacing: 0.2px;

        color: #252b42;

        /* Inside auto layout */

        flex: none;
        order: 0;
        flex-grow: 0;
      }

      .content2 {
        width: 500px;
        height: 20px;

        /* paragraph */

        font-family: "Montserrat";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        /* identical to box height, or 143% */

        text-align: center;
        letter-spacing: 0.2px;

        color: #737373;

        /* Inside auto layout */

        flex: none;
        order: 1;
        flex-grow: 0;
      }
    }

    .main-details {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-top: -40px;
      padding: 0px;
      gap: 30px;

      width: 1120px;
      height: 361px;

      flex: none;
      order: 1;
      flex-grow: 0;

      .content-nav {
        font-size: 30px;
        margin-left: 16px;
        margin-right: 16px;
        color: grey;
        cursor: pointer;
      }

      .swiper-wrapper {
        width: 1000px;
        height: 361px;

        .col-md-5 {
          /* Auto layout */

          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 0px;

          width: 428px;
          height: 361px;

          /* Inside auto layout */

          flex: none;
          order: 1;
          flex-grow: 0;

          .card-item {
            position: relative;
            width: 390px;
            height: 361px;

            border-radius: 5px;

            /* Inside auto layout */

            flex: none;
            order: 0;
            flex-grow: 0;

            .circle-box {
              position: absolute;
              width: 96px;
              height: 96px;
              left: 25px;
              top: 68px;

              border-radius: 48px;
              z-index: 1;

              .img {
                width: 96px;
                height: 96px;
                border-radius: 48px;
              }
            }

            .card-content {
              /* Auto layout */

              display: flex;
              flex-direction: column;
              align-items: flex-start;
              padding: 30px 60px;
              gap: 15px;

              position: absolute;
              width: 300px;
              height: 268px;
              left: calc(50% - 309px / 2 + 33px);
              top: 40px;

              /* light-background-color */

              .group {
                width: 97px;
                height: 56px;

                /* Inside auto layout */

                flex: none;
                order: 0;
                flex-grow: 0;

                .card-content1 {
                  position: absolute;
                  width: 97px;
                  height: 32px;
                  left: 62px;
                  top: 30px;

                  /* h3 */

                  font-family: "Montserrat";
                  font-style: normal;
                  font-weight: 700;
                  font-size: 24px;
                  line-height: 32px;
                  /* identical to box height, or 133% */

                  letter-spacing: 0.1px;

                  /* text-color */

                  color: #252b42;
                }

                .card-content2 {
                  position: absolute;
                  width: 350px;
                  height: 24px;
                  left: 62px;
                  //left: calc(50% - 71px / 2 - 149px);
                  top: 70px;

                  /* h6 */

                  font-family: "Montserrat";
                  font-style: normal;
                  font-weight: 600;
                  font-size: 14px;
                  line-height: 24px;
                  /* identical to box height, or 171% */

                  letter-spacing: 0.2px;

                  /* second-text-color */

                  color: #737373;
                }
              }

              .grade {
                width: 110.07px;
                height: 22px;
                /* Inside auto layout */

                flex: none;
                order: 1;
                flex-grow: 0;
              }

              .card-content3 {
                width: 300px;
                height: 100px;

                /* paragraph */

                font-family: "Montserrat";
                font-style: normal;
                font-weight: 500;
                font-size: 14px;
                line-height: 20px;
                margin-left: 2px;
                /* or 143% */

                letter-spacing: 0.2px;

                /* second-text-color */

                color: #737373;

                /* Inside auto layout */

                flex: none;
                order: 2;
                flex-grow: 0;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (max-width: 767px) {
  .customer {
    background: #17213c;
    position: relative;
    height: 800px;
    width: 100%;

    .customer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 80px 0px;
      gap: 50px;

      width: 100%;

      .main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 10px;

        width: 100%;

        flex: none;
        order: 0;
        flex-grow: 0;
        background: #17213c;

        .content1 {
          width: 100%;
          text-align: center;

          font-family: "Montserrat";
          font-style: normal;
          font-weight: 700;
          font-size: 40px;
          line-height: 57px;

          letter-spacing: 0.2px;

          color: #fff;
          flex: none;
          order: 0;
          flex-grow: 0;
        }

        .content2 {
          width: 100%;
          font-family: "Montserrat";
          font-style: normal;
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          padding-left: 50px;
          padding-right: 50px;
          height: 100px;
          text-align: center;
          letter-spacing: 0.2px;
          color: #737373;
        }
      }

      .main-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        width: 100%;
        margin-top: 0;
        height: 480px;
        background: #17213c;

        .content-nav {
          width: 0;
          height: 0;
          font-size: 0;
          margin-left: 0;
          margin-right: 0;
        }

        .swiper-wrapper {
          width: 100%;
          height: 480px;
          text-align: center;

          .col-md-5 {
            /* Auto layout */

            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 0;
            height: 480px;
            margin: 0 auto;
            width: 100%;

            .card-item {
              position: relative;
              width: 100vw;
              height: 480px;
              background: #17213c;
              border-radius: 0;

              .circle-box {
                position: absolute;
                width: 96px;
                height: 96px;
                left: 22px;
                top: 68px;
                border-radius: 50px;
                z-index: 1;
              }

              .card-content {
                /* Auto layout */
                width: 300px;
                height: 480px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
                padding: 0;
                position: absolute;
                overflow: hidden;
                left: calc(50vw - 300px / 2 + 16px);
                top: 40px;
                background: #fff;

                .group {
                  height: 56px;

                  flex: none;
                  order: 0;
                  flex-grow: 0;

                  .card-content1 {
                    position: absolute;
                    width: 240px;
                    height: 32px;
                    top: 30px;
                    left: 80px;
                    text-align: left;

                    /* h3 */

                    font-family: "Montserrat";
                    font-style: normal;
                    font-weight: 700;
                    font-size: 24px;
                    line-height: 32px;
                    /* identical to box height, or 133% */

                    letter-spacing: 0.1px;

                    /* text-color */

                    color: #252b42;
                  }

                  .card-content2 {
                    position: absolute;
                    width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    height: 24px;
                    left: 80px;
                    top: 66px;

                    /* h6 */

                    font-family: "Montserrat";
                    font-style: normal;
                    font-weight: 600;
                    font-size: 14px;
                    line-height: 24px;
                    /* identical to box height, or 171% */

                    letter-spacing: 0.2px;

                    /* second-text-color */

                    color: #737373;
                  }
                }

                .card-content3 {
                  margin-top: 25px;
                  width: 200px;
                  margin-left: 80px;
                  font-family: "Montserrat";
                  font-style: normal;
                  font-weight: 500;
                  font-size: 14px;
                  line-height: 20px;
                  letter-spacing: 0.2px;
                  overflow: hidden;
                  height: 350px;
                  color: #737373;
                  flex: none;
                  order: 2;
                  flex-grow: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}
