body {
            font-family: 'Segoe UI', sans-serif;
            background: #f5f7fb;
        }
        
/* Center card */
.center-box {
    max-width: 420px;
    margin: 120px auto;
}


        
/* NAVBAR */
.custom-navbar {
    position: relative;
    background: white;
    padding: 8px 20px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

/* LOGO */
.logo {
    height: 65px !important;
    width: auto;
    margin-right: 10px;
}



/* BRAND */
.brand {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    margin-left: 5px;
    font-size: 20px;
    font-weight: 700;
    margin-left: 5px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.brand-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 3px;   /* key for stretching effect */
    
    min-width: 300px;
    text-align: center;

    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Main text */
.brand-main {
    color: #1e1e2f;
}

/* Highlight part */
.brand-accent {
    color: #ffcc00;
    margin-left: 5px;
}




/* LOGIN BUTTON (secondary) */
.btn-login {
    background: transparent;
    border: 1px solid #ccc;
    padding: 6px 14px;
    border-radius: 8px;
    font-weight: 500;
}

/* MAIN BUTTON */
.btn-main {
    background: #ffcc00;
    color: black;
    border: none;
    padding: 6px 16px;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s;
}


.btn-main:hover {
    background: #e6b800;
    transform: translateY(-1px);
}


      .hero {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 100px 20px;
            text-align: center;
             position: relative;
        }

        
        .hero h1 {
    font-size: 52px;
    font-weight: 700;
}

        .btn-main {
            background: #ffcc00;
            border: none;
            font-weight: bold;
        }

        .card-box {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            transition: 0.3s;
        }

        .card-box:hover {
            transform: translateY(-5px);
        }

        .section {
            padding: 70px 20px;
        }

        .earn-box {
            background: linear-gradient(135deg, #00c9ff, #92fe9d);
            color: black;
            border-radius: 20px;
            padding: 40px;
            text-align: center;
        }

        .cta {
            background: #111;
            color: white;
            padding: 60px;
            text-align: center;
        }