#skills-thumbnail > h2 {
    text-align: center;
    margin-bottom: 25px;
    margin-top: 50px;
}

    #skills-thumbnail > h2:first-child {
        margin-top: 0;
    }

#skills-thumbnail .card {
    text-align: center;
    border: 0;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

    #skills-thumbnail .card .icon-container {
        width: 152px;
        height: 152px;
        background: url('/media/static/skills-balloon.png') no-repeat center center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #skills-thumbnail .card .icon {
        max-width: 100px;
        max-height: 100px
    }

    #skills-thumbnail .card .card-body {
        padding-bottom: 0;
    }

        #skills-thumbnail .card .card-body h3.card-title {
            color: var(--komatsu-blue);
            font-size: 20px;
            font-style: normal;
            font-weight: 900;
            line-height: 20px;
            text-transform: uppercase;
            margin-bottom: 12px;
            margin-top: 0;
        }

        #skills-thumbnail .card .card-body .card-text {
            color: var(--font-black);
            text-align: center;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 18px;
        }

    #skills-thumbnail .card .card-footer {
        border: 0;
        border-radius: initial;
        background-color: initial;
    }


.modal-backdrop {
    --bs-backdrop-bg: #ffffff;
    --bs-backdrop-opacity: 0.8;
}

.modal-content {
    background-color: var(--komatsu-yellow);
    border: 0;
    border-radius: initial;
}

.modal-body {
    padding-bottom: 30px;
}

    .modal-body .btn-close {
        position: absolute;
        top: 20px;
        right: 20px;
        background: url(/media/icons/icon-close.png) no-repeat;
        opacity: 1;
    }

    .modal-body .modal-title {
        color: var(--komatsu-blue);
        font-size: 40px;
        font-style: normal;
        font-weight: 900;
        line-height: normal;
        margin-bottom: 20px;
        margin-top: 24px;
        text-transform: uppercase;
    }

    .modal-body .modal-description {
        color: #000000;
        font-size: 15px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        padding: 0 20px 0 0;
    }

    .modal-body .icon-container {
        width: 100px;
        height: 100px;
        background: url(/media/static/skills-balloon.png) no-repeat center center;
        background-size: contain;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

        .modal-body .icon-container img {
            max-width: 65px;
            max-height: 65px;
        }