@media print {    
    .no-print{
        display: none !important;
    }

    html {
        font-size: 12px;
    }

    canvas#roiChart {
        max-width: 100%;
        max-height: 400px; /* Adjust as needed */
        display: block;
    }

}

html {
    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 1rem;
}

#hero-section img {
    max-width: 450px;
}

.ttc-gradient {
    background: #61A6FF;
    background: linear-gradient(to right, #61A6FF 0%, #DB88C1 50%, #FFC328 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-ttc-gradient {
    background: #61A6FF;
    background: linear-gradient(to right, #61A6FF 0%, #DB88C1 50%, #FFC328 100%);
}

.bg-ttc-gradient-animated {
    animation: ttc-color-rotation 10s infinite;
    transition: 200ms;
}

.retro-wave {
    background-image: url(./assets/retro_wave.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    background-blend-mode: hard-light;
}

@keyframes ttc-color-rotation {
    0% {
        background-color: #61A6FF; /* Light blue */
    }
    33% {
        background-color: #DB88C1; /* Pink */
    }
    66% {
        background-color: #FFC328; /* Yellow */
    }
    100% {
        background-color: #61A6FF; /* Back to light blue */
    }
}

.element {
    animation: ttc-color-rotation 5s infinite;
}


.typing-container .ttc-gradient {
    border-right: 2px solid;
    animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: rgb(255, 255, 255); }
}

.faq-open {
    display: none;
}

.active .faq-open {
    display: block;
}

.active .faq-closed {
    display: none;
}