/* Certificate Section */
.certificate-section {
  padding: 0px 0px var(--bottom-padding);
}

.certificate-section .container {
  display: flex;
  flex-direction: column;
  gap: var(--container-gap);
  padding: 20px var(--padding-mobile) 30px;
  background-color: #f9f7f7;
}

.certificate-section .title {
  font-size: var(--h1-font-size-mobile);
  font-weight: var(--h1-font-weight);
  line-height: var(--h1-line-height-mobile);
  text-align: left;
}

.certificate-section .title span {
  color: #df0611;
}

.certificate-section .content {
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
}

.certificate-section .description {
  font-size: var(--font-size-mobile);
  font-weight: var(--font-weight-mobile);
  line-height: var(--line-height-mobile);
}

.certificate-section .summary {
  display: flex;
  flex-direction: column;
  gap: var(--inner-gap);
}

.certificate-section .summary .detail-card {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 12px;
  padding: var(--padding-small);
  cursor: pointer;
}

.certificate-section .summary .detail-card:hover {
  border: 1px solid #5F6065;
}

.certificate-section .summary .detail-card p {
  font-size: var(--font-size-mobile);
  font-weight: var(--font-weight-mobile);
  line-height: var(--line-height-mobile);
  text-align: center;
  color: var(--main-color);
}

.certificate-section .content-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  align-self: center;
}

.certificate-section .content-image img {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 1280px) {
  .certificate-section .container {
    padding: 0px;
    gap: 32px;
    border-radius: 12px;
  }

  .certificate-section .content {
    width: 62%;
    padding: 75px 0px 0px 85px;
    gap: 32px;
  }

  .certificate-section .content-image {
    display: none;
  }

  .certificate-section .content-image img {
    display: none;
  }

  .certificate-section .summary {
    width: 70%;
    flex-direction: row;
    align-items: center;
    gap: 80px;
    padding: 0px 0px 76px 85px;
  }

  .certificate-section .description {
    font-size: 20px;
    font-weight: 300;
    line-height: 26px;
  }

  .certificate-section .summary .detail-card {
    max-height: 100px;
    max-width: 288px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 20px;
    border: 1px solid #ffffff;
    cursor: pointer;
  }

  .certificate-section .summary .detail-card:hover {
    border: 1px solid #5F6065;
  }

  .certificate-section .summary .detail-card p {
    font-size: 16px;
    font-weight: 300;
    line-height: 20.8px;
    letter-spacing: 0.16px;
    text-align: left;
  }
}