:root {
    --icon-volume-high: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTUzMy42IDMyLjVDNTk4LjUgODUuMiA2NDAgMTY1LjggNjQwIDI1NnMtNDEuNSAxNzAuNy0xMDYuNCAyMjMuNWMtMTAuMyA4LjQtMjUuNCA2LjgtMzMuOC0zLjVzLTYuOC0yNS40IDMuNS0zMy44QzU1Ny41IDM5OC4yIDU5MiAzMzEuMiA1OTIgMjU2cy0zNC41LTE0Mi4yLTg4LjctMTg2LjNjLTEwLjMtOC40LTExLjgtMjMuNS0zLjUtMzMuOHMyMy41LTExLjggMzMuOC0zLjV6TTQ3My4xIDEwN2M0My4yIDM1LjIgNzAuOSA4OC45IDcwLjkgMTQ5cy0yNy43IDExMy44LTcwLjkgMTQ5Yy0xMC4zIDguNC0yNS40IDYuOC0zMy44LTMuNXMtNi44LTI1LjQgMy41LTMzLjhDNDc1LjMgMzQxLjMgNDk2IDMwMS4xIDQ5NiAyNTZzLTIwLjctODUuMy01My4yLTExMS44Yy0xMC4zLTguNC0xMS44LTIzLjUtMy41LTMzLjhzMjMuNS0xMS44IDMzLjgtMy41em0tNjAuNSA3NC41QzQzNC4xIDE5OS4xIDQ0OCAyMjUuOSA0NDggMjU2cy0xMy45IDU2LjktMzUuNCA3NC41Yy0xMC4zIDguNC0yNS40IDYuOC0zMy44LTMuNXMtNi44LTI1LjQgMy41LTMzLjhDMzkzLjEgMjg0LjQgNDAwIDI3MSA0MDAgMjU2cy02LjktMjguNC0xNy43LTM3LjNjLTEwLjMtOC40LTExLjgtMjMuNS0zLjUtMzMuOHMyMy41LTExLjggMzMuOC0zLjV6TTMwMS4xIDM0LjhDMzEyLjYgNDAgMzIwIDUxLjQgMzIwIDY0bDAgMzg0YzAgMTIuNi03LjQgMjQtMTguOSAyOS4ycy0yNSAzLjEtMzQuNC01LjNMMTMxLjggMzUyIDY0IDM1MmMtMzUuMyAwLTY0LTI4LjctNjQtNjRsMC02NGMwLTM1LjMgMjguNy02NCA2NC02NGw2Ny44IDBMMjY2LjcgNDAuMWM5LjQtOC40IDIyLjktMTAuNCAzNC40LTUuM3oiLz48L3N2Zz4=');
    --icon-volume-mute: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTMwMS4xIDM0LjhDMzEyLjYgNDAgMzIwIDUxLjQgMzIwIDY0bDAgMzg0YzAgMTIuNi03LjQgMjQtMTguOSAyOS4ycy0yNSAzLjEtMzQuNC01LjNMMTMxLjggMzUyIDY0IDM1MmMtMzUuMyAwLTY0LTI4LjctNjQtNjRsMC02NGMwLTM1LjMgMjguNy02NCA2NC02NGw2Ny44IDBMMjY2LjcgNDAuMWM5LjQtOC40IDIyLjktMTAuNCAzNC40LTUuM3pNNDI1IDE2N2w1NSA1NSA1NS01NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjlsLTU1IDU1IDU1IDU1YzkuNCA5LjQgOS40IDI0LjYgMCAzMy45cy0yNC42IDkuNC0zMy45IDBsLTU1LTU1LTU1IDU1Yy05LjQgOS40LTI0LjYgOS40LTMzLjkgMHMtOS40LTI0LjYgMC0zMy45bDU1LTU1LTU1LTU1Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDB6Ii8+PC9zdmc+');
    --icon-book: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNi4wIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjQgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTk2IDBDNDMgMCAwIDQzIDAgOTZMMCA0MTZjMCA1MyA0MyA5NiA5NiA5NmwyODggMCAzMiAwYzE3LjcgMCAzMi0xNC4zIDMyLTMycy0xNC4zLTMyLTMyLTMybDAtNjRjMTcuNyAwIDMyLTE0LjMgMzItMzJsMC0zMjBjMC0xNy43LTE0LjMtMzItMzItMzJMMzg0IDAgOTYgMHptMCAzODRsMjU2IDAgMCA2NEw5NiA0NDhjLTE3LjcgMC0zMi0xNC4zLTMyLTMyczE0LjMtMzIgMzItMzJ6bTMyLTI0MGMwLTguOCA3LjItMTYgMTYtMTZsMTkyIDBjOC44IDAgMTYgNy4yIDE2IDE2cy03LjIgMTYtMTYgMTZsLTE5MiAwYy04LjggMC0xNi03LjItMTYtMTZ6bTE2IDQ4bDE5MiAwYzguOCAwIDE2IDcuMiAxNiAxNnMtNy4yIDE2LTE2IDE2bC0xOTIgMGMtOC44IDAtMTYtNy4yLTE2LTE2czcuMi0xNiAxNi0xNnoiLz48L3N2Zz4=');
    --icon-: url('data:image/svg+xml;base64,+');
}

.icon-volume-high::before {
    background-color: var(--black-87);
    mask: var(--icon-volume-high) no-repeat center;
    -webkit-mask: var(--icon-volume-high) no-repeat center;
}

