.wd-info-box {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--wd-brd-radius);
    gap: var(--ib-icon-sp);
    --ib-icon-sp: 20px
}

    .wd-info-box .box-icon-wrapper {
        flex: 0 0 auto;
        line-height: 0
    }

    .wd-info-box :is(.info-box-icon,.info-svg-wrapper) {
        display: inline-block;
        max-width: 100%
    }

    .wd-info-box .info-box-icon {
        transition: all .25s ease
    }

    .wd-info-box .info-svg-wrapper img {
        height: inherit
    }

    .wd-info-box .info-svg-wrapper :is(img,svg) {
        width: inherit !important;
        height: inherit !important
    }

    .wd-info-box :is(.info-box-subtitle,.info-box-title) {
        transition: all .25s ease;
        margin-bottom: 0
    }

    .wd-info-box :is(.info-box-subtitle,.info-box-title,.info-box-inner):not(:first-child) {
        margin-top: 10px
    }

    .wd-info-box :is(.info-box-subtitle:not(.subtitle-style-background),.info-box-title) {
        line-height: 1.3
    }

    .wd-info-box .info-box-content {
        --wd-tags-mb: 10px;
        position: relative;
        flex: 1 1 auto;
        border-radius: var(--wd-brd-radius)
    }

    .wd-info-box .info-box-inner p:first-child:empty, .wd-info-box .info-box-inner p:first-child:empty ~ p:last-child, .wd-info-box .info-box-inner:empty {
        display: none
    }

    .wd-info-box .info-btn-wrapper {
        margin-top: 15px
    }

.wd-info-box-link {
    z-index: 2
}

.box-icon-align-top .box-icon-wrapper {
    margin-bottom: -5px
}

:is(.box-icon-align-left,.box-icon-align-right) .box-icon-wrapper {
    max-width: 50%
}

.box-icon-align-left {
    flex-direction: row-reverse
}

.box-icon-align-right {
    flex-direction: row
}

.box-title-style-underlined {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--brdcolor-gray-300)
}

.box-with-icon .info-box-icon {
    overflow: hidden
}

.box-icon-wrapper.box-with-text {
    color: var(--wd-primary-color);
    font-weight: 700;
    line-height: 1
}

.box-with-text.text-size-small {
    font-size: 38px
}

.box-with-text:is(.text-size-default,.text-size-large) {
    font-size: 52px
}

[class*="box-icon-with-"].box-with-text {
    --text-bg-size: 85px
}

    [class*="box-icon-with-"].box-with-text .info-box-icon {
        padding: 0 10px;
        min-width: var(--text-bg-size);
        height: var(--text-bg-size);
        border-radius: 100px;
        line-height: var(--text-bg-size)
    }

[class*="box-icon-with-"]:is(.text-size-default,.text-size-large) {
    --text-bg-size: 100px
}

[class*="box-icon-with-"] .info-box-icon {
    border-radius: 50%;
    text-align: center
}

.box-icon-with-bg .info-box-icon {
    padding: 20px;
    background-color: #f1f1f1
}

.box-icon-with-border .info-box-icon {
    padding: 18px;
    border: 2px solid #f1f1f1
}

.wpb-js-composer .info-box-wrapper.inline-element {
    max-width: 100%
}

.wpb-js-composer .info-box-carousel .inline-element {
    display: block;
    margin-inline: 0 !important
}

    .wpb-js-composer .info-box-carousel .inline-element .wd-info-box {
        display: inline-flex
    }

.with-animation .info-svg-wrapper path {
    stroke: var(--wd-primary-color)
}

.info-box-carousel-wrapper .wd-wpb {
    margin-bottom: 0
}

[class*="color-scheme-hover"] {
    transition: all .25s ease
}

    [class*="color-scheme-hover"] .title {
        transition: all .25s ease
    }

.color-scheme-hover-dark:hover {
    --color-gray-400: #a5a5a5;
    --color-gray-500: #a5a5a5;
    --color-gray-800: #333;
    --bgcolor-gray-200: #f7f7f7;
    --brdcolor-gray-500: rgba(0,0,0,.2);
    --wd-text-color: #767676;
    --wd-title-color: #242424;
    --wd-link-color: #333;
    --wd-link-color-hover: #242424;
    color: var(--wd-text-color)
}

.color-scheme-hover-light:hover {
    --color-gray-400: rgba(255,255,255,.8);
    --color-gray-500: rgba(255,255,255,.8);
    --color-gray-800: #fff;
    --brdcolor-gray-300: rgba(255,255,255,.15);
    --brdcolor-gray-500: rgba(255,255,255,.3);
    --wd-text-color: rgba(255,255,255,.8);
    --wd-title-color: #fff;
    --wd-link-color: rgba(255,255,255,.9);
    --wd-link-color-hover: #fff;
    color: var(--wd-text-color)
}

    .color-scheme-hover-light:hover .info-svg-wrapper svg {
        fill: #fff !important
    }

    .color-scheme-hover-light:hover .info-svg-wrapper img {
        filter: brightness(0) invert(1)
    }

    .color-scheme-hover-light:hover :is(.info-box-icon,.title) {
        color: #fff !important
    }

@media (min-width:1025px) {
    .box-with-text.text-size-large {
        font-size: 74px
    }

    [class*="box-icon-with-"].text-size-large {
        --text-bg-size: 130px
    }
}