.button-group {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: stretch;
    gap: 10px;
}

.hero {
    height: 90vh;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: stretch;
    padding-bottom: 20vh;

    overflow: hidden;
}

html[data-theme="light"] {
    --pst-color-secondary: #b676b2;
    --pst-color-primary: #4ca4d2;
    --pst-color-primary-highlight: #b676b2;

}


.bd-sidebar-primary {
    width: fit-content !important;
    padding-right: 40px !important
}


.features {
    height: 60vh;
    overflow: hidden;
}


.image-container {
    margin-top: 50px;
}

img {
    pointer-events: none;
}

.img-bottom-sizing {
    max-height: 10vh;
    width: auto
}

.body-sizing{
    height: 10vh;
}

.title-bot {
    margin-bottom: -10px !important;
    line-height: normal !important;
}

.sub-bot {
    margin-bottom: -10px !important;
    /* margin-top: -20px !important; */
    line-height: normal !important;
}

.features-container {
    img {
        max-width: none;
    }

    display: flex;
    gap: 20px;
}

@media only screen and (max-width: 768px) {

    /* Adjust this value based on your breakpoint for mobile */
    .front-container,
    .hero {
        height: auto;
        /* Change from fixed height to auto */
        min-height: 50vh;
        /* Adjust this as needed */
    }

    .features-container {
        margin-bottom: 20px;
        /* Increase bottom margin */
    }

    .hero {
        margin-bottom: 30px;
        /* Adjust the bottom margin of the main container */
    }

    .features {
        height: 110vh;
    }
}