.icon-volume-mute::before {
    background-color: var(--black-87);
    mask: var(--icon-volume-mute) no-repeat center;
    -webkit-mask: var(--icon-volume-mute) no-repeat center;
}

.icon-book::before {
    mask: var(--icon-book) no-repeat center;
    -webkit-mask: var(--icon-book) no-repeat center;
}

.text-green::before {
    background-color: var(--green-default)
}

.text-orange::before {
    background-color: var(--orange-default)
}

.text-cyan::before {
    background-color: var(--cyan-default)
}

.text-yellow::before {
    background-color: var(--yellow-default);
}

.blog {
    box-shadow: 0 0 30px rgb(214 215 216 / 50%);
    border-radius: 30px;
    position: relative;
}

.blog-thumbnail {
    /*object-fit: contain;*/
    border-radius: 30px 30px 0 0;
    padding: 0px;
    width: 100%;
    overflow: hidden;
    height: 250px;
    filter: contrast(0.9);
}

.blog-description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.blog-title a {
    color: var(--black-87) !important;
    text-decoration: none !important;
    line-height: 1.5;
}

    .blog-title a.orange:hover {
        color: var(--orange-dark) !important;
        text-decoration: none !important;
    }

    .blog-title a.green:hover {
        color: var(--green-dark) !important;
    }

    .blog-title a.cyan:hover {
        color: var(--cyan-dark) !important;
    }

    .blog-title a.yellow:hover {
        color: var(--yellow-dark) !important;
    }

.blog-title div {
    padding: 0 !important;
    border-radius: 50px;
    width: 55px !important;
    height: 55px !important;
    margin-right: .75rem;
    position: absolute;
    top: 1rem;
    box-shadow: 0 0 10px rgb(214 215 216 / 60%);
    align-content: center;
    text-align: center;
}

    .blog-title div.orange {
        background-color: var(--orange-screen);
    }

    .blog-title div.green {
        background-color: var(--green-screen);
    }

    .blog-title div.cyan {
        background-color: var(--cyan-screen);
    }

    .blog-title div.yellow {
        background-color: var(--yellow-screen);
    }

    .blog-title div i {
        margin-top: .25rem;
    }

.blog-slide {
    position: relative;
    box-shadow: 0 0 30px rgb(214 215 216 / 50%);
    border-radius: 30px;
    overflow: hidden;
}

    .blog-slide img {
        height: 500px;
    }

    .blog-slide .description {
        position: absolute;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
        bottom: 0;
        padding-top: 5rem !important;
        width: 100%;
    }

.blog-slide .description .blog-title {
    color: var(--white-100) !important;
}

    .blog-slide .description .blog-title h2 {
        font-weight: bold;
        line-height: 1.25 !important;
    }

            .blog-slide .description .blog-description {
                color: #CCD4E2 !important;
            }

.description-line-bottom {
    margin-bottom: 0;
    padding-bottom: 30px;
    position: relative;
    text-align: center;
    line-height: 1.5;
}

.description-line-bottom::before {
    content: "";
    position: absolute;
    display: block;
    width: 500px;
    height: 2px;
    background: var(--black-12);
    bottom: 1px;
    left: calc(50% - 250px);
}

.description-line-bottom::after {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 4px;
    background: var(--orange-default);
    bottom: 0;
    left: calc(50% - 50px);
}

.clients-slider.swiper {
    padding: 0 !important;
}

.swiper .swiper-button-next, .swiper .swiper-button-prev {
    top: 40% !important;
    color: var(--white-60) !important;
}

.swiper .swiper-button-next {
    right: 20px !important;
}

.swiper .swiper-button-prev {
    left: 20px !important;
}

#loadMoreBtn .spinner-border {
    width: 1rem !important;
    height: 1rem !important;
    border-width: .125em !important;
    margin-bottom: 2px;
}

#loadMoreBtn:has(.spinner-border.d-none) {
    cursor: pointer !important;
    pointer-events: visible !important;
}

#loadMoreBtn {
    align-items: center;
    gap: .5rem;
}

.icon-speak {
    font-size: 20px;
    padding: 12px 0;
    position: fixed;
    background-color: var(--white-100);
    color: var(--black-87);
    box-shadow: 0 .125rem .15rem rgba(0, 0, 0, .25) !important;
    width: 50px;
    height: 50px;
    border-radius: 0.25rem;
    align-content: center;
    text-align: center;
    top: 8rem;
    right: 1rem;
    transition: all 0.3s ease-in-out;
    z-index: 10;
}

    .icon-speak:hover {
        filter: brightness(0.95) !important;
    }

@media only screen and (max-device-width : 991px) {
    .blog-thumbnail {
        height: 200px;
    }

    .blog-slide img {
        height: 400px;
    }

    .icon-speak {
        top: 5.5rem;
    }
}

@media only screen and (max-device-width : 575px) {
    .section.container {
        padding: 20px !important;
    }

    .section-blog .col-lg-6 {
        padding: 0 7px;
    }

    .blog-thumbnail {
        height: 150px;
    }

    .blog-slide img {
        height: 250px;
    }

    .swiper .swiper-button-next, .swiper .swiper-button-prev {
        top: 30% !important;
    }

    .description-line-bottom::before {
        width: 250px;
        left: calc(50% - 125px);
    }

    .description-line-bottom {
        margin-bottom: 10px;
        margin-top: 20px;
        padding-bottom: 20px;
    }

    .blog-slide .description {
        padding-top: 3rem !important;
    }
}