@charset "utf-8";
            /* CSS variables based on https://www.creative-biolabs.com/vaccine/ */
            :root {
                --vvs-primary-color: #005a9c;
                --vvs-secondary-color: #003366;
                --vvs-accent-color: #f9d849;
                --vvs-background-color: #f8f9fa;
                --vvs-text-color: #333333;
                --vvs-link-color: #005a9c; /* Distinct link color */
                --vvs-card-background: #ffffff;
                --vvs-border-color: #dee2e6;
                --vvs-font-family: 'Open Sans', sans-serif;
                --vvs-animation-speed: 0.3s;
                --max-width:1200px;
            }
    
            /* Basic Reset and Global Styles */
    
            h1, h2, h3, h4 {
                font-weight: 700;
            }
    
            .vvs-container {
                max-width: var(--max-width);
                margin: 0 auto;
                padding: 0 1.5rem;
            }
    
            .vvs-section {
                padding: 4rem 0;
            }
    
            .vvs-section-heading {
                text-align: center;
                font-size: 2.25rem;
                margin-bottom: 2rem;
            }
    
            /* Button styles */
            .vvs-button {
                display: inline-block;
                padding: 0.75rem 1.5rem;
                border-radius: 9999px;
                font-weight: 600;
                text-align: center;
                border: 2px solid transparent;
                cursor: pointer;
                transition: all var(--vvs-animation-speed) ease-in-out;
            }
    
            .vvs-button-primary {
                background-color: var(--vvs-accent-color);
                color: var(--vvs-secondary-color);
            }
    
            .vvs-button-primary:hover {
                background-color: #fcf1b8;
            }
    
            .vvs-button-secondary {
                background-color: transparent;
                color: var(--vvs-secondary-color);
                border-color: var(--vvs-secondary-color);
            }
    
            .vvs-button-secondary:hover {
                background-color: var(--vvs-secondary-color);
                color: var(--vvs-card-background);
            }
    
            /* Hero Banner Section (Optimized based on top banner-1) */
            .vvs-hero-section {
                display: flex;
                align-items: center;
                background-color: #f2f2f2;
                padding-top: 5rem;
                padding-bottom: 5rem;
            }
            .vvs-hero-content {
                flex: 2;
                padding-right: 2rem;
            }
            .vvs-hero-image-wrapper {
                flex: 1;
                display: flex;
                justify-content: center;
                order: 2; /* Move image to the right */
            }
            .vvs-hero-content {
                order: 1; /* Move content to the left */
            }
            /* Optimization: Basic responsive settings for the Hero image */
            .vvs-hero-image {
                width: 100%;
                max-width: 300px;
                height: auto; /* Maintain aspect ratio */
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }
            .vvs-hero-content h1 {
                font-size: 3rem;
                margin-top: 0;
                margin-bottom: 1rem;
                color: var(--vvs-primary-color);
            }
            .vvs-hero-content p {
                font-size: 1.15rem;
                margin-bottom: 2rem;
                color: var(--vvs-text-color);
            }
            .vvs-hero-buttons {
                display: flex;
                gap: 1rem;
            }
    
            /* Main Navigation Section */
            .vvs-main-nav-section {
                background-color: var(--vvs-secondary-color);
                position: sticky;
                top: 146px;
                z-index: 100; 
            }
            .vvs-main-nav {
                display: flex;
                justify-content: space-between;
                align-items: center;
                max-width: var(--max-width);
                margin: 0 auto;
                padding: 0 1.5rem;
            }
            .vvs-main-nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
            }
            .vvs-main-nav li a {
                display: inline-block;
                padding: 1rem 1.2rem;
                color: #ffffff;
                font-weight: 600;
                transition: background-color var(--vvs-animation-speed);
            }
            .vvs-main-nav li a:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
            .vvs-main-nav li.vvs-inquiry-item a {
                background-color: var(--vvs-accent-color);
                color: var(--vvs-secondary-color);
            }
            .vvs-main-nav li.vvs-inquiry-item a:hover {
                background-color: #fcf1b8;
            }
            @media (max-width: 768px) {
                .vvs-main-nav-section {
                   top: 0;
              }
              .vvs-main-nav li a{
                padding: 0.5rem 1rem;
              }
            }
            /* Key Points Section (Accordion) */
            .vvs-key-points-section {
                background-color: #ffffff;
                padding: 4rem 0;
            }
            .vvs-key-points-wrapper {
                max-width: var(--max-width);
                margin: 0 auto;
                border-radius: 12px;
                box-shadow: 0 5px 25px rgba(0,0,0,0.08);
                overflow: hidden;
            }
            .vvs-key-point-item {
                border-bottom: 1px solid var(--vvs-border-color);
            }
            .vvs-key-point-item:last-child {
                border-bottom: none;
            }
            .vvs-key-point-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 1.5rem;
                cursor: pointer;
                background-color: #ffffff;
                transition: background-color var(--vvs-animation-speed);
            }
            .vvs-key-point-header:hover {
                background-color: #f8f9fa;
            }
            .vvs-key-point-header h3 {
                font-size: 1.15rem;
                margin: 0;
                transition: color var(--vvs-animation-speed);
            }
            .vvs-key-point-header svg {
                width: 24px;
                height: 24px;
                transition: transform var(--vvs-animation-speed);
            }
            .vvs-key-point-item.vvs-active .vvs-key-point-header svg {
                transform: rotate(180deg);
            }
            .vvs-key-point-content {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s ease-in-out;
                padding: 0 1.5rem;
            }
            .vvs-key-point-item.vvs-active .vvs-key-point-content {
                max-height: 200px; /* A safe max-height value */
            }
            .vvs-key-point-content p {
                padding-bottom: 1.5rem;
                margin: 0;
            }
    
            /* Services Section (Two-column layout) */
            .vvs-services-section {
                display: flex;
                align-items: flex-start;
                gap: 2rem;
            }
            .vvs-services-nav {
                flex-basis: 250px;
                flex-shrink: 0;
                position: sticky;
                /* top: 210px;   */
                background-color: #fff;
            }
            .vvs-services-nav ul {
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .vvs-services-nav a {
                display: block;
                padding: 0.75rem 1rem;
                border-left: 4px solid transparent;
                font-weight: 600;
                border-radius: 6px;
                transition: all var(--vvs-animation-speed);
            }
            .vvs-services-nav a:hover,
            .vvs-services-nav a.vvs-active {
                background-color: #f1f5f9;
                border-left-color: var(--vvs-primary-color);
                color: var(--vvs-primary-color);
            }
            .vvs-services-content {
                flex-grow: 1;
            }
            .vvs-service-item {
                background-color: var(--vvs-card-background);
                padding: 2rem;
                border-radius: 12px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.06);
                margin-bottom: 2rem;
                scroll-margin-top: 80px;
            }
            .vvs-service-item h2 {
                font-size: 1.8rem;
                margin-top: 0;
                border-bottom: 2px solid var(--vvs-border-color);
                padding-bottom: 0.5rem;
                margin-bottom: 1rem;
            }
            .vvs-service-item h3 {
                font-size: 1.2rem;
                margin-top: 1.5rem;
                margin-bottom: 0.5rem;
            }
            .vvs-service-item ul {
                list-style: disc;
                padding-left: 1.5rem;
                margin-bottom: 1rem;
            }
            .vvs-service-item li {
                margin-bottom: 0.5rem;
            }
            .vvs-service-item .vvs-bullet-list ul {
                list-style: circle;
                padding-left: 1.5rem;
            }
    
            /* Services content with no bullet points */
            .vvs-service-text {
                font-size: 1rem;
                margin-bottom: 1rem;
            }
            .vvs-service-list {
                list-style: disc;
                padding-left: 1.5rem;
                margin-bottom: 1rem;
            }
            .vvs-service-list li {
                margin-bottom: 0.5rem;
                list-style: disc;
            }
    
            .vvs-service-text span {
                font-weight: 600;
            }
    
            /* Platforms Section (Carousel) */
            .vvs-platforms-section {
                background-color: #ffffff;
                padding: 4rem 0;
            }
            .vvs-platform-carousel-container {
                position: relative;
                max-width: 1000px; /* Adjusted width */
                margin: 0 auto;
                overflow: hidden;
            }
            .vvs-platform-carousel {
                display: flex;
                transition: transform var(--vvs-animation-speed) ease-in-out;
            }
            .vvs-platform-item {
                min-width: 100%;
                display: flex;
                align-items: center;
                gap: 2rem;
                padding: 2rem;
            }
            /* Optimization: Styles for images in the platform carousel */
            .vvs-platform-item img {
                width: 33.33%;
                height: auto; /* Maintain aspect ratio */
                object-fit: cover; /* Cover container, maintaining aspect ratio without distortion */
                border-radius: 8px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.08);
            }
            .vvs-platform-item-text {
                flex: 1;
            }
            .vvs-platform-item-text h3 {
                font-size: 1.5rem;
                margin-top: 0;
            }
            .vvs-platform-item-text p {
                margin-bottom: 0;
            }
    
            .vvs-carousel-control {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                background-color: rgba(0,0,0,0.2);
                border: none;
                color: white;
                padding: 1rem;
                cursor: pointer;
                z-index: 10;
                border-radius: 50%;
            }
            .vvs-carousel-control-left { left: 10px; }
            .vvs-carousel-control-right { right: 10px; }
    
            /* Workflow Section (Diagram) */
            .vvs-workflow-section {
                background-color: var(--vvs-background-color);
                padding: 4rem 0;
            }
            .vvs-workflow-container {
                display: flex;
             flex-wrap: wrap; 
                justify-content: center;
                position: relative;
            }
            .vvs-workflow-container::before {
                content: '';
                position: absolute;
                top: 50px;
                left: 5%;
                right: 5%;
                height: 2px;
                background-color: var(--vvs-link-color);
                z-index: 1;
            }
            .vvs-workflow-step {
            
                width:16%;
                text-align: center;
                position: relative;
                z-index: 2;
                padding: 70px 10px 0px 10px;
            }
            .vvs-workflow-step-icon {
                position: absolute;
                top: 20px;
                left: 50%;
                transform: translateX(-50%);
                width: 60px;
                height: 60px;
                background-color: var(--vvs-primary-color);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: 0 4px 10px rgba(0,0,0,0.1);
                color: white;
                font-size: 1.5rem;
                font-weight: 700;
            }
            .vvs-workflow-step h3 {
                font-size: 1.1rem;
                margin: 1rem 0 0.5rem;
            }
    
            /* Advantages Section (Two-column layout, new style) */
            .vvs-advantages-section {
                background-color: var(--vvs-background-color);
                padding: 4rem 0;
            }
            .vvs-advantages-container {
                max-width: var(--max-width);
                margin: 0 auto;
                display: flex;
                flex-wrap: wrap;
                gap: 2rem;
                background-color: var(--vvs-card-background);
                padding: 2rem;
                border-radius: 12px;
                box-shadow: 0 5px 25px rgba(0,0,0,0.08);
                align-items: center; /* Vertically align items */
            }
            .vvs-advantages-image-wrapper {
                flex: 2;
                min-width: 300px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            /* Optimization: Added styles for the "Advantages" section image to ensure responsiveness and correct aspect ratio */
            .vvs-advantages-image-wrapper img {
                width: 100%;
                max-width: 450px; /* Limit max width to prevent image from becoming too large */
                height: auto; /* Maintain aspect ratio */
                border-radius: 12px;
                object-fit: cover;
            }
            .vvs-advantages-content {
                flex: 3;
                min-width: 300px;
            }
            .vvs-advantages-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 2rem;
            }
            .vvs-advantage-item {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }
            .vvs-advantage-item h4 {
                font-size: 1.2rem;
                margin: 0;
                color: var(--vvs-primary-color);
            }
    
            /* Case Study Section */
            .vvs-case-study-section {
                background-color: var(--vvs-background-color);
                padding: 4rem 0;
            }
            .vvs-case-study-card {
                background-color: #ffffff;
                padding: 2rem;
                border-radius: 12px;
                box-shadow: 0 5px 20px rgba(0,0,0,0.06);
                display: flex;
                gap: 2rem;
                align-items: flex-start;
            }
            .vvs-case-study-content {
                flex: 2;
            }
            .vvs-case-study-content h3{
                margin-bottom:15px;
            }
            /* Optimization: Style adjustments for the case study image container and image itself */
            .vvs-case-study-image-container {
                flex: 1;
                max-width: 500px; /* Limit max width */
                min-width: 350px;
                text-align: center;
            }
            .vvs-case-study-image {
                width: 100%;
                max-width:200px;
                height: auto; /* Maintain aspect ratio */
                border-radius: 8px;
                box-shadow: 0 5px 15px rgba(0,0,0,0.1);
                margin:auto;
            }
    
            .vvs-image-caption {
                font-size: 0.85rem;
                text-align: center;
                color: var(--vvs-text-color);
                margin-top: 0.5rem;
            }
            .vvs-image-caption i {
                display: block;
                margin-top: 0.25rem;
            }
    
            /* Customer Reviews Section */
            .vvs-reviews-section {
                background-color: #f0f2f5;
                padding: 4rem 0;
            }
            .vvs-testimonial-slider {
                max-width: var(--max-width);
                width: 100%;
                margin: 0 auto;
                overflow: hidden;
                position: relative;
            }
            .vvs-slides-container {
                display: flex;
                transition: transform 0.5s ease-in-out;
            }
            .vvs-slide {
                flex-shrink: 0;
                width: 100%;
                box-sizing: border-box;
            }
            .vvs-text-unit {
                background-color: #ffffff;
                margin: 0 auto;
                width: calc(100% - 60px);
                padding: 40px;
                text-align: center;
                border: 1px solid #e0e0e0;
                border-bottom: none;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
                position: relative;
                z-index: 2;
                border-radius: 8px 8px 0 0;
            }
            .vvs-text-unit::after {
                content: '';
                position: absolute;
                bottom: -20px;
                left: 50%;
                transform: translateX(-50%);
                width: 0;
                height: 0;
                border-left: 25px solid transparent;
                border-right: 25px solid transparent;
                border-top: 20px solid #ffffff;
            }
            .vvs-title {
                font-size: 28px;
                font-weight: 600;
                margin-top: 0;
                margin-bottom: 25px;
                color: #333;
            }
            .vvs-quote {
                font-size: 16px;
                font-style: italic;
                line-height: 1.6;
                color: #555;
                margin: 0;
            }
            .vvs-info-unit {
                background-color: var(--vvs-secondary-color);
                color: #ffffff;
                padding: 30px 40px 20px;
                position: relative;
                z-index: 1;
                min-height: 75px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                border-radius: 0 0 8px 8px;
            }
            .vvs-customer-name {
                font-size: 22px;
                font-weight: 700;
                margin: 0 0 5px 0;
                color: white;
            }
            .vvs-customer-title {
                font-size: 16px;
                font-weight: 400;
                background-color: rgba(255, 255, 255, 0.2);
                padding: 5px 10px;
                margin: 0;
                display: inline-block;
                max-width: max-content;
                border-radius: 4px;
            }
            .vvs-nav-dots {
                text-align: center;
                padding-top: 25px;
            }
            .vvs-dot {
                cursor: pointer;
                height: 12px;
                width: 12px;
                margin: 0 5px;
                background-color: #cccccc;
                border-radius: 50%;
                display: inline-block;
                transition: background-color 0.3s ease, width 0.3s ease;
                border: none;
                padding: 0;
            }
            .vvs-dot.vvs-active {
                background-color: var(--vvs-secondary-color);
                width: 30px;
                border-radius: 10px;
            }
    
            /* Featured Products Section */
            .vvs-products-section {
                background-color: var(--vvs-background-color);
            }
            .vvs-featured-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                gap: 2rem;
            }
            .vvs-featured-item {
                position: relative;
                background-color: var(--vvs-card-background);
                border-radius: 12px;
                overflow: hidden;
                box-shadow: 0 4px 15px rgba(0,0,0,0.08);
                transition: transform var(--vvs-animation-speed), box-shadow var(--vvs-animation-speed);
                text-align: center;
                padding: 1.5rem;
                display: flex; /* Use flexbox for better content control */
                flex-direction: column;
            }
            .vvs-featured-item:hover {
                transform: translateY(-5px);
                box-shadow: 0 8px 25px rgba(0,0,0,0.1);
            }
            /* Optimization: Add styles for images in the featured resources section to make them uniform and appealing */
            .vvs-featured-item img {
                width: 100%;
                height: 180px; /* Set a fixed height for consistency */
                object-fit: cover; /* Ensure images fill the space without distortion */
                border-radius: 8px;
                margin-bottom: 1.5rem;
            }
            .vvs-featured-item-content {
                flex-grow: 1; /* Allow the content area to fill remaining space */
            }
            .vvs-featured-item h4 {
                margin: 0;
            }
            
            /* Stretched link pattern */
            .vvs-stretched-link::after {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1;
                content: "";
            }
    
            /* FAQs Accordion */
            .vvs-faq-item {
                border: 1px solid var(--vvs-border-color);
                border-radius: 8px;
                overflow: hidden;
                box-shadow: 0 2px 8px rgba(0,0,0,0.05);
                transition: all var(--vvs-animation-speed);
            }
            .vvs-faq-question {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1.5rem;
                cursor: pointer;
                background-color: var(--vvs-card-background);
                transition: background-color var(--vvs-animation-speed);
            }
            .vvs-faq-question:hover {
                background-color: #f8f9fa;
            }
            .vvs-faq-question h4 {
                font-size: 1.15rem;
                margin: 0;
                color: var(--vvs-secondary-color);
            }
            .vvs-faq-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 24px;
                height: 24px;
                color: var(--vvs-primary-color);
                transition: transform var(--vvs-animation-speed) ease-in-out;
            }
            .vvs-faq-icon svg {
                width: 100%;
                height: 100%;
            }
            .vvs-faq-item.vvs-active .vvs-faq-icon {
                transform: rotate(45deg);
            }
            .vvs-faq-answer {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s ease-in-out;
            }
            .vvs-faq-item.vvs-active .vvs-faq-answer {
                max-height: 200px; /* Safe max-height for content */
            }
            .vvs-faq-answer-content {
                padding: 0 1.5rem 1.5rem;
            }
            .vvs-faq-answer-content p {
                margin: 0;
                padding: 0;
                font-size: 1rem;
                color: var(--vvs-text-color);
            }
    
            /* Responsive adjustments */
            @media (max-width: 768px) {
                .vvs-hero-section, .vvs-case-study-card {
                    flex-direction: column;
                    text-align: center;
                }
                .vvs-advantages-section {
                     flex-direction: column-reverse; /* On mobile, image on top, text below */
                }
                .vvs-hero-content, .vvs-hero-image-wrapper {
                    padding-right: 0;
                }
                .vvs-hero-image-wrapper {
                    margin-top: 2rem;
                }
                .vvs-hero-content h1 {
                    font-size: 2.2rem;
                }
                .vvs-services-section {
                    flex-direction: column;
                }
                .vvs-services-nav {
                    flex: 100%;
                    position: sticky;
                    /* position: static; */
                    margin-bottom: 2rem;
                }
                .vvs-services-nav ul {
                    display: flex;
                    flex-wrap: wrap;
                }
                .vvs-platform-item {
                    flex-direction: column;
                    text-align: center;
                }
                .vvs-platform-item-text {
                    order: 2;
                }
                /* Optimization: Styles for mobile platform carousel images */
                .vvs-platform-item img {
                    order: 1;
                    width: 100%; /* Fill the container width */
                    max-width: 280px; /* Limit max width */
                    margin-bottom: 1.5rem; /* Add space between image and text */
                }
                .vvs-workflow-container::before {
                    display: none;
                }
                .vvs-workflow-step {
                    width: 100%;
                    padding-top: 0;
                    margin-bottom: 2rem;
                }
                .vvs-workflow-step-icon {
                    position: static;
                    transform: none;
                    margin: 0 auto 1rem;
                }
                /* Optimization: Layout for mobile case study section */
                .vvs-case-study-card {
                    align-items: center; /* Center-align content */
                }
                .vvs-case-study-image-container {
                    order: -1; /* Display image above text */
                    margin-bottom: 2rem; /* Add space between image and text */
                    width: 100%;
                    max-width: 300px;
                }
            }

            
      /* --- Workflow Section --- */
      #fvd-workflow {
        background-color: var(--fvd-background-color);
    }
    
    .fvd-workflow-container {
        max-width: var(--max-width);
        margin: auto;
    }
    
    .fvd-workflow-steps {
        display: flex;
        justify-content: space-between;
        position: relative;
        margin-bottom: 2rem;
        padding: 0 25px;
    }
    
    .fvd-workflow-steps::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50px;
        right: 50px;
        height: 2px;
        background: var(--vvs-border-color);
        transform: translateY(-50%);
        z-index: 1;
    }
    
    .fvd-workflow-step {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        flex-grow: 1;
    }
    
    .fvd-workflow-step:last-child {
        flex-grow: 0;
    }
    
    .fvd-workflow-step-arrow {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 50px;
    }
    
    .fvd-workflow-step-arrow svg {
        color: var(--vvs-border-color);
    }
    
    .fvd-workflow-step button {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid var(--vvs-border-color);
        background-color: var(--vvs-border-color);
        color: var(--vvs-text-secondary-color);
        font-size: 1.3rem;
        font-weight: 600;
        cursor: pointer;
        transition: all var(--vvs-animation-speed) ease;
        flex-shrink: 0;
    }
    
    .fvd-workflow-step button.fvd-active,
    .fvd-workflow-step button:hover {
        background-color: var(--vvs-primary-color);
        color: white;
        border-color: var(--vvs-primary-color);
        transform: scale(1.1);
    }
    
    .fvd-workflow-content {
        display: none;
        padding: 2rem;
        border: 1px solid var(--vvs-border-color);
        border-radius: 8px;
        background-color: var(--vvs-light-background-color);
    }
    
    .fvd-workflow-content.fvd-active {
        display: block;
    }
    
    .fvd-workflow-content h3 {
        color: var(--vvs-primary-color);
        margin-bottom: 1rem;
    }
    
    .fvd-workflow-content ul {
        list-style-type: disc;
        padding-left: 20px;
    }
    
    .fvd-workflow-content ul li {
        margin-bottom: 0.5rem;
    }
    
    .fvd-workflow-cta {
        text-align: center;
        margin-top: 3rem;
    }