/* =========================================
   RELATED TOOLS
========================================= */

.single-tool-related-wrapper{
    margin-top:80px;
    padding:70px 0;
    background:#f8fafc;
    border-top:1px solid #e2e8f0;
}

.single-tool-related-container{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:0 20px;
}

/* =========================================
   HEADING
========================================= */

.related-tools-heading{
    text-align:center;
    margin-bottom:45px;
}

.related-tools-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:8px 16px;

    border-radius:999px;

    background:#dbeafe;
    color:#2563eb;

    font-size:13px;
    font-weight:700;

    margin-bottom:18px;
}

.related-tools-heading h2{
    margin:0;

    font-size:42px;
    line-height:1.1;
    font-weight:800;

    color:#0f172a;
}

.related-tools-heading p{
    margin-top:14px;

    font-size:17px;
    line-height:1.7;

    color:#64748b;
}

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

.related-tools-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:26px;
}

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

.related-tool-card{
    position:relative;

    display:flex;
    flex-direction:column;

    padding:32px;

    min-height:240px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid #e2e8f0;

    text-decoration:none !important;

    overflow:hidden;

    transition:.35s ease;

    box-shadow:
        0 10px 30px rgba(15,23,42,.04);
}

/* =========================================
   GLOW EFFECT
========================================= */

.related-tool-card::before{
    content:"";

    position:absolute;

    top:-80px;
    right:-80px;

    width:180px;
    height:180px;

    border-radius:50%;

    background:rgba(37,99,235,.06);

    transition:.35s ease;
}

/* =========================================
   HOVER
========================================= */

.related-tool-card:hover{
    transform:translateY(-8px);

    border-color:#bfdbfe;

    box-shadow:
        0 20px 45px rgba(37,99,235,.12);
}

.related-tool-card:hover::before{
    transform:scale(1.2);
}

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

.related-tool-icon{
    width:64px;
    height:64px;

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

    border-radius:20px;

    background:linear-gradient(
        135deg,
        #eff6ff 0%,
        #dbeafe 100%
    );

    font-size:28px;

    margin-bottom:24px;
}

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

.related-tool-card h3{
    margin:0 0 22px;

    font-size:24px;
    line-height:1.35;
    font-weight:800;

    color:#0f172a;
}

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

.related-tool-btn{
    margin-top:auto;

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

    width:max-content;

    padding:12px 18px;

    border-radius:14px;

    background:#eff6ff;
    color:#2563eb;

    font-size:14px;
    font-weight:700;

    transition:.25s ease;
}

.related-tool-card:hover .related-tool-btn{
    background:#2563eb;
    color:#ffffff;
}
.related-tools-loadmore-wrap{
    margin-top:40px;
    text-align:center;
}

.related-tools-loadmore{
    border:none;
    outline:none;

    padding:16px 28px;

    border-radius:18px;

    background:#2563eb;
    color:#ffffff;

    font-size:15px;
    font-weight:700;

    cursor:pointer;

    transition:.3s ease;
}

.related-tools-loadmore:hover{
    transform:translateY(-3px);

    background:#1d4ed8;
}

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

@media (max-width:768px){

    .single-tool-related-wrapper{
        padding:55px 0;
    }

    .related-tools-heading h2{
        font-size:32px;
    }

    .related-tool-card{
        min-height:auto;
        padding:24px;
    }

    .related-tool-card h3{
        font-size:21px;
    }

}