/* ==========================================
   OneToolBox Enterprise
   layout.css
   Version: 1.0
========================================== */


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

body{

    background:var(--bg);

    color:var(--text);

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

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

    line-height:var(--line-normal);

    transition:
    background var(--transition),
    color var(--transition);

}



/* ========= CONTAINER ========= */

.container{

    width:100%;

    max-width:var(--container-xl);

    margin-inline:auto;

    padding-inline:20px;

}



/* ========= PAGE ========= */

.page{

    min-height:100vh;

    display:flex;

    flex-direction:column;

}


main{

    flex:1;

}



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

.section{

    padding:80px 0;

}


.section-sm{

    padding:40px 0;

}


.section-lg{

    padding:120px 0;

}



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

.grid{

    display:grid;

    gap:24px;

}


.grid-2{

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

}


.grid-3{

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

}


.grid-4{

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

}


.grid-auto{

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

}



/* ========= FLEX ========= */

.flex{

    display:flex;

}


.flex-center{

    display:flex;

    align-items:center;

    justify-content:center;

}


.flex-between{

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.flex-column{

    display:flex;

    flex-direction:column;

}



/* ========= SPACING ========= */

.mt-16{margin-top:16px;}

.mt-24{margin-top:24px;}

.mt-32{margin-top:32px;}

.mt-48{margin-top:48px;}


.mb-16{margin-bottom:16px;}

.mb-24{margin-bottom:24px;}

.mb-32{margin-bottom:32px;}

.mb-48{margin-bottom:48px;}



/* ========= WRAPPER ========= */

.wrapper{

    width:100%;

    max-width:var(--container-xl);

    margin:auto;

    padding-inline:20px;

}



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

.content{

    width:100%;

    padding:40px 0;

}



/* ========= HERO ========= */

.hero{

    padding:var(--hero-padding) 0;

    position:relative;

    overflow:hidden;

}



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

.category-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(250px,1fr));

    gap:24px;

}



.tool-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fill,minmax(280px,1fr));

    gap:24px;

}



/* ========= TOOL PAGE ========= */

.tool-page{

    padding:60px 0;

}


.tool-box{

    background:var(--bg-card);

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

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

    padding:var(--card-padding);

}



/* ========= FAQ ========= */

.faq-section{

    display:flex;

    flex-direction:column;

    gap:20px;

}



/* ========= HEADER OFFSET ========= */

.page-offset{

    padding-top:72px;

}



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

.footer{

    margin-top:80px;

}



/* ========= UTILITIES ========= */

.hidden{

    display:none!important;

}


.text-center{

    text-align:center;

}


.text-left{

    text-align:left;

}


.text-right{

    text-align:right;

}



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


@media(max-width:1200px){


.hero-container{

    grid-template-columns:1fr;

}


}



@media(max-width:768px){


.container{

    padding-inline:16px;

}


.section{

    padding:60px 0;

}


.grid-2,

.grid-3,

.grid-4{

    grid-template-columns:1fr;

}


}



@media(max-width:480px){


.tool-box{

    padding:18px;

}


}