/* =============================================================================
   MY Accounting & Tax Solutions
============================================================================= */

/*
|--------------------------------------------------------------------------
| File        : components.css
| File Code   : CSS004
| Version     : 1.0.0
| Description : Global UI Components
| Author      : MY Accounting & Tax Solutions
|--------------------------------------------------------------------------
*/


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 32px;

    border:none;

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

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

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

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

    cursor:pointer;

    text-decoration:none;

    transition:var(--transition);

}

.btn:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/* ==========================================================================
   PRIMARY BUTTON
========================================================================== */

.btn-primary{

    background:var(--primary-color);

    color:var(--white);

}

.btn-primary:hover{

    background:var(--primary-hover);

    color:var(--white);

}


/* ==========================================================================
   SECONDARY BUTTON
========================================================================== */

.btn-secondary{

    background:var(--secondary-color);

    color:var(--white);

}

.btn-secondary:hover{

    background:var(--secondary-hover);

    color:var(--white);

}


/* ==========================================================================
   OUTLINE BUTTON
========================================================================== */

.btn-outline{

    background:transparent;

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

    color:var(--primary-color);

}

.btn-outline:hover{

    background:var(--primary-color);

    color:var(--white);

}


/* ==========================================================================
   SMALL BUTTON
========================================================================== */

.btn-sm{

    padding:10px 20px;

    font-size:.90rem;

}


/* ==========================================================================
   LARGE BUTTON
========================================================================== */

.btn-lg{

    padding:18px 40px;

    font-size:1.1rem;

}


/* ==========================================================================
   SECTION BADGE
========================================================================== */

.badge-primary{

    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:rgba(15,81,50,.08);

    color:var(--primary-color);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


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

.card{

    background:var(--white);

    border:none;

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

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

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/* ==========================================================================
   CARD BODY
========================================================================== */

.card-body{

    padding:35px;

}


/* ==========================================================================
   ICON CIRCLE
========================================================================== */

.icon-circle{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(15,81,50,.08);

    color:var(--primary-color);

    font-size:28px;

    margin-bottom:25px;

}


/* ==========================================================================
   STATISTICS CARD
========================================================================== */

.stat-card{

    background:var(--white);

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

    padding:35px;

    text-align:center;

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

    transition:var(--transition);

}

.stat-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.stat-card h3{

    margin-bottom:10px;

    color:var(--secondary-color);

}

.stat-card p{

    margin:0;

}


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

.img-rounded{

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

}

.img-shadow{

    box-shadow:var(--shadow-lg);

}


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

.divider{

    width:90px;

    height:4px;

    background:var(--secondary-color);

    border-radius:50px;

    margin:20px 0;

}


/* ==========================================================================
   SECTION HEADER
========================================================================== */

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

.section-header h2{

    margin-top:20px;

}

.section-header p{

    margin-top:20px;

}


/* ==========================================================================
   FEATURE ITEM
========================================================================== */

.feature-item{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:18px;

}

.feature-item i{

    color:var(--secondary-color);

    font-size:20px;

}


/* ==========================================================================
   WHITE PANEL
========================================================================== */

.white-panel{

    background:var(--white);

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

    padding:40px;

    box-shadow:var(--shadow-md);

}


/* ==========================================================================
   TRANSITIONS
========================================================================== */

.fade-up{

    transition:all .4s ease;

}