/* Styles from hero */

        body {
            background-color: #FFFFFF;
            color: #121414;
            overflow-x: hidden;
        }

        .clean-card {
            background: #FFFFFF;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
            border: 1px solid #f0f0f0;
        }

        .mint-glow {
            box-shadow: 0 4px 20px rgba(137, 215, 183, 0.3);
        }

        .mint-glow:hover {
            box-shadow: 0 8px 30px rgba(137, 215, 183, 0.5);
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        .animate-float {
            animation: float 4s ease-in-out infinite;
        }

        .reveal {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out;
        }

        .reveal.active {
            opacity: 1;
            transform: translateY(0);
        }
    
/* Styles from services */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        
        /* 3D Tilt Effect */
        .card-perspective {
            perspective: 1000px;
        }
        .card-inner {
            transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
            transform-style: preserve-3d;
        }
        .card-perspective:hover .card-inner {
            transform: rotateY(5deg) rotateX(2deg) translateY(-8px);
        }

        /* Marquee Animation */
        @keyframes marquee {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        .animate-marquee {
            display: flex;
            width: max-content;
            animation: marquee 40s linear infinite;
        }
        .animate-marquee:hover {
            animation-play-state: paused;
        }

        /* ---- Testimonial Carousel ---- */
        .testimonial-marquee {
            display: flex;
            overflow: hidden;
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
            -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
        }

        .testimonial-track {
            display: flex;
            flex-shrink: 0;
            align-items: stretch;
            animation: testimonial-scroll 25s linear infinite;
        }

        .testimonial-marquee:hover .testimonial-track {
            animation-play-state: paused;
        }

        @keyframes testimonial-scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-100%); }
        }

        .testimonial-card {
            flex-shrink: 0;
            width: 380px;
            margin: 0 16px;
            padding: 32px;
            background: #ffffff;
            border-left: 4px solid #1A312C;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: break-word;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        @media (max-width: 480px) {
            .testimonial-card {
                width: 300px;
                padding: 24px;
                margin: 0 10px;
            }
        }

        .surface-glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }
    
/* Styles from projects */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
        }
        .project-card-hover:hover .hover-overlay {
            opacity: 1;
        }
        .filter-chip-active {
            background-color: #1A312C;
            color: #ffffff;
        }
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #f9f9f9;
        }
        ::-webkit-scrollbar-thumb {
            background: #e2e2e2;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #1A312C;
        }
    
/* Styles from process */

        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
        }
        .workflow-line {
            background: linear-gradient(90deg, #1A312C 0%, #1A312C var(--progress, 0%), #e2e2e2 var(--progress, 0%), #e2e2e2 100%);
        }
        .custom-scrollbar::-webkit-scrollbar {
            width: 4px;
        }
        .custom-scrollbar::-webkit-scrollbar-track {
            background: #f3f3f3;
        }
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: #1A312C;
        }
    
/* Styles from contact */

        body {
            background-color: #f9f9f9;
            color: #1a1c1c;
            overflow-x: hidden;
        }
        .glass-input {
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(224, 224, 224, 0.5);
            transition: all 0.3s ease;
        }
        .glass-input:focus {
            border-color: #1A312C;
            background: rgba(255, 255, 255, 0.8);
            outline: none;
            box-shadow: 0 0 0 4px rgba(137, 215, 183, 0.1);
        }
        .floating-icon {
            animation: float 6s ease-in-out infinite;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-20px); }
        }
        .delay-1 { animation-delay: 1s; }
        .delay-2 { animation-delay: 2.5s; }
        .delay-3 { animation-delay: 4s; }
    
html { scroll-behavior: smooth; }