body{
background:#f5f7fb;
font-family:'Inter',sans-serif;
margin:0;
}

/* LOADER */
#loader{
position:fixed;
width:100%;
height:100%;
background:#fff;
z-index:9999;
display:flex;
align-items:center;
justify-content:center;
}

.spinner{
width:50px;
height:50px;
border:5px solid #ddd;
border-top:5px solid #0d6efd;
border-radius:50%;
animation:spin 1s linear infinite;
}
#searchTool{
border-radius:30px;
padding-left:20px;
}

.pagination .page-link{
border-radius:8px;
margin:0 3px;
}

.pagination .active .page-link{
background:#0d6efd;
border-color:#0d6efd;
}



/* NAV */
.navbar{
box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

/* HERO */
.hero{
background:linear-gradient(135deg,#0d6efd,#6610f2);
color:white;
padding:80px 15px;
text-align:center;
}

.hero h1{
font-weight:700;
font-size:2.5rem;
}

.hero p{
opacity:0.9;
font-size:1.1rem;
}

/* INFO */
.info-box{
background:white;
border-radius:12px;
padding:30px;
box-shadow:0 3px 15px rgba(0,0,0,0.07);
margin-top:-40px;
position:relative;
z-index:1;
}

/* TOOL CARD */
.tool-card{
background:white;
border-radius:14px;
padding:22px;
box-shadow:0 4px 15px rgba(0,0,0,0.08);
text-align:center;
height:100%;
transition:0.3s;
}

.tool-card:hover{
transform:translateY(-6px);
box-shadow:0 6px 20px rgba(0,0,0,0.12);
}

.tool-card h5{
font-weight:600;
}

/* FOOTER */
footer{
background:#212529;
color:#ccc;
padding:30px 15px;
margin-top:60px;
text-align:center;
}

footer a{
color:#aaa;
text-decoration:none;
}

/* OFFCANVAS */
.offcanvas{
width:280px;
}

.offcanvas-body .nav-link{
font-size:18px;
padding:12px 0;
}
@keyframes spin{
100%{transform:rotate(360deg);}
}

/* MOBILE */
@media(max-width:768px){

.hero{
padding:60px 15px;
}

.hero h1{
font-size:2rem;
}

}

.page-box{background:white;padding:30px;border-radius:10px;
box-shadow:0 0 10px rgba(0,0,0,0.1);}
.margintop{
    margin-top: 70px;
}