body {
       background: #f2f4f8;
       display: flex;
       justify-content: space-around;
       align-items: center;
       flex-wrap: wrap;
       height: 100vh;
       font-family: "Roboto";
     }

     .education {
       --bg-color: #ffd861;
       --bg-color-light: #ffeeba;
       --text-color-hover: #4C5656;
       --box-shadow-color: rgba(255, 215, 97, 0.48);
     }

     .credentialing {
       --bg-color: #B8F9D3;
       --bg-color-light: #e2fced;
       --text-color-hover: #4C5656;
       --box-shadow-color: rgba(184, 249, 211, 0.48);
     }

     .wallet {
       --bg-color: #CEB2FC;
       --bg-color-light: #F0E7FF;
       --text-color-hover: #fff;
       --box-shadow-color: rgba(206, 178, 252, 0.48);
     }

     .human-resources {
       --bg-color: #DCE9FF;
       --bg-color-light: #f1f7ff;
       --text-color-hover: #4C5656;
       --box-shadow-color: rgba(220, 233, 255, 0.48);
     }

     .card1 {
       width: 220px;
       height: 321px;
       background: #fff;
       border-top-right-radius: 10px;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       position: relative;
       box-shadow: 0 14px 26px rgba(0,0,0,0.04);
       transition: all 0.3s ease-out;
       text-decoration: none;
     }

     .card1:hover {
       transform: translateY(-5px) scale(1.005) translateZ(0);
       box-shadow: 0 24px 36px rgba(0,0,0,0.11),
         0 24px 46px var(--box-shadow-color);
     }

     .card1:hover .overlay {
       transform: scale(4) translateZ(0);
     }

     .card1:hover .circle {
       border-color: var(--bg-color-light);
       background: var(--bg-color);
     }

     .card1:hover .circle:after {
       background: var(--bg-color-light);
     }

     .card1:hover p {
       color: var(--text-color-hover);
     }

     .card1:active {
       transform: scale(1) translateZ(0);
       box-shadow: 0 15px 24px rgba(0,0,0,0.11),
         0 15px 24px var(--box-shadow-color);
     }

     .card1 p {
       font-size: 17px;
       color: #4C5656;
       margin-top: 30px;
       z-index: 1000;
       transition: color 0.3s ease-out;
     }

     .circle {
       width: 131px;
       height: 131px;
       border-radius: 50%;
       background: #fff;
       border: 2px solid var(--bg-color);
       display: flex;
       justify-content: center;
       align-items: center;
       position: relative;
       z-index: 1;
       transition: all 0.3s ease-out;
     }

     .circle:after {
       content: "";
       width: 118px;
       height: 118px;
       display: block;
       position: absolute;
       background: var(--bg-color);
       border-radius: 50%;
       top: 7px;
       left: 7px;
       transition: opacity 0.3s ease-out;
     }

     .circle svg {
       z-index: 10000;
       transform: translateZ(0);
     }

     .overlay {
       width: 118px;
       position: absolute;
       height: 118px;
       border-radius: 50%;
       background: var(--bg-color);
       top: 70px;
       left: 50px;
       z-index: 0;
       transition: transform 0.3s ease-out;
     }

     .itiLogo{
        width: 45%;
     }
     .skillLogo{
        width:85%;
     }

     .description{
        font-size: 10px;
     }

     /* Dashboard Stats Cards */
     .stat-card {
         border-radius: 16px;
         overflow: hidden;
         transition: transform 0.3s ease;
     }

     .stat-card:hover {
         transform: translateY(-5px);
     }

     /* Gradient Backgrounds */
     .bg-gradient-blue {
         background: linear-gradient(135deg, #2563eb, #3b82f6);
         box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2);
     }

     .bg-gradient-purple {
         background: linear-gradient(135deg, #7c3aed, #8b5cf6);
         box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
     }

     .bg-gradient-green {
         background: linear-gradient(135deg, #059669, #10b981);
         box-shadow: 0 4px 15px rgba(5, 150, 105, 0.2);
     }

     /* Card Typography */
     .stat-card .display-5 {
         font-size: 2.5rem;
         letter-spacing: -0.5px;
     }

     .stat-card p {
         font-size: 1rem;
         font-weight: 500;
     }

     .stat-card .stat-details {
         opacity: 0.9;
         font-size: 0.875rem;
     }

     /* Hover Effects */
     .stat-card:hover {
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
     }