
.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;
}

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

.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;
	}
}
