/* Custom Styles for KR Services India V2.0 */

@layer utilities {
    .animate-fade-in {
        animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
    .animate-slide-up {
        animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #3367C1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #2552a5;
}

/* Focus Ring for WCAG Compliance */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 2px solid #3367C1 !important;
    outline-offset: 2px !important;
}

/* Active Nav State */
.nav-link.active {
    color: #3367C1 !important;
    background-color: #f0f5ff !important;
}

/* Hero Carousel Slide Animation */
.hero-slide {
    will-change: opacity, transform;
}

/* Glassmorphism & Soft Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hero Banner Responsive Positioning - Person Centered on Mobile */
.hero-slide-1 {
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.35)), url('banner/banner 1.png');
    background-position: center center;
    background-size: cover;
}

.hero-slide-2 {
    background-image: linear-gradient(to right, rgba(15, 23, 42, 0.82), rgba(15, 23, 42, 0.35)), url('banner/banner 2.png');
    background-position: center center;
    background-size: cover;
}

@media (max-width: 640px) {
    .hero-slide-1 {
        background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.70) 0%, rgba(15, 23, 42, 0.20) 50%, rgba(15, 23, 42, 0.80) 100%), url('banner/banner 1.png') !important;
        background-position: 50% 50% !important;
        background-size: cover !important;
    }
    .hero-slide-2 {
        background-image: linear-gradient(to bottom, rgba(15, 23, 42, 0.70) 0%, rgba(15, 23, 42, 0.20) 50%, rgba(15, 23, 42, 0.80) 100%), url('banner/banner 2.png') !important;
        background-position: 50% 50% !important;
        background-size: cover !important;
    }
}