/*
    GLORY BE TO GOD,
    TRALIQAI - SERVICE PAGE,
    BY ISRAEL MAFABI EMMANUEL
*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
    --ta-cool-black: rgb(22, 22, 23);
    --ta-cool-gray: rgb(53, 53, 53);
    --ta-cool-gray-: rgb(104, 104, 104);
    --ta-cool-white: white;

    --ta-cool-black-tr: rgba(22, 22, 23, 0.5);
    --ta-cool-gray-tr: rgba(53, 53, 53, 0.5);
    --ta-cool-gray-tr-: rgba(53, 53, 53, 0.2);
    --ta-cool-gray--tr: rgba(104, 104, 104, 0.5);
    --ta-cool-gray--tr-: rgba(104, 104, 104, 0.2);
    --ta-cool-white-tr: rgba(255, 255, 255, 0.5);

    --ta-cool-purple: rgba(253, 174, 253, 0.985);
    --ta-cool-green: rgb(114, 255, 14);
    --ta-cool-red: rgb(255, 78, 14);

    --ta-default-font: "Poppins", sans-serif;
    --ta-monospace-font: "Courier Prime", monospace;
}

* {
    font-family: var(--ta-default-font);

    box-sizing: border-box;
    margin: 0;
    padding: 0;

    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -ms-user-select: none;
    -moz-user-select: none;

    transition: 500ms;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--ta-cool-white);
    border-radius: 4px;
}

body {
    background: var(--ta-cool-black);
    color: var(--ta-cool-white);

    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;

    width: 100vw;
    min-width: 250px !important;
    height: fit-content;
    min-height: 600px;

    &::before {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        content: '';
        position: absolute;

        pointer-events: none;
        z-index: -1;
        /* Behind the content */

        top: 0;
        left: 0;

        width: 100%;
        height: 100%;
    }

    .ta-navbar {
        background: var(--ta-cool-black-tr);
        border-bottom: 1px solid var(--ta-cool-gray-tr);

        color: var(--ta-cool-white);

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 14px;

        overflow-x: visible !important;

        position: fixed;
        top: 0;
        z-index: 950;

        width: 100%;
        min-height: 70px;
        max-height: 70px;

        &::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            backdrop-filter: blur(7px);
            z-index: -1;
        }

        .ta-logo {
            font-size: 0.99rem;

            display: flex;
            align-items: center;
            justify-content: center;

            width: 72px;
            min-width: 72px;
            height: fit-content;
            min-height: 45px;

            img {
                height: 30px;
            }
        }

        .ta-navbar-list {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 28px;

            width: fit-content;
            height: fit-content;
            min-height: 45px;

            li {
                display: flex;
                align-items: center;
                justify-content: center;

                width: fit-content;
                height: fit-content;
                min-height: 45px;

                a {
                    font-size: 0.85rem;
                    font-weight: 200;
                    text-decoration: none;
                    color: var(--ta-cool-white-tr);

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    transition: color 200ms linear;

                    cursor: pointer;

                    width: fit-content;
                    height: fit-content;
                    min-height: 45px;
                }

                a:hover {
                    color: var(--ta-cool-white);
                }
            }
        }

        .ta-pseudo-element {
            /* -- will dissappear on smaller screens */
            width: 72px;
            height: 0;
        }

        .ta-hamburger {
            display: none;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 4px;

            cursor: pointer;

            position: relative;
            z-index: 1001;

            transition: 200ms;

            width: fit-content;
            height: fit-content;
            min-height: 45px;

            .ta-line {
                background: var(--ta-cool-white);

                width: 21px;
                height: 1px;
            }
        }
    }

    .ta-hero-section {
        background: radial-gradient(circle,
                /* Ensures a circular gradient */
                transparent 0%,
                /* Fully transparent at the very center */
                transparent 10%,
                /* Remains fully transparent up to 30% of the radius */
                var(--ta-cool-black) 70%,
                /* Transitions from transparent to solid black between 30% and 80% */
                var(--ta-cool-black) 100%
                /* Remains solid black from 80% to the edge */
            );

        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: 100vh;
        min-height: 500px;

        .ta-hero-info {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            width: 500px;
            height: 300px;
            min-height: 300px;

            @media (max-width: 768px) {
                width: 100%;
                padding: 0 16px;
            }

            .ta-hero-title {
                font-size: 4.5rem;

                @media (max-width: 250px) {
                    font-size: 3.5rem;
                }
            }

            .ta-hero-subtitle {
                font-size: 0.9rem;
                font-weight: 200;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                @media (max-width: 350px) {
                    font-size: 0.8rem;
                }
            }

            .ta-hero-subtitle-explainer {
                text-align: center;

                font-size: 0.9rem;
                font-weight: 200;

                @media (max-width: 350px) {
                    font-size: 0.8rem;
                }
            }
        }

        .ta-hero-buttons {
            display: flex;
            align-items: center;
            justify-content: center;

            gap: 56px;

            width: 500px;
            min-height: 100px;

            @media (max-width: 390px) {
                flex-direction: column !important;
            }

            .ta-button {
                background: transparent;
                border: 1px solid transparent;

                color: white;

                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;

                cursor: pointer;

                transition: background 200ms linear;

                width: 150px;
                min-width: 100px;
                height: 40px;
                min-height: 40px;

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    width: 100%;
                    height: fit-content;

                    .left {
                        border-top: 1px solid var(--ta-cool-white-tr);
                        border-left: 1px solid var(--ta-cool-white-tr);

                        height: 8px;
                        width: 8px;
                    }

                    .right {
                        border-top: 1px solid var(--ta-cool-white-tr);
                        border-right: 1px solid var(--ta-cool-white-tr);

                        width: 8px;
                        height: 8px;
                    }
                }

                .text {
                    font-size: 0.85rem;
                    font-weight: 200;
                }

                .bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    width: 100%;
                    height: fit-content;

                    .left {
                        border-bottom: 1px solid var(--ta-cool-white-tr);
                        border-left: 1px solid var(--ta-cool-white-tr);

                        height: 8px;
                        width: 8px;
                    }

                    .right {
                        border-bottom: 1px solid var(--ta-cool-white-tr);
                        border-right: 1px solid var(--ta-cool-white-tr);

                        width: 8px;
                        height: 8px;
                    }
                }
            }

            .ta-button:hover {
                background: var(--ta-cool-gray--tr-);

                .top {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    width: 100%;
                    height: fit-content;

                    .left {
                        border-top: 1px solid var(--ta-cool-white);
                        border-left: 1px solid var(--ta-cool-white);

                        height: 8px;
                        width: 8px;
                    }

                    .right {
                        border-top: 1px solid var(--ta-cool-white);
                        border-right: 1px solid var(--ta-cool-white);

                        width: 8px;
                        height: 8px;
                    }
                }

                .bottom {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    width: 100%;
                    height: fit-content;

                    .left {
                        border-bottom: 1px solid var(--ta-cool-white);
                        border-left: 1px solid var(--ta-cool-white);

                        height: 8px;
                        width: 8px;
                    }

                    .right {
                        border-bottom: 1px solid var(--ta-cool-white);
                        border-right: 1px solid var(--ta-cool-white);

                        width: 8px;
                        height: 8px;
                    }
                }
            }
        }

        .ta-hero-content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: inherit;
            height: 100%;
            min-height: 500px;


        }
    }

    .ta-about-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 0 14px;
        margin: 14px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .ta-backdrop {
            background: radial-gradient(circle,
                    /* Ensures a circular gradient */
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;
            }

            .info {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;

                    .graphic {
                        order: -1;

                        justify-content: flex-start !important;
                    }
                }

                .about {
                    font-size: 0.9rem;
                    font-weight: 200;

                    /* white-space: nowrap; */
                    overflow: hidden;
                    text-overflow: ellipsis;

                    width: 100%;
                    height: 100%;
                }

                .graphic {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 100%;

                    .ta-section-graphic {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        z-index: 1;

                        height: fit-content;
                        width: fit-content;

                        img {
                            height: 160px;
                        }
                    }
                }

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .ta-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .ta-how-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;
        margin: 14px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .ta-backdrop {
            background: radial-gradient(circle,
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;

                span {
                    font-size: 3rem;
                }
            }

            .cards {
                display: grid;
                grid-template-columns: 1fr;
                /* gap: 14px; */

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .ta-card-separator {
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    width: 100%;
                    height: 56px;

                    .separator {
                        background: var(--ta-cool-gray-tr);

                        width: 1px;
                        height: 56px;
                    }
                }

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    animation-name: pulse-shadow;
                    animation-duration: 2.1s;
                    animation-iteration-count: infinite;


                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .ta-section-card:nth-child(1) {
                    animation-delay: 0s;
                }

                .ta-section-card:nth-child(3) {
                    animation-delay: 700ms;
                }

                .ta-section-card:nth-child(5) {
                    animation-delay: 1400ms;
                }
            }
        }
    }

    .ta-services-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;
        margin: 14px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .ta-backdrop {
            background: radial-gradient(circle,
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;
            }

            .cards {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 21px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .ta-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .ta-why-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;
        margin: 14px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        .ta-backdrop {
            background: radial-gradient(circle,
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;
            }

            .cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 14px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .ta-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .ta-faq-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;
        margin: 14px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        /* @media (max-width: 490px) {
            flex-direction: column-reverse !important;
        } */

        .ta-backdrop {
            background: radial-gradient(circle,
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;
            }

            .cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 14px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                }

                .ta-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .ta-contact-section {
        background: var(--ta-cool-black);
        background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 14px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 28px;

        padding: 84px 14px 84px 14px;
        margin: 14px 0 35px 0;

        position: relative;
        overflow: hidden;

        width: 100vw;
        height: fit-content;

        /* @media (max-width: 490px) {
            flex-direction: column-reverse !important;
        } */

        .ta-backdrop {
            background: radial-gradient(circle,
                    transparent 0%,
                    transparent 10%,
                    var(--ta-cool-black) 50%,
                    var(--ta-cool-black) 100%);

            position: absolute;
            top: 0;
            left: 0;

            z-index: 0;

            width: 100%;
            height: 100%;
        }

        .ta-section-info {
            display: flex;
            align-items: flex-start;
            justify-content: center;
            flex-direction: column;

            position: relative;
            z-index: 1;

            width: 900px;
            max-width: 900px;
            height: 100%;

            .title {
                font-size: 1.5rem;
            }

            .cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 14px;

                padding: 7px 14px;

                height: fit-content;
                min-height: 185px;
                /* max-height: 300px; */

                @media (max-width: 768px) {
                    grid-template-columns: 1fr;
                    padding: 7px 0;
                }

                /* .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 4px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }
                } */

                .ta-section-card {
                    background: var(--ta-cool-black-tr);
                    backdrop-filter: blur(1px);
                    border: 1px solid var(--ta-cool-gray-tr);

                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    flex-direction: column;

                    padding: 14px;

                    width: 100%;
                    height: 100%;

                    .card-title {
                        font-size: 1rem;
                    }

                    .info {
                        font-size: 0.9rem;
                        font-weight: 200;

                        overflow: hidden;
                        text-overflow: ellipsis;

                        /* max-width: 600px; */
                    }

                    .link {
                        color: var(--ta-cool-white-tr);

                        font-size: 0.85rem;
                        font-weight: 200;
                        text-decoration: none;

                        display: flex;
                        align-items: center;
                        justify-content: center;

                        cursor: pointer;

                        margin-top: 8px;
                    }

                    .link:hover {
                        color: var(--ta-cool-white);
                        text-decoration: underline;
                    }

                }

                .ta-section-card:hover {
                    /* background: var(--ta-cool-gray--tr-); */
                    background: rgba(40, 40, 42, 0.2);
                    box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
                }
            }
        }
    }

    .ta-footer {
        background: var(--ta-cool-black-tr);
        border-top: 1px solid var(--ta-cool-gray-tr);

        color: var(--ta-cool-white);


        display: flex;
        align-items: center;
        justify-content: center;

        padding: 0 14px;

        overflow-x: visible !important;

        width: 100%;
        min-height: 70px;
        max-height: 70px;

        @media (max-width: 900px) {
            flex-direction: column;
        }

        span {
            font-size: 0.9rem;
            font-weight: 200;
        }

        .ta-logo {
            font-size: 0.9rem;
            font-weight: normal;

            display: flex;
            align-items: center;
            justify-content: center;

            width: 72px;
            min-width: 72px;
            height: fit-content;

            span {
                font-size: 0.9rem;
                font-weight: bold;
            }

            img {
                height: 30px;
            }
        }
    }
}

.ta-separator {
    background: radial-gradient(ellipse 100% 1px at center,
            var(--ta-cool-gray-tr) 0%,
            transparent 100%);

    /* width: 100%; */
    min-width: 150px;
    max-width: 700px;
    height: 1px;
}

.ta-dialog-backdrop {
    background: var(--ta-cool-black-tr);
    backdrop-filter: blur(7px);

    display: none;
    align-items: center;
    justify-content: center;

    opacity: 0;

    padding: 28px;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    overflow-y: auto;
    width: 100%;
    min-height: 100%;

    .ta-dialog-container-interest-form {
        background: var(--ta-cool-black-tr);
        backdrop-filter: blur(7px);
        border: 1px solid var(--ta-cool-gray-tr);

        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);

        padding: 0 28px 28px 28px;

        width: 400px;
        max-width: 800px;
        height: fit-content;

    
        min-height: auto;
        max-height: none;
        margin: auto;

        @media (max-width: 900px) {
            width: 100%;
            height: auto;
        }

        .ta-dialog-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;

            width: 100%;
            height: 50px;
            min-height: 50px;

            .title {
                font-size: 1rem;
            }

            .ta-close-btn {
                background: transparent;
                border: 1px solid transparent;

                display: flex;
                align-items: center;
                justify-content: center;

                cursor: pointer;

                width: 28px;
                height: 28px;

                .line {
                    background: var(--ta-cool-white-tr);

                    transition: 200ms;

                    width: 14px;
                    height: 1px;
                }
            }

            .ta-close-btn:hover {
                .line {
                    background: var(--ta-cool-white);
                    box-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
                }
            }
        }

        .ta-interest-form {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 21px;

            width: 100%;
            max-width: 600px;
            height: fit-content;

            .ta-form-group {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                gap: 4px;

                width: 100%;
                height: fit-content;
                min-height: 60px;

                label {
                    font-size: 0.85rem;
                    font-weight: 200;
                }

                .ta-form-input {
                    background: transparent;
                    border: 1px solid var(--ta-cool-gray--tr-);

                    color: var(--ta-cool-white);
                    font-weight: 200;

                    padding: 0 14px 0 14px;

                    width: 100%;
                    height: 35px;
                }

                .ta-form-input.ta-form-textarea {
                    font-weight: 200;

                    padding: 14px;

                    width: 100%;
                    min-width: 100%;
                    max-width: 100%;
                    min-height: 100px;
                    max-height: 120px;
                }
            }

            .ta-form-buttons {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                width: 100%;
                height: fit-content;
            }
        }
    }

    .ta-dialog-enroll {
        background: var(--ta-cool-black-tr);
        backdrop-filter: blur(7px);
        border: 1px solid var(--ta-cool-gray-tr);

        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);

        padding: 0 28px 28px 28px;

        width: 400px;
        max-width: 800px;
        height: fit-content;

    
        min-height: auto;
        max-height: none;
        margin: auto;

        @media (max-width: 900px) {
            width: 100%;
            height: auto;
        }

        .ta-dialog-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;

            width: 100%;
            height: 50px;
            min-height: 50px;

            .title {
                font-size: 1rem;
            }

            .ta-close-btn {
                background: transparent;
                border: 1px solid transparent;

                display: flex;
                align-items: center;
                justify-content: center;

                cursor: pointer;

                width: 28px;
                height: 28px;

                .line {
                    background: var(--ta-cool-white-tr);

                    transition: 200ms;

                    width: 14px;
                    height: 1px;
                }
            }

            .ta-close-btn:hover {
                .line {
                    background: var(--ta-cool-white);
                    box-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
                }
            }
        }

        .ta-dialog-info {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 21px;

            width: 100%;
            max-width: 600px;
            height: fit-content;

            .ta-form-group {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                gap: 4px;

                width: 100%;
                height: fit-content;
                min-height: 60px;

                label {
                    font-size: 0.85rem;
                    font-weight: 200;
                }

                .ta-form-input {
                    background: transparent;
                    border: 1px solid var(--ta-cool-gray--tr-);

                    color: var(--ta-cool-white);
                    font-weight: 200;

                    padding: 0 14px 0 14px;

                    width: 100%;
                    height: 35px;
                }

                .ta-form-input.ta-form-textarea {
                    font-weight: 200;

                    padding: 14px;

                    width: 100%;
                    min-width: 100%;
                    max-width: 100%;
                    min-height: 100px;
                    max-height: 120px;
                }
            }

            .title {
                font-size: 0.95rem;
                font-weight: 200;

                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                width: 100%;
                height: fit-content;
                min-height: 30px;
            }

            .info {
                font-size: 0.85rem;
                font-weight: 200;
            }

            .ta-cta {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                width: 100%;
                height: fit-content;
            }
        }
    }

    .ta-dialog-ai-fleet {
        background: var(--ta-cool-black-tr);
        backdrop-filter: blur(7px);
        border: 1px solid var(--ta-cool-gray-tr);

        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);

        padding: 0 28px 28px 28px;

        width: 400px;
        max-width: 800px;
        height: fit-content;

    
        min-height: auto;
        max-height: none;
        margin: auto;

        @media (max-width: 900px) {
            width: 100%;
            height: auto;
        }

        .ta-dialog-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;

            width: 100%;
            height: 50px;
            min-height: 50px;

            .title {
                font-size: 1rem;
            }

            .ta-close-btn {
                background: transparent;
                border: 1px solid transparent;

                display: flex;
                align-items: center;
                justify-content: center;

                cursor: pointer;

                width: 28px;
                height: 28px;

                .line {
                    background: var(--ta-cool-white-tr);

                    transition: 200ms;

                    width: 14px;
                    height: 1px;
                }
            }

            .ta-close-btn:hover {
                .line {
                    background: var(--ta-cool-white);
                    box-shadow: 0 1px 10px rgba(255, 255, 255, 0.8);
                }
            }
        }

        .ta-dialog-info {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            gap: 21px;

            width: 100%;
            max-width: 600px;
            height: fit-content;

            .ta-form-group {
                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                gap: 4px;

                width: 100%;
                height: fit-content;
                min-height: 60px;

                label {
                    font-size: 0.85rem;
                    font-weight: 200;
                }

                .ta-form-input {
                    background: transparent;
                    border: 1px solid var(--ta-cool-gray--tr-);

                    color: var(--ta-cool-white);
                    font-weight: 200;

                    padding: 0 14px 0 14px;

                    width: 100%;
                    height: 35px;
                }

                .ta-form-input.ta-form-textarea {
                    font-weight: 200;

                    padding: 14px;

                    width: 100%;
                    min-width: 100%;
                    max-width: 100%;
                    min-height: 100px;
                    max-height: 120px;
                }
            }

            .title {
                font-size: 0.95rem;
                font-weight: 200;

                display: flex;
                align-items: flex-start;
                justify-content: center;
                flex-direction: column;

                width: 100%;
                height: fit-content;
                min-height: 30px;
            }

            .info {
                font-size: 0.85rem;
                font-weight: 200;
            }

            .ta-cta {
                display: flex;
                align-items: center;
                justify-content: flex-start;

                width: 100%;
                height: fit-content;
            }
        }
    }
}

