button {
    background-color: var(--clr-orange);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--clr-bg-dark);
    border: none;
    border-radius: 3em;
    padding-block: .3em;
    padding-inline: 1em;
    margin-block: 1em;
}

    button:hover {
        background-color: var(--clr-btn-hover);
    }

ul {
    position: relative;
}

    ul > *:last-child {
        border-bottom: 1px solid var(--clr-bg-dark);
    }


li {
    font-size: var(--fs-500);
    list-style: none;
    padding-left: 1.5em;
    padding-block: .5em;
    border-top: 1px solid var(--clr-bg-dark);
}

    li::before {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="32" height="32" fill="rgba(255, 155, 0, 1)"><path d="m1 14 4-4 8 8L27 4l4 4-18 18z"></path></svg>');
        position: absolute;
        left: 0;
        margin-top: .3em;
    }

.mailto-link-container {
    display: flex;
    justify-content: center;
    margin-block: 1.5rem;
}

.section-welcome {
    padding-inline: 1rem;
    /*font-size: 1.63rem;*/
}

.section-image-welcome {
    /*    display: flex;
    justify-content: center;
*/
}


.section-header-main_header {
    margin-block: 2rem;
    overflow: hidden;
    line-height: 1.1em;
    /*    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;*/
}

.section-header-main_text-container {
    padding-bottom: 2em;
}

.section-header-main_subtitle {
    font-size: var(--fs-600);
    line-height: 1.3em;
    margin-bottom: 2rem;
}

/*    .section-header-main_image-container:before {
        content: '';
        border: 20px solid red;
        border-radius: 50%;
        z-index: 10;
        height: 100%;
    }
*/
.section-header-main_svg {
    position: absolute;
    height: 100%;
}

.section-header-main_image-bg {
    width: 100%;
    height: 100%;
    z-index: 1;
}

.welcome-image-dashboard {
    width: 80%;
}

.section-law_subtitle {
    font-size: var(--fs-500);
    margin-top: 2em;
    margin-bottom: 1em;
}

.section-law_header {
}

.section-law_image-golfer {
    border-radius: 50%;
    margin: 1em;
    width: 70%;
}

.section-documents_header {
    margin-block: 1em;
}

.section-documents_image-planning {
    margin: 1em;
    border-radius: 50%;
    width: 70%;
}

.section-budget_header {
    margin-block: 1em;
}

.section-budget_text-container {
}

.section-start-with-green-admin {
    padding-top: 3em;
}

.start-demo-container,
.start-fees-container {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: 700;
    font-size: var(--fs-500);
    background-repeat: no-repeat;
    background-position: center center;
    margin: 1em;
    background-size: cover;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
}

.start-demo-container {
    grid-column: 2;
    background-image: url("/assets/images/webp/photo demo 144 dpi.webp");
}

.start-fees-container {
    grid-column: 3;
    background-image: url("/assets/images/webp/photo tarifs 144 dpi.webp");
}

.start-fees-text,
.start-demo-text {
    display: -webkit-box;
    /* -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
    overflow: hidden;
    font-size: var(--fs-600);
    text-align: center;
    margin-inline: .8em;
    color: white;
}

.start-with-green-admin-header {
    margin-bottom: 4rem;
    text-align: center;
    grid-column: 2 / span 2 !important;
}

.main-grid {
    display: grid;
}

.section-header-main,
.gap-header-main-pro-1,
.section-law,
.section-budget {
    background-color: var(--clr-bg-grey-light);
}

.section-pro,
.section-documents,
.section-start-with-green-admin {
    background-color: white;
}

@media ( max-width: 1199.99px ) {
    .hide-on-small-screens {
        display: none;
    }

    .section-header-main {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .section-pro {
        grid-column: 1;
        grid-row: 2 / span 2;
    }

    .section-header-main_image-annual-forecast {
        display: none;
    }

    .section-documents_image-container {
        display: none;
    }

    .section-budget_image-container {
        display: none;
    }

    .section-pro_text-container {
        padding-top: 0;
    }

    .section-pro_image-container {
        padding-block: 2em;
        padding-left: 4em;
    }

    .section-pro_header {
        margin-block: 1em;
    }

    .section-law_text-container {
    }

    .section-law_image-golfer {
        display: none;
    }

    .section-law_image-golfer_container {
        display: none;
    }
}

@media ( min-width: 1200px ) {
    .main-grid {
        grid-template-columns: minmax(10px, 100px) 1fr 1fr minmax(10px, 100px);
    }

        .main-grid > * {
            display: grid;
            grid-template-columns: subgrid;
            grid-column: 1 / -1;
        }

    ul {
        margin-bottom: 4em;
    }

    li {
        padding-left: 2.2em;
        padding-block: .5em;
    }

        li::before {
            content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="rgba(255, 155, 0, 1)"><path d="m1 14 4-4 8 8L27 4l4 4-18 18z"></path></svg>');
            margin-top: .1em;
        }

    .section-header-main_image-container {
        position: relative;
        grid-column: 3 / span 2;
    }

    .section-pro {
    }

    .gap-header-main-pro-1 {
        position: relative;
    }

    .section-header-main_text-container {
        grid-column: 2;
        z-index: 100;
    }
    /*    .section-text-welcome {
        grid-column: 2;
    }

*/
    .section-header-main_header {
        margin-top: 8.75rem;
    }

    .section-header-main_image-annual-forecast {
        z-index: 10;
        position: absolute;
        top: 60%;
        left: -25%;
    }

    .section-welcome {
        padding-inline: 0;
        /*font-size: 1.63rem;*/
    }

    .section-pro_image-container {
        grid-column: 2;
    }

    .section-pro_text-container {
        grid-column: 3;
    }

    .section-pro_header {
        margin-top: 5em;
        margin-bottom: 1em;
    }

    .hide-on-wide-screens {
        display: none;
    }

    .gap-on-small-screens {
        display: none;
    }

    .section-pro_image-container {
        padding-top: 5em;
        padding-bottom: 4em;
    }

    .section-law_header {
        margin-top: 2em;
    }

    .section-law_text-container {
        grid-column: 2;
        margin-right: 6em;
    }

    .section-law_image-container {
        position: relative;
        grid-column: 3 / span 2;
    }

    .section-law_image-golfer_container {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        align-content: center;
        height: 100%;
    }

    .section-law_image-smartphone-gif {
        position: absolute;
        top: -10%;
        left: -2%;
        height: 120%;
    }

    .section-budget_image-container {
        grid-column: 3 / span 2;
        position: relative;
    }

    .section-budget_image-stats {
        position: absolute;
        top: 20%;
        right: 10%;
        width: 60%;
        z-index: 10;
    }

    .section-budget_image_happy-guy {
        border-radius: 50%;
        position: absolute;
        top: -10%;
        width: 50%;
    }

    .section-documents_header {
        margin-top: 5em;
        margin-bottom: 1em;
    }

    .section-documents_text-container {
        grid-column: 3;
    }

    .section-documents_image-container {
        grid-column: 2;
        margin-block: 4em;
        margin-right: 2em;
    }

    .section-budget_text-container {
        grid-column: 2;
        margin-right: 3em;
        margin-bottom: 5em;
    }
}

