/*==========================================================
    Buttons
==========================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-bottom:var(--space-xl);

}


/* =========================================
   Button
========================================= */






.button{
    
    position:relative;

    overflow:hidden;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    min-width:120px;

    height:var(--button-height);

    padding-inline:34px;

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

    font-size:1rem;

    font-weight:700;

    text-decoration:none;

    transition:

        transform var(--transition),

        box-shadow var(--transition),

        background var(--transition),

        color var(--transition);

}

/*==========================================================
    Focus
==========================================================*/

.button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(var(--accent-strong-rgb),.22);

}



/*==========================================================
    Ripple Light
==========================================================*/

.button::before{

    content:"";

    position:absolute;

    pointer-events:none;

    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(var(--white-rgb),.35),

            transparent

        );

    transform:skewX(-20deg);

    transition:left .7s ease;

}

.button svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}


.btn{

    margin-top:15px;

    background:var(--primary);

    padding:12px 25px;

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

    display:inline-flex;

    text-decoration:none;

    position:relative;   

    overflow:hidden;

    gap:8px;

    font-family:var(--font-body);

    font-size:14px;

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

    white-space:nowrap;

    transition:

        transform var(--transition),

        box-shadow var(--transition),

        background var(--transition),

        color var(--transition);

}


.btn svg{
    width:16px;
    height:16px;
    flex-shrink:0;
}

/*==========================================================
    Primary Button
==========================================================*/

.btn-primary{

    background:var(--primary);
    color:var(--background);

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

    box-shadow:

        0 20px 40px rgba(var(--primary-rgb),.20);

    font-family:var(--font-body);

}


.btn-primary:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

    box-shadow:

        0 28px 50px rgba(var(--primary-rgb),.25);

}

.btn-primary:hover::before{

    left:150%;

}



/*==========================================================
    Secondary Button
==========================================================*/

.btn-secondary{

    background:var(--background);

    color:var(--primary);

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

    font-family:var(--font-body);

}


.btn-secondary:hover{

    transform:translateY(-4px);

    border-color:var(--primary);

    background-color:var(--background) ;

    box-shadow:

        0 15px 35px rgba(var(--primary-rgb),.10);

}

.btn-secondary:hover::before{

    left:150%;

}



/*==========================================================
    Focus
==========================================================*/

.btn:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(var(--accent-strong-rgb),.22);

}



/*==========================================================
    Ripple Light
==========================================================*/

.btn::before{

    content:"";

    box-sizing:border-box;

    position:absolute;

    pointer-events:none;
    
    top:0;

    left:-120%;

    width:80%;

    height:100%;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(var(--white-rgb),.35),

            transparent

        );

    transform:skewX(-20deg);

    transition:left .7s ease;

}







.link-button{

    display:flex;

    align-items:center;

    justify-content:center;

    width:max-content;

    margin:var(--space-xl) auto 0;

    height:var(--button-height);

    padding:0 35px;

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

    background:var(--primary);

    color:rgb(var(--white-rgb));

    font-family:var(--font-body);

    font-size:var(--btn-font-size);

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

    text-decoration:none;

    transition:var(--transition);

}



.link-button:hover{

    background:var(--primary-dark);

}


.navbar-btn{

    background:var(--primary);
    color:var(--background);

    box-shadow:

        0 20px 40px rgba(var(--primary-rgb),.20);

}


.navbar-btn:hover{

    transform:translateY(-4px);

    background:var(--primary-dark);

    box-shadow:

        0 28px 50px rgba(var(--primary-rgb),.25);

}