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

.hero {

    padding-top: 140px;
    position: relative;

}

.hero::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: 0;

    transform: translateX(-50%);

    width: min(900px, 80%);

    height: 1px;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(56, 189, 248, .45),

            transparent);

}

.hero-container {

    display: flex;

    flex-direction: column;

    gap: 48px;

}

.hero-content {

    display: flex;

    flex-direction: column;

    gap: 24px;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    margin-bottom: 24px;

    border: 1px solid rgba(56, 189, 248, .15);

    border-radius: 999px;

    background: rgba(56, 189, 248, .06);

}


.hero-badge span {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--secondary);

}


.hero h1 {

    font-size: clamp(2.4rem, 6vw, 4.5rem);

    line-height: 1.1;

    max-width: 720px;

}

.hero h1 span {

    color: var(--secondary);

}

.hero h1 strong {

    color: var(--secondary);

}

.hero p {

    color: var(--text-light);

    font-size: 1rem;

}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 18px;

    margin-top: 36px;

}

.btn-outline {

    display: inline-flex;

    justify-content: center;

    align-items: center;

    padding: 16px 32px;

    border: 2px solid var(--border);

    border-radius: 999px;

    color: var(--white);

    transition: .3s;

}

.btn-outline:hover {

    border-color: var(--secondary);

    background: rgba(56, 189, 248, .05);

}

.hero-info {

    display: flex;

    flex-wrap: wrap;

    gap: 24px;

    margin-top: 32px;

    color: var(--text-light);

    font-size: .95rem;

}

.hero-item {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: var(--radius);

    padding: 18px;

    text-align: center;

}

.hero-item strong {

    display: block;

    color: var(--white);

    font-size: 1.2rem;

    margin-bottom: 4px;

}

.hero-item span {

    color: var(--text-light);

    font-size: .9rem;

}

.hero-image img{

    display:block;

    width:100%;

    max-width:320px;

    height:auto;

    object-fit:contain;

}


@keyframes rotateCompass{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}