/* =========================
HERO SECTION
========================= */

.hero-section{
padding:80px 0 40px;
background:#f8fafc;
}

.hero-content{
text-align:center;
}

.hero-title{
font-size:72px;
font-weight:800;
color:#111827;
line-height:1.1;
margin-bottom:20px;
}

.hero-highlight{
background:#2563eb;
color:#fff;
padding:8px 20px;
border-radius:6px;
}

.hero-subtitle{
font-size:20px;
color:#6b7280;
margin-bottom:35px;
}

.hero-search{
max-width:850px;
margin:auto;
}

.hero-search .input-group{
background:#fff;
border-radius:50px;
overflow:hidden;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.hero-search .input-group-text{
border:none;
background:#fff;
padding-left:25px;
}

.hero-search .form-control{
border:none;
height:70px;
}

.hero-search .form-control:focus{
box-shadow:none;
}

.hero-search .btn{
margin:10px;
border-radius:40px;
padding:0 35px;
}

/* =========================
CATEGORY SECTION
========================= */

.categories-section{
padding:40px 0 90px;
}

.tool-card-link{
text-decoration:none;
display:block;
}

.tool-card{
border-radius:18px;
overflow:hidden;
transition:.35s;
background:#fff;
}

.tool-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.tool-card-top{
padding:18px;
color:#fff;
min-height:145px;
}

.tool-card-header{
display:flex;
justify-content:space-between;
align-items:center;
}

.tool-icon{
width:48px;
height:48px;
border-radius:50%;
background:rgba(255,255,255,.20);
display:flex;
align-items:center;
justify-content:center;
font-size:18px;
}

.tool-count{
background:rgba(255,255,255,.20);
padding:5px 12px;
border-radius:20px;
font-size:12px;
font-weight:600;
}

.tool-card-body{
margin-top:28px;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

.tool-info h4{
font-size:18px;
font-weight:700;
margin-bottom:5px;
color:#fff;
}

.tool-info p{
margin:0;
font-size:14px;
color:#fff;
opacity:.95;
}

.tool-arrow{
color:#fff;
font-size:18px;
}

.tool-card-footer{
background:#f3f4f6;
padding:14px 18px;
display:flex;
justify-content:space-between;
align-items:center;
font-size:13px;
}

.featured-label{
color:#777;
}

.featured-tool{
font-weight:600;
}

/* =========================
CARD COLORS
========================= */

.pdf-card{
background:linear-gradient(135deg,#7656ff,#6547ea);
}

.image-card{
background:linear-gradient(135deg,#ff7a18,#ff6200);
}

.video-card{
background:linear-gradient(135deg,#e91e63,#d81b60);
}

.ai-card{
background:linear-gradient(135deg,#2d7df6,#2563eb);
}

.file-card{
background:linear-gradient(135deg,#238b94,#1f7f87);
}

/* =========================
STATS SECTION
========================= */

.stats-section{
padding:60px 0;
}

.stats-box{
background:#eef4fb;
border-radius:20px;
padding:40px;
}

.stat-item{
text-align:center;
}

.stat-number{
font-size:60px;
font-weight:800;
color:#2196f3;
}

.stat-label{
color:#374151;
font-size:20px;
}

/* =========================
RESPONSIVE
========================= */

@media(max-width:991px){

.hero-title{
font-size:52px;
}

}

@media(max-width:768px){

.hero-title{
font-size:36px;
}

.hero-subtitle{
font-size:16px;
}

.tool-card{
margin-bottom:20px;
}

.stat-number{
font-size:42px;
}

}

.popular-tools-section{
    padding:100px 0;
}

.section-header{
    text-align:center;
    margin-bottom:40px;
}

.section-header h2{
    font-size:58px;
    font-weight:800;
    color:#111827;
}

.section-header p{
    color:#6b7280;
    font-size:20px;
}

.tool-filter{
    background:#fff;
    border-radius:50px;
    padding:12px;
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:50px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.tool-filter button{
    border:none;
    background:none;
    padding:12px 20px;
    border-radius:30px;
    font-weight:600;
}

.tool-filter button.active{
    background:#2196f3;
    color:#fff;
}

.tool-box{
    background:#fff;
    border-radius:18px;
    padding:20px;
    display:flex;
    gap:15px;
    text-decoration:none;
    color:#111827;
    height:100%;
    transition:.3s;
}

.tool-box:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 30px rgba(0,0,0,.08);
}

.tool-icon{
    width:50px;
    height:50px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.pink{
    background:#ffe3ea;
    color:#ff4f7b;
}

.purple{
    background:#ece8ff;
    color:#7c4dff;
}

.green{
    background:#e8ffe5;
    color:#4caf50;
}

.orange{
    background:#fff0e1;
    color:#ff6b00;
}

.tool-box h5{
    font-weight:700;
    margin-bottom:5px;
}

.tool-box span{
    font-size:13px;
    color:#2563eb;
}

.tool-box p{
    margin-top:10px;
    color:#6b7280;
}
.hero-title{
    font-size:72px;
    font-weight:800;
    line-height:1.1;
    white-space:nowrap;
}
.hero-title{
    font-size:72px;
    font-weight:800;
    line-height:1.1;
    color:#111827;
    margin-bottom:20px;
}

.hero-highlight{
    display:inline-block;
    padding:8px 20px;
    color:#fff;
    border-radius:4px;
}

/* Tablet */

@media (max-width:991px){

    .hero-title{
        font-size:56px;
    }

}

/* Mobile */

@media (max-width:768px){

    .hero-title{
        font-size:42px;
        line-height:1.2;
        white-space:normal;
    }

    .hero-highlight{
        padding:6px 14px;
    }

}