/* =========================================================================
   Subtitle
   ========================================================================= */

.index__subtitle {
    margin: 0 auto;
    text-align: center;
    line-height: 1.3;
    font-size: 22px;
    max-width: 640px;
}



/* =========================================================================
   Features
   ========================================================================= */

.index__features {
    padding: 0 16px;
    padding: 0;
}

.is-mobile .index__features {
    padding: 0;
}



/* =========================================================================
   Feature
   ========================================================================= */

.index__feature {
    display:flex;
    margin: 96px 0 128px;
    margin: 58px 0 128px;
    margin: 58px 0 96px;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 28px;
}

.is-mobile .index__feature {
    display:block;
    margin: 16px 0 24px;
    text-align: center;
}

.is-mobile .index__feature:last-child {
    margin-bottom: 64px;
}



/* =========================================================================
   Feature Text
   ========================================================================= */

.index__feature-text {
    width:400px;
    width: 320px;
    width: 280px;
}

.is-mobile .index__feature-text {
    width: auto;
    max-width: 480px;
    margin: 0 auto;
    padding: 16px 0;
}

.index__feature-text.ALIGN-RIGHT {
    order:2;
}

.is-mobile .index__feature-text.ALIGN-RIGHT {
    order:1;
} 



/* =========================================================================
   Feature Title
   ========================================================================= */

.index__feature-title {
    margin: 18px 0 4px;
    font-family: Raleway, 'Segoe UI', sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    /* font-size: 1.4em; */
}

.is-mobile .index__feature-title {
    font-size: 1.4em;
    font-size: 1.3em;
}



/* =========================================================================
   Feature Image
   ========================================================================= */

.index__feature-image {
    flex: 1;
}



/* =========================================================================
   Contact
   ========================================================================= */

.index__contact {
    text-align: center;
    padding: 48px 48px 16px;
    padding: 48px 132px 16px;
    color: #fff;
    max-width: 420px;
    max-width: 320px;
    margin: 64px auto;
    border-radius: 32px;
    background: #0780ff;
    transition: var(--dark-mode-transition);
}

.dark .index__contact {
    background: #0067d5;
}

.is-mobile .index__contact {
    padding: 38px 32px 12px;
    margin: 32px auto;
}   



/* =========================================================================
   Contact Title
   ========================================================================= */

.index__contact-title {
    font-size: 28px;
    line-height: 1.1;
    font-weight: bold;
    margin: 0 0 24px;
}

.is-mobile .index__contact-title {
    font-size: 22px;
    margin: 0 0 20px;
} 



/* =========================================================================
   Contact Paragraph
   ========================================================================= */

.index__contact-paragraph {
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 20px;
    margin: 0 0 24px;
}

.is-mobile .index__contact-paragraph {
        font-size: 18px;
        margin: 0 0 16px;
}



/* =========================================================================
   Contact Link
   ========================================================================= */

a.index__contact-link {
    color: #fff;
    font-weight: 600;
    padding: 0 2px;
}



/* =========================================================================
   Heart Emoji
   ========================================================================= */

.index__heart-emoji {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.2em;
}