/* =====================================
   OneToolBox HOME FINAL CSS
   PART 1/3
===================================== */


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


.hero{

    padding:20px 0 15px !important;

}



.hero-container{


    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    min-height:300px;


}



.hero-content{


    flex:1;

    max-width:620px;


}



.hero-title{


    font-size:44px !important;

    line-height:1.15;

    margin-bottom:12px;


}



.hero-description{


    font-size:16px;

    line-height:1.6;

    color:#64748b;

    margin-bottom:18px;


}







/* =========================
   HERO ICON AREA
========================= */


.hero-image.tool-icons-box{


    position:relative;

    width:400px;

    height:300px;

    flex-shrink:0;


}




.hero-image.tool-icons-box::before{


    content:"";

    position:absolute;


    width:300px;

    height:300px;


    left:40px;

    top:0;


    background:radial-gradient(

    circle,

    rgba(37,99,235,.18),

    transparent 70%

    );


}





.tool-icons-box .tool-icon{


    position:absolute;


    width:85px;


    height:85px;


    border-radius:24px;


    background:#fff;


    display:flex;


    align-items:center;


    justify-content:center;


    font-size:38px;


    box-shadow:

    0 15px 35px rgba(0,0,0,.12);


}







.tool-icons-box .image-icon{

left:20px;

top:100px;

}



.tool-icons-box .pdf-icon{

left:150px;

top:10px;

}



.tool-icons-box .excel-icon{

right:20px;

top:100px;

}



.tool-icons-box .ppt-icon{

left:20px;

bottom:30px;

}



.tool-icons-box .word-icon{

left:150px;

bottom:0;

}



.tool-icons-box .ai-icon{


left:150px;

top:95px;


width:110px;

height:110px;


font-size:50px;


border-radius:32px;


}






/* FLOAT */


.tool-icons-box .tool-icon{


animation:heroFloat 4s ease-in-out infinite;


}



@keyframes heroFloat{


0%,100%{

transform:translateY(0);

}


50%{

transform:translateY(-10px);

}


}






/* =========================
   HERO ICON COLORS
========================= */

.tool-icons-box .image-icon i {
    color: #2563eb; /* Blue */
}

.tool-icons-box .pdf-icon i {
    color: #dc2626; /* Red */
}

.tool-icons-box .excel-icon i {
    color: #16a34a; /* Green */
}

.tool-icons-box .ppt-icon i {
    color: #f97316; /* Orange */
}

.tool-icons-box .word-icon i {
    color: #2563eb; /* Blue */
}

.tool-icons-box .ai-icon i {
    color: #7c3aed; /* Purple */
}


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


.categories-section{


padding:10px 0 20px;


}





.section-heading{


margin-bottom:15px;


}





.section-heading h2{


font-size:26px;


font-weight:800;


color:#0f172a;


margin-bottom:0;


}




.section-heading p{


display:none;


}





.category-grid{


display:grid;


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


gap:16px;


}

/* =========================
 CATEGORY CARD FINAL
========================= */


.category-card{


background:#ffffff;


border-radius:20px;


padding:18px 12px;


text-align:center;


border:1px solid #e5e7eb;


transition:all .3s ease;


text-decoration:none;


color:inherit;


display:block;


cursor:pointer;


}





.category-card:hover{


transform:translateY(-8px) scale(1.03);


box-shadow:


0 18px 35px rgba(37,99,235,.18);


border-color:#2563eb;


}





/* CATEGORY ICON */


.category-icon{


width:62px;


height:62px;


margin:auto;


border-radius:18px;


display:flex;


align-items:center;


justify-content:center;


background:#dbeafe;


transition:.3s;


}





.category-icon i{


font-size:30px;


color:#2563eb;


transition:.3s;


}





.category-card:hover .category-icon{


background:#2563eb;


transform:scale(1.12) rotate(5deg);


}




.category-card:hover .category-icon i{


color:#ffffff;


}







.category-card h3{


font-size:17px;


font-weight:800;


margin:12px 0 8px;


color:#0f172a;


}





.category-card p{


font-size:14px;


color:#64748b;


margin:0;


}





.category-link{


display:inline-block;


margin-top:8px;


color:#2563eb;


font-size:14px;


font-weight:700;


}





.category-card:hover .category-link{


color:#1d4ed8;


}