@media ( min-width: 1600px ) {
    .start-demo-container,
    .start-fees-container {
        font-weight: 900;
        font-size: var(--fs-600);
        margin: 4rem;
    }
}

    /*From MainLayout.css*/

    .content {
        width: min(100%, var(--max-content-width));
        margin-inline: auto;
    }

    main {
        flex: 1;
        background-color: var(--clr-bg-grey);
    }

    footer {
        background-color: var(--clr-bg-dark);
    }

    .footer-container {
        width: min(100%, var(--max-content-width));
        padding: 1rem;
        margin-inline: auto;
        display: flex;
    }

    .green-admin-contact-container {
        flex-grow: 1;
        display: flex;
        justify-content: center;
    }

    .green-admin-contact-grid {
        font-size: var(--fs-500);
        display: grid;
        grid-template-columns: auto 1fr;
        color: white;
        margin: auto;
        grid-gap: .1em;
    }

    .green-admin-contact-link {
    }

    .footer-container {
        container-type: inline-size;
    }

    /* If the container is larger than 700px */
    @container (max-width: 570px) {
        .footer-logo {
            display: none;
        }
    }

    /*From NavMenu.razor.css*/

    .nav-bar-wrapper {
        background-color: var(--clr-bg-dark);
    }

    .nav-bar-container {
        width: min(100%, var(--max-content-width));
        margin-inline: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-flow: column;
        background-color: var(--clr-bg-dark);
        padding: 1em;
    }

    .nav-bar-action-buttons-container {
        justify-content: space-between;
        display: flex;
        width: 100%;
        /*    padding-inline: 1.8em;
    margin-inline: auto;
*/
    }

    .nav-menu-items-container {
        display: none;
        align-self: start;
    }

    .nav-bar-icon-container {
        align-self: center;
    }

    .nav-bar-toggler {
        border: none;
        background: inherit;
        color: white;
        align-self: center;
        margin-inline: .5em;
    }

        .nav-bar-toggler:hover {
            cursor: pointer;
        }

    .nav-bar {
        display: flex;
        flex-flow: column;
        /*padding-left: 1em;*/
        gap: 1em;
        margin-bottom: -.5em;
    }

    .nav-link {
        color: white;
        text-decoration: none;
    }

    .nav-item {
        white-space: nowrap;
        font-size: var(--fs-500);
        margin-top: .2em;
    }

    @media ( max-width: 49.99rem ) {
        .nav-item:nth-child(1) {
            margin-top: 1em;
        }
    }

    @media ( min-width: 50rem ) {
        .nav-bar-toggler {
            display: none;
        }

        .nav-bar-container {
            flex-flow: row;
            align-items: center;
        }

        .nav-menu-items-container {
            display: flex;
            align-self: center;
        }

        .nav-bar {
            flex-flow: row;
        }
    }

    @media (max-with: 60rem) {
        .nav-item {
            font-size: var(--fs-400);
        }
    }

    /*From AskForDemoLink.razor*/

    .mailto-link {
        background-color: var(--clr-orange);
        font-weight: 700;
        font-size: var(--fs-500);
        color: white;
        border: none;
        border-radius: 3em;
        padding-block: .5em;
        padding-inline: 1em;
    }

        .mailto-link:hover {
            color: white;
            background-color: var(--clr-btn-hover);
        }