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

.tools-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(260px,285px));

    gap:24px;

    justify-content:start;

    margin:40px 0;

}


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

.tool-card{

    --primary:#2563eb;
    --light:#eff6ff;
    --border:#bfdbfe;

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    background:var(--light);

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

    border-left:5px solid var(--primary);

    border-radius:16px;

    overflow:hidden;

    min-height:290px;

    transition:.25s ease;

    box-shadow:0 8px 20px rgba(15,23,42,.05);
    
    width:100%;

    max-width:285px;


}


.tool-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.88) 45%,
        rgba(255,255,255,.55) 100%
    );

    z-index:1;

}

.tool-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    box-shadow:0 18px 35px rgba(15,23,42,.10);

}


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

.tool-image{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    opacity:.08;

    pointer-events:none;

    user-select:none;

    z-index:1;

    transition:.3s;

}


.tool-card:hover .tool-image{

    opacity:.14;

    transform:scale(1.05);

}


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

.tool-content{

    position:relative;

    z-index:2;

    padding:15px;

}


.tool-content h3{

    margin:0;

    margin-bottom:16px;

    padding-right:70px;

    font-size:1.15rem;

    line-height:1.35;

    color:#0f172a;

}

.tool-content h3::after{

    content:"";

    display:block;

    width:42px;

    height:3px;

    margin-top:10px;

    border-radius:20px;

    background:var(--primary);

}

.tool-content p{

    margin:18px 0;

    font-size:.93rem;

    line-height:1.6;

    color:#475569;

}


/*==================================================
=                   FEATURES                       =
==================================================*/

.tool-features{

    list-style:none;

    padding:0;

    margin:22px 0;

}

.tool-features li{

    margin-bottom:10px;

    color:#334155;

    font-size:.90rem;

    font-weight:500;

}

.tool-features li::before{

    content:"✓";

    color:var(--primary);

    font-weight:bold;

    margin-right:8px;

}


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

.tool-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    align-self:flex-start;

    margin:0 22px 22px;

    padding:10px 18px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    border-radius:10px;

    font-weight:600;

    font-size:.90rem;

    transition:.25s;
    
    position:relative;

    z-index:2;

}

.tool-btn:hover{

    filter:brightness(.94);

}


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

@media (max-width:992px){

    .tools-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


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

@media (max-width:640px){

    .tools-grid{

        grid-template-columns:1fr;

    }

}