/*==============================================================================
    ATHENA UI FRAMEWORK
    File        : ui-components.css
    Description : Reusable UI Components
    Version     : 1.0
==============================================================================*/


/*==============================================================================
    BUTTONS
==============================================================================*/

.ui-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    min-height:58px;
    padding:0 34px;

    border-radius:100px;

    font-size:15px;
    font-weight:600;
    letter-spacing:.3px;

    transition:var(--ui-transition);

    cursor:pointer;
}

.ui-btn:hover{
    text-decoration:none;
}

.ui-btn-primary{
    background:var(--ui-primary);
    color:#fff;
}

.ui-btn-primary:hover{
    background:var(--ui-accent);
    color:#fff;
    transform:translateY(-3px);
}

.ui-btn-secondary{
    background:var(--ui-accent);
    color:#fff;
}

.ui-btn-secondary:hover{
    background:var(--theme-primary-dark);
    color:#fff;
    transform:translateY(-3px);
}

.ui-btn-light{
    background:#fff;
    color:var(--ui-primary);
    box-shadow:var(--ui-shadow-sm);
}

.ui-btn-light:hover{
    transform:translateY(-3px);
    box-shadow:var(--ui-shadow-md);
}

.ui-btn-outline{
    border:2px solid var(--ui-primary);
    color:var(--ui-primary);
}

.ui-btn-outline:hover{
    background:var(--ui-primary);
    color:#fff;
    transform:translateY(-3px);
}

.ui-btn-outline-accent{
    border:2px solid var(--ui-accent);
    color:var(--ui-accent);
}

.ui-btn-outline-accent:hover{
    background:var(--ui-accent);
    color:#fff;
    transform:translateY(-3px);
}

.ui-btn-outline-light{
    border:2px solid #fff;
    color:#fff;
}

.ui-btn-outline-light:hover{
    background:#fff;
    color:var(--ui-primary);
    transform:translateY(-3px);
}


/*==============================================================================
    BADGES
==============================================================================*/

.ui-badge{

    display:inline-flex;
    align-items:center;

    padding:8px 18px;

    border-radius:100px;

    background:#F7E8F4;

    color:var(--ui-accent);

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}


/*==============================================================================
    CARDS
==============================================================================*/

.ui-card{

    position:relative;

    background:#fff;

    border-radius:var(--ui-radius-lg);

    padding:40px;

    box-shadow:var(--ui-shadow-sm);

    transition:var(--ui-transition);

    height:100%;
}

.ui-card:hover{
    transform:translateY(-8px);
    box-shadow:var(--ui-shadow-md);
}


/*==============================================================================
    ICON BOX
==============================================================================*/

.ui-icon{

    width:70px;
    height:70px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:22px;

    background:#F7F3FD;

    color:var(--ui-primary);

    font-size:30px;

    margin-bottom:25px;
}


/*==============================================================================
    CARD TITLE
==============================================================================*/

.ui-card-title{
    margin-bottom:18px;

    font-size:28px;
    font-weight:700;
}

.ui-card-text{
    margin-bottom:0;
}


/*==============================================================================
    LINKS
==============================================================================*/

.ui-link{

    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:28px;

    font-weight:600;

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

.ui-link:hover{
    color:var(--ui-accent);
    gap:16px;
}


/*==============================================================================
    IMAGE CARD
==============================================================================*/

.ui-image-card{
    overflow:hidden;
    border-radius:var(--ui-radius-lg);
    background:#fff;
    box-shadow:var(--ui-shadow-sm);
}

.ui-image-card img{
    width:100%;
    transition:.8s;
}

.ui-image-card:hover img{
    transform:scale(1.08);
}

.ui-image-card-body{
    padding:35px;
}


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

.ui-content-box{
    padding:50px;
    background:#fff;

    border-radius:var(--ui-radius-lg);
    box-shadow:var(--ui-shadow-sm);
}


/*==============================================================================
    GLASS BOX
==============================================================================*/

.ui-glass{
    backdrop-filter:blur(16px);
    background:rgba(255,255,255,.7);

    border:1px solid rgba(255,255,255,.5);
    border-radius:var(--ui-radius-lg);
}


/*==============================================================================
    DIVIDER
==============================================================================*/

.ui-line{
    width:70px;
    height:4px;

    background:var(--ui-accent);
    border-radius:100px;

    margin:25px 0;
}


/*==============================================================================
    LISTS
==============================================================================*/

.ui-list{
    margin-top:30px;
}

.ui-list li{
    position:relative;

    padding-left:30px;
    margin-bottom:18px;
    
    list-style:none;
}

.ui-list li:last-child{
    margin-bottom:0;
}

.ui-list li:before{
    content:"";
    position:absolute;

    left:0;
    top:11px;

    width:10px;
    height:10px;

    border-radius:50%;
    background:var(--ui-accent);
}


/*==============================================================================
    TAGS
==============================================================================*/

.ui-tag{
    display:inline-block;

    padding:8px 16px;
    margin:4px;

    border-radius:100px;

    background:#F5F5F5;

    font-size:14px;

    transition:var(--ui-transition);
}

.ui-tag:hover{
    background:var(--ui-primary);
    color:#fff;
}


/*==============================================================================
    RESPONSIVE
==============================================================================*/

@media(max-width:991.98px){

    .ui-btn{
        width:100%;
        min-height:54px;
    }

    .ui-card{
        padding:30px;
    }

    .ui-content-box{
        padding:30px;
    }

    .ui-card-title{
        font-size:24px;
    }

    .ui-icon{
        width:60px;
        height:60px;

        font-size:24px;
        border-radius:18px;
    }

}