/* Modern Base Styles */
            * {
                box-sizing: border-box;
            }
            #content img{
                border-bottom: 0px;
            }
            /* Animated Background Particles */
            .particles-bg {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: -1;
                /*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
            }

            .particles-bg::before {
                content: '';
                position: absolute;
                width: 100%;
                height: 100%;
                background-image:
                    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
                    radial-gradient(circle at 40% 80%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
                animation: float 20s ease-in-out infinite;
            }

            /* Modern Hero Section */
            .modern-hero {
                background: transparent;
                padding: 120px 0 80px;
                position: relative;
                overflow: hidden;
            }

            .hero-subtitle {
                /*margin-top: 20px;*/
                /*margin-bottom: 20px;*/
                font-size: 1.5rem;
                color: rgba(255, 255, 255, 0.9);
            }

            .typing-animation {
                overflow: hidden;
                border-right: .15em solid #00f5ff;
                white-space: nowrap;
                margin: 0 auto;
                letter-spacing: .15em;
                animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
            }

            /* Modern Content */
            .modern-content {
                background: #fff;
                position: relative;
                z-index: 2;
            }

            /* Intro Card */
            .intro-card {
                background: linear-gradient(145deg, #ffffff, #f8f9fa);
                border-radius: 20px;
                padding: 40px;
                box-shadow:
                    0 20px 40px rgba(0, 0, 0, 0.1),
                    inset 0 1px 0 rgba(255, 255, 255, 0.6);
                border: 1px solid rgba(255, 255, 255, 0.2);
                position: relative;
                overflow: hidden;
                margin-bottom: 30px;
            }

            .intro-card::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                height: 4px;
                background: linear-gradient(90deg, #667eea, #764ba2, #667eea);
                background-size: 200% 100%;
                /*animation: shimmer 3s ease-in-out infinite;*/
            }

            .intro-icon {
                text-align: center;
                margin-bottom: 20px;
            }

            .intro-icon i {
                font-size: 3rem;
                background: linear-gradient(45deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
            }

            .pulse-animation {
                animation: pulse 2s infinite;
            }

            .gradient-text {
                background: linear-gradient(45deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-size: 2.5rem;
                font-weight: 700;
                text-align: center;
                margin-bottom: 20px;
            }

            .intro-text {
                font-size: 1.8rem;
                line-height: 1.8;
                color: #555;
                text-align: center;
                margin-bottom: 40px;
            }

            .highlight-text {
                background: linear-gradient(45deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                font-weight: 600;
            }

            /* Stats Container */
            .stats-container {
                display: flex;
                justify-content: space-around;
                margin-top: 40px;
            }

            .stat-item {
                text-align: center;
            }

            .stat-number {
                font-size: 2.5rem;
                font-weight: 800;
                background: linear-gradient(45deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .stat-number span.counter {
                display: inline-block;
            }

            .stat-label {
                font-size: 1.3rem;
                color: #777;
                margin-top: 5px;
            }

            /* Section Headers */
            .section-header {
                text-align: center;
                margin-bottom: 80px;
            }

            .modern-title {
                font-size: 2.5rem;
                font-weight: 700;
                color: #2c3e50;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-bottom: 15px;
            }

            .title-line {
                width: 80px;
                height: 3px;
                background: linear-gradient(45deg, #667eea, #764ba2);
                margin: 0 20px;
                border-radius: 2px;
            }

            .section-subtitle {
                font-size: 1.8rem;
                color: #777;
                max-width: 600px;
                margin: 0 auto;
            }

            /* Modern Service Cards */
            .service-card {
                background: #fff;
                border-radius: 20px;
                overflow: hidden;
                transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
                margin-bottom: 30px;
                height: 100%;
                position: relative;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }

            .service-card.core-service {
                transform: perspective(1000px) rotateX(0deg);
                background: linear-gradient(145deg, #ffffff, #f8f9fa);
            }

            .service-card.core-service:hover {
                transform: perspective(1000px) rotateX(-5deg) translateY(-20px);
                box-shadow:
                    0 30px 60px rgba(102, 126, 234, 0.3),
                    0 0 0 1px rgba(102, 126, 234, 0.1);
            }

            .service-card.featured-card {
                background: linear-gradient(145deg, #667eea, #764ba2);
                color: white;
                transform: scale(1.05);
            }

            .service-card.featured-card:hover {
                transform: perspective(1000px) rotateX(-5deg) translateY(-20px) scale(1.05);
                box-shadow:
                    0 40px 80px rgba(102, 126, 234, 0.4),
                    0 0 0 1px rgba(255, 255, 255, 0.2);
            }

            .card-glow {
                position: absolute;
                top: -2px;
                left: -2px;
                right: -2px;
                bottom: -2px;
                background: linear-gradient(45deg, #667eea, #764ba2, #667eea);
                border-radius: 22px;
                z-index: -1;
                opacity: 0;
                transition: opacity 0.3s ease;
                background-size: 200% 200%;
                animation: gradientShift 3s ease infinite;
            }

            .service-card:hover .card-glow {
                opacity: 0.1;
            }

            /* Featured Badge */
            .featured-badge {
                position: absolute;
                top: 20px;
                right: 20px;
                background: linear-gradient(45deg, #ff6b6b, #ffa500);
                color: white;
                padding: 8px 15px;
                border-radius: 20px;
                font-size: 1rem;
                font-weight: 600;
                z-index: 10;
                box-shadow: 0 5px 15px rgba(255, 107, 107, 0.3);
            }

            .featured-badge i {
                margin-right: 5px;
            }

            /* Service Icons */
            .service-icon-modern {
                position: absolute;
                top: 20px;
                left: 20px;
                z-index: 10;
                width: 60px;
                height: 60px;
                border-radius: 15px;
                background: rgba(255, 255, 255, 0.95);
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(10px);
            }

            .floating-icon {
                font-size: 1.5rem;
                background: linear-gradient(45deg, #667eea, #764ba2);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                animation: float 3s ease-in-out infinite;
            }

            .icon-bg {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
                border-radius: 15px;
                opacity: 0;
                transition: opacity 0.3s ease;
            }

            .service-card:hover .icon-bg {
                opacity: 1;
            }

            /* Modern Image Styling */
            .service-image-modern {
                position: relative;
                height: 250px;
                overflow: hidden;
            }

            .modern-img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
                filter: brightness(0.9) contrast(1.1);
            }

            .service-card:hover .modern-img {
                transform: scale(1.1) rotate(2deg);
            }

            .service-card:hover .image-overlay {
                opacity: 1;
            }

            .service-card:hover .overlay-content {
                transform: translateY(0);
            }

            .overlay-content i {
                font-size: 2rem;
                margin-bottom: 10px;
                display: block;
            }

            /* Modern Content */
            .service-content-modern {
                padding: 30px 25px;
                position: relative;
            }

            .service-badge {
                display: inline-flex;
                align-items: center;
                background: linear-gradient(45deg, #667eea, #764ba2);
                color: white;
                padding: 5px 12px;
                border-radius: 15px;
                font-size: 1rem;
                font-weight: 600;
                margin-bottom: 15px;
            }

            .service-badge i {
                margin-right: 5px;
                font-size: 0.7rem;
            }

            .featured-card .service-badge {
                background: rgba(255, 255, 255, 0.2);
                backdrop-filter: blur(10px);
            }

            .service-content-modern h3 {
                font-size: 1.4rem;
                font-weight: 700;
                margin-bottom: 15px;
                color: #2c3e50;
            }

            .featured-card .service-content-modern h3 {
                color: white;
            }

            .service-content-modern p {
                color: #666;
                line-height: 1.7;
                margin-bottom: 20px;
            }


            .featured-card .service-content-modern p {
                color: rgba(255, 255, 255, 0.9);
            }

            /* Tech Stack */
            .tech-stack {
                margin: 20px 0;
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
            }
            .tech-stack:hover {
                color: #fff;
            }
            .tech-tag {
                background: rgba(102, 126, 234, 0.1);
                color: #667eea;
                padding: 5px 12px;
                border-radius: 15px;
                font-size: 12px;
                font-weight: 500;
                border: 1px solid rgba(102, 126, 234, 0.2);
            }
            .tech-tag:hover {
                background: linear-gradient(45deg, #ff6b6b, #ffa500);
                color: white;
                gap: "20px";
            }

            .featured-card .tech-tag {
                background: rgba(255, 255, 255, 0.2);
                color: white;
                border-color: rgba(255, 255, 255, 0.3);
            }


            .featured-btn {
                background: linear-gradient(45deg, #ff6b6b, #ffa500);
            }

            .featured-btn:hover {
                box-shadow: 0 15px 30px rgba(255, 107, 107, 0.4);
            }

            /* Additional Services */
            .additional-services-section {
                margin-top: 80px;
                /*padding: 60px 0;*/
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                border-radius: 30px;
                position: relative;
            }

            .additional-header {
                margin-bottom: 50px;
            }

            .additional-title {
                font-size: 2.5rem;
                color: #000;
                font-weight: 700;
                margin-bottom: 10px;
                padding-top: 10px;
            }

            .additional-subtitle {
                color: #43474a;
                font-size: 1.8rem;
            }

            .service-card.additional-service {
                background: rgba(255, 255, 255, 0.8);
                backdrop-filter: blur(10px);
                border: 1px solid rgba(255, 255, 255, 0.3);
                transition: all 0.3s ease;
            }

            .service-card.additional-service:hover {
                transform: translateY(-10px);
                background: rgba(255, 255, 255, 0.95);
                box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            }

            .service-icon-additional {
                text-align: center;
                padding: 20px 0;
                font-size: 2.5rem;
                color: #5da5e4;
            }

            .service-image-additional {
                height: 200px;
                overflow: hidden;
                border-radius: 10px;
                margin: 0 20px 20px;
            }

            .service-image-additional img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: transform 0.3s ease;
                opacity: 0.8;
            }

            .service-card.additional-service:hover .service-image-additional img {
                transform: scale(1.05);
                opacity: 1;
            }

            .service-content-additional {
                padding: 0 25px 25px;
            }

            .service-content-additional h3 {
                font-size: 1.8rem;
                color: #000;
                font-weight: 600;
                margin-bottom: 15px;
            }

            .service-content-additional p {
                color: #868e96;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .btn-additional {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                padding: 12px 20px;
                background: #868e96;
                color: white;
                border: none;
                border-radius: 8px;
                font-weight: 500;
                text-decoration: none;
                transition: all 0.3s ease;
            }

            .btn-additional:hover {
                background: #6c757d;
                transform: translateY(-2px);
                color: white;
                text-decoration: none;
            }

            .btn-additional i {
                margin-left: 8px;
                transition: transform 0.3s ease;
            }

            .btn-additional:hover i {
                transform: translateX(3px);
            }

            /* Animations */
            @keyframes float {
                0%, 100% { transform: translateY(0px); }
                50% { transform: translateY(-10px); }
            }

            @keyframes pulse {
                0% { transform: scale(1); }
                50% { transform: scale(1.05); }
                100% { transform: scale(1); }
            }

            @keyframes glitch {
                0%, 100% { transform: translate(0); }
                20% { transform: translate(-2px, 2px); }
                40% { transform: translate(-2px, -2px); }
                60% { transform: translate(2px, 2px); }
                80% { transform: translate(2px, -2px); }
            }

            @keyframes glitch-top {
                0%, 100% { transform: translate(0); }
                20% { transform: translate(-2px, -2px); }
                40% { transform: translate(-2px, 2px); }
                60% { transform: translate(2px, -2px); }
                80% { transform: translate(2px, 2px); }
            }

            @keyframes glitch-bottom {
                0%, 100% { transform: translate(0); }
                20% { transform: translate(2px, 2px); }
                40% { transform: translate(2px, -2px); }
                60% { transform: translate(-2px, 2px); }
                80% { transform: translate(-2px, -2px); }
            }

            @keyframes typing {
                from { width: 0; }
                to { width: 100%; }
            }

            @keyframes blink-caret {
                from, to { border-color: transparent; }
                50% { border-color: #00f5ff; }
            }

            @keyframes wave {
                0%, 100% { transform: translateX(0); }
                50% { transform: translateX(-25px); }
            }

            @keyframes shimmer {
                0% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }

            @keyframes gradientShift {
                0% { background-position: 0% 50%; }
                50% { background-position: 100% 50%; }
                100% { background-position: 0% 50%; }
            }

            @keyframes rotate {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            /* Responsive Design */
            @media (max-width: 768px) {
                .glitch-effect {
                    font-size: 2.5rem;
                }

                .stats-container {
                    flex-direction: column;
                    gap: 20px;
                }

                .cta-buttons {
                    flex-direction: column;
                    align-items: center;
                }

                .btn-cta {
                    width: 100%;
                    max-width: 300px;
                }

                .modern-title {
                    font-size: 2rem;
                    flex-direction: column;
                    gap: 20px;
                }
                .additional-title{
                    font-size: 2rem;
                    flex-direction: column;
                    gap: 20px
                }
                .additional-subtitle {
                    font-size: 1.8rem;
                    color: #777;
                    max-width: 600px;
                    margin: 0 auto;
                }

                .title-line {
                    width: 60px;
                    margin: 0;
                }
                .hero-subtitle{
                    font-size: 12px;
                    width: 100%;
                    height: auto;
                }
            }

            /* Wow Animation Override */
            .wow {
                visibility: hidden;
            }