/* Vibrant Body background for a professional and modern look */
 body {
 background: linear-gradient(135deg, #1a0833, #5a0a7f, #b92b68); /* Deeper, richer gradient */
 color: white;

 min-height: 100vh; /* Ensure body takes full height for gradient */
 }


  body {
  font-family: 'Poppins', sans-serif;
}

 /* Enhanced Glassmorphism effect for cards and elements */
 .glass {
 background: rgba(255, 255, 255, 0.08); /* Slightly less opaque for better depth */
 backdrop-filter: blur(15px); /* Increased blur for more prominent effect */
 border: 1px solid rgba(255, 255, 255, 0.15); /* Stronger border */
 border-radius: 1rem; /* Ensure rounded corners */
 transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Smoother, more complex transition */
 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08); /* Subtle initial shadow */
 }
 .glass:hover {
 transform: translateY(-8px) scale(1.03) rotateZ(1deg); /* Lifts, scales, and slight Z-axis rotation */
 box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 20px #FFD700; /* Deeper shadow with a golden glow */
 border-color: rgba(255, 255, 255, 0.3);
 }
 /* Icon animation on card hover */
 .glass:hover i {
 transform: scale(1.2) rotate(5deg); /* Larger scale and rotation for icons */
 transition: transform 0.4s ease-in-out;
 }

 /* Professional yellow color definition */
 .text-professional-yellow {
 color: #FFD700; /* Gold */
 }
 .bg-professional-yellow {
 background-color: #FFD700;
 }
 .hover\:text-professional-yellow-darker:hover {
 color: #FFC700; /* Slightly darker shade for hover effect */
 }
 .hover\:bg-professional-yellow-darker:hover {
 background-color: #FFC700;
 }

 /* Animations for sections and cards */
 @keyframes zoomIn {
 0% { opacity: 0; transform: scale(0.8); }
 100% { opacity: 1; transform: scale(1); }
 }
 .zoom-in {
 animation: zoomIn 1.2s ease-out forwards;
 }

 @keyframes slideInUp {
 0% { opacity: 0; transform: translateY(80px) scale(0.95); }
 100% { opacity: 1; transform: translateY(0) scale(1); }
 }
 .slide-in-up {
 opacity: 0; /* Default hidden state */
 animation: slideInUp 0.8s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; /* Applied via JS for stagger */
 }

 /* Shimmer effect for titles on hover */
 .shimmer-effect {
 position: relative;
 overflow: hidden;
 display: inline-block; /* Essential for shimmer effect to work on text */
 }
 .shimmer-effect::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
 transition: left 0.8s ease-in-out;
 }
 .shimmer-effect:hover::before {
 left: 100%;
 }

 /* New animation for details within course cards (not directly used on about page but kept for consistency) */
 @keyframes slideInDetail {
 0% { opacity: 0; transform: translateY(20px); }
 100% { opacity: 1; transform: translateY(0); }
 }
 .slide-in-detail.visible { /* Only animate when 'visible' class is added */
 opacity: 0;
 animation: slideInDetail 0.6s ease-out forwards;
 }