/* Hero Image Responsive Handling */
.hero-image-container {
    width: 100% !important;
    max-height: 500px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-image {
    width: 100% !important;
    height: auto !important;
    max-height: 500px !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.3s ease !important;
}

/* Ensure proper aspect ratio for very tall images */
@media (min-width: 992px) {
    .hero-image-container {
        min-height: 400px !important;
        max-height: 500px !important;
    }

    .hero-image {
        min-height: 400px !important;
        max-height: 500px !important;
    }
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .hero-image-container {
        max-height: 350px !important;
        margin-top: 30px !important;
    }

    .hero-image {
        max-height: 350px !important;
    }
}

@media (max-width: 768px) {
    .hero-image-container {
        max-height: 300px !important;
    }

    .hero-image {
        max-height: 300px !important;
    }
}

/* Hover effect for better interactivity */
.hero-image:hover {
    transform: scale(1.02);
}
 .challenge-item {
                    transition: all 0.3s ease;
                    }
                    .challenge-item:hover {
                    background-color: rgba(248, 248, 252, 0.5);
                    }
                    .challenge-number {
                    position: relative;
                    display: inline-block;
                    }

                    .challenge-item:hover .challenge-number:after {
                    width: 40px;
                    }
				 .opacity-light-1{opacity:0.5;}
				.solution-card {
				  background: rgba(255, 255, 255, 0.30); /* more transparent for techy vibe */
				  backdrop-filter: blur(20px);
				  -webkit-backdrop-filter: blur(20px);
				  border-radius: 20px;
				  border: 1px solid rgba(255, 255, 255, 0.18); /* subtle border like glass edge */
				  transition: transform 0.3s ease, box-shadow 0.3s ease;
				  position: relative;
				  z-index: 1;
				}
				.solution-card:hover {
				  transform: translateY(-4px);
				}

				/* High-tech animated border with moving light streak */
				.high-tech-border {
				  position: relative;
				  border: 1px solid rgba(255, 255, 255, 0.3);
				  border-radius: 20px;
				  overflow: hidden;
				}

				/* Light streak that moves along the border */
				.high-tech-border::before {
				  content: '';
				  position: absolute;
				  top: -1px;
				  left: -1px;
				  right: -1px;
				  bottom: -1px;
				  border: 1px solid transparent;
				  border-radius: 20px;
				  background: none;
				  z-index: 2;
				  pointer-events: none;
				  mask: linear-gradient(90deg, transparent, white, transparent);
				  -webkit-mask: linear-gradient(90deg, transparent, white, transparent);
				  mask-size: 200% 100%;
				  -webkit-mask-size: 200% 100%;
				  animation: light-streak 4s linear infinite;
				  box-shadow: 0 0 10px rgba(233, 88, 161, 0.8), 0 0 20px rgba(143, 118, 245, 0.5);
				}

				@keyframes light-streak {
				  0% {
					mask-position: 200% 0;
					-webkit-mask-position: 200% 0;
					border-color: rgba(233, 88, 161, 0.8);
				  }
				  33% {
					border-color: rgba(255, 93, 116, 0.8);
				  }
				  66% {
					border-color: rgba(143, 118, 245, 0.8);
				  }
				  100% {
					mask-position: -100% 0;
					-webkit-mask-position: -100% 0;
					border-color: rgba(233, 88, 161, 0.8);
				  }
				}

				/* Light particles that follow the streak */
				.high-tech-border .border-particle {
				  position: absolute;
				  width: 4px;
				  height: 4px;
				  border-radius: 50%;
				  background: #e958a1;
				  box-shadow: 0 0 8px #e958a1, 0 0 15px #e958a1;
				  z-index: 2;
				  opacity: 0;
				  pointer-events: none;
				}

				.outside-box-right svg {
				  width: 100%;
				  height: auto;
				  max-width: 419px;
				  margin-top:20px;
				}

				.list-style-03 li:before{ color: var(--dark-gray);font-weight:600;}
                    /* Basic animations */
                    @keyframes pulse {
                        0% { opacity: 0.6; }
                        50% { opacity: 1; }
                        100% { opacity: 0.6; }
                    }

                    @keyframes float {
                        0% { transform: translateY(0px); }
                        50% { transform: translateY(-5px); }
                        100% { transform: translateY(0px); }
                    }

                    @keyframes glow {
                        0% { filter: drop-shadow(0 0 2px rgba(236, 64, 122, 0.3)); }
                        50% { filter: drop-shadow(0 0 8px rgba(236, 64, 122, 0.6)); }
                        100% { filter: drop-shadow(0 0 2px rgba(236, 64, 122, 0.3)); }
                    }

                    @keyframes flow {
                        0% { transform: translateY(-5px); opacity: 0; }
                        50% { opacity: 1; }
                        100% { transform: translateY(20px); opacity: 0; }
                    }

                    /* Particle animations */
                    @keyframes particle-rise {
                        0% { transform: translate(0, 100%); opacity: 0; }
                        25% { opacity: 1; }
                        75% { opacity: 1; }
                        100% { transform: translate(var(--x-end), -100%); opacity: 0; }
                    }

                    /* Particle styles */
                    .particles-container {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                    }

                    .particle {
                        position: absolute;
                        bottom: 0;
                        width: 6px;
                        height: 6px;
                        border-radius: 50%;
                        background: rgba(255, 255, 255, 0.8);
                        box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
                        animation: particle-rise 3s ease-in-out infinite;
                    }

                    .particle-1 {
                        left: 20%;
                        --x-end: 10px;
                        animation-delay: 0s;
                    }

                    .particle-2 {
                        left: 40%;
                        --x-end: -5px;
                        animation-delay: 0.5s;
                    }

                    .particle-3 {
                        left: 60%;
                        --x-end: 7px;
                        animation-delay: 1s;
                    }

                    .particle-4 {
                        left: 30%;
                        --x-end: -8px;
                        animation-delay: 1.5s;
                    }

                    .particle-5 {
                        left: 70%;
                        --x-end: 5px;
                        animation-delay: 2s;
                    }

                    /* Funnel stage animations */
                    .funnel-stage {
                        transition: transform 0.3s ease;
                    }

                    .funnel-stage:hover {
                        transform: translateY(-2px);
                    }

                    /* Right side funnel animations */
                    .col-6:nth-child(2) .funnel-top {
                        animation: float 4s ease-in-out infinite;
                        position: relative;
                    }

                    .col-6:nth-child(2) .funnel-middle {
                        animation: float 4s ease-in-out infinite 0.5s;
                        position: relative;
                    }

                    .col-6:nth-child(2) .funnel-lower {
                        animation: float 4s ease-in-out infinite 1s;
                        position: relative;
                    }

                    /* Flow indicators for right funnel */
                    .col-6:nth-child(2) .funnel-top::after,
                    .col-6:nth-child(2) .funnel-middle::after,
                    .col-6:nth-child(2) .funnel-lower::after {
                        content: '';
                        position: absolute;
                        width: 8px;
                        height: 8px;
                        background: rgba(236, 64, 122, 0.7);
                        border-radius: 50%;
                        bottom: -5px;
                        left: 50%;
                        transform: translateX(-50%);
                        animation: flow 2s ease-in-out infinite;
                        z-index: 2;
                    }

                    .col-6:nth-child(2) .funnel-top::after {
                        animation-delay: 0s;
                    }

                    .col-6:nth-child(2) .funnel-middle::after {
                        animation-delay: 0.7s;
                    }

                    .col-6:nth-child(2) .funnel-lower::after {
                        animation-delay: 1.4s;
                    }

                    /* Highlight animation for bottom funnel */
                    .funnel-stage-highlight {
                        transition: transform 0.3s ease;
                    }

                    .funnel-stage-highlight:hover {
                        transform: translateY(-3px);
                    }

                    .funnel-bottom svg {
                        animation: glow 3s ease-in-out infinite;
                    }

                    /* Icon animations - only for right funnel */
                    .col-6:nth-child(2) .funnel-stage svg g text {
                        animation: pulse 3s ease-in-out infinite;
                    }

                    /* Simplified Bottom Label Styles */
                    .funnel-label {
                        position: relative;
                        z-index: 10;
                        transition: all 0.3s ease;
                        margin-top: 12px;
                        text-align: center;
                        padding: 0 10px;
                    }

                    /* Clean label design without arrows */
                    .funnel-label .label-content {
                        display: inline-block;
                        padding: 8px 16px;
                        background: rgba(255, 255, 255, 0.95);
                        border: 1px solid rgba(0, 0, 0, 0.1);
                        border-radius: 12px;
                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
                        font-size: 13px;
                        font-weight: 500;
                        color: #333;
                        backdrop-filter: blur(10px);
                        -webkit-backdrop-filter: blur(10px);
                        word-wrap: break-word;
                        word-break: break-word;
                        hyphens: auto;
                        overflow-wrap: break-word;
                        white-space: normal;
                        text-align: center;
                        max-width: 200px;
                    }

                    /* Traditional label styling */
                    .traditional-label-funnel .label-content {
                        background: linear-gradient(135deg, rgba(108, 117, 125, 0.1), rgba(138, 144, 150, 0.1));
                        border: 1px solid rgba(108, 117, 125, 0.3);
                        color: #6c757d;
                        font-weight: 600;
                    }

                    /* Enhanced label for right side */
                    .enhanced-label .label-content {
                        background: linear-gradient(135deg, rgba(233, 88, 161, 0.1), rgba(255, 93, 116, 0.1));
                        border: 1px solid rgba(233, 88, 161, 0.3);
                        color: #e958a1;
                        font-weight: 600;
                    }

                    /* Subtle animation for enhanced labels */
                    .enhanced-label {
                        animation: gentle-float 4s ease-in-out infinite;
                    }

                    @keyframes gentle-float {
                        0%, 100% { transform: translateY(0px); }
                        50% { transform: translateY(-3px); }
                    }

                    /* Funnel container improvements */
                    .funnel-container {
                        position: relative;
                        padding: 15px 0;
                    }

                    /* Add subtle shadows to funnel stages for depth */
                    .funnel-stage svg {
                        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.08));
                        transition: all 0.3s ease;
                    }

                    .funnel-stage:hover svg {
                        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
                        transform: translateY(-1px);
                    }

                    /* Enhanced funnel stage styling */
                    .enhanced-funnel svg {
                        filter: drop-shadow(0 3px 8px rgba(233, 88, 161, 0.25));
                    }

                    .enhanced-funnel:hover svg {
                        filter: drop-shadow(0 5px 15px rgba(233, 88, 161, 0.35));
                        transform: translateY(-2px);
                    }

                    /* Traditional funnel subtle styling */
                    .traditional-funnel svg {
                        filter: drop-shadow(0 2px 4px rgba(108, 117, 125, 0.15));
                    }

                    .traditional-funnel:hover svg {
                        filter: drop-shadow(0 4px 8px rgba(108, 117, 125, 0.2));
                        transform: translateY(-1px);
                    }

                    /* Optimization event styling */
                    .optimization-event {
                        position: relative;
                        margin: 25px 0;
                        text-align: center;
                        z-index: 10;
                    }

                    .optimization-event::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 10%;
                        right: 10%;
                        height: 1px;
                        background: linear-gradient(90deg, transparent, rgba(233, 88, 161, 0.2), transparent);
                        z-index: 1;
                    }

                    .optimization-event .event-label {
                        position: relative;
                        display: inline-block;
                        padding: 6px 16px;
                        background: linear-gradient(135deg, #e958a1, #ff5d74);
                        border-radius: 20px;
                        font-size: 11px;
                        font-weight: 600;
                        color: white;
                        text-transform: uppercase;
                        letter-spacing: 0.3px;
                        z-index: 2;
                        box-shadow: 0 3px 12px rgba(233, 88, 161, 0.3);
                        border: none;
                    }

                    /* Traditional optimization event (gray) */
                    .optimization-event.traditional .event-label {
                        background: linear-gradient(135deg, #6c757d, #8a9096);
                        box-shadow: 0 3px 12px rgba(108, 117, 125, 0.2);
                    }

                    /* Responsive label adjustments */
                    @media (min-width: 1200px) {
                        .funnel-label .label-content {
                            padding: 10px 18px;
                            font-size: 14px;
                            max-width: 220px;
                        }
                    }

                    @media (max-width: 1199px) and (min-width: 768px) {
                        .funnel-label .label-content {
                            padding: 8px 14px;
                            font-size: 13px;
                            max-width: 180px;
                        }
                    }

                    /* Mobile and tablet responsive */
                    @media (max-width: 767px) {
                        /* Scale down funnel sizes proportionally */
                        .funnel-stage {
                            margin-left: auto !important;
                            margin-right: auto !important;
                        }

                        .funnel-top {
                            width: 85% !important;
                            height: 55px !important;
                        }

                        .funnel-middle {
                            width: 70% !important;
                            height: 50px !important;
                        }

                        .funnel-lower {
                            width: 55% !important;
                            height: 45px !important;
                        }

                        .funnel-bottom {
                            width: 45% !important;
                            height: 40px !important;
                        }

                        /* Simplified mobile labels */
                        .funnel-label {
                            margin-top: 10px;
                        }

                        .funnel-label .label-content {
                            padding: 6px 12px;
                            font-size: 11px;
                            max-width: 150px;
                            border-radius: 8px;
                        }
                    }

                    /* Extra small devices */
                    @media (max-width: 575px) {
                        .modern-funnel-comparison {
                            padding: 1rem !important;
                        }

                        /* Smaller funnel sizes for extra small devices */
                        .funnel-top {
                            width: 80% !important;
                            height: 45px !important;
                        }

                        .funnel-middle {
                            width: 65% !important;
                            height: 40px !important;
                        }

                        .funnel-lower {
                            width: 50% !important;
                            height: 35px !important;
                        }

                        .funnel-bottom {
                            width: 40% !important;
                            height: 30px !important;
                        }

                        /* Extra small labels */
                        .funnel-label .label-content {
                            padding: 4px 8px;
                            font-size: 10px;
                            max-width: 120px;
                            border-radius: 6px;
                        }

                        /* Adjust header spacing */
                        .text-center.mb-3 h6 {
                            font-size: 14px !important;
                        }
                    }

                    /* Very small screens (small phones) */
                    @media (max-width: 400px) {
                        /* Compact funnel sizes for very small screens */
                        .funnel-top {
                            width: 90% !important;
                            height: 40px !important;
                        }

                        .funnel-middle {
                            width: 75% !important;
                            height: 35px !important;
                        }

                        .funnel-lower {
                            width: 60% !important;
                            height: 30px !important;
                        }

                        .funnel-bottom {
                            width: 50% !important;
                            height: 25px !important;
                        }

                        /* Very compact labels */
                        .funnel-label .label-content {
                            padding: 3px 6px;
                            font-size: 9px;
                            max-width: 100px;
                            border-radius: 4px;
                        }
                    }
					
					 /* Fix for overlay not covering the entire box */
            .feature-box-overlay {
                width: 100% !important;
                height: 100% !important;
                position: absolute !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                border-radius: 6px;
                z-index: 1;
            }

            /* Make the first box always have the pink background */
            .project-metrics .col-sm-6:first-child .feature-box-overlay {
                opacity: 1 !important;
                background: linear-gradient(to right, #e958a1, #ff5d74) !important;
            }

            /* Make text in first box white */
            .project-metrics .col-sm-6:first-child .feature-box-content h2,
            .project-metrics .col-sm-6:first-child .feature-box-content span,
            .project-metrics .col-sm-6:first-child .feature-box-content p,
            .project-metrics .col-sm-6:first-child .feature-box-icon i {
                color: white !important;
                -webkit-text-fill-color: white !important;
            }

            /* Semi-transparent white text for dark backgrounds */
            .text-white-transparent {
                color: rgba(255, 255, 255, 0.8) !important;
            }

            /* Animated card with gradient border - updated colors to match screenshot */
            .animated-card {
                --border-width: 1px;
                --radius: 20px;
                --angle: 0turn;
                --bg-color: #1E1A33; /* Darker purple background to match screenshot */

                position: relative;
                border-radius: var(--radius);
                border: var(--border-width) solid transparent;
                background-color: var(--bg-color);
                isolation: isolate;
                padding: 40px;
            }

            .animated-card::before {
                content: " ";
                position: absolute;
                inset: calc(var(--border-width) * -1);
                z-index: -1;
                border: inherit;
                border-radius: inherit;
                background-image: conic-gradient(from var(--angle), #2D1E4A 80%, #e958a1 88%, #e958a1 92%, #2D1E4A 100%);
                background-origin: border-box;
                -webkit-mask: linear-gradient(black, black) content-box,
                              linear-gradient(black, black);
                mask: linear-gradient(black, black) content-box,
                      linear-gradient(black, black);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                animation: rotate-gradient 4s linear infinite;
            }

            @property --angle {
                syntax: "<angle>";
                inherits: true;
                initial-value: 0turn;
            }

            @keyframes rotate-gradient {
                to {
                    --angle: 1turn;
                }
            }

            /* Fallback for browsers that don't support @property */
            @supports not (background: conic-gradient(from var(--angle), #3a1e5e 80%, #e958a1 88%)) {
                .animated-card::before {
                    background-image: conic-gradient(#3a1e5e 80%, #e958a1 88%, #e958a1 92%, #3a1e5e 100%);
                    animation: none;
                }
            }

            /* Numbered list styling - updated to match screenshot */
            .numbered-list {
                counter-reset: item;
                list-style-type: none;
                padding-left: 0;
            }

            .numbered-list li {
                position: relative;
                padding-left: 40px;
                margin-bottom: 30px;
                counter-increment: item;
            }

            .numbered-list li::before {
                content: "0" counter(item);
                position: absolute;
                left: 0;
                top: 0;
                color: #e958a1;
                font-weight: 600;
                font-size: 14px;
                opacity: 0.9;
            }
			   /* Mobile-only feature box interactions - don't interfere with desktop hover */
        @media (max-width: 768px) {
            .feature-box.hover-box.dark-hover {
                cursor: pointer !important;
                user-select: none;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                position: relative;
                z-index: 1;
            }

            /* Force natural heights on mobile to prevent equal-height script issues */
            .hover-box.feature-box {
                height: auto !important;
                min-height: auto !important;
            }

            /* Ensure row-equal-height doesn't force heights on mobile */
            .row-equal-height .hover-box.feature-box {
                height: auto !important;
                min-height: auto !important;
            }
        }

        /* Mobile scroll-triggered sequential hover effects */
        @media (max-width: 768px) {
            .feature-box.hover-box.dark-hover {
                touch-action: manipulation;
                position: relative;
                overflow: hidden;
            }

            .feature-box.hover-box.dark-hover .feature-box-overlay {
                position: absolute;
                top: 0; left: 0; right: 0; bottom: 0;
                width: 100% !important;
                height: 100% !important;
                opacity: 0;
                transform: translateY(100%);
                transition: opacity 0.25s ease, transform 0.25s ease;
                z-index: 1;
            }

            .feature-box.hover-box.dark-hover .content-slide-up {
                position: relative;
                z-index: 2;
                transition: transform 0.25s ease;
            }

            /* Active state - immediate activation */
            .feature-box.hover-box.dark-hover.mobile-scroll-active .feature-box-overlay {
                opacity: 1 !important;
                transform: translateY(0) !important;
                background: linear-gradient(to right, #e958a1, #ff5d74) !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .content-slide-up {
                transform: translateY(0) !important;
            }

            /* Make ALL elements white when active */
            .feature-box.hover-box.dark-hover.mobile-scroll-active .counter {
                color: white !important;
                -webkit-text-fill-color: white !important;
                background: none !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active h2 {
                color: white !important;
                -webkit-text-fill-color: white !important;
                background: none !important;
            }

            /* Paragraph text - force visibility */
            .feature-box.hover-box.dark-hover.mobile-scroll-active p {
                color: white !important;
                opacity: 1 !important;
                visibility: visible !important;
                display: block !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .text-visible {
                color: white !important;
                opacity: 1 !important;
                visibility: visible !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .text-white {
                color: white !important;
                opacity: 1 !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .text-dark-gray,
            .feature-box.hover-box.dark-hover.mobile-scroll-active span {
                color: white !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .feature-box-icon i {
                color: white !important;
            }

            .feature-box.hover-box.dark-hover.mobile-scroll-active .text-base-color {
                color: white !important;
            }

            /* Override any light opacity classes */
            .feature-box.hover-box.dark-hover.mobile-scroll-active .text-light-opacity {
                color: white !important;
                opacity: 1 !important;
            }

            /* Ensure z-index for proper layering */
            .feature-box.hover-box.dark-hover.mobile-scroll-active .feature-box-content,
            .feature-box.hover-box.dark-hover.mobile-scroll-active .feature-box-icon {
                position: relative;
                z-index: 10;
            }

            /* Smooth transitions for all text elements */
            .feature-box.hover-box.dark-hover .counter,
            .feature-box.hover-box.dark-hover h2,
            .feature-box.hover-box.dark-hover span,
            .feature-box.hover-box.dark-hover p,
            .feature-box.hover-box.dark-hover i {
                transition: color 0.5s ease, -webkit-text-fill-color 0.5s ease;
            }
        }