.ta-button {
    background: transparent;
    border: 1px solid transparent;

    color: white;

    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;

    cursor: pointer;

    transition: background 200ms linear;

    width: 150px;
    min-width: 100px;
    height: 40px;
    min-height: 40px;

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        height: fit-content;

        .left {
            border-top: 1px solid var(--ta-cool-white-tr);
            border-left: 1px solid var(--ta-cool-white-tr);

            height: 8px;
            width: 8px;
        }

        .right {
            border-top: 1px solid var(--ta-cool-white-tr);
            border-right: 1px solid var(--ta-cool-white-tr);

            width: 8px;
            height: 8px;
        }
    }

    .text {
        font-size: 0.85rem;
        font-weight: 200;
    }

    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        height: fit-content;

        .left {
            border-bottom: 1px solid var(--ta-cool-white-tr);
            border-left: 1px solid var(--ta-cool-white-tr);

            height: 8px;
            width: 8px;
        }

        .right {
            border-bottom: 1px solid var(--ta-cool-white-tr);
            border-right: 1px solid var(--ta-cool-white-tr);

            width: 8px;
            height: 8px;
        }
    }
}

.ta-button:hover {
    background: var(--ta-cool-gray--tr-);

    .top {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        height: fit-content;

        .left {
            border-top: 1px solid var(--ta-cool-white);
            border-left: 1px solid var(--ta-cool-white);

            height: 8px;
            width: 8px;
        }

        .right {
            border-top: 1px solid var(--ta-cool-white);
            border-right: 1px solid var(--ta-cool-white);

            width: 8px;
            height: 8px;
        }
    }

    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;
        height: fit-content;

        .left {
            border-bottom: 1px solid var(--ta-cool-white);
            border-left: 1px solid var(--ta-cool-white);

            height: 8px;
            width: 8px;
        }

        .right {
            border-bottom: 1px solid var(--ta-cool-white);
            border-right: 1px solid var(--ta-cool-white);

            width: 8px;
            height: 8px;
        }
    }
}

