body{

font-family:'Poppins',sans-serif;
margin:0;
background:#f5f7fa;

}

header{

background:white;
padding:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);

}

.logo{

font-size:24px;
font-weight:600;

}

.hero{

text-align:center;
padding:50px 20px;

}

.hero h1{

font-size:36px;

}

.hero p{

color:#555;

}

#searchBar{

padding:12px;
width:250px;
margin-top:15px;
border-radius:6px;
border:1px solid #ccc;

}

.tools-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
padding:40px;

}

.tool-card{

background:white;
padding:20px;
border-radius:10px;
text-align:center;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
transition:0.2s;

}

.tool-card:hover{

transform:translateY(-5px);

}

.icon{

font-size:40px;

}

button{

background:#2563eb;
color:white;
border:none;
padding:10px 18px;
border-radius:6px;
cursor:pointer;

}

button:hover{

background:#1d4ed8;

}

footer{

text-align:center;
padding:30px;
color:#777;

}

/* Navigation */
header{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:20px 40px;
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.nav a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:500;
transition:0.2s;
}

.nav a:hover{
color:#2563eb;
}

/* About & Contact Sections */
.info-section{
padding:60px 20px;
text-align:center;
background:#fff;
margin:20px auto;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
max-width:800px;
}

.info-section h2{
font-size:28px;
margin-bottom:15px;
}

.info-section p{
color:#555;
font-size:16px;
}