.home {
    width: 100%;
    background-size: cover;
    position: relative;
    min-height: 60vh;
    padding: 160px 0 60px 0;
}

    .home h2 {
        font-size: 64px;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--color-secondary);
        font-family: var(--font-primary);
    }

        .home h2 span {
            color: var(--color-primary);
        }

    .home p {
        color: #4f4f5a;
        font-weight: 400;
        margin-bottom: 30px;
    }

    .home .btn-find-recipe {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 36px;
        border-radius: 50px;
        transition: 0.5s;
        color: #fff;
        background: var(--color-primary);
        box-shadow: 0 8px 28px rgba(206, 18, 18, 0.2);
    }

        .home .btn-find-recipe:hover {
            background: rgba(206, 18, 18, 0.8);
            box-shadow: 0 8px 28px rgba(206, 18, 18, 0.45);
        }

    .home .btn-create-meal-plan {
        font-weight: 500;
        font-size: 14px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 12px 36px;
        border-radius: 50px;
        transition: 0.5s;
        color: var(--color-secondary);
        background: #fff;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
        margin-left: 12px;
    }

        .home .btn-create-meal-plan i {
            color: var(--color-primary);
            font-size: 32px;
            transition: 0.3s;
            line-height: 0;
            margin-right: 8px;
        }

        .home .btn-create-meal-plan:hover {
            color: var(--color-primary);
        }

            .home .btn-create-meal-plan:hover i {
                color: rgba(206, 18, 18, 0.8);
            }

@media (max-width: 640px) {
    .home h2 {
        font-size: 36px;
    }

    .home .btn-get-started,
    .home .btn-create-meal-plan {
        font-size: 14px;
    }
}