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

.tool-page{
padding-top:130px;
}

.tool-header{
text-align:center;
margin-bottom:40px;
}

.tool-header h1{
font-size:48px;
line-height:1.2;
margin-bottom:15px;
color:#fff;
}

.tool-header p{
max-width:700px;
margin:auto;
color:#cbd5e1;
}

/* GRID */

.tool-layout{
display:grid;
grid-template-columns:2fr 1fr;
gap:30px;
align-items:start;
}

/* TOOL CARD */

.tool-card{
background:#fff;
padding:35px;
border-radius:25px;
box-shadow:0 10px 40px rgba(0,0,0,.08);
}

.tool-card h2{
color:#1e293b;
margin-bottom:25px;
}

/* UPLOAD */

.upload-area{
border:2px dashed #8b5cf6;
padding:60px 20px;
border-radius:20px;
background:#faf7ff;
text-align:center;
cursor:pointer;
}

.upload-area p{
font-size:22px;
font-weight:600;
color:#1e293b;
margin-bottom:10px;
}

.upload-area span{
color:#64748b;
}

.upload-area input{
width:100%;
}

/* PREVIEW */

.preview-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:30px;
}

.preview-card{
background:#f8fafc;
padding:20px;
border-radius:15px;
text-align:center;
}

.preview-card h3{
color:#1e293b;
margin-bottom:15px;
}

.preview-card img{
width:100%;
max-height:250px;
object-fit:contain;
display:none;
}

/* SLIDER */

.slider-box{
margin-top:30px;
}

.slider-box label{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-weight:600;
color:#1e293b;
}

.slider-box input{
width:100%;
}

/* BUTTONS */

.btn-group{
margin-top:30px;
display:flex;
gap:15px;
}

#compressBtn,
#downloadBtn{
padding:15px 30px;
border:none;
border-radius:12px;
font-weight:600;
cursor:pointer;
text-decoration:none;
}

#compressBtn{
background:linear-gradient(135deg,#4f46e5,#9333ea);
color:#fff;
}

#downloadBtn{
background:#10b981;
color:#fff;
display:none;
}

/* FAQ */

.faq-sidebar h2{
color:#fff;
margin-bottom:20px;
}



.faq-card{
background:#fff;
padding:25px;
border-radius:15px;
margin-bottom:15px;
}

.faq-card h3{
color:#1e293b;
margin-bottom:10px;
}

.faq-card p{
color:#475569;
line-height:1.8;
}

/* MOBILE */

@media(max-width:991px){

.tool-layout{
grid-template-columns:1fr;
}

.tool-header h1{
font-size:38px;
}

.preview-grid{
grid-template-columns:1fr;
}

.btn-group{
flex-direction:column;
}

}
/* SEO CONTENT */

.seo-content{
padding:30px 0 60px;
max-width:1000px;
margin:auto;
}

.seo-content h2{
color:#ffffff;
font-size:34px;
margin-bottom:20px;
margin-top:20px;
}

.seo-content p{
color:#cbd5e1;
line-height:1.9;
margin-bottom:20px;
}

.seo-content ul,
.seo-content ol{
padding-left:25px;
margin-bottom:25px;
}

.seo-content li{
color:#cbd5e1;
margin-bottom:10px;
line-height:1.8;
}
.preview-card img{
display:none;
}

#clearBtn{
padding:15px 30px;
border:none;
border-radius:12px;
font-weight:600;
cursor:pointer;
background:#ef4444;
color:#fff;
}

#clearBtn:hover{
background:#dc2626;
}


/* ==========================
   EXPLORE MORE TOOLS
========================== */

.more-tools{
padding:40px 0;
}

.more-tools h2{
text-align:center;
color:#ffffff;
font-size:42px;
margin-bottom:15px;
}

.more-tools p{
text-align:center;
color:#cbd5e1;
max-width:700px;
margin:0 auto 40px;
}

.tools-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.tool-link-card{
background:#ffffff;
padding:30px;
border-radius:20px;
text-decoration:none;
transition:.3s;
}

.tool-link-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.tool-icon{
font-size:42px;
margin-bottom:15px;
}

.tool-link-card h3{
color:#1e293b;
margin-bottom:10px;
}

.tool-link-card p{
color:#64748b;
text-align:left;
margin:0;
}

/* Mobile */

@media(max-width:991px){

.tools-grid{
grid-template-columns:1fr 1fr;
}

}

@media(max-width:768px){

.tools-grid{
grid-template-columns:1fr;
}

}

/* Compression Stats */

.compression-stats{
display:flex;
gap:15px;
margin-top:25px;
flex-wrap:wrap;
}

.stat-box{
background:#f8fafc;
padding:15px 20px;
border-radius:12px;
color:#1e293b;
font-size:14px;
}

.stat-box.success{
background:#dcfce7;
color:#166534;
}

/* Success Message */

.success-message{
margin-top:20px;
padding:15px;
background:#dcfce7;
color:#166534;
border-radius:12px;
font-weight:600;
}

.breadcrumb{
margin-bottom:20px;
font-size:14px;
color:#cbd5e1;
}

.breadcrumb a{
color:#8b5cf6;
text-decoration:none;
}

.breadcrumb span{
margin:0 5px;
}

.resize-controls{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:30px;
}

.input-group label{
display:block;
margin-bottom:8px;
font-weight:600;
color:#1e293b;
}

.input-group input{
width:100%;
padding:15px;
border:1px solid #ddd;
border-radius:12px;
}

.checkbox-box{
margin-top:20px;
color:#1e293b;
}

.checkbox-box label{
display:flex;
align-items:center;
gap:10px;
}

@media(max-width:768px){

.resize-controls{
grid-template-columns:1fr;
}

}

#resizeBtn{
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.3s;
}

#resizeBtn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(79,70,229,.3);
}


.tool-btn{
    background: linear-gradient(135deg,#4f46e5,#9333ea);
    color:#fff;
    border:none;
    padding:15px 30px;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all .3s ease;
    min-width:200px;
    height:55px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.tool-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(79,70,229,.3);
}


.faq-item{
background:#fff;
border-radius:15px;
margin-bottom:12px;
overflow:hidden;
}

.faq-question{
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 22px;
cursor:pointer;
}

.faq-question h3{
margin:0;
font-size:20px;
line-height:1.4;
color:#1e293b;
}

.faq-icon{
font-size:26px;
font-weight:700;
color:#8b5cf6;
flex-shrink:0;
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height .3s ease;
}

.faq-answer p{
padding:0 22px 18px;
margin:0;
font-size:15px;
line-height:1.7;
color:#64748b;
}

/* First Open */

.faq-item.active .faq-answer{
max-height:200px;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
}