/*****************************************************************************
 * hero
 *****************************************************************************/
@media (min-width: 750px) {
    .hero-container {
        width: 100vw;
        aspect-ratio: 1307 / 490;
        background: url(/wp-content/themes/etomo/assets/image/revo/hero.png?rev=202510151957);
        background-size: cover;
        display: grid;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .overview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 40px;
        margin-top: 105px;
    }

    .overview-container__logo {
        width: 236px;
    }

    .overview-container__description {
        font-size: 20px;
    }

    .features-container {
        padding: 75px 0 50px 0;
        text-align: center;
        background-color: #E7F7ED;
        margin-top: 105px;
    }

    .features-container > .features-container__title {
        font-size: 40px;
        font-weight: 600;
        color: #0DB14B;
        text-align: center;
        width: 90%;
        display: block;
        margin: 0 auto 25px;
        line-height: 1.5;
    }

    .features-container > .features-container__list {
        margin-top: 60px;
    }

    .features-container-list {
        display: flex;
        flex-wrap: wrap;
        width: calc(280px * 3 + 35px * 2);
        gap: 35px;
        margin: 0 auto;
        justify-content: center;
    }

    .features-container-list > .features-container-list__item {
        width: 280px;
        background-color: white;
        border-radius: 40px;
        height: 352px;
    }

    .features-container-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .features-container-list-item > .features-container-list-item__icon {
        width: 192px;
        height: 194px;
    }

    .features-container-list-item > .features-container-list-item__text {
        padding: 0 20px;
        margin: auto 0;
    }

    .features-container-list-item > .features-container-list-item__text > span {
        font-size: 10px;
        display: block;
        margin-top: 40px;
    }

    .qualification-container {
        margin-top: 105px;
        display: grid;
        grid-template:
        "title title title" auto
        "qualification separator requirement" auto / 384px 1px 445px;
        justify-content: center;
        gap: 90px 100px;
    }

    .qualification-container > .qualification-container__title {
        grid-area: title;
        font-size: 40px;
        font-weight: 600;
        color: #0DB14B;
        text-align: center;
        width: 90%;
        display: block;
        line-height: 1.5;
    }

    .qualification-container > .qualification-container__qualification {
        grid-area: qualification;
    }

    .qualification-container > .qualification-container__separator {
        grid-area: separator;
        background-color: #1A1A1A;
    }

    .qualification-container > .qualification-container__requirement {
        grid-area: requirement;
    }

    .condition-list-container {
        display: flex;
        flex-direction: column;
        gap: 65px;
    }

    .condition-list-container > .condition-list-container__title {
        font-size: 30px;
        font-weight: 600;
        color: #1A1A1A;
        text-align: center;
    }

    .condition-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .condition-list-item {
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: 70px;
        align-items: center;
    }

    .condition-list-item > .condition-list-item__icon {
        width: 70px;
        height: 70px;
    }

    .condition-list-item > .condition-list-item__text {
        font-size: 20px;
        line-height: 23px;
        font-weight: 600;
    }
}

@media (max-width: 749px) {
    .hero-container {
        width: 100vw;
        aspect-ratio: 1307 / 490;
        background: url(/wp-content/themes/etomo/assets/image/revo/hero.png?rev=202510151957);
        background-size: cover;
        display: grid;
        align-items: flex-end;
        justify-content: center;
    }

    .overview-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
        margin-top: 30px;
    }

    .overview-container__logo {
        width: 180px;
    }

    .overview-container__description {
        font-size: 14px;
    }

    .features-container {
        padding: 48px 18px 50px;
        text-align: center;
        background-color: #E7F7ED;
        margin-top: 50px;
    }

    .features-container > .features-container__title {
        font-size: 22px;
        font-weight: 600;
        color: #0DB14B;
        text-align: center;
        width: 90%;
        display: block;
        margin: 0 auto 30px;
        line-height: 1.5;
    }

    .features-container > .features-container__list {
        margin-top: 30px;
    }

    .features-container-list {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin: 0 auto;
        justify-content: center;
    }

    .features-container-list-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(50vw - 24px);
    }

    .features-container-list > .features-container-list__item {
        background-color: white;
        border-radius: 20px;
    }

    .features-container-list-item > .features-container-list-item__icon {
        width: 142px;
        height: 145px;
    }

    .features-container-list-item > .features-container-list-item__text {
        padding: 0 10px 20px;
        margin: auto 0;
        font-size: 12px;
    }

    .qualification-container {
        margin-top: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
        padding: 0 28px;
    }

    .qualification-container > .qualification-container__title {
        grid-area: title;
        font-size: 22px;
        font-weight: 600;
        color: #0DB14B;
        text-align: center;
        display: block;
        line-height: 1.5;
    }

    .qualification-container > .qualification-container__separator {
        background-color: #1A1A1A;
        height: 1px;
        width: 100%;
    }

    .condition-list-container {
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }

    .condition-list-container > .condition-list-container__title {
        font-size: 20px;
        font-weight: 600;
        color: #1A1A1A;
        text-align: center;
    }

    .condition-list {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .condition-list-item {
        display: flex;
        flex-direction: row;
        gap: 10px;
        height: 45px;
        align-items: center;
    }

    .condition-list-item > .condition-list-item__icon {
        width: 45px;
        height: 45px;
    }

    .condition-list-item > .condition-list-item__text {
        font-size: 14px;
        line-height: 20px;
        font-weight: 600;
    }
}

@media (min-width: 1050px) {
    .calculation-container {
        margin: 106px 56px !important;
    }
}

@media (max-width: 1049px) {
    .calculation-container {
        margin: 50px 14px !important;
    }
}