/* Bansari Software Solutions - Custom Stylesheet */

/* Base Customizations */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #F8FAFC;
    color: #111827;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
    background-color: #09090B;
    color: #F4F4F5;
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05);
}

.dark .glass-card {
    background: rgba(24, 24, 27, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(63, 63, 70, 0.3);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* Premium Gradient Backgrounds & Text */
.gradient-text {
    background: linear-gradient(90deg, #14B8A6 0%, #2563EB 50%, #4F46E5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dark .gradient-text-premium {
    background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.gradient-glow {
    position: relative;
}

.gradient-glow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(90deg, #14B8A6, #2563EB, #4F46E5);
    border-radius: inherit;
    z-index: -1;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gradient-glow:hover::before {
    opacity: 0.3;
}

/* Premium Border Gradients */
.premium-border {
    position: relative;
    border-radius: 1rem;
    background: linear-gradient(#18181b, #18181b) padding-box,
        linear-gradient(90deg, rgba(20, 184, 166, 0.5), rgba(37, 99, 235, 0.5), rgba(79, 70, 229, 0.5)) border-box;
    border: 1px solid transparent;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f4f4f5;
}

.dark ::-webkit-scrollbar-track {
    background: #09090b;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb {
    background: #27272a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

.dark ::-webkit-scrollbar-thumb:hover {
    background: #3f3f46;
}

/* Floating Animations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-12px) rotate(1deg);
    }

    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* Hide default search inputs clear button */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* CSS Loading Skeletons */
.skeleton {
    background: linear-gradient(90deg, #e4e4e7 25%, #f4f4f5 50%, #e4e4e7 75%);
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite;
}

.dark .skeleton {
    background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
    background-size: 200% 100%;
    animation: loading-skeleton 1.5s infinite;
}

@keyframes loading-skeleton {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Logo slider animation */
@keyframes slide {
    from {
        transform: translateX(0);
    }

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

.logos-slide {
    display: inline-flex;
    animation: slide 20s infinite linear;
}

.logos-slide:hover {
    animation-play-state: paused;
}

/* Redesigned Hero Section Custom Utilities */

/* Grid and Noise Textures */
.bg-grid-pattern {
    background-size: 35px 35px;
    background-image:
        linear-gradient(to right, rgba(99, 102, 241, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 102, 241, 0.04) 1px, transparent 1px);
}

.dark .bg-grid-pattern {
    background-image:
        linear-gradient(to right, rgba(99, 102, 241, 0.02) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(99, 102, 241, 0.02) 1px, transparent 1px);
}

.bg-noise {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.015'/%3E%3C/svg%3E");
}

/* Glowing Particle Floating Animations */
@keyframes particleFloat {

    0%,
    100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }

    50% {
        transform: translate(18px, -24px) scale(1.15);
        opacity: 0.65;
    }
}

@keyframes particleFloatSlow {

    0%,
    100% {
        transform: translate(0, 0) scale(1.1);
        opacity: 0.2;
    }

    50% {
        transform: translate(-24px, -18px) scale(0.85);
        opacity: 0.55;
    }
}

@keyframes particleFloatDelayed {

    0%,
    100% {
        transform: translate(0, 0) scale(0.95);
        opacity: 0.35;
    }

    50% {
        transform: translate(30px, 18px) scale(1.2);
        opacity: 0.75;
    }
}

.animate-particle-float {
    animation: particleFloat 8s ease-in-out infinite;
}

.animate-particle-float-slow {
    animation: particleFloatSlow 12s ease-in-out infinite;
}

.animate-particle-float-delayed {
    animation: particleFloatDelayed 10s ease-in-out infinite;
}

/* GPU-Accelerated 3D Float Animation for Dashboard Mockup */
@keyframes dashboard3DFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotateX(3.5deg) rotateY(-4deg);
    }
    50% {
        transform: translate3d(0, -8px, 10px) rotateX(4.5deg) rotateY(-3deg);
    }
}

.animate-dashboard-3d-float {
    will-change: transform;
    transform-style: preserve-3d;
    animation: dashboard3DFloat 9s ease-in-out infinite;
}

/* Premium Out-of-Phase Card Floating Animations */
@keyframes cardFloatLeft {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(-3deg);
    }
    50% {
        transform: translate3d(-2px, -6px, 0) rotate(-2deg);
    }
}

.animate-card-float-left {
    will-change: transform;
    animation: cardFloatLeft 7.5s ease-in-out infinite;
}

@keyframes cardFloatRight {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(3deg);
    }
    50% {
        transform: translate3d(2px, -6px, 0) rotate(2deg);
    }
}

.animate-card-float-right {
    will-change: transform;
    animation: cardFloatRight 8.5s ease-in-out infinite;
}

/* Smooth Fade-in Animations on Page Load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mouse Scroll Down Indicator Animation */
@keyframes scrollBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

.animate-scroll-bounce {
    animation: scrollBounce 2s ease-in-out infinite;
}