.hero{

background:linear-gradient(135deg,#f8fbff,#eef5ff);

padding:80px 0;

}

.hero h1{

font-weight:800;

line-height:1.2;

}

.hero img{

max-height:500px;

animation:float 4s ease-in-out infinite;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

.hero .form-control{

border-radius:15px;

padding:15px 20px;

}

.hero .btn{

border-radius:12px;

padding:12px 28px;

}

.search-box{
    margin-top:40px;
    display:flex;
    gap:10px;
}

.search-box input{
    border-radius:12px;
    height:60px;
}

.search-box button{
    width:70px;
    border-radius:12px;
}

.popular-tools{
    margin-top:25px;
}

.popular-tools span{
    margin-right:10px;
}

.popular-tools a{
    display:inline-block;
    margin:5px;
    padding:8px 16px;
    background:#ffffff22;
    color:#fff;
    border-radius:30px;
    text-decoration:none;
    transition:.3s;
}

.popular-tools a:hover{
    background:#fff;
    color:#2563eb;
}
.category-card{
    background:#fff;
    border-radius:16px;
    padding:35px;
    text-align:center;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
    cursor:pointer;
}

.category-card:hover{
    transform:translateY(-8px);
}

.category-card i{
    font-size:48px;
    color:#2563eb;
}

.category-card h5{
    margin-top:20px;
    font-weight:600;
}

.category-card p{
    color:#777;
}

.tool-card{
    background:#fff;
    padding:30px;
    border-radius:16px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
    transition:.3s;
}

.tool-card:hover{
    transform:translateY(-8px);
}

.tool-card i{
    font-size:42px;
    color:#0d6efd;
}






.hero{

padding:90px 0;

background:linear-gradient(135deg,#eef5ff,#ffffff);

}

.hero h1{

font-size:52px;

font-weight:700;

}

.hero p{

font-size:20px;

}

#searchResult{

position:absolute;

width:100%;

background:#fff;

border-radius:10px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

display:none;

z-index:1000;

}

.stat-card{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

transition:.3s;

height:100%;

}

.stat-card:hover{

transform:translateY(-8px);

}

.stat-card i{

font-size:40px;

color:#0d6efd;

margin-bottom:15px;

}

.stat-card h2{

font-size:40px;

font-weight:700;

margin-bottom:8px;

}

.stat-card p{

color:#666;

margin:0;

font-size:18px;

}

.category-card{

transition:.3s;

border-radius:18px;

}

.category-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(0,0,0,.12);

}

.category-card i{

font-size:55px;

}

.category-card .btn{

margin-top:15px;

}


.tool-card{

border-radius:18px;

transition:.3s;

}

.tool-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 40px rgba(0,0,0,.10);

}

.tool-card i{

font-size:55px;

}

.tool-card .btn{

margin-top:10px;

}

.latest-tool-card{

border:none;

border-radius:18px;

transition:.3s;

box-shadow:0 8px 25px rgba(0,0,0,.08);

}

.latest-tool-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(0,0,0,.12);

}

.latest-tool-card i{

font-size:55px;

}

.latest-tool-card .btn{

margin-top:10px;

border-radius:10px;

}

.footer-link{

color:#d1d5db;

text-decoration:none;

transition:.3s;

}

.footer-link:hover{

color:#0d6efd;

padding-left:6px;

}

.footer-social{

display:inline-flex;

align-items:center;

justify-content:center;

width:40px;

height:40px;

background:#343a40;

color:#fff;

border-radius:50%;

margin-left:10px;

text-decoration:none;

transition:.3s;

}

.footer-social:hover{

background:#0d6efd;

color:#fff;

transform:translateY(-3px);

}

#loader{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:white;

z-index:9999;

align-items:center;

justify-content:center;

}

#topBtn{

position:fixed;

right:20px;

bottom:20px;

display:none;

}

.navbar{

padding:15px 0;

}

.navbar-nav .nav-link{

font-weight:600;

margin-left:10px;

transition:.3s;

}

.navbar-nav .nav-link:hover{

color:#0d6efd;

}

