/* =========================================================
   EXAM HERO
========================================================= */

.exam-hero {
    position: relative;

    min-height: 760px;

    padding:
        155px 0
        90px;

    overflow: hidden;

    background:
        linear-gradient(
            125deg,
            #ffffff 0%,
            var(--exam-soft-2) 48%,
            #ffffff 100%
        );
}


/* =========================================================
   BACKGROUND
========================================================= */

.exam-hero::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 650px;

    right: -150px;
    top: -170px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(var(--exam-primary-rgb), .17),
            rgba(var(--exam-primary-rgb), .05) 43%,
            transparent 70%
        );

    pointer-events: none;
}


.exam-hero::after {
    content: var(--exam-code);

    position: absolute;

    left: -40px;
    bottom: -65px;

    color: var(--exam-primary);

    opacity: .035;

    font-size:
        clamp(170px, 25vw, 390px);

    font-weight: var(--font-weight-black);

    line-height: .75;

    letter-spacing: -25px;

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   GRID
========================================================= */

.exam-hero-grid {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .82fr);

    gap: clamp(60px, 8vw, 120px);

    align-items: center;
}


/* =========================================================
   CONTENT
========================================================= */

.exam-breadcrumb {
    display: flex;

    align-items: center;

    gap: 9px;

    margin-bottom: 31px;

    color: #8a98aa;

    font-size: 9px;
    font-weight: 850;

    letter-spacing: 1.1px;
}


.exam-breadcrumb i {
    color: var(--exam-primary);

    font-size: 7px;
}


.exam-breadcrumb strong {
    color: var(--exam-primary);
}


.exam-hero h1 {
    max-width: 690px;

    margin: 0;

    color: var(--navy-dark);

    font-size:
        clamp(64px, 6.6vw, 100px);

    font-weight: var(--font-weight-black);

    line-height: .84;

    letter-spacing: -6.5px;
}


.exam-hero h1 span {
    display: block;

    color: var(--exam-primary);
}


.exam-hero-description {
    max-width: 540px;

    margin-top: 31px;

    color: #6b7b90;

    font-size: 15px;

    line-height: 1.8;
}


/* =========================================================
   CTA
========================================================= */

.exam-hero-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 35px;
}


.exam-primary-button,
.exam-secondary-button {
    min-height: 51px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 0 22px;

    border-radius: var(--radius-md);

    font-size: var(--text-sm);
    font-weight: var(--font-weight-extrabold);

    letter-spacing: .35px;

    transition:
        transform 250ms cubic-bezier(.2,.8,.2,1),
        box-shadow 250ms ease,
        background 250ms ease;
}


.exam-primary-button {
    background: var(--exam-primary);

    color: #ffffff;

    box-shadow:
        0 14px 35px
        rgba(var(--exam-primary-rgb), .22);
}


.exam-primary-button:hover {
    transform: translateY(-3px);

    box-shadow:
        0 20px 42px
        rgba(var(--exam-primary-rgb), .30);
}


.exam-secondary-button {
    border:
        1px solid rgba(16,45,86,.12);

    background:
        rgba(255,255,255,.70);

    color: var(--navy);
}


.exam-secondary-button:hover {
    transform: translateY(-3px);

    background: #ffffff;
}


/* =========================================================
   MINI INFO
========================================================= */

.exam-hero-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 45px;
}


.exam-meta-item {
    display: flex;

    align-items: center;

    gap: 10px;

    color: #7a899c;

    font-size: 10px;
    font-weight: 800;
}


.exam-meta-item i {
    width: 28px;
    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 9px;

    background: var(--exam-soft);

    color: var(--exam-primary);

    font-size: 10px;
}


/* =========================================================
   HERO VISUAL
========================================================= */

.exam-hero-visual {
    position: relative;

    min-height: 490px;

    display: flex;

    align-items: center;

    justify-content: center;
}


/* large circle */

.exam-visual-orbit {
    position: absolute;

    width: 430px;
    height: 430px;

    border:
        1px solid
        rgba(var(--exam-primary-rgb), .18);

    border-radius: 50%;

    animation:
        examOrbit 18s linear infinite;
}


