/* =========================
PAGE SETUP
========================= */

html {
box-sizing: border-box;
}

body {
margin: 0;
padding: 0;

background-color: #fffafc;
color: #454052;

font-family: Arial, Helvetica, sans-serif;

line-height: 1.7;
}

/* =========================
HERO / HEADER
========================= */

.hero {
padding: 70px 20px 65px;

text-align: center;

background: linear-gradient(
135deg,
#c8d9f2,
#e6d5f5,
#f8d7e3
);

border-bottom: 8px solid #f6d58a;

box-shadow: 0 5px 20px rgba(120, 100, 140, 0.12);
}

/* Small label */

.campaign-label {
margin: 0 0 15px;

color: #6d6680;

font-size: 13px;
font-weight: bold;

letter-spacing: 3px;
}

/* Main title */

.hero h1 {
margin: 0;

color: #51486b;

font-size: 64px;
font-weight: 800;

line-height: 1.1;

letter-spacing: 1px;
}

/* Subtitle */

.hero h2 {
margin: 12px 0 20px;

color: #6d617c;

font-size: 28px;
font-weight: 600;
}

/* Slogan */

.slogan {
max-width: 650px;

margin: 0 auto;

color: #5f5870;

font-size: 18px;
font-style: italic;
}

/* Decorative stars */

.hero-decoration {
margin-top: 25px;

color: #d7a94b;

font-size: 25px;

letter-spacing: 10px;
}

/* =========================
MAIN
========================= */

main {
max-width: 950px;

margin: 50px auto;
padding: 0 25px;
}

/* =========================
SECTIONS
========================= */

section {
margin-bottom: 45px;
padding: 40px;

background-color: white;

border-radius: 18px;

box-shadow: 0 6px 22px rgba(100, 85, 120, 0.08);
}

/* Section headings */

section h2 {
margin-top: 5px;
margin-bottom: 20px;

color: #5b5272;

font-size: 32px;
}

/* Paragraphs */

section p {
font-size: 17px;
}

/* =========================
SECTION TAGS
========================= */

.section-tag {
display: inline-block;

margin: 0 0 8px;

padding: 5px 14px;

background-color: #f8d7e3;

color: #806174;

border-radius: 20px;

font-size: 12px;
font-weight: bold;

letter-spacing: 2px;
}

/* =========================
INTRODUCTION
========================= */

.intro {
border-top: 6px solid #bcd7f2;
}

/* =========================
STORY
========================= */

.story {
border-top: 6px solid #d9c5ed;
}

/* Story highlight */

.story-highlight {
margin-top: 25px;
padding: 18px 25px;

background-color: #fff3c9;

border-radius: 12px;

text-align: center;
}

.story-highlight p {
margin: 0;

color: #756544;

font-size: 18px;
font-style: italic;
font-weight: bold;
}

/* =========================
WHY US
========================= */

.why-us {
border-top: 6px solid #c7e5d1;
}

/* Cards container */

.cards {
display: flex;

gap: 20px;

margin-top: 30px;
}

/* Individual cards */

.card {
flex: 1;

padding: 25px;

background-color: #faf7ff;

border: 2px solid #e5dcf2;
border-radius: 15px;

text-align: center;

transition: transform 0.2s ease,
box-shadow 0.2s ease;
}

/* Card hover */

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

box-shadow: 0 10px 20px rgba(100, 85, 120, 0.12);
}

/* Card icons */

.card-icon {
color: #d9a9c2;

font-size: 35px;
}

/* Card headings */

.card h3 {
margin: 10px 0;

color: #635773;

font-size: 21px;
}

/* Card paragraphs */

.card p {
margin-bottom: 0;

font-size: 15px;
}

/* =========================
PLANS
========================= */

.plans {
border-top: 6px solid #f6d58a;
}

/* Plans list */

.plans ul {
margin: 25px 0 0;

padding: 25px 35px;

background-color: #fffaf0;

border-radius: 14px;
}

/* List items */

.plans li {
margin: 14px 0;

font-size: 16px;
}

/* List bullets */

.plans li::marker {
color: #d9a9c2;
}

/* =========================
IMPORTANT TEXT
========================= */

strong {
color: #c47799;
}

/* =========================
BIG CAMPAIGN MESSAGE
========================= */

.campaign-message {
padding: 55px 40px;

background: linear-gradient(
135deg,
#e2effa,
#eee3f8,
#fbe2e9
);

border: none;

text-align: center;
}

/* Campaign heading */

.campaign-message h2 {
margin: 15px 0;

color: #554d6b;

font-size: 38px;
}

/* Campaign text */

.campaign-message p {
max-width: 700px;

margin: 15px auto;

color: #5f596b;
}

/* Stars */

.stars {
color: #d7a94b;

font-size: 22px;

letter-spacing: 8px;
}

/* =========================
ORIGINAL MESSAGE
========================= */

.original-message {
border-top: 6px solid #bcd7f2;
}

/* =========================
VOTE SECTION
========================= */

.vote {
padding: 55px 40px;

background: linear-gradient(
135deg,
#f8d7e3,
#e6d5f5
);

border: none;

text-align: center;
}

/* Vote heading */

.vote h2 {
margin: 10px 0 15px;

color: #584d6b;

font-size: 42px;
}

/* Vote paragraph */

.vote > p {
max-width: 650px;

margin-left: auto;
margin-right: auto;
}

/* Vote slogan */

.vote-slogan {
margin-top: 25px;

color: #77657a;

font-size: 18px;

font-weight: bold;
}

/* Vote stars */

.vote-decoration {
margin-top: 20px;

color: #d7a94b;

font-size: 25px;

letter-spacing: 7px;
}

/* =========================
FOOTER
========================= */

footer {
padding: 40px 20px;

background-color: #d9e6f5;

color: #625f6d;

text-align: center;

border-top: 5px solid #c8d9f2;
}

/* Footer paragraphs */

footer p {
margin: 5px 0;

font-size: 14px;
}

/* Footer campaign name */

footer p:first-child {
color: #554d6b;

font-size: 17px;
font-weight: bold;
}

/* =========================
MOBILE
========================= */

@media (max-width: 700px) {

.hero {
padding: 50px 20px;
}

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

.hero h2 {
font-size: 22px;
}

.slogan {
font-size: 16px;
}

main {
margin: 30px auto;
padding: 0 15px;
}

section {
padding: 28px 22px;

```
border-radius: 14px;
```

}

section h2 {
font-size: 27px;
}

section p {
font-size: 16px;
}

.cards {
flex-direction: column;
}

.campaign-message h2 {
font-size: 30px;
}

.vote h2 {
font-size: 34px;
}

}