.dropdown-menu{

border:none;

border-radius:12px;

box-shadow:0 10px 30px rgba(0,0,0,.1);

}

.dropdown-item{

padding:10px 20px;

}

.dropdown-item:hover{

background:#f5f9ff;

color:#0d6efd;

}
.drop-zone { 
            border: 2px dashed #0d6efd; 
            padding: 2rem; 
            text-align: center; 
            border-radius: 8px; 
            transition: 0.3s; 
            background-color: #fff;
            cursor: pointer;
        }
        .drop-zone.border-primary { background-color: #e9ecef; }
        .pdf-item { cursor: grab; }
        .pdf-item:active { cursor: grabbing; }
        .pdf-icon { font-size: 2.5rem; color: #dc3545; }
        .filename-text {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
        }

        .file-info-card { background-color: #fff; border-left: 4px solid #198754; }
        .savings-badge { font-size: 1.1rem; }
           .preview-img { width: 100%; height: 200px; object-fit: contain; background-color: #e9ecef; border-bottom: 1px solid #ddd; }
            .page-preview-container {
            height: 260px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #e9ecef;
            border-bottom: 1px solid #ddd;
            overflow: hidden;
            padding: 10px;
        }
        .page-canvas {
            max-width: 100%;
            max-height: 100%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            transition: transform 0.3s ease-in-out;
        }
        .savings-badge { font-size: 1.1rem; }
        
        /* Custom range slider styling */
        input[type=range] {
            height: 26px;
            -webkit-appearance: none;
            margin: 10px 0;
            width: 100%;
            background: transparent;
        }
        input[type=range]:focus { outline: none; }
        input[type=range]::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            cursor: pointer;
            background: #dee2e6;
            border-radius: 4px;
        }
        input[type=range]::-webkit-slider-thumb {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background: #198754;
            cursor: pointer;
            -webkit-appearance: none;
            margin-top: -6px;
        }

         /* Custom range slider styling */
        input[type=range] { height: 26px; -webkit-appearance: none; margin: 10px 0; width: 100%; background: transparent; }
        input[type=range]:focus { outline: none; }
        input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 8px; cursor: pointer; background: #dee2e6; border-radius: 4px; }
        input[type=range]::-webkit-slider-thumb { height: 20px; width: 20px; border-radius: 50%; background: #198754; cursor: pointer; -webkit-appearance: none; margin-top: -6px; }
        .nav-tabs .nav-link { color: #495057; font-weight: 500; }
        .nav-tabs .nav-link.active { font-weight: bold; color: #0d6efd; }

        .img-container {
            width: 100%;
            max-height: 500px;
            background-color: #212529;
            border-radius: 4px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .img-container img {
            max-width: 100%;
            display: block;
        }
        
        /* Live Preview Constraints */
        .preview-box {
            width: 100%;
            height: 200px;
            overflow: hidden;
            border-radius: 8px;
            border: 2px solid #ddd;
            background-color: #e9ecef;
        }
        
        /* Toolbar buttons */
        .toolbar-btn { margin-bottom: 0.5rem; }

        .navbar{
    height:70px;
    padding:0 1rem;
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
}

.logo-img{
    width:auto;
   height: 175px;
    max-height: 200px;
    object-fit:contain;
    display:block;
}

.logo-text{
    font-size:28px;
    font-weight:700;
    color:#2563eb;
    line-height:1;
}
        
      @media (max-width:576px){
    .logo-img{
        height:42px;
    }
}

.navbar-brand{
    display:flex;
    align-items:center;
    margin:0;
    padding:0;
}

/* Desktop Logo */
.logo-desktop{
    display:block;
    height:170px;
    width:auto;
}

/* Mobile Icon */
.logo-mobile{
    display:none;
    height:42px;
    width:auto;
}

/* Tablet */
@media (max-width:991px){

    .logo-desktop{
        height:120px;
    }

}

/* Mobile */
@media (max-width:576px){

    .logo-desktop{
        display:none;
    }

    .logo-mobile{
        display:block;
    }

    .navbar{
        min-height:60px;
    }

}