/* Profile CSS */
.hero {
    margin-top: 30px;
    height: calc(100vh - 140px);
    min-height: fit-content;
}

.hero-profile,
.hero-content {
    display: block;
    height: 100%;
    flex-shrink: 1;
}

.hero-profile img {
    width: 100%;
    max-width: 450px;
    border-radius: 10px;
    border-end-end-radius: 0;
    border-end-start-radius: 0;
    object-fit: fill;
    mask: linear-gradient(to bottom, black 50%, transparent 100%);
}

.hero-content {
    max-width: 650px;
    flex-shrink: 2;
    user-select: none;
}

.hero-content h1 {
    font-size: var(--font-5xl);
    color: var(--text-primary);
    line-height: 1.1;
}

.hero-content h1 span {
    font-size: var(--font-3xl);
    display: block;
    color: var(--accent-yellow);
}

.designation {
    font-size: var(--font-md);
    font-weight: 400;
    color: var(--text-muted);
    width: fit-content;
    white-space: nowrap;
}

.headline {
    font-size: var(--font-base);
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    padding: 40px 0;
    text-align: justify;
}


.ctahero {
    gap: 20px 30px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
    margin-bottom: 30px;
}

.heroctabtn {
    background-color: var(--ui-secondary);
    border: var(--border-black);
    width: fit-content;
    &:hover {
        background-color: var(--primary-bg);
        color: var(--text-secondary);
        scale: unset;
    }
}

.heroctabtn:nth-child(even) {
    background-color: var(--primary-bg);
    color: var(--text-primary);

    &:hover {
        background-color: var(--ui-primary);
        color: var(--white);
    }
}

.ctalinks {
    gap: 20px;
    justify-content: end;
}

@media screen and (max-width: 650px) {
    .hero-container{
        flex-direction: column;
        align-items: center;
    }
}