* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: url("images/background.jpg") no-repeat center center fixed;
    background-size: cover;
}

/* Navigation */

nav {
    background: #222;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 15px;
    flex-wrap: wrap;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    transition: 0.3s;
}

nav a:hover {
    background: white;
    color: black;
}

/* Hero Section */

.hero {
    text-align: center;
    color: white;
    padding: 100px 20px;
    background: rgba(0, 0, 0, 0.45);
}

.hero h1 {
    font-size: 42px;
    margin-bottom: 15px;
}

.hero p {
    font-size: 20px;
    margin-bottom: 25px;
}

.btn {
    display: inline-block;
    background: #ff4d6d;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.btn:hover {
    background: #e63956;
}

/* Cards */

.info {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
    flex-wrap: wrap;
}

.card {
    background: rgba(255,255,255,0.95);
    width: 260px;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Mobile */

@media (max-width: 768px) {

    nav {
        flex-direction: column;
    }

    .hero h1 {
        font-size: 30px;
    }

    .hero p {
        font-size: 17px;
    }
}
.register-box{
    width:90%;
    max-width:500px;
    margin:40px auto;
    background:rgba(255,255,255,0.95);
    padding:30px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.3);
}

.register-box h1{
    text-align:center;
    margin-bottom:20px;
}

.register-box input,
.register-box select{
    width:100%;
    padding:10px;
    margin-top:5px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:16px;
}

.register-box button{
    width:100%;
    padding:12px;
    background:#ff4d6d;
    color:white;
    border:none;
    border-radius:5px;
    font-size:18px;
    cursor:pointer;
}

.register-box button:hover{
    background:#e63956;
}
/* ==========================
   Register & Login Box
========================== */

.register-box{
    width: 420px;
    max-width: 95%;
    margin: 40px auto;
    padding: 30px;
    background: rgba(255,255,255,0.90);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.register-box h1{
    text-align: center;
    color: #d81b60;
    margin-bottom: 20px;
}

.register-box label{
    font-weight: bold;
    color: #333;
}

.register-box input,
.register-box select,
.register-box textarea{
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    box-sizing: border-box;
}

.register-box textarea{
    resize: vertical;
}

.register-box button{
    width: 100%;
    padding: 12px;
    background: #d81b60;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}

.register-box button:hover{
    background: #ad1457;
}

.register-box a{
    color: #d81b60;
    text-decoration: none;
    font-weight: bold;
}

.register-box a:hover{
    text-decoration: underline;
}
.member-card{
    background:#ffffff;
    border-radius:10px;
    padding:20px;
    margin-bottom:20px;
    box-shadow:0 0 10px rgba(0,0,0,0.2);
}

.member-card h3{
    color:#d81b60;
}

.member-card button{
    background:#d81b60;
    color:white;
    border:none;
    padding:10px 20px;
    border-radius:6px;
    cursor:pointer;
}

.member-card button:hover{
    background:#ad1457;
}
/* ===== Profile Card ===== */

.profile-card{
    width:420px;
    max-width:95%;
    margin:40px auto;
    padding:25px;
    background:#ffffff;
    border-radius:15px;
    box-shadow:0 0 15px rgba(0,0,0,0.2);
    text-align:center;
}

.profile-card img{
    width:150px;
    height:150px;
    border-radius:50%;
    border:4px solid #d81b60;
    margin-bottom:15px;
}

.profile-card h2{
    color:#d81b60;
    margin-bottom:15px;
}

.profile-card p{
    text-align:left;
    margin:8px 0;
    font-size:16px;
}

.profile-card button{
    width:100%;
    padding:12px;
    background:#d81b60;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

.profile-card button:hover{
    background:#ad1457;
}
.register-box hr{
    margin:20px 0;
}

.register-box h3{
    color:#d81b60;
    margin-bottom:15px;
}

.register-box p{
    font-size:18px;
    margin:10px 0;
}
/* ===== Footer ===== */

footer{
    background:#d81b60;
    color:white;
    text-align:center;
    padding:25px;
    margin-top:40px;
}

footer h3,
footer h4{
    margin-bottom:10px;
}

footer a{
    color:white;
    text-decoration:none;
    margin:0 8px;
}

footer a:hover{
    text-decoration:underline;
}

footer hr{
    margin:15px 0;
}
/* Success Stories Page */

.container{
    width:90%;
    max-width:900px;
    margin:40px auto;
    background:rgba(255,255,255,0.90);
    padding:30px;
    border-radius:12px;
}

.container h1{
    text-align:center;
    color:#d63384;
    margin-bottom:20px;
}

.container h2{
    color:#333;
    margin-top:20px;
}

.container p{
    font-size:18px;
    line-height:1.7;
    color:#444;
}

.container button{
    background:#d63384;
    color:white;
    border:none;
    padding:12px 25px;
    border-radius:8px;
    cursor:pointer;
    font-size:16px;
}

.container button:hover{
    background:#b0256d;
}

.button-group{
    display:flex;
    gap:10px;
    margin-top:10px;
}

.button-group button{
    padding:8px 15px;
    cursor:pointer;
}

.button-group{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-top:10px;
}

.button-group .btn{
    display:inline-block;
    text-decoration:none;
    text-align:center;
}

.user-guide{
    max-width:800px;
    margin:40px auto;
    background:#ffffff;
    padding:30px;
    border-radius:10px;
    box-shadow:0 0 10px #cccccc;
    text-align:center;
}

.user-guide h1{
    color:#0066cc;
}

.continue-btn{
    display:inline-block;
    background:green;
    color:white;
    padding:12px 25px;
    text-decoration:none;
    border-radius:5px;
    font-size:18px;
    font-weight:bold;
}

.continue-btn:hover{
    background:#006400;
}

.logout-btn{
    position:absolute;
    top:15px;
    right:20px;
    background:#dc3545;
    color:#fff;
    padding:8px 15px;
    text-decoration:none;
    border-radius:5px;
    font-weight:bold;
}

.header{
    position:relative;
}

.free-registration{
    color:red;
    text-align:center;
    font-size:28px;
    font-weight:bold;
}

.register-text{
    text-align:center;
    font-size:16px;
    color:#555;
    font-weight:bold;
}

.register-box button{
    margin: 8px 6px;
}


.edit-btn{
    display:inline-block;
    background:#d81b60;
    color:#fff;
    padding:10px 20px;
    text-decoration:none;
    border-radius:5px;
    font-weight:bold;
}

.edit-btn:hover{
    background:#ad1457;
}