.tool-box{
background:#ffffff;
border:1px solid #e9ecef;
border-radius:16px;
padding:25px;
}

.crop-container{
max-height:500px;
overflow:hidden;
border-radius:14px;
background:#f8f9fa;
}

#image{
max-width:100%;
display:block;
}

.preview-box{
width:100%;
aspect-ratio:16/9;
overflow:hidden;
border-radius:12px;
border:3px solid #007bff;
background:#ffffff;
box-shadow:0 4px 20px rgba(0,0,0,.08);
}

.preview-box img{
width:100%;
height:100%;
object-fit:cover;
}

.content-box{
background:#ffffff;
border:1px solid #e9ecef;
border-radius:14px;
padding:30px;
}

.related-card{
border:1px solid #e9ecef;
border-radius:12px;
padding:20px;
background:#ffffff;
height:100%;
transition:.3s ease;
}

.related-card:hover{
transform:translateY(-3px);
box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.tool-icon-card{height:100%;border:1px solid #e4e8ed;border-radius:8px;padding:20px;background:#fff}
.tool-icon-card img{width:70px;height:70px;object-fit:contain;margin-bottom:12px}

@media(max-width:767.98px){

.tool-box,
.content-box{
padding:20px 15px;
}

}