/* =========================
 CATEGORY COLOR STYLE
========================= */


.category-card:nth-child(2) .category-icon{


background:#fee2e2;


}


.category-card:nth-child(2) .category-icon i{


color:#dc2626;


}






.category-card:nth-child(3) .category-icon{


background:#dcfce7;


}


.category-card:nth-child(3) .category-icon i{


color:#16a34a;


}






.category-card:nth-child(4) .category-icon{


background:#fef3c7;


}


.category-card:nth-child(4) .category-icon i{


color:#f59e0b;


}






.category-card:nth-child(5) .category-icon{


background:#ede9fe;


}


.category-card:nth-child(5) .category-icon i{


color:#7c3aed;


}






.category-card:nth-child(6) .category-icon{


background:#cffafe;


}


.category-card:nth-child(6) .category-icon i{


color:#0891b2;


}






.category-card:nth-child(7) .category-icon{


background:#ffedd5;


}


.category-card:nth-child(7) .category-icon i{


color:#ea580c;


}






.category-card:nth-child(8) .category-icon{


background:#d1fae5;


}


.category-card:nth-child(8) .category-icon i{


color:#059669;


}
/* =========================
 POPULAR & LATEST TOOLS
========================= */


.tool-card{


display:block;


text-decoration:none;


color:inherit;


background:#ffffff;


border-radius:18px;


padding:18px;


border:1px solid #e5e7eb;


transition:.3s;


}




.tool-card:hover{


transform:translateY(-7px);


box-shadow:

0 15px 35px rgba(0,0,0,.12);


}




.tool-card .tool-icon{


width:60px;


height:60px;


border-radius:18px;


display:flex;


align-items:center;


justify-content:center;


background:#dbeafe;


font-size:28px;


margin-bottom:12px;


}




.tool-card h3{


font-size:18px;


font-weight:800;


color:#0f172a;


margin-bottom:8px;


}




.tool-card p{


font-size:14px;


color:#64748b;


line-height:1.5;


}




.tool-link{


color:#2563eb;


font-weight:700;


font-size:14px;


}








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


.faq-item{


border-radius:16px;

margin-bottom:12px;

}





.faq-question{


width:100%;

padding:15px;

background:#fff;

border:1px solid #e5e7eb;

border-radius:14px;

display:flex;

justify-content:space-between;

align-items:center;

font-weight:700;

cursor:pointer;

}





.faq-answer{


display:none;

padding:15px;

color:#64748b;


}





.faq-item.active .faq-answer{


display:block;


}







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



@media(max-width:1200px){


.category-grid{


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


}


}





@media(max-width:900px){


.hero-container{


flex-direction:column;


}



.hero-title{


font-size:36px !important;


}



.hero-image.tool-icons-box{


width:320px;


height:260px;


}





.category-grid{


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


}



}





@media(max-width:600px){


.category-grid{


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


}



.category-card{


padding:16px 10px;


}



.category-card h3{


font-size:15px;


}



.category-icon{


width:55px;

height:55px;


}



.category-icon i{


font-size:25px;


}



}





@media(max-width:400px){


.category-grid{


grid-template-columns:1fr;


}



.hero-title{


font-size:30px !important;


}


}

/* ===== HOME HERO COMPACT / ONE-LINE TITLE ===== */
.hero{
    padding:8px 0 6px !important;
}
.hero-container{
    min-height:250px !important;
    gap:22px !important;
    align-items:center !important;
}
.hero-title{
    white-space:nowrap !important;
    font-size:42px !important;
    margin-bottom:8px !important;
}
.hero-description{
    margin-bottom:12px !important;
}
.hero-image.tool-icons-box{
    width:360px !important;
    height:260px !important;
}
.hero-image.tool-icons-box::before{
    width:260px !important;
    height:260px !important;
}
.tool-icons-box .tool-icon{
    width:74px !important;
    height:74px !important;
    font-size:34px !important;
}
.tool-icons-box .ai-icon{
    width:96px !important;
    height:96px !important;
    font-size:44px !important;
}
.categories-section{
    padding:4px 0 14px !important;
}
.section-heading{
    margin-bottom:10px !important;
}
.section-heading h2{
    font-size:25px !important;
}
@media(max-width:900px){
    .hero{
        padding:8px 0 4px !important;
    }
    .hero-container{
        min-height:auto !important;
    }
    .hero-title{
        white-space:normal !important;
        font-size:36px !important;
    }
}
@media(max-width:600px){
    .hero-title{
        font-size:30px !important;
    }
    .hero-image.tool-icons-box{
        width:300px !important;
        height:230px !important;
    }
}

