* {
    --primary: #1C9BF6;
    --supplement: #ED3237;
    --secondary: #FFFFFF;
}

/* Hero Section */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 2vw, 200px) 0px;
}

.hero_container {
    display: grid;
    justify-items: center;
    align-items: end;
}

.hero_container > * {
    grid-area: 1 / 1;
}

.hero_poster {
    width: 100vw;
    border-top: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
}

.hero_header {
    color: var(--primary);
    margin-bottom: 1.5vw;

    font-size: clamp(1.6rem, 4vw, 3.5rem);
    text-align: center;
}

.hero_buttons {
    display: flex;
    margin-bottom: 5vw;
    gap: 20px;
}

/* Introduction Section */
.introduction {
    background-color: var(--primary);
}

.introduction_content {
    color: var(--secondary);
}

/* Purpose Section */
.purpose {
    background-color: var(--secondary);
}

.purpose_content ul {
    margin-left: 20px;
}

.purpose_content h2 {
    font-size: clamp(1.2rem, 2vw, 2rem);
}

/* Shared Styles From Introduction Section and Purpose Section */
.introduction_content h1, .purpose_content h1 {
    font-size: clamp(1.8rem, 3vw, 3rem);
}

.introduction_content p, .purpose_content p, .purpose_content li{
    font-size: clamp(1rem, 1vw + 0.4rem, 1.25rem);
    line-height: 1.7;
}

.introduction, .purpose {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1rem, 4vw, 5rem);
    width: 100%;
    padding: clamp(3rem, 6vw, 7rem) clamp(1rem, 4vw, 4rem);
}

.introduction_content, .purpose_content {
    display: flex;
    flex-direction: column;
    width: clamp(100px, 50vw, 1000px);
    max-width: 850px;
    gap: 1.2vw;
}

/* Phone Padding */
@media (max-width: 600px) {
    .introduction, .purpose {
        padding: 2.5rem 16px;
    }

    .introduction_content, .purpose_content {
        width: 100%;
        max-width: none;
        gap: 3vw;
    }
}