:root {
        --red: #E50914;
        --red-dark: #B81D24;
        --ink: #0a0a0a;
        --ice: #F5F5F1;
        --glass: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glow-primary: rgba(229, 9, 20, 0.4);
        --glow-secondary: rgba(139, 92, 246, 0.4);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            background: var(--ink);
            color: var(--ice);
        }
        
            /* Portfolio Section */
        .portfolio-section {
            background: radial-gradient(circle at top, #111 0, #050505 45%, #000 100%);
        }
    
        
        /* ===== Ultra-Modern Services Carousel Styles ===== */

        :root {
        --red: #E50914;
        --red-dark: #B81D24;
        --ink: #0a0a0a;
        --ice: #F5F5F1;
        --glass: rgba(255, 255, 255, 0.05);
        --glass-border: rgba(255, 255, 255, 0.1);
        --glow-primary: rgba(229, 9, 20, 0.4);
        --glow-secondary: rgba(139, 92, 246, 0.4);
        }

        /* Services Section Container */
        .services-section {
        position: relative;
        min-height: 100vh;
        padding: 8rem 0;
        background: radial-gradient(circle at 30% 20%, #0f0f23 0%, #0a0a0a 50%, #000000 100%);
        overflow: hidden;
        }

        .services-section::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
        }

        /* Animated Background Grid */
        .services-section::after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: 
            linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 100px 100px;
        animation: gridMove 20s linear infinite;
        pointer-events: none;
        }

        @keyframes gridMove {
        0% { transform: translate(0, 0); }
        100% { transform: translate(100px, 100px); }
        }

        .services-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        position: relative;
        z-index: 1;
        }

        /* ===== Header Section ===== */
        .services-header {
        text-align: center;
        margin-bottom: 6rem;
        animation: fadeInUp 1s ease-out;
        }

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

        .header-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 20px;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 50px;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--ice);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 2rem;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .header-badge:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.2);
        transform: translateY(-2px);
        }

        .badge-dot {
        width: 8px;
        height: 8px;
        background: var(--red);
        border-radius: 50%;
        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        box-shadow: 0 0 0 0 var(--glow-primary);
        }

        @keyframes pulse {
        0%, 100% {
            box-shadow: 0 0 0 0 var(--glow-primary);
        }
        50% {
            box-shadow: 0 0 0 10px transparent;
        }
        }

        .services-title {
        font-size: clamp(3rem, 8vw, 6rem);
        font-weight: 900;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        }

        .title-line {
        display: flex;
        gap: 1.5rem;
        justify-content: center;
        flex-wrap: wrap;
        }

        .title-word {
        display: inline-block;
        color: var(--ice);
        opacity: 0;
        transform: translateY(50px);
        animation: wordReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .title-word:nth-child(1) { animation-delay: 0.1s; }
        .title-word:nth-child(2) { animation-delay: 0.2s; }
        .title-word:nth-child(3) { animation-delay: 0.3s; }
        .title-word:nth-child(4) { animation-delay: 0.4s; }

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

        .gradient-text {
        background: linear-gradient(135deg, var(--red) 0%, #ff6b9d 50%, #c94b4b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        position: relative;
        }

        .gradient-text::after {
        content: attr(data-text);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        background: inherit;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: blur(20px);
        opacity: 0.5;
        }

        .services-subtitle {
        font-size: 1.25rem;
        color: rgba(245, 245, 241, 0.6);
        font-weight: 400;
        max-width: 600px;
        margin: 0 auto;
        opacity: 0;
        animation: fadeInUp 0.8s ease-out 0.6s forwards;
        }

        /* ===== Carousel Stage ===== */
        .carousel-stage {
        position: relative;
        height: 600px;
        perspective: 2000px;
        margin-bottom: 4rem;
        }

        /* ===== Service Cards ===== */
        .service-card {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 90%;
        max-width: 500px;
        height: 550px;
        transform: translate(-50%, -50%) scale(0.85) rotateY(0deg);
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        transform-style: preserve-3d;
        will-change: transform, opacity;
        pointer-events: none;
        }

        .service-card.active {
        transform: translate(-50%, -50%) scale(1) rotateY(0deg);
        opacity: 1;
        z-index: 10;
        pointer-events: all;
        }

        .service-card.prev {
        transform: translate(-120%, -50%) scale(0.85) rotateY(25deg);
        opacity: 0.4;
        z-index: 5;
        filter: blur(2px);
        }

        .service-card.next {
        transform: translate(20%, -50%) scale(0.85) rotateY(-25deg);
        opacity: 0.4;
        z-index: 5;
        filter: blur(2px);
        }

        .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 28px;
        transform-style: preserve-3d;
        transition: transform 0.3s ease;
        }

        .service-card.active .card-inner:hover {
        transform: translateZ(20px);
        }

        /* Animated Border */
        .card-border {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        padding: 2px;
        background: linear-gradient(
            135deg,
            transparent 0%,
            var(--red) 50%,
            transparent 100%
        );
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;

         /* Standard syntax (Chrome, Firefox) */
        mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: cardBorderSweep 3s linear infinite;
        }

        @keyframes cardBorderSweep {
        0% {
            background: linear-gradient(0deg, transparent 0%, var(--red) 50%, transparent 100%);
        }
        100% {
            background: linear-gradient(360deg, transparent 0%, var(--red) 50%, transparent 100%);
        }
        }

        /* Holographic Overlay */
        .holographic-overlay {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        background: linear-gradient(
            135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.03) 50%,
            rgba(255, 255, 255, 0) 100%
        );
        opacity: 0;
        transition: opacity 0.5s ease;
        pointer-events: none;
        }

        .service-card.active .card-inner:hover .holographic-overlay {
        opacity: 1;
        animation: holographicShift 2s ease-in-out infinite;
        }

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

        /* Card Background */
        .card-background {
        position: absolute;
        inset: 0;
        border-radius: 28px;
        background: rgba(15, 15, 30, 0.7);
        backdrop-filter: blur(40px);
        overflow: hidden;
        }

        .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0.3;
        animation: orbFloat 8s ease-in-out infinite;
        }

        .orb-1 {
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, var(--red) 0%, transparent 70%);
        top: -100px;
        right: -100px;
        }

        .orb-2 {
        width: 250px;
        height: 250px;
        background: radial-gradient(circle, #8b5cf6 0%, transparent 70%);
        bottom: -80px;
        left: -80px;
        animation-delay: 2s;
        }

        @keyframes orbFloat {
        0%, 100% {
            transform: translate(0, 0) scale(1);
        }
        50% {
            transform: translate(20px, 20px) scale(1.1);
        }
        }

        /* Card Content */
        .card-content {
        position: relative;
        height: 100%;
        padding: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 2;
        }

        .card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        }

        .service-icon {
        width: 64px;
        height: 64px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 16px;
        color: var(--red);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .service-card.active .service-icon {
        animation: iconPulse 2s ease-in-out infinite;
        }

        @keyframes iconPulse {
        0%, 100% {
            box-shadow: 0 0 0 0 var(--glow-primary);
        }
        50% {
            box-shadow: 0 0 0 20px transparent;
        }
        }

        .service-icon:hover {
        background: rgba(229, 9, 20, 0.1);
        border-color: var(--red);
        transform: rotate(10deg) scale(1.1);
        }

        .service-tag {
        display: flex;
        align-items: baseline;
        gap: 4px;
        font-weight: 700;
        }

        .tag-number {
        font-size: 2rem;
        color: var(--ice);
        line-height: 1;
        }

        .tag-total {
        font-size: 1rem;
        color: rgba(245, 245, 241, 0.4);
        }

        /* Card Body */
        .card-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 1rem;
        }

        .service-title {
        font-size: 2.5rem;
        font-weight: 900;
        color: var(--ice);
        line-height: 1.2;
        margin: 0;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
        }

        .service-description {
        font-size: 1.125rem;
        color: rgba(245, 245, 241, 0.7);
        line-height: 1.6;
        margin: 0;
        }

        .service-stats {
        display: flex;
        gap: 2rem;
        margin-top: 1.5rem;
        }

        .stat-item {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        }

        .stat-value {
        font-size: 1.75rem;
        font-weight: 800;
        background: linear-gradient(135deg, var(--red) 0%, #ff6b9d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        }

        .stat-label {
        font-size: 0.75rem;
        color: rgba(245, 245, 241, 0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 600;
        }

        /* Card Footer */
        .card-footer {
        padding-top: 1.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        }

        .explore-btn {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 14px 28px;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 50px;
        color: var(--ice);
        font-size: 0.9375rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        }

        .explore-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--red), #ff6b9d);
        opacity: 0;
        transition: opacity 0.4s ease;
        }

        .explore-btn:hover {
        border-color: var(--red);
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(229, 9, 20, 0.3);
        }

        .explore-btn:hover::before {
        opacity: 1;
        }

        .btn-text,
        .btn-icon {
        position: relative;
        z-index: 1;
        }

        .btn-icon {
        display: flex;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .explore-btn:hover .btn-icon {
        transform: translateX(4px);
        }

        /* ===== Navigation Controls ===== */
        .carousel-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        margin-bottom: 2rem;
        }

        .car-nav-btn {
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--glass);
        backdrop-filter: blur(20px);
        border: 1px solid var(--glass-border);
        border-radius: 50%;
        color: var(--ice);
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        }

        .car-nav-btn::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--red), #ff6b9d);
        opacity: 0;
        transition: opacity 0.4s ease;
        border-radius: 50%;
        }

        .car-nav-btn svg {
        position: relative;
        z-index: 1;
        transition: transform 0.3s ease;
        }

        .car-nav-btn:hover {
        border-color: var(--red);
        transform: scale(1.1);
        box-shadow: 0 10px 30px rgba(229, 9, 20, 0.3);
        }

        .car-nav-btn:hover::before {
        opacity: 1;
        }

        .car-nav-prev:hover svg {
        transform: translateX(-3px);
        }

        .car-nav-next:hover svg {
        transform: translateX(3px);
        }

        /* Pagination Dots */
        .carousel-pagination {
        display: flex;
        gap: 12px;
        }

        .pagination-dot {
        width: 8px;
        height: 8px;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        }

        .pagination-dot::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 2px solid transparent;
        transition: border-color 0.4s ease;
        }

        .pagination-dot:hover {
        background: rgba(255, 255, 255, 0.4);
        transform: scale(1.2);
        }

        .pagination-dot.active {
        width: 32px;
        border-radius: 50px;
        background: linear-gradient(135deg, var(--red), #ff6b9d);
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
        }

        .pagination-dot.active::before {
        border-color: rgba(229, 9, 20, 0.3);
        }

        /* Progress Bar */
        .carousel-progress {
        height: 3px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 50px;
        overflow: hidden;
        max-width: 600px;
        margin: 0 auto;
        }

        .progress-bar {
        height: 100%;
        background: linear-gradient(90deg, var(--red), #ff6b9d);
        border-radius: 50px;
        width: 0%;
        animation: progressAnim 4s linear infinite;
        box-shadow: 0 0 20px rgba(229, 9, 20, 0.5);
        }

        @keyframes progressAnim {
        0% {
            width: 0%;
        }
        100% {
            width: 100%;
        }
        }

        /* ===== Magnetic Effect ===== */
        [data-magnetic] {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* ===== Responsive Design ===== */
        @media (max-width: 1200px) {
        .carousel-stage {
            height: 550px;
        }
        
        .service-card {
            max-width: 450px;
            height: 500px;
        }
        }

        @media (max-width: 992px) {
        .services-section {
            padding: 6rem 0;
        }
        
        .services-header {
            margin-bottom: 4rem;
        }
        
        .carousel-stage {
            height: 500px;
        }
        
        .service-card {
            width: 85%;
            height: 480px;
        }
        
        .service-card.prev,
        .service-card.next {
            transform: translate(-50%, -50%) scale(0.8);
            opacity: 0.2;
        }
        
        .card-content {
            padding: 2rem;
        }
        
        .service-title {
            font-size: 2rem;
        }
        }

        @media (max-width: 768px) {
        .services-container {
            padding: 0 1.5rem;
        }
        
        .services-title {
            font-size: clamp(2.5rem, 6vw, 4rem);
        }
        
        .title-line {
            gap: 1rem;
        }
        
        .carousel-stage {
            height: 520px;
        }
        
        .service-card {
            width: 90%;
            max-width: 380px;
            height: 500px;
        }
        
        .service-card.prev,
        .service-card.next {
            display: none;
        }
        
        .nav-btn {
            width: 48px;
            height: 48px;
        }
        }

        @media (max-width: 576px) {
        .services-section {
            padding: 4rem 0;
        }
        
        .services-header {
            margin-bottom: 3rem;
        }
        
        .carousel-stage {
            height: 480px;
        }
        
        .service-card {
            width: 95%;
            height: 460px;
        }
        
        .card-content {
            padding: 1.75rem;
        }
        
        .service-icon {
            width: 56px;
            height: 56px;
        }
        
        .service-title {
            font-size: 1.75rem;
        }
        
        .service-description {
            font-size: 1rem;
        }
        
        .service-stats {
            gap: 1.5rem;
        }
        
        .carousel-controls {
            gap: 1.5rem;
        }
        }

.service-card.prev,
.service-card.next {
  pointer-events: auto;   /* or all */
  cursor: pointer;
}


.service-card.active {
  cursor: default;
}