header {
            background-color: var(--white);
            box-shadow: var(--shadow);
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 15px 0;
        }

        .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .logo span {
            color: var(--secondary-color);
        }

        .nav-links {
            display: flex;
            gap: 30px;
        }

        .nav-links a {
            font-weight: 500;
            color: var(--dark-color);
            position: relative;
        }

        .nav-links a:hover {
            color: var(--primary-color);
        }

        .mobile-menu-btn {
            display: none;
            font-size: 1.5rem;
            cursor: pointer;
        }


        .popup{
            position: fixed;
            bottom: 20px;
            right: 30px;
            padding: 16px 25px;
            border-radius: 14px;
            color: white;
            font-size: 18px;
            font-weight: 600;
            z-index: 999;
            transform: translateX(400px);
            transition: .4s;
        }

        .popup.show{
            transform: translateX(0);
        }

        .offline {
            background-color: #ef4444;
            box-shadow: 0 10px 30px #ef44444d;
        }

        .online {
            background-color: #00ff26;
            box-shadow: 0 10px 30px #186b054d;
        }