:root {
    --bg-color: #fff;
    --bg-primary-10: rgba(5, 167, 170, 0.1);

    --bg-btn-primary: linear-gradient(0deg, #05A7AA, #05A7AA);
    --bg-btn-secondary: rgb(255, 255, 255);

    --color-primary: rgba(5, 167, 170, 1);
    --color-primary-op50: rgba(5, 167, 170, .5);

    --text-primary: rgba(0, 0, 0, 1);
    --text-primary-op50: rgba(0, 0, 0, .5);

    --navbar-height: 64px;

    --easing: cubic-bezier(.45, .08, .35, 1.49);

    --sponsor-content-height: 7rem;
}

.title {
    font-size: 3rem !important;
}

section#solusi-detail {
    position: relative;
    overflow: hidden;
}

section#solusi-detail .ellipse-down-left {
    position: absolute;
    top: var(--navbar-height);
    right: 0;
    width: 15%;
    height: auto;
}

.ellipse-down-left img {
    width: 100%;
}

section#solusi-detail .ellipse-top-right {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 15%;
    height: auto;
}

.ellipse-top-right img {
    width: 100%;
}

section#solusi-detail .bg-square {
    position: absolute;
    background-size: cover;
    width: 80%;
    top: calc(10% + var(--navbar-height));
    left: 10%;
}

.bg-square img {
    width: 100%;
}

.page-solution-detail {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translateX(-50%);
}

.page-solution-detail .description {
    /* padding-top: 3rem; */
}

.glide .card.solution-card {
    width: 100% !important;
    z-index: 998;
}

section#solusi-detail .img-detail {
    position: absolute;
    bottom: -15%;
    left: 50%;
    transform: translateX(-50%);
    height: 50%;
    width: auto;
}
    section#solusi-detail .img-detail img {
        height: 100%;
    }

section#solusi .glide__arrows .glide__arrow.glide__arrow--left {
    position: absolute;
    top: 50%;
    left: -66px;
    transform: translateY(-50%);
}

section#solusi .glide__arrows .glide__arrow.glide__arrow--right {
    position: absolute;
    top: 50%;
    right: -66px;
    transform: translateY(-50%);
}

section#solusi .glide__arrows .glide__arrow {
    width: 40px;
    height: 40px;
    background: var(--bg-primary-20);
    color: var(--color-primary);
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;

    transition: background .25s ease-out;
}

.card.solution-card .card-description ol{
    font-size: .75rem;
}

section#solusi .glide__arrows .glide__arrow:hover {
    background: var(--bg-primary-30);
}

@media screen and (max-width: 1399px) {
    section#solusi-detail .img-detail {
        width: 650px;
    }

    section#solusi-detail .img-detail img {
        width: 100%;
    }
}

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

    section#solusi .glide__arrows {
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 10px;
    }

    section#solusi .glide__arrows .glide__arrow {
        margin: 0 10px;
    }

    section#solusi .glide__arrows .glide__arrow.glide__arrow--left {
        position: static;
        transform: none;
    }

    section#solusi .glide__arrows .glide__arrow.glide__arrow--right {
        position: static;
        transform: none;
    }
}

@media screen and (max-width: 767px) {
    section#solusi-detail .img-detail {
        display: none;
    }

    section#solusi .glide__arrows {
        display: flex;
        justify-content: center;
        align-items: center;

        margin-top: 10px;
    }

    section#solusi .glide__arrows .glide__arrow {
        margin: 0 10px;
    }

    section#solusi .glide__arrows .glide__arrow.glide__arrow--left {
        position: static;
        transform: none;
    }

    section#solusi .glide__arrows .glide__arrow.glide__arrow--right {
        position: static;
        transform: none;
    }
}