@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
        
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Montserrat', sans-serif; background-color: #0a0a0a; color: #e5e5e5; overflow-x: hidden; }
        
        /* === CSS FOR SMOOTH VIDEO TRANSITION === */
        #hero-video-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #hero-video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* This is the key for the smooth fade effect */
            transition: opacity 1.5s ease-in-out;
        }
        .video-active {
            opacity: 1;
        }
        .video-inactive {
            opacity: 0;
        }
        /* === END OF VIDEO CSS === */
        
        @keyframes pulse-glow {
            0%, 100% { box-shadow: 0 0 10px -5px rgba(255, 255, 255, 0.5); }
            50% { box-shadow: 0 0 20px 0px rgba(255, 255, 255, 0.8); }
        }
        .btn-pulse { animation: pulse-glow 3s infinite ease-in-out; }

        .project-btn { position: relative; transition: all 0.4s ease; padding-left: 2rem; padding-right: 2rem; }
        .project-btn > span { display: inline-block; transition: transform 0.4s ease; }
        .project-btn::after { content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 2rem; top: 50%; transform: translate(-150%, -50%); opacity: 0; transition: all 0.4s ease; }
        .project-btn:hover > span { transform: translateX(10px); }
        .project-btn:hover::after { transform: translate(0, -50%); opacity: 1; }

        [data-anim] { opacity: 0; }
        .header-scroll { background: #000; backdrop-filter: blur(10px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3); }
        .nav-link { position: relative; transition: color 0.3s ease; }
        .nav-link::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: white; transition: width 0.3s ease; }
        .nav-link:hover::after, .active-nav-link::after { width: 100%; }
        .stats-card { border-left: 2px solid #444; transition: all 0.4s ease; }
        .stats-card:hover { border-left-color: white; background-color: #1a1a1a; transform: translateY(-5px); }
        .description-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }

        @keyframes rotate_border { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .service-card { position: relative; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); background-color: #f9fafb; border: 1px solid #eee; overflow: hidden; }
        .service-card:hover { border-color: #ccc; }
        .service-card::before { content: ''; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%; background: conic-gradient(from 0deg, transparent, #ddd, transparent); transform-origin: center center; animation: rotate_border 8s linear infinite; z-index: 0; opacity: 0; transition: opacity 0.4s ease;}
        .service-card:hover::before { animation-duration: 4s; opacity: 1;}
        .service-card .service-content { position: relative; z-index: 1; background-color: #f9fafb; inset: 1px; padding: 2rem; border-radius: 0.375rem; }
        .service-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .line { overflow: hidden; padding-bottom: 0.1em; }
        .line-inner { display: block; }

        #main-content-area { position: relative; }
        #tsparticles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }

        @keyframes infinite-scroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
        }
        .logo-slider-track { display: flex; animation: infinite-scroll 40s linear infinite; }
        .logo-slider .logo-slide { flex-shrink: 0; width: 200px; margin: 0 40px; }
        #projects img { max-height: 400px !important; }