/* Custom CSS for animations and effects */
 html {
     scroll-behavior: smooth;
 }

 .nav-link {
     position: relative;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     width: 0;
     height: 2px;
     bottom: 0;
     left: 0;
     background-color: #3b82f6;
     transition: width 0.3s ease;
 }

 .nav-link:hover::after {
     width: 100%;
 }

 .project-card {
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .project-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }

 .skill-bar {
     transition: width 1.5s ease;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fade-in {
     animation: fadeIn 0.8s ease forwards;
 }

 .delay-1 {
     animation-delay: 0.2s;
 }

 .delay-2 {
     animation-delay: 0.4s;
 }

 .delay-3 {
     animation-delay: 0.6s;
 }

 .delay-4 {
     animation-delay: 0.8s;
 }

 /* 
 Animation CSS (add to your stylesheet)  */

 @keyframes marquee {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .animate-marquee {
     display: inline-block;
     animation: marquee 20s linear infinite;
 }

 .animate-marquee:hover {
     animation-play-state: paused;
 }


 /* tools & Tech   */
 @keyframes marquee {
     0% {
         transform: translateX(0%);
     }

     100% {
         transform: translateX(-50%);
     }
 }

 .animate-marquee {
     animation: marquee 40s linear infinite;
 }




 /* ---------- Trigger Card ---------- */
 #cert-trigger {
     max-width: 400px;
     margin: 2rem auto;
     padding: 1.5rem;
     background: #fff;
     border-radius: 1.5rem;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
     text-align: center;
     cursor: pointer;
 }

 #cert-trigger h3 {
     margin-bottom: .5rem;
     font-size: 1.25rem;
     color: #2d3748;
 }

 #cert-trigger p {
     margin-bottom: 1rem;
     color: #4a5568;
 }

 #cert-trigger .view-link {
     color: #5a67d8;
     text-decoration: none;
     font-weight: 500;
 }

 #cert-trigger .view-link:hover {
     text-decoration: underline;
 }

 /* ---------- Container of Thumbnails ---------- */
 #cert-container {
     display: none;
     /* hidden by default */
     margin: 1rem auto;
     max-width: 100%;
     overflow-x: auto;
     /* allow horizontal scroll on small screens */
     padding-bottom: 1rem;
 }

 #cert-container .cert-row {
     display: flex;
     gap: 1rem;
     flex-wrap: nowrap;
     /* all cards in one line */
 }

 /* Thumb hover effect */
 .cert-thumb:hover {
     transform: scale(1.05);
     transition: transform .2s;
 }

 /* Responsive tweaks */
 @media (max-width: 640px) {
     #cert-row .cert-thumb {
         width: 32%;
         height: auto;
     }
 }