@import url(variables.css);
@import url(text-utility.css);
@import url(component-utility.css);

body {
    background-color: var(--sl-color-background);
}


.sl-header {
    background-color: var(--sl-color-primary-background);
    padding-top: 10px;
}

.sl-header-content {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.sl-header-container {
    padding-left: 2vw;
    padding-right: 2vw;
}


.sl-support-section {
    margin-top: 60px;
}

.sl-card.sl-card-support {
    padding: 40px;
}


.sl-app-section {
    margin-top: 100px;
}

.sl-card.sl-card-app {
    padding: 30px;
}


.sl-performance-section {
    background-color: var(--sl-color-secondary-background);
}

.sl-performance-container {
    padding-top: 100px;
    padding-left: 22vw;
}

.sl-progress-col {
    width: 12vw;
}

@media (max-width: 992px) {
    .sl-performance-container {
        padding-left: 0px;
    }

    .sl-progress-col {
        width: 17vw;
    }
}

.sl-progress-rect-container {
    display: grid;
    grid-template: 1fr / 1fr;
    place-items: center start;
}

.sl-progress-rect-container > * {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
  }

.sl-progress-rect-active {
    width: 75%;
    height: 3px;
    border-radius: 5px;
    background-color: var(--sl-color-active);
}

.sl-progress-rect-non-active {
    width: 100%;
    height: 1px;
    background-color: var(--sl-color-contrast);
    opacity: 10%;
}


.sl-shop-section {
    background-color: var(--sl-color-tertiary-background);
    padding-top: 60px;
    padding-bottom: 150px;
}

.sl-card.sl-card-shop-left {
    padding-top: 45px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 75px;
}

.sl-card.sl-card-shop-right {
    padding-top: 65px;
    padding-left: 60px;
    padding-right: 60px;
    padding-bottom: 90px;
}


.sl-subscribe-section {
    background-color: var(--sl-color-secondary-background);
    padding-top: 120px;
    padding-bottom: 120px;
}

.sl-clients-section {
    background-color: var(--sl-color-primary-background);
    padding-top: 55px;
    padding-bottom: 115px;
}

.sl-card.sl-card-client {
    padding-top: 25px;
    padding-left: 35px;
    padding-right: 40px;
    padding-bottom: 25px;
}

.sl-footer {
    background-color: var(--sl-color-footer-background);
    padding-top: 32px;
    padding-bottom: 32px;
}