.ta-hamburger.is-active .ta-line:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
}

.ta-hamburger.is-active .ta-line:nth-child(2) {
    opacity: 0;
}

.ta-hamburger.is-active .ta-line:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
}

.backdrop-open {
    display: flex;
    animation: backdrop-fade-in 200ms ease-in-out forwards;
}

.backdrop-close {
    animation-name: dialog-fade-out;
    animation-duration: 500ms;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

.open {
    display: flex !important;
}

.close {
    display: none !important;
}

.body-no-scroll {
    overflow: hidden !important;
}

.sending {
    color: var(--ta-cool-white);
    animation: breathe 2s infinite ease-in-out;
}

.success {
    color: var(--ta-cool-green);
}

.error {
    color: var(--ta-cool-red);
}

@keyframes breathe {
    0% {
        color: var(--ta-cool-white);
    }
    50% {
        color: var(--ta-cool-gray);
    }
    100% {
        color: var(--ta-cool-white);
    }
}

@keyframes backdrop-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes backdrop-fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes bounce-in {
    0% {
        transform: scale(0.8);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

@media (max-width: 900px) {
    .ta-navbar-list {
        background: var(--ta-cool-black-tr) !important;
        backdrop-filter: blur(7px) !important;
        border: 1px solid var(--ta-cool-gray-tr);

        display: flex !important;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        position: fixed;
        top: 91px;
        right: 21px;
        z-index: 900 !important;

        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
        transform: translateX(150%);

        padding: 14px;

        min-width: 180px;
        height: fit-content;
    }

    .ta-navbar-list.open {
        display: flex !important;
        transform: translate(0);
    }

    .ta-hamburger {
        display: flex !important;
    }

    .ta-pseudo-element {
        display: none !important;
    }

    .ta-hero-info {
        padding: 0 28px !important;
        width: 100%;
    }
}

@keyframes pulse-shadow {

    0%,
    33% {
        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.08);
    }

    16.5% {
        box-shadow: 0 4px 16px rgba(123, 123, 123, 0.1);
    }
}