/* Search/card final polish */
.otb-global-search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:999999;background:#fff;border:1px solid #cfd9e6;border-radius:12px;box-shadow:0 14px 32px rgba(15,23,42,.16);overflow:hidden;display:none}
.otb-global-search-results.show{display:block}
.otb-search-item{display:block;padding:10px 12px;text-decoration:none!important;color:#172033!important;border-bottom:1px solid #edf1f6}
.otb-search-item:hover{background:#edf4ff}
.otb-search-item strong{display:block;font-size:12px}
.otb-search-item small{display:block;margin-top:2px;color:#64748b;font-size:10px}
.otb-search-empty{padding:12px;text-align:center;color:#64748b;font-size:12px}
.category-card,.tool-card,.feature-card,.latest-tool-card,.popular-tool-card{border:1px solid #cfd9e6!important;background:linear-gradient(145deg,rgba(59,130,246,.06),rgba(139,92,246,.035))!important}
@media(max-width:700px){.category-card,.tool-card,.feature-card,.latest-tool-card,.popular-tool-card{border-width:1px!important}}
body.dark .otb-global-search-results{background:#172033;border-color:#334155}
body.dark .otb-search-item{color:#f1f5f9!important;border-color:#263449}
body.dark .otb-search-item:hover{background:#111827}
body.dark .otb-search-empty{color:#94a3b8}
body.dark .category-card,body.dark .tool-card,body.dark .feature-card,body.dark .latest-tool-card,body.dark .popular-tool-card{background:linear-gradient(145deg,rgba(59,130,246,.12),rgba(139,92,246,.07))!important;border-color:#3b4e68!important}


/* =========================================================
   DEVELOPMENT NOTICE TICKER
   ========================================================= */
.otb-development-notice{
    width:100%;
    overflow:hidden;
    background:linear-gradient(90deg,#eff6ff,#f0fdf4,#fff7ed,#eff6ff);
    border-top:1px solid #dbeafe;
    border-bottom:1px solid #dbeafe;
    min-height:38px;
    display:flex;
    align-items:center;
    position:relative;
    z-index:20;
}
.otb-notice-track{
    width:max-content;
    display:flex;
    align-items:center;
    flex-shrink:0;
    animation:otbNoticeRTL 28s linear infinite;
    will-change:transform;
}
.otb-notice-item{
    display:inline-flex;
    align-items:center;
    white-space:nowrap;
    padding:8px 48px;
    color:#334155;
    font-size:13px;
    line-height:1.45;
    font-weight:600;
}
.otb-notice-item a{
    color:#2563eb;
    font-weight:800;
    text-decoration:none;
    margin-left:4px;
}
.otb-notice-item a:hover{text-decoration:underline;}
@keyframes otbNoticeRTL{
    0%{transform:translateX(100vw);}
    100%{transform:translateX(-100%);}
}
html[data-theme="dark"] .otb-development-notice,
body.dark .otb-development-notice{
    background:linear-gradient(90deg,#172554,#052e16,#431407,#172554);
    border-color:#263449;
}
html[data-theme="dark"] .otb-notice-item,
body.dark .otb-notice-item{color:#e2e8f0;}
html[data-theme="dark"] .otb-notice-item a,
body.dark .otb-notice-item a{color:#60a5fa;}
@media(max-width:700px){
    .otb-development-notice{min-height:36px;}
    .otb-notice-track{animation-duration:24s;}
    .otb-notice-item{padding:7px 32px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce){
    .otb-notice-track{animation:none;transform:none;}
    .otb-notice-item[aria-hidden="true"]{display:none;}
}

/* Development notice: directly below the fixed header */
.otb-development-notice{
    position:fixed !important;
    top:64px !important;
    left:0;
    right:0;
    width:100%;
    z-index:9998;
}
.page.page-offset{
    padding-top:102px !important;
}
@media(max-width:700px){
    .otb-development-notice{top:60px !important;}
    .page.page-offset{padding-top:96px !important;}
}