/* ===========================
   GRID
=========================== */

.calculator-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
    gap:35px;
    margin-top:40px;

}


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

.calculator-card{

    --primary:#2563eb;
    --secondary:#eef4ff;
    --text:#2563eb;
    --border:#dbeafe;
    --background:#ffffff;

    background:linear-gradient(180deg,var(--background),#ffffff);

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

    border-top:7px solid var(--primary);

    border-radius:24px;

    padding:0;

    text-align:center;

    box-shadow:0 15px 35px rgba(0,0,0,.06);

    transition:.35s;

    overflow: hidden;
}

.calculator-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}


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

.calculator-icon{

    width:100%;
    height:200px;

    margin:auto auto 25px;

}

.calculator-icon img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:.35s;

}

.calculator-card:hover .calculator-icon img{

    transform:scale(1.05);

}


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

.calculator-badge{

    display:inline-block;

    padding:5px 18px;

    border-radius:50px;

    background:var(--secondary);

    color:var(--text);

    font-weight:700;

    margin-bottom:-10px;

}


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

.calculator-card h2{

    font-size:1.7rem;

    margin-bottom:15px;

}


/* ===========================
   DESCRIPTION
=========================== */

.calculator-card p{

    color:#6b7280;

    line-height:1.8;

    min-height:120px;
    
    margin-bottom: -10px;

}


/* ===========================
   FOOTER
=========================== */

.calculator-footer{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:25px;

    border-top:1px solid rgba(0,0,0,.08);
    
    

}

.calculator-footer strong{

    display:block;

    font-size:1.5rem;

}

.calculator-footer span{

    color:#6b7280;

    font-size:.9rem;

}


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

.calculator-footer a{

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    padding:12px 24px;

    border-radius:12px;

    font-weight:600;

    transition:.25s;

}

.calculator-footer a:hover{

    filter:brightness(.9);

}




/* ===========================
   COLORES DE LA CARD DE ACUERDO A LA CATEGORÍA
=========================== */


.finance{

    --primary:#16a34a;
    --secondary:#dcfce7;
    --text:#166534;
    --border:#bbf7d0;
    --background:#f4fff6;

}


.health{

    --primary:#ef4444;
    --secondary:#fee2e2;
    --text:#b91c1c;
    --border:#fecaca;
    --background:#fff5f5;

}

.math{

    --primary:#7c3aed;
    --secondary:#ede9fe;
    --text:#5b21b6;
    --border:#ddd6fe;
    --background:#faf5ff;

}

.engineering{

    --primary:#4b5563;
    --secondary:#e5e7eb;
    --text:#374151;
    --border:#d1d5db;
    --background:#f9fafb;

}

.science{

    --primary:#06b6d4;
    --secondary:#cffafe;
    --text:#155e75;
    --border:#a5f3fc;
    --background:#effcff;

}


.business{

    --primary:#2563eb;
    --secondary:#dbeafe;
    --text:#1d4ed8;
    --border:#bfdbfe;
    --background:#eef6ff;

}


.technology{

    --primary:#0f766e;
    --secondary:#ccfbf1;
    --text:#115e59;
    --border:#99f6e4;
    --background:#f0fdfa;

}


.conversion{

    --primary:#f59e0b;
    --secondary:#fef3c7;
    --text:#92400e;
    --border:#fde68a;
    --background:#fffbeb;

}


.education{
    --primary:#8b5cf6;
    --secondary:#ede9fe;
    --text:#5b21b6;
    --border:#ddd6fe;
    --background:#faf5ff;
}