/* =====================================
   DEVELOPER TOOLS CATEGORY FINAL CSS
===================================== */


/* HERO */

.developer-tools-hero{

    padding:30px 0 20px;

    text-align:center;

}



.developer-tools-hero h1{

    font-size:40px;

    font-weight:800;

    color:#0f172a;

    margin-bottom:8px;

}



.developer-tools-hero p{

    color:#64748b;

    font-size:16px;

}







/* SEARCH */


.developer-tools-search{

    max-width:500px;

    margin:20px auto 0;

    position:relative;

}



.developer-tools-search input{


    width:100%;

    height:45px;

    border-radius:14px;

    border:1px solid #cbd5e1;

    padding:0 45px 0 18px;

    font-size:15px;


}



.developer-tools-search i{


    position:absolute;

    right:18px;

    top:14px;

    color:#2563eb;


}







/* GRID */


.developer-tools-grid{


    display:grid;


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


    gap:15px;


}







/* CARD */


.developer-tool-card{


    background:#ffffff;


    border:1px solid #e5e7eb;


    border-radius:18px;


    padding:15px 12px;


    text-align:center;


    min-height:205px;


    transition:.3s;


}



.developer-tool-card:hover{


    transform:translateY(-5px);


    box-shadow:

    0 12px 28px rgba(0,0,0,.12);


}







/* ICON */


.developer-tool-icon{


    width:55px;


    height:55px;


    border-radius:16px;


    margin:0 auto 12px;


    display:flex;


    justify-content:center;


    align-items:center;


}



.developer-tool-icon i{


    font-size:25px;


}







/* COLORS */


.blue{

background:#dbeafe;

color:#2563eb;

}



.green{

background:#dcfce7;

color:#16a34a;

}



.red{

background:#fee2e2;

color:#dc2626;

}



.yellow{

background:#fef3c7;

color:#d97706;

}



.purple{

background:#ede9fe;

color:#7c3aed;

}



.orange{

background:#ffedd5;

color:#ea580c;

}







/* TEXT */


.developer-tool-card h3{


    font-size:16px;


    font-weight:800;


    color:#0f172a;


    margin-bottom:6px;


}



.developer-tool-card p{


    font-size:13px;


    color:#64748b;


    line-height:1.4;


    min-height:36px;


}




.developer-tool-card a{


    display:inline-block;


    margin-top:8px;


    color:#2563eb;


    font-size:13px;


    font-weight:700;


}







/* RESPONSIVE */


@media(max-width:1200px){


.developer-tools-grid{


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


}


}







@media(max-width:800px){


.developer-tools-grid{


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


}



.developer-tools-hero h1{

font-size:32px;

}


}







@media(max-width:500px){


.developer-tools-grid{


grid-template-columns:1fr;


}


}

/* ONETOOLBOX UNIFIED CATEGORY STYLE: developer-tools.html */
/* Centered heading and compact top spacing */
.developer-tools-hero{
    padding:22px 0 18px !important;
    text-align:center !important;
}
.developer-tools-hero .container{
    max-width:1360px !important;
    margin:0 auto !important;
    text-align:center !important;
}
.developer-tools-hero h1{
    margin:0 0 8px !important;
    text-align:center !important;
    font-size:36px !important;
    line-height:1.2 !important;
    font-weight:800 !important;
    color:#2563eb !important;
}
.developer-tools-hero p{
    margin:0 auto !important;
    max-width:820px !important;
    text-align:center !important;
    color:#64748b !important;
    font-size:15px !important;
    line-height:1.5 !important;
}
.developer-tools-grid{
    width:100% !important;
    max-width:1360px !important;
    margin:0 auto !important;
    padding:0 10px !important;
    box-sizing:border-box !important;
    gap:16px !important;
    align-items:stretch !important;
}
.developer-tool-card{
    border-radius:17px !important;
    border:1px solid rgba(148,163,184,.28) !important;
    box-shadow:0 7px 22px rgba(15,23,42,.06) !important;
    overflow:hidden !important;
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease !important;
}
.developer-tool-card::before{
    background:linear-gradient(90deg,#2563eb,#6366f1) !important;
}
.developer-tool-card:hover{
    transform:translateY(-4px) !important;
    border-color:#2563eb55 !important;
    box-shadow:0 14px 30px rgba(15,23,42,.10) !important;
}
/* Heading/card accent follows this category */
.developer-tool-card h3{
    font-weight:800 !important;
}
@media(min-width:1101px){
    .developer-tools-grid{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}
/* Image Tools stays intentionally 3-column, as requested */

@media(max-width:1100px){
    .developer-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;padding:0 16px !important;}
}
@media(max-width:560px){
    .developer-tools-hero{padding:16px 10px 12px !important;}
    .developer-tools-hero h1{font-size:28px !important;}
    .developer-tools-hero p{font-size:14px !important;}
    .developer-tools-grid{grid-template-columns:1fr !important;padding:0 12px !important;gap:12px !important;}
}
body.dark .developer-tools-hero h1{color:#6366f1 !important;}
body.dark .developer-tools-hero p{color:#aebbd0 !important;}