.project-card {
     background-color: #f1f6fb;
     padding: 50px 30px;
     border-radius: 12px;
     width: 100%;
     min-height: 500px;
     gap: 30px;
 }

 .project-left img {
     width: 100%;
     max-width: 700px;
     height: auto;
     border-radius: 12px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
 }

 .project-right {
     padding-right: 100px;
 }

 .project-meta {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-bottom: 25px;
     font-size: 1.1rem;
 }

 .project-meta .date {
     background-color: white;
     padding: 10px 22px;
     border-radius: 25px;
     font-size: 16px;
     font-weight: 500;
     color: #333;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
 }

 .project-meta .likes {
     color: orangered;
     font-size: 20px;
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .project-right h2 {
     font-size: 32px;
     font-weight: 700;
     color: #222;
     margin: 25px 0;
 }

 .project-link {
     display: inline-block;
     background-color: #1e1e1e;
     color: white;
     padding: 14px 28px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: 600;
     font-size: 16px;
     transition: background 0.3s ease;
 }

 .project-link:hover {
     background-color: #000;
 }

 .project-link i {
     margin-right: 10px;
 }

 /* Responsive adjustments */
 @media (max-width: 992px) {
     .project-card {
         flex-direction: column;
         text-align: center;
     }

     .project-left img {
         width: 100%;
         height: auto;
     }

     .project-right {
         padding-right: 0;
         padding-top: 30px;
     }
 }

 /* From Uiverse.io by catraco */
 .btn-class-name {
     --primary: 244, 81, 30;
     --secondary: 244, 81, 30;
     width: 60px;
     height: 50px;
     border: none;
     outline: none;
     cursor: pointer;
     user-select: none;
     touch-action: manipulation;
     outline: 10px solid rgb(var(--primary), .5);
     border-radius: 100%;
     position: relative;
     transition: .3s;
     margin-left: 5rem;
 }

 @media (max-width: 576px) {
     .btn-class-name {
         margin-left: 0;
     }
 }

 .btn-class-name .back {
     background: rgb(var(--secondary));
     border-radius: 100%;
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
 }

 .btn-class-name .front {
     background: linear-gradient(0deg, rgba(var(--primary), .6) 20%, rgba(var(--primary)) 50%);
     box-shadow: 0 .5em 1em -0.2em rgba(var(--secondary), .5);
     border-radius: 100%;
     position: absolute;
     border: 1px solid rgb(var(--secondary));
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 1.2rem;
     font-weight: 600;
     font-family: inherit;
     transform: translateY(-15%);
     transition: .15s;
     color: rgb(var(--secondary));
 }

 .btn-class-name:active .front {
     transform: translateY(0%);
     box-shadow: 0 0;
 }