.exam-visual-orbit::before {
    content: "";

    position: absolute;

    width: 13px;
    height: 13px;

    left: 51px;
    top: 60px;

    border-radius: 50%;

    background: var(--exam-primary);

    box-shadow:
        0 0 0 8px
        rgba(var(--exam-primary-rgb), .10);
}


.exam-visual-orbit::after {
    content: "";

    position: absolute;

    width: 7px;
    height: 7px;

    right: 36px;
    bottom: 110px;

    border-radius: 50%;

    background: var(--navy);
}


@keyframes examOrbit {

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   MAIN KPSS CARD
========================================================= */

.exam-visual-card {
    position: relative;

    z-index: 3;

    width: 335px;
    min-height: 405px;

    padding: 36px;

    overflow: hidden;

    border:
        1px solid
        rgba(255,255,255,.65);

    border-radius: 34px;

    background:
        linear-gradient(
            145deg,
            var(--exam-primary),
            var(--exam-secondary)
        );

    color: #ffffff;

    box-shadow:
        0 45px 90px
        rgba(var(--exam-primary-rgb), .25);

    transform:
        rotate(4deg);

    transition:
        transform 500ms
        cubic-bezier(.2,.8,.2,1);
}


.exam-hero-visual:hover
.exam-visual-card {
    transform:
        rotate(1deg)
        translateY(-8px);
}


.exam-card-top {
    display: flex;

    align-items: center;

    justify-content: space-between;
}


.exam-card-top span {
    font-size: 9px;

    font-weight: 900;

    letter-spacing: 1.8px;
}


.exam-card-top i {
    width: 37px;
    height: 37px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background:
        rgba(255,255,255,.15);

    font-size: 12px;
}


.exam-visual-card strong {
    display: block;

    margin-top: 78px;

    font-size: 91px;
    font-weight: 950;

    line-height: .8;

    letter-spacing: -8px;
}


.exam-visual-card h2 {
    margin-top: 18px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 850;

    letter-spacing: -1px;
}


.exam-visual-card p {
    max-width: 230px;

    margin-top: 12px;

    color:
        rgba(255,255,255,.72);

    font-size: 11px;

    line-height: 1.6;
}


/* Decorative card typography */

.exam-visual-card::before {
    content: "2027";

    position: absolute;

    right: -23px;
    bottom: -16px;

    color:
        rgba(255,255,255,.09);

    font-size: 93px;
    font-weight: 950;

    letter-spacing: -7px;
}


/* =========================================================
   FLOATING CARD
========================================================= */

.exam-floating-card {
    position: absolute;

    z-index: 5;

    right: 0;
    bottom: 45px;

    width: 170px;

    padding: 18px 20px;

    border:
        1px solid
        rgba(16,45,86,.08);

    border-radius: 20px;

    background:
        rgba(255,255,255,.88);

    backdrop-filter:
        blur(14px);

    box-shadow:
        0 20px 50px
        rgba(16,45,86,.12);

    animation:
        examFloat 4s
        ease-in-out infinite;
}


.exam-floating-card small {
    display: block;

    color: #94a0af;

    font-size: 8px;
    font-weight: 850;

    letter-spacing: 1px;
}


.exam-floating-card strong {
    display: block;

    margin-top: 7px;

    color: var(--navy);

    font-size: 15px;
    font-weight: 900;
}


.exam-floating-card span {
    display: block;

    margin-top: 5px;

    color: var(--exam-primary);

    font-size: 9px;
    font-weight: 850;
}


@keyframes examFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

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

}


/* =========================================================
   SCROLL INDICATOR
========================================================= */

.exam-scroll {
    position: absolute;

    z-index: 5;

    left: 50%;
    bottom: 24px;

    display: flex;

    align-items: center;

    gap: 9px;

    color: #98a4b3;

    font-size: 8px;
    font-weight: 900;

    letter-spacing: 1.4px;

    transform:
        translateX(-50%);
}


.exam-scroll::before {
    content: "";

    width: 28px;
    height: 1px;

    background: var(--exam-primary);
}

.exam-primary-button:focus-visible,
.exam-secondary-button:focus-visible {
    outline-color: var(--exam-primary);
}