@keyframes spin_words {
    0% {
      transform: translateY(-100%);
      opacity: 0;
    }
    10% {
      transform: translateY(0%);
      opacity: 1;
    }
    85% {
      transform: translateY(0%);
      opacity: 1;
    }
    90% {
      transform: translateY(0%);
      opacity: 0.5;
    }
    100% {
      transform: translateY(100%);
      opacity: 0;
    }
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

h1,h2,h3,h5,h6,p,span{
    color: var(--Text-Standard-Standard-High-Emphasis, rgba(204, 229, 255, 0.87));
}

.starfield-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.star {
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: twinkle 3s infinite ease-in-out;
}

.star:nth-child(1) { top: 10%; left: 8%; width: 1px; height: 1px; animation-delay: 0s; }
.star:nth-child(2) { top: 25%; left: 85%; width: 2px; height: 2px; animation-delay: 1s; }
.star:nth-child(3) { top: 40%; left: 15%; width: 1px; height: 1px; animation-delay: 2s; }
.star:nth-child(4) { top: 60%; left: 92%; width: 1px; height: 1px; animation-delay: 0.5s; }
.star:nth-child(5) { top: 15%; left: 45%; width: 2px; height: 2px; animation-delay: 1.5s; }
.star:nth-child(6) { top: 75%; left: 70%; width: 1px; height: 1px; animation-delay: 2.5s; }
.star:nth-child(7) { top: 30%; left: 30%; width: 1px; height: 1px; animation-delay: 0.8s; }
.star:nth-child(8) { top: 85%; left: 25%; width: 2px; height: 2px; animation-delay: 1.8s; }
.star:nth-child(9) { top: 55%; left: 55%; width: 1px; height: 1px; animation-delay: 0.3s; }
.star:nth-child(10) { top: 20%; left: 75%; width: 1px; height: 1px; animation-delay: 2.2s; }
.star:nth-child(11) { top: 70%; left: 10%; width: 2px; height: 2px; animation-delay: 1.2s; }
.star:nth-child(12) { top: 45%; left: 80%; width: 1px; height: 1px; animation-delay: 0.7s; }
.star:nth-child(13) { top: 90%; left: 60%; width: 1px; height: 1px; animation-delay: 1.7s; }
.star:nth-child(14) { top: 35%; left: 5%; width: 1px; height: 1px; animation-delay: 2.8s; }
.star:nth-child(15) { top: 65%; left: 40%; width: 2px; height: 2px; animation-delay: 0.2s; }

#prices.prices{
    position: relative;
    padding-top: 200px;
    .container {
        position: relative;
        z-index: 2;
    }

    @media (max-width: 1200px) {
        padding-top: 50px;
        .row {
            row-gap: 24px;
        }
    }

    .content {
        margin-bottom: 40px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        h1, h5 {
            color: var(--Text-Inverted-Inverted-High-Emphasis, rgba(204, 229, 255, 0.87));
        }

        h5 {
            text-align: justify;
            @media (max-width: 1200px) {
                text-align: center;
            }
        }

        h1 {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .pricing-rotating-words {
            overflow: hidden;
            color: white;
            min-width: 7em;
            @media (max-width: 1200px) {
                min-width: 6.5em!important;
            }
          }
          .pricing-rotating-words span {
            color: #FFF;
            text-align: center;
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: 48px;
            letter-spacing: 1px;
            display: block;
            height: 100%;
            animation: spin_words 2s infinite;
            @media (max-width: 1200px) {
                font-size: 8vw;
                line-height: 34px;
            }
          }
    }
    .card:hover {
        transform: translateY(-10px) scale(1.02);
    }

    .card {
        user-select: none;
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none;
        position: relative;
        height: 785px;
        border-radius: var(--Surfaces-Cards-Card-Radius, 8px);
        background: var(--Base-Palette-Blue-Blue_300, #002B57);

        animation: float 6s ease-in-out infinite;
        transition: all 0.3s ease;

        .card_header {
            background: var(--Base-Palette-Blue-Blue_200, #001C38);
            padding: 16px 24px;
            border-top-left-radius: var(--Surfaces-Cards-Card-Radius, 8px);
            border-top-right-radius: var(--Surfaces-Cards-Card-Radius, 8px);
            display: flex;
            align-items: baseline;
            justify-content: space-between;

            p {
                color: var(--Text-Standard-Standard-Medium-Emphasis, rgba(204, 229, 255, 0.60));
            }
        }

        .card_content {
            position: relative;
            z-index: 1;
            padding: 8px 24px;

            .card_content__top {
                padding-bottom: 12px;
                border-bottom: 1px solid var(--Base-Palette-Blue-Blue_500, #2A5580);
                display: flex;
                flex-direction: column;

                .card_content__top__inner {
                    display: flex;
                    align-items: center;

                    span {
                        color: var(--Base-Palette-Basics-Brand_Green, #00DD8D);
                    }

                    h4 {
                        color: var(--Text-Standard-Standard-High-Emphasis, rgba(204, 229, 255, 0.87));
                    }
                }
            }

            .card_content__body {
                padding-top: 12px;

                .features {
                    display: flex;
                    flex-direction: column;
                    gap: 16px;

                    .feature {
                        display: flex;
                        align-items: flex-start;
                        gap: 8px;
                    }
                }
            }
        }

        .card_bottom {
            img {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                border-bottom-left-radius: var(--Surfaces-Cards-Card-Radius, 8px);
                border-bottom-right-radius: var(--Surfaces-Cards-Card-Radius, 8px);
            }
        }
    }

    .groeispurt {
        border-radius: var(--Surfaces-Cards-Card-Radius, 8px);
        background: linear-gradient(180deg, var(--Base-Palette-Blue-Blue_300, #002B57) 75%, var(--Base-Palette-Blue-Blue_200, #001C38) 100%);
        padding: 16px 24px 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        height: 340px;

        @media (max-width: 1200px) {
            height: 445px;
        }

        p.body-bold{
            text-align: center!important;
            color: var(--Base-Palette-Basics-Brand_Green, #00DD8D);
        }

        p {
            text-align: justify;
        }
    }

    .benefits_james_wolk {
        position: absolute;
        bottom: -7vw;
        left: 0;
        z-index: 2;
        width: 100%;
    }
}

#benefits.prices{
    padding-top: 150px;
    padding-bottom: 32px;
    background-size: cover!important;
    background-position: center!important;
    background-repeat: no-repeat!important;
    position: relative;

    @media (max-width: 1200px) {
        padding-top: 50px;

        .col-12:nth-child(2) {
            margin-bottom: 24px;
        }

        .row{
            .col-12:nth-child(2) {
                margin-top: 24px;
            }
        }
    }

    .benefits_content {
        height: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;

        .intro {
            margin-bottom: 66px;

            @media (max-width: 1200px) {
                margin-bottom: 24px!important;
            }
        }
    }

    .blocks{
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .block {
        height: 100%;
        padding: 16px;
        border-radius: var(--Surfaces-Cards-Card-Radius, 8px);
        border: 1px solid #022950;;
        background: #05386B;
    }

    .container{
        position: relative;
        z-index: 2;
    }

    .glow {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }
}

#cta.prices{
    padding: 48px 0;
    .content{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 48px;

        @media (max-width: 1200px) {
            flex-direction: column;
            gap: 24px;

            h3 {
                text-align: center;
            }
        }

        a {
            border-radius: 8px;
            color: rgba(5, 56, 107, 0.87);
            background: var(--Brand-Green, #00DD8D);
            height: 40px;
            min-height: 40px;
            max-height: 40px;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
    }
}