@charset "utf-8";

    /* Sub Navigation Menu */
    .sub-nav {
        position: sticky;
        top: 72px;
        z-index: 10;
        background: white;
        border-bottom: 1px solid #e2e8f0;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .sub-nav.scrolled-up {
        transform: translateY(0);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    }

    .sub-nav.scrolled-down {
        transform: translateY(-100%);
    }

    /* Product Sections */
    .product-section {
        display: none;
    }

    .product-section.active {
        display: block;
    }

    .sub-nav-link {
        position: relative;
        padding: 1.25rem 1.5rem;
        font-weight: 600;
        color: #64748b;
        transition: color 0.2s;
        white-space: nowrap;
    }

    .sub-nav-link:hover {
        color: #10b981;
    }

    .sub-nav-link.active {
        color: #10b981;
    }

    .sub-nav-link.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: #10b981;
    }

    /* Scroll Animation Styles */
    .scroll-animation-section {
        position: relative;
        background: linear-gradient(180deg, #0a0e1a 0%, #1a1f35 50%, #0a0e1a 100%);
        padding: 0;
    }
    /* Scroll Animation Styles : product  */
    .scroll-animation-section.product {
        position: relative;
        background: #fff !important;
        padding: 0;
    }
    .scroll-animation-section.product .animation-image img {
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
        display: block;
        border-radius: 10px;
    }
    .scroll-animation-section.product .animation-text-item.is-active h3 {
        color: var(--accent2) !important;
    }
    .scroll-animation-section.product .animation-text-item.is-active p{
        color: var(--accent2) !important;
    }
    .scroll-animation-section.product .animation-images-container {
        margin-top: -10vh;
    }

    .scroll-animation-wrapper {
        position: relative;
    }

    .scroll-animation-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1.5rem 0;
        align-items: flex-start;
    }

    @media (min-width: 1024px) {
        .scroll-animation-content {
            grid-template-columns: 45% 55%;
            gap: 4rem;
            padding: 0 1.5rem 0;
        }
    }

    /* Left side: Scrollable text */
    .animation-text-container {
        position: relative;
        color: white;
        padding: 0;
    }

    .animation-text-item {
        min-height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0rem 0;
    }

    @media (min-width: 1024px) {
        .animation-text-item {
            min-height: 36vh;
        }

        .animation-text-item:first-child {
            margin-top: 0;
            padding-top: 0;
        }

        .animation-text-item:last-child {
            margin-bottom: 5vh;
        }
    }
    @media (min-width: 1024px) {
        .animation-text-item.short-sized {
            min-height: 26vh;
        }

        .animation-text-item.short-sized:first-child {
            margin-top: 0;
            padding-top: 0;
        }

        .animation-text-item.short-sized:last-child {
            margin-bottom: 2vh;
        }
    }

    /* Right side: Sticky image container */
    .animation-images-container {
        display: none;
    }

    @media (min-width: 1024px) {
        .animation-images-container {
            display: flex;
            position: sticky;
            top: 0;
            height: 100vh;
            align-items: center;
            justify-content: center;
            margin-top: 0;
        }
    }

    .animation-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
        pointer-events: none;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .animation-image:first-child {
        opacity: 0;
    }

    .animation-image.active {
        opacity: 1;
    }

    .animation-image img {
        width: 100%;
        height: auto;
        max-height: 90vh;
        object-fit: contain;
        filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
        display: block;
        border-radius: 10px;
    }

    .animation-text-item .mobile-image {
        width: 100%;
        height: auto;
        display: block;
        max-height: 320px;
        object-fit: contain;
        margin-top: 1.5rem;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.2));
    }

    @media (min-width: 1024px) {
        .animation-text-item .mobile-image {
            display: none;
        }
    }

    /* Scroll active text color */
    .animation-text-item h3,
    .animation-text-item p {
        transition: color 0.4s ease;
    }

    /* Scroll active text color (Tailwind override) */
    .animation-text-item.is-active h3 {
        color: var(--accent) !important;
    }

    .animation-text-item.is-active p {
        color: #c9f7e4 !important;
    }

    /* Product Scroll Animation Styles 
    .product-scroll-animation-section {
        position: relative;
        padding: 0;
        background: white;
    }

    .product-scroll-title-screen {
        padding: 4rem 1.5rem 1rem 1.5rem;
        text-align: center;
    }

    @media (min-width: 1024px) {
        .product-scroll-title-screen {
            padding: 8rem 0 1rem 0;
        }
    }

    .product-scroll-animation-wrapper {
        position: relative;
    }

    .product-scroll-animation-content {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 1.5rem;
        align-items: flex-start;
    }

    @media (min-width: 1024px) {
        .product-scroll-animation-content {
            grid-template-columns: 45% 55%;
            gap: 4rem;
        }
    }

    .product-animation-text-container {
        position: relative;
        color: #0f172a;
        padding: 0;
    }

    .product-animation-text-item {
        min-height: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem 0;
    }

    @media (min-width: 1024px) {
        .product-animation-text-item {
            min-height: 30vh;
        }

        .product-animation-text-item:first-child {
            margin-top: 5vh;
        }
    }

    .product-animation-text-item:first-child {
        margin-top: 0;
    }

    .product-animation-text-item:last-child {
        margin-bottom: 0vh;
    }

    .product-animation-images-container {
        display: none;
    }

    @media (min-width: 1024px) {
        .product-animation-images-container {
            display: flex;
            position: sticky;
            top: 0;
            height: 100vh;
            align-items: center;
            justify-content: center;
            margin-top: -20vh;
            margin-bottom: -30vh;
        }
    }

    @media (max-width: 1023px) {
        .product-animation-text-item .mobile-image {
            display: block;
            width: 100%;
            max-width: 100%;
            height: auto;
            max-height: 50vh;
            object-fit: contain;
            margin-top: 2rem;
            filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
        }
    }

    @media (min-width: 1024px) {
        .product-animation-text-item .mobile-image {
            display: none;
        }
    }

    .product-animation-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.6s ease-in-out;
        pointer-events: none;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product-animation-image.active {
        opacity: 1;
    } */

    /* AppDynamics: First image visible initially only when active 

    .product-animation-image:first-child.active {
        opacity: 1;
    }

    .product-animation-image:first-child:not(.active) {
        opacity: 0 !important;
    }

    .product-animation-image img {
        width: 100%;
        height: auto;
        max-height: 60vh;
        object-fit: contain;
    }

    @media (min-width: 1024px) {
        .product-animation-image img {
            width: 80%;
            max-height: 70vh;
        }
    } */

    /* AppDynamics specific image sizing */
    #appd-section .product-animation-image img {
        width: 100%;
        max-height: 60vh;
        object-fit: contain;
        filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.1));
        display: block;
    }

    @media (min-width: 1024px) {
        #appd-section .product-animation-image img {
            width: 80%;
        }
    }
    
    /* Title screen */
    .scroll-title-screen {
        padding: 6rem 0 1rem 0;
        text-align: center;
    }

    /* Visualization Gallery Styles */
    .gallery-container {
        position: relative;
        overflow: hidden;
    }

    .gallery-slider {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .gallery-slide {
        width: 100%;
        flex: 0 0 100%;
        display: flex;
        align-items: stretch;
        justify-content: flex-start;
    }

    .gallery-slide img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: none;
        object-fit: cover;
        display: block;
        margin: 0;
    }

    .gallery-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.9);
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 1.0s;
        z-index: 10;
    }

    .gallery-nav:hover {
        background: rgba(255, 255, 255, 1);
        transform: translateY(-50%) scale(1.0);
    }

    .gallery-nav.prev {
        left: 0;
    }

    .gallery-nav.next {
        right: 0;
    }

    .gallery-dots {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }

    .gallery-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #cbd5e1;
        border: none;
        cursor: pointer;
        transition: all 1.0s;
    }

    .gallery-dot.active {
        background: #10b981;
        width: 32px;
        border-radius: 6px;
    }

    @media (max-width: 640px) {
        .scroll-title-screen h2 {
            font-size: 2.25rem;
            line-height: 1.2;
        }

        .gallery-container {
            padding: 1.5rem;
        }

        .gallery-nav {
            width: 42px;
            height: 42px;
        }

        .gallery-dot {
            width: 10px;
            height: 10px;
        }

        .gallery-dot.active {
            width: 24px;
        }

        .grid.grid-cols-3>div {
            text-align: left;
        }
    }