#app {
    background: var(--excel-green-color);
    color: #FFFFFF;
}

#title-wrapper {
    display: flex;
    justify-content: center;
    flex-direction: column;
    /*padding-top: 1rem;*/
    /*padding-bottom: 4rem;*/
    #title {
        /*font-size: 4rem;*/
        margin-bottom: 4rem;
        line-height: 1;
    }

    .site-icon-wrapper {
        font-size: 6rem;
    }
}

#blurb-wrapper {
    padding: 1rem;
    display: flex;
    justify-content: center;
    text-align: center;
    /*max-width: 800px;*/
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    /*margin-top: 32px;*/
    /*border-radius: 3rem;*/
    /*box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);*/
}

#call-to-action-img {
    width: 150px;
    box-shadow: 4px 8px 8px hsl(0deg 0% 0% / 0.38);
}

#call-to-action-wrapper {
    padding-top: 4rem;

    .try-out-now {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 0;
    }
}

#json-to-excel-images-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    background: #FFFFFF;
    padding: 1rem;
    gap: 1rem;
    height: 600px;

    /*margin-top: 1rem;*/
    /*justify-content: space-evenly;*/
    /*align-items: center;*/
}

#json-image-img {
    /*max-height: 1200px;*/
    object-fit: contain;
}

#excel-image-img {
    /*max-height: 1200px;*/
    object-fit: contain;
}

@media (min-width: 1100px) {
    #json-to-excel-images-wrapper {
        flex-direction: row;
        padding: 2rem;
        align-items: center;

        #json-image-img {
            height: 400px;
            object-fit: contain;
        }

        #excel-image-img {
            height: 400px;
            object-fit: contain;
        }
    }
}

#stats-wrapper {
    display: flex;
    flex-direction: column;
    /*justify-content: space-between;*/
    /*max-width: 800px;*/
    /*margin-left: auto;*/
    /*margin-right: auto;*/
    margin-top: 3rem;
    padding-bottom: 3rem;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.stat-wrapper {
    width: 200px;
    height: 200px;
    /*border: 4px solid var(--excel-green-dark);*/
    border: 2px solid var(--excel-green-dark);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*color: var(--excel-green-darkest);*/
    box-shadow: 4px 8px 8px var(--excel-green-darkest);
    font-size: 1rem;
    background-image: linear-gradient(var(--excel-green-light), var(--excel-green-medium));

    .customer-rating-star {
        /*color: #FF9D28;*/
        color: gold;
        font-size: 2rem;
        /*box-shadow: 4.0px 8.0px 8.0px hsl(0deg 0% 0% / 0.38);*/
    }

    .stat-text {
        font-weight: 600;
    }
}

@media (min-width: 1100px) {
    #stats-wrapper {
        flex-direction: row;
        justify-content: center;
    }
}

.pricing-plans {
    height: 600px;
    background-color: #FFFFFF;
    color: black;
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;

    h2 {
        padding-bottom: 0;
    }

    table {
        font-size: 1rem;
        margin-top: 3rem;
        line-height: 3;
        width: 100%;
        margin-left: auto;
        margin-right: auto;

        thead {
            th:nth-child(1) {
                width: 40%;
            }

            th:nth-child(2) {
                width: 30%;
            }

            th:nth-child(3) {
                width: 30%;
            }
        }
    }

}

.faqs {
    height: 600px;
    text-align: center;
    padding-right: 1rem;
    padding-left: 1rem;

    .faqs-questions {
        font-size: 1rem;
        margin-top: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;

        dt {
            font-weight: 600;
        }

        dd {
            font-weight: 400;
            margin-bottom: 1rem;
        }
    }
}

@media (min-width: 1100px) {
    .pricing-plans > table {
        width: 800px;
    }
}

.code-example-wrapper {
    margin-top: 1rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.code-example {
    width: 400px;
    background: #22272E;
    color: #81B2DA;
    border-radius: 6px;
    padding: 1rem;
}

.gradient {
    background: linear-gradient(45deg,var(--bottom-left-blur-1),var(--top-right-blur-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    font-size: 1.4rem;
}

.green-tick {
    color: var(--excel-green-medium);
}

.red-cross {
    color: red;
}

.sub-title {
    font-size: 1rem;
    font-weight: 300;
    line-height: 1;
}

.pricing-feature-name {
    font-weight: 500;
    font-style: italic;
    color: #5a7184;
    line-height: 1;
}

.plan-title {
    line-height: 1;
}

.plan-result {
    font-weight: 400;
}

.try-now-btn {
    background-color: white;
    color: black;
    border: 2px solid black;
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: 4px 8px 8px grey;
    transition-duration: 0.6s;
}

.try-now-btn:hover {
    background-color: black;
    color: white;
}

.border-bottom {
    border: 4px solid red;
}