@layer base {
            html {
                scroll-behavior: smooth;
            }
            
            body {
                font-family: 'Inter', system-ui, sans-serif;
                overflow-x: hidden;
            }
            
            h1, h2, h3, h4, h5, h6 {
                font-family: 'Poppins', sans-serif;
            }
        }

        @layer components {
            .btn-primary {
                @apply bg-vp-blue hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
            }
            
            .btn-secondary {
                @apply bg-vp-orange hover:bg-orange-600 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
            }
            
            .card {
                @apply bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
            }
            
            .section-title {
                @apply text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4;
            }
            
            .section-subtitle {
                @apply text-lg text-gray-600 mb-8 max-w-3xl mx-auto;
            }
            
            .filter-btn {
                @apply px-6 py-2 rounded-full font-medium transition-all duration-300 hover:shadow-lg whitespace-nowrap;
            }
			
			inset-shadow-sm{
box-shadow: var(--inset-shadow-sm);} 
        }

        /* Custom animations */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        .animate-pulse {
            animation: pulse 2s ease-in-out infinite;
        }

        .hero-gradient {
            /*background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);*/
        }
        


        .stats-gradient {
            background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%);
        }
        
        .feature-bg {
            background: linear-gradient(135deg, rgba(30, 58, 138, 0.1) 0%, rgba(37, 99, 235, 0.1) 100%);
        }

        /* Custom colors */
        .bg-vp-blue {
            background-color: #1e3a8a;
        }
        
        .bg-vp-orange {
            background-color: #ea580c;
        }
        
        .text-vp-blue {
            color: #1e3a8a;
        }
        
        .text-vp-orange {
            color: #ea580c;
        }
        
        /* Custom scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #1e3a8a;
            border-radius: 4px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #15317e;
        }
        
        /* Navbar transition */
        .navbar-transition {
            transition: all 0.3s ease-in-out;
        }
        
        /* Underline animation */
        .underline-animation {
            position: relative;
        }
        
        .underline-animation::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: -2px;
            left: 0;
            background-color: #ea580c;
            transition: width 0.3s ease;
        }
        
        .underline-animation:hover::after {
            width: 100%;
        }
        
        /* Rotating animation */
        .rotate-animation {
            animation: rotate 15s linear infinite;
        }
        
        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }
        
        /* Wave shape */
        .wave-shape {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: hidden;
            line-height: 0;
        }
        
        .wave-shape svg {
            position: relative;
            display: block;
            width: calc(100% + 1.3px);
            height: 150px;
			transform: rotate(180deg);
        }
        
        .wave-shape .shape-fill {
            fill: #FFFFFF;
        }
		
		
		/*------------------------ Placements Section */
		
		
		/* Add to your CSS */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.animate-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

.scroller-left-to-right {
  animation: scroll-left 30s linear infinite;
}

.scroller-right-to-left {
  animation: scroll-right 30s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-right {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Pause animation on hover */
.scroller-left-to-right:hover,
.scroller-right-to-left:hover {
  animation-play-state: paused;
}