.card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      padding: 20px;
    }

    .card {
      width: 300px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      background: #fff;
    }

    .card iframe, .card img {
      width: 100%;
      height: 200px;
      border: none;
    }

    .card-content {
      padding: 15px;
    }

    .card-title {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 10px;
    }

    .card-description {
      font-size: 0.9em;
      color: #555;
    }

    #certificate-detail {
      display: none;
      position: relative;
      padding: 30px;
      background: #f9f9f9;
      border-top: 2px solid #ddd;
      margin: 30px auto;
      max-width: 800px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    }

    #certificate-detail h3 {
      margin-bottom: 15px;
    }

    #certificate-detail .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 24px;
      color: #333;
      cursor: pointer;
      font-weight: bold;
    }

    .certificate-detail {
      display: none;
      position: fixed;
      top: 10%;
      left: 5%;
      width: 90%;
      height: 80%;
      background-color: #fff;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
      padding: 20px;
      overflow-y: auto;
      z-index: 9999;
      border-radius: 10px;
    }

    .certificate-detail iframe {
      width: 100%;
      height: 400px;
      border: none;
      margin-bottom: 20px;
    }

    .close-btn {
      position: absolute;
      top: 10px;
      right: 20px;
      font-size: 28px;
      font-weight: bold;
      color: #444;
      cursor: pointer;
    }

    .certificate-detail {
      transition: all 0.3s ease-in-out;
    }

    /* Bage */
    .badge-provider {
      display: inline-block;
      padding: 3px 10px;
      font-size: 0.75em;
      border-radius: 15px;
      font-weight: 600;
      color: white;
      margin-bottom: 10px;
    }


.badge-Coursera {
  background-color: #2A73CC; /* Blue */
}

.badge-Udemy {
  background-color: #A435F0; /* Purple */
}

.badge-edX {
  background-color: #002F6C; /* Dark Blue */
}

.badge-NPTEL {
  background-color: #E65100; /* Orange */
}
.badge-Log2Base2 {
  background-color: #00A99D; /* Teal (modern feel for Log2Base2) */
}

.badge-LinkedInLearning {
  background-color: #0A66C2; /* LinkedIn blue */
}

.badge-KhanAcademy {
  background-color: #14BF96; /* Green */
}

.badge-Pluralsight {
  background-color: #F15B2A; /* Orange-red */
}

.badge-Skillshare {
  background-color: #2ECC71; /* softer green that’s readable & modern */
}

.badge-Codecademy {
  background-color: #1F4056; /* Navy blue */
}

.badge-FreeCodeCamp {
  background-color: #006400; /* Dark green */
}

.badge-YouTube {
  background-color: #FF0000; /* Red */
}

.badge-GitHub {
  background-color: #24292F; /* Black/GitHub dark */
}

.badge-YBIFoundation {
  background-color: #6A0DAD; /* royal purple, more modern & visible */
}

.badge-Forage {
  background-color: #0D6EFD; /* Forage deep blue */
}

.badge-NoviTech {
  background-color: #4F46E5; /* Indigo/Violet - distinct but still techy */
}

.badge-HPLIFE {
  background-color: #0096D6; /* HP Blue */
}

/* New badge for DSACE CSI */
.badge-CSI-DSACE {
  background-color: #006699; /* CSI Blue */
}

.badge-NaanMudhalvan {
  background-color: #FF9933; /* Naan Mudhalvan saffron orange */
}

/* GUVI badge */
.badge-GUVI {
  background-color: #28A745; /* Bright green, modern & visible */
}

/* GUVI-HCL badge */
.badge-GUVI-HCL {
  background-color: #1E7E34; /* Darker green, professional and techy */
}

/* Uptor badge */
.badge-Uptor {
  background-color: #FF1A40; /* Uptor’s logo uses a red-pink accent */
}
/* LMES badge */
.badge-LMES {
  background-color: #F9A825; /* LMES yellow-orange (bright, educational tone) */
}


/* Simplilearn badge */
.badge-Simplilearn {
  background-color: #FF7F00; /* Simplilearn official vibrant orange */
}

/* Cisco badge */
.badge-Cisco {
  background-color: #1BA0D7; /* Cisco official blue */
}

/* CoddyTech badge */
.badge-CoddyTech {
  background-color: #007BFF; /* Bright electric blue for a modern, tech vibe */
  color: #ffffff; /* Ensures good contrast and readability */
}

/* TechAdemy badge */
.badge-TechAdemy {
  background-color: #FF6F00; /* Vibrant orange (modern + educational look) */
  color: #ffffff; /* Good contrast */
}

/* Google for Education Provider Badge */
.badge-GoogleForEducation {
  background-color: #4285F4; /* Google Blue */
  color: #ffffff;
}