<style>
    body {
      background-color: #f8f9fa;
      font-family: "Roboto", sans-serif;
    }

    .certificate-container {
      max-width: 900px;
      margin: 50px auto;
      background-color: #fff;
      border-radius: 12px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      padding: 40px 30px;
    }

    .certificate-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 2px solid #dee2e6;
      padding-bottom: 20px;
      margin-bottom: 30px;
    }

    .certificate-title {
      font-weight: 700;
      color: #343a40;
    }

    .student-photo {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid #007bff;
    }

    .info-label {
      font-weight: bold;
      color: #495057;
      font-size: 0.95rem;
    }

    .info-value {
      font-size: 1rem;
      color: #2661a3;
    }

    .course-logo {
      height: 60px;
    }

    .section-divider {
      border-top: 1px solid #dee2e6;
      margin: 30px 0;
    }

    .verified-badge {
      display: inline-flex;
      align-items: center;
      background-color: #198754;
      color: white;
      font-size: 0.85rem;
      padding: 6px 12px;
      border-radius: 20px;
      font-weight: 500;
      user-select: none;
    }

    .verified-badge i {
      margin-right: 6px;
    }

    .badge-img img{
      width: 30%;
      height: 30%;
    }

    /* Social Share Buttons */
    .social-share {
      margin-top: 30px;
      display: flex;
      gap: 15px;
      flex-wrap: wrap;
      align-items: center;
    }

    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      color: white;
      font-size: 1.3rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
      text-decoration: none;
    }

    .social-btn.facebook {
      background: #3b5998;
    }

    .social-btn.facebook:hover {
      background: #2d4373;
    }

    .social-btn.twitter {
      background: #1da1f2;
    }

    .social-btn.twitter:hover {
      background: #0d95e8;
    }

    .social-btn.linkedin {
      background: #0077b5;
    }

    .social-btn.linkedin:hover {
      background: #005983;
    }

    .social-btn.whatsapp {
      background: #25d366;
    }

    .social-btn.whatsapp:hover {
      background: #1ebe57;
    }

    /* Copy link button */
    .copy-link-btn {
      display: inline-flex;
      align-items: center;
      background-color: #007bff;
      border: none;
      padding: 8px 15px;
      border-radius: 6px;
      color: white;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      transition: background-color 0.3s ease;
    }

    .copy-link-btn i {
      margin-right: 8px;
    }

    .copy-link-btn:hover {
      background-color: #0056b3;
    }

    @media (max-width: 768px) {
      .certificate-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .certificate-header img {
        margin-top: 20px;
      }

          .badge-img img{
      width: 80%;
      height: 80%;
    }

    }
  </style>