body { 
    font-family: Arial, sans-serif; 
    margin: 0; 
    background:#f2f2f2; 
    color:#333; 
}
header { 
    background:#007bff; 
    color:white; 
    text-align:center; 
    padding:40px 10px; 
}

.login-btn {
        background: #28a745;
        color: white;
        border: none;
        padding: 10px 18px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 1em;
        transition: background 0.3s;
        margin-top: 15px;
    }
    .login-btn:hover {
        background: #1e7e34;
    }
    header .header-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

header h1 { 
    margin:0; 
    font-size:2em; 
}
header p {
    margin: 10px 0 0 0;
    font-size:1.1em;
}
main { 
    max-width:1000px; 
    margin:40px auto; 
    display:flex; 
    flex-wrap:wrap; 
    gap:20px; 
    justify-content:center; 
}
.plan { 
    background:white; 
    border-radius:12px; 
    padding:25px 20px; 
    width:250px; 
    text-align:center; 
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.plan h2 { 
    margin-top:0; 
    font-size:1.5em; 
}
.plan p { 
    margin:10px 0; 
}
.plan .price { 
    font-size:1.8em; 
    font-weight:bold; 
    margin:15px 0; 
}
.plan button { 
    background:#007bff; 
    color:white; 
    border:none; 
    padding:12px 20px; 
    border-radius:8px; 
    cursor:pointer; 
    transition: background 0.3s;
}
.plan button:hover { 
    background:#0056b3; 
}

footer { 
    text-align:center; 
    padding:20px 10px; 
    margin-top:50px; 
    font-size:0.9em;
    
}

footer a{
    text-decoration: none;
}

@media (max-width:600px){ 
    main { 
        flex-direction:column; 
        align-items:center; 
    } 
    .plan{ 
        width:90%; 
    } 
}