.astronaut-wrapper {
    position: relative;
    overflow: hidden;
}

#astronaut {
    width: 100%;
    animation: astronaut-float 5s ease-in-out infinite;

    -webkit-mask-image:
        radial-gradient(
            ellipse at 65% 40%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.8) 65%,
            rgba(0, 0, 0, 0) 100%
        );

    mask-image:
        radial-gradient(
            ellipse at 65% 40%,
            rgba(0, 0, 0, 1) 45%,
            rgba(0, 0, 0, 0.8) 65%,
            rgba(0, 0, 0, 0) 100%
        );
}


@keyframes astronaut-float {

    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }

}

#hero-word {
    display: inline-block;
    min-width: 11rem;
    transition:
        opacity 300ms ease,
        transform 300ms ease;
}

@media (max-width: 768px) {

    #astronaut {
        max-width: 100%;
    }

    #hero-word {
        min-width: 0;
    }

}

.why-card {
    padding: 1.75rem;
    border: 1px solid rgb(254 243 199);
    border-radius: 1rem;
    background: rgba(255, 251, 235, 0.7);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.why-card:hover {
    transform: translateY(-6px);

    border-color: rgb(251 191 36);

    box-shadow:
        0 15px 40px rgba(251, 191, 36, 0.15);
}

.why-icon {
    width: 48px;
    height: 48px;

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

    margin-bottom: 1rem;

    border-radius: 12px;

    background: rgb(251 191 36);

    color: rgb(120 53 15);
}

.why-icon svg {
    width: 20px;
    height: 20px;
}

.why-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.why-text {
    margin-top: 0.5rem;

    font-size: 0.95rem;
    line-height: 1.6;

    color: rgb(71 85 105);
}

.cert-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;

    padding: 0.4rem 0.9rem;

    border-radius: 9999px;

    background: rgb(255 251 235);

    color: rgb(217 119 6);

    font-size: 0.7rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cert-card {
    padding: 1.5rem;

    border: 1px solid rgb(254 243 199);

    border-radius: 1rem;

    background: rgba(255, 251, 235, 0.4);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 15px 40px rgba(251, 191, 36, 0.15);
}

.cert-title {
    margin-top: 0.25rem;

    font-size: 0.95rem;
    font-weight: 700;
}

.cert-text {
    margin-top: 0.5rem;

    color: rgb(71 85 105);

    font-size: 0.85rem;

    line-height: 1.6;
}

.cert-stack {
    margin-top: 1rem;

    color: rgb(180 83 9);

    font-size: 0.75rem;

    font-family: monospace;

    line-height: 1.5;
}

.course-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: white;

    border: 1px solid rgb(254 243 199);

    border-radius: 1rem;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.course-card:hover {
    transform: translateY(-8px);

    box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.1);
}

.course-image-wrapper {
    aspect-ratio: 16 / 10;

    overflow: hidden;

    background: rgb(255 251 235);
}

.course-image {
    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.course-card:hover .course-image {
    transform: scale(1.08);
}

.course-content {
    display: flex;

    flex-direction: column;

    flex: 1;

    padding: 1.25rem;
}

.course-meta {
    display: flex;

    align-items: center;

    gap: 0.75rem;

    margin-bottom: 0.75rem;
}

.course-level {
    padding: 0.25rem 0.6rem;

    border-radius: 9999px;

    background: rgb(254 243 199);

    color: rgb(180 83 9);

    font-size: 0.7rem;

    font-weight: 700;
}

.course-audience {
    color: rgb(100 116 139);

    font-size: 0.75rem;
}

.course-title {
    font-size: 1.1rem;

    font-weight: 700;

    color: rgb(15 23 42);
}

.course-subtitle {
    margin-top: 0.35rem;

    color: rgb(217 119 6);

    font-size: 0.9rem;

    font-weight: 600;
}

.course-description {
    flex: 1;

    margin-top: 0.75rem;

    color: rgb(71 85 105);

    font-size: 0.85rem;

    line-height: 1.6;
}

.course-footer {
    margin-top: 1.25rem;
}

.course-details {
    display: flex;

    gap: 1rem;

    color: rgb(100 116 139);

    font-size: 0.75rem;
}

.course-link {
    margin-top: 1rem;

    color: rgb(217 119 6);

    font-size: 0.9rem;

    font-weight: 700;

    transition: transform 0.3s ease;
}

.course-card:hover .course-link {
    transform: translateX(4px);
}

.techsphere-blue {
    color: rgb(29, 79, 217);
}

.techsphere-blue:hover {
    opacity: 0.8;
}

.track-card {
    padding: 1.75rem;

    border: 1px solid rgb(254 243 199);

    border-radius: 1rem;

    background: rgba(255, 251, 235, 0.7);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}

.track-card:hover {
    transform: translateY(-6px);

    border-color: rgb(251 191 36);

    box-shadow:
        0 15px 40px rgba(251, 191, 36, 0.15);
}

.track-icon {
    width: 48px;
    height: 48px;

    display: flex;

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

    border-radius: 12px;

    background: rgb(251 191 36);

    color: rgb(120 53 15);
}

.track-icon svg {
    width: 20px;
    height: 20px;
}

.track-title {
    font-size: 1.125rem;

    font-weight: 700;
}

.track-description {
    margin-top: 1rem;

    color: rgb(71 85 105);

    font-size: 0.95rem;

    line-height: 1.6;
}

.track-provider {
    display: inline-flex;

    align-items: center;

    padding: 0.4rem 0.9rem;

    border-radius: 9999px;

    background: rgb(255 251 235);

    color: rgb(217 119 6);

    font-size: 0.7rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.05em;
}