/* Card Hover Effects */
 .skill-card {
     position: relative;
     overflow: hidden;
     transition: transform 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
     cursor: pointer;
     height: 100%;
 }

 .skill-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
 }

 /* Icon Rotation on Hover */
 .icon-container {
     transition: transform 0.3s ease, opacity 0.3s ease;
 }

 .skill-card:hover .icon-container {
     transform: rotate(360deg);
     opacity: 1;
 }

 .skill-icon {
     color: #f9004d;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .skill-card:hover .skill-icon {
     transform: rotate(360deg);
     color: #ff6347;
     /* Tomato Red color on hover */
 }

 /* Title Styling */
 .skill-title {
     font-size: 1.2rem;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-weight: 700;
     color: #f7a700;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .skill-title:hover {
     color: #ff6347;
     /* Tomato Red on hover   */
     transform: scale(1.1);
 }

 /* Text Effect */
 .text-effect {
     font-size: 1.1rem;
     color: #d1d1d1;
     font-style: italic;
     transition: transform 0.3s ease, color 0.3s ease;
 }

 .skill-card:hover .text-effect {
     color: #ffffff;
     transform: translateY(-5px);
 }

 /* Button Hover */
 .btn-hover {
     font-weight: bold;
     transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
 }

 .btn-hover:hover {
     background-color: #f7a700;
     color: #333;
     border-color: transparent;
     transform: scale(1.05);
 }

 .progress {
     height: 14px;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 10px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
     margin-bottom: 20px;
 }

 .progress-bar {
     height: 100%;
     width: 0%;
     line-height: 14px;
     font-size: 14px;
     font-weight: bold;
     background: linear-gradient(45deg, #f7a700, #ff4500);
     box-shadow: 0 0 10px #f7a700;
     border-radius: 10px;
     position: relative;
     transition: width 2.5s ease-in-out;
 }


 /* Glowing Animation */
 @keyframes glowing {
     0% {
         box-shadow: 0 0 10px #f7a700;
     }

     50% {
         box-shadow: 0 0 20px #ff4500;
     }

     100% {
         box-shadow: 0 0 10px #f7a700;
     }
 }

 .progress-bar {
     animation: glowing 1.5s infinite;
 }

 /* Hover Glow Boost */
 .progress:hover .progress-bar {
     box-shadow: 0 0 25px #ff4500;
     transition: box-shadow 0.3s ease-in-out;
 }

 /* Shimmering Overlay */
 .progress-bar::after {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.2);
     transform: skewX(-45deg);
     animation: shimmer 2.5s infinite;
 }

 @keyframes shimmer {
     0% {
         left: -100%;
     }

     100% {
         left: 100%;
     }
 }

 /* Hide "Learn More" button initially */
 .skill-info {
     opacity: 0;
     transform: translateY(10px);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 /* Show "Learn More" button on hover */
 .skill-card:hover .skill-info {
     opacity: 1;
     transform: translateY(0);
 }

 .skill-info a {
     font-weight: bold;
 }

 /* AOS Flip Animation */
 .aos-animate {
     animation: flipInX 1.5s ease-in-out forwards;
 }

 @keyframes flipInX {
     0% {
         transform: rotateY(90deg);
         opacity: 0;
     }

     100% {
         transform: rotateY(0deg);
         opacity: 1;
     }
 }