body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #f7fafa 100%);
            /* background-color: #f7fafa; */
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

         

        .main-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 2rem;
        }

        .hero-section {
            padding: 4rem 0;
            text-align: center;
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: auto;
        }

        .mobile-menu-btn {
            display: none;
            background: transparent;
            border: 0;
            padding: 6px;
            cursor: pointer;
        }

        .mobile-menu-btn span {
            display: block;
            width: 26px;
            height: 2px;
            background: #fff;
            margin: 5px 0;
            transition: 0.3s;
        }

       
        .main-nav a:hover {
            background-color: white;
            color:#0b5c70 !important;
            cursor: pointer;
        }

        .tool-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            border: none;
            border-radius: 12px;
            background: white;
            height: 100%;
        }

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

        .tool-icon img {
            width:100px;
        }
        .navbar, footer{
            background-color:#0b5c70;
        }

        .navbar-brand {
            font-size: 30px !important;
            font-weight: 800;
            letter-spacing: -0.5px;
        }
        .logo{
            width:50px;
        }

       
        .btn-gradient {
            background: linear-gradient(90deg, #0b5c70 0%, #32b7d8 100%);
            border: none;
            color: white !important;
            font-weight: 700 !important;
            padding: 0.75rem 1.5rem;
            transition: transform 0.2s;
        }

        .btn-gradient:hover {
            transform: translateY(-2px);
            color: white;
        }

        .file-drop-area {
            border: 2px dashed #ddd;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: border-color 0.3s;
            margin-bottom: 1.5rem;
        }

        .file-drop-area:hover {
            border-color: #0b5c70;
            background-color: #f8f9fa;
        }
        footer{
            color:#ffff;
            font-weight: 900;
        }

            

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

    .mobile-menu-btn {
        display: block;
        margin-left: auto;
    }

    .main-nav {
        display: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        margin-left: 0;
        padding: 15px 0 10px;
        gap: 5px;
    }

    .main-nav.active {
        display: flex;
    }

    .main-nav .btn {
        width: 100%;
        text-align: left;
        padding: 10px 12px;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .main-nav {
        display: flex !important;
    }
}