/* ===========================
    black Premium Link
=========================== */

.premium-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
}



.link-text {
    position: relative;
    display: inline-block;
    padding-bottom: 5px;

    /* Existing light underline */
    border-bottom: 1px solid #cbd0d6;
}

/* Animated dark underline */
.link-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;
    /*0px above gray line */

    width: 100%;
    height: 2px;

    background: #06070a;

    transform: scaleX(0);
    transform-origin: left center;

    transition: transform .4s ease;
}

.premium-link:hover .link-text::after {
    transform: scaleX(1);
}


.arrow-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Original Arrow */

.premium-arrow {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    color: #bebec8;

    transition: transform .4s ease;
}

/* Hover Arrow */

.premium-arrow-hover {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    color: #06070a;

    /* transform: translateX(-45%); */
    opacity: 0;

    transition:
        transform .4s ease,
        opacity .4s ease;
}

/* Hover Effects */

.premium-link:hover .premium-arrow {
    transform: scale(1.1);
}

.premium-link:hover .premium-arrow-hover {
    transform: translateX(0);
    opacity: 1;
}


/* ===========================
    White Premium Link
=========================== */

.premium-link-white {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
}

/* Text */

.premium-link-white .link-text {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
}

/* Animated White Underline */

.premium-link-white .link-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0px;

    width: 100%;
    height: 2px;

    background: #fff;

    transform: scaleX(0);
    transform-origin: left;

    transition: transform .4s ease;
}

.premium-link-white:hover .link-text::after {
    transform: scaleX(1);
}

/* Arrow */

.premium-link-white .arrow-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    overflow: hidden;
}

.premium-link-white .arrow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Base Arrow */

.premium-link-white .arrow-base {
    color: rgba(255, 255, 255, .45);
    z-index: 1;
    transition: transform .4s ease;
}

/* Hover Arrow */

.premium-link-white .arrow-top {
    color: #fff;
    z-index: 2;

    /* transform: translateX(-100%); */
    transition: transform .4s ease;
}

.premium-link-white:hover .arrow-base {
    transform: scale(1.1);
}

.premium-link-white:hover .arrow-top {
    transform: translateX(0);
}


/* black premium link */

/*<div class="flex justify-center">
    <a href="#" class="premium-link inline-flex items-center gap-2 text-2 text-[#06070a]">

        <span class="link-text">
            View archive
        </span>

        <span class="arrow-wrap">
            <!-- Original Arrow -->
            <svg
                class="premium-arrow w-10 h-10"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M16.6075 11.8572L13.255 8.40897L14.1388 7.5L19 12.5L14.1388 17.5L13.255 16.591L16.6075 13.1428H5V11.8572H16.6075Z" />
            </svg>

            <!-- Dark Hover Arrow -->
            <svg
                class="premium-arrow-hover w-10 h-10"
                viewBox="0 0 24 24"
                fill="currentColor">
                <path d="M16.6075 11.8572L13.255 8.40897L14.1388 7.5L19 12.5L14.1388 17.5L13.255 16.591L16.6075 13.1428H5V11.8572H16.6075Z" />
            </svg>
        </span>

    </a>
</div> */

/* white premium link */

/* <div class="flex justify-center">
    <a href="#" class="premium-link premium-link-white text-2">

        <span class="link-text">
            View all guides
        </span>

        <span class="arrow-wrap">

            <!-- Base Arrow -->
            <svg class="arrow arrow-base" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16.6075 11.8572L13.255 8.40897L14.1388 7.5L19 12.5L14.1388 17.5L13.255 16.591L16.6075 13.1428H5V11.8572H16.6075Z" />
            </svg>

            <!-- Hover Arrow -->
            <svg class="arrow arrow-top" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16.6075 11.8572L13.255 8.40897L14.1388 7.5L19 12.5L14.1388 17.5L13.255 16.591L16.6075 13.1428H5V11.8572H16.6075Z" />
            </svg>

        </span>

    </a>
</div> */