body { margin:0; font-family:Arial; background:#f4f8ff;}
header {background:linear-gradient(135deg,#1565c0,#1e88e5); color:white; padding:25px; text-align:center;}
nav {background:#0d47a1; display:flex; justify-content:center;}
nav a {color:white; padding:14px; text-decoration:none; font-weight:bold;}
nav a:hover {background:#1565c0;}
.hero {background:linear-gradient(rgba(13,71,161,0.6),rgba(30,136,229,0.6)),url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e') center/cover; color:white; text-align:center; padding:120px;}
.container {max-width:1000px; margin:auto; padding:20px;}
.card {background:white; padding:20px; margin-bottom:20px; border-radius:10px;}
footer {background:#0d47a1; color:white; text-align:center; padding:15px;}


.hero-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.hero-text {
    flex: 1;
    min-width: 300px;
}

.hero-petition {
    flex: 0 0 500px;
    text-align: center;
}

.hero-petition img {
    width: 100%;
    max-width: 320px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.2s ease;
}

.hero-petition img:hover {
    transform: scale(1.02);
}

.hero-petition a {
    text-decoration: none;
}

.petition-button {
    margin-top: 12px;
    background: #c62828;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: bold;
}




.event-button {
    display: inline-block;
    margin-top: 20px;
    padding: 14px 28px;
    background: #d62828;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    transition: all 0.3s ease;
}

.event-button:hover {
    background: #a61c1c;
    transform: scale(1.05);
}