@use "variables" as *;
.thim-new-iconbox {
	&.layout-1 {
		background: #fff;
		padding: 30px;
		box-shadow: 0px 1px 10px 0px #1c1c1b1a;
		display: table;
		width: 100%;
		margin-bottom: 30px;
		border-radius: $thim_border_radius;
		.icon-box {
			display: table-cell;
			vertical-align: middle;

			i {
				font-size: 48px;
			}
		}

		.title {
			display: table-cell;
			vertical-align: middle;
			padding-left: 24px;

			p {
				margin: 0;
				font-size: 20px;
				line-height: 1.25;
				font-weight: 500;
				text-align: left;
				color: $thim_font_title_color;
			}
		}
	}

	&.layout-2 {
		text-align: center;
		padding: 44px 0;

		@media (max-width: 767px) {
			padding: 20px 0;
		}

		.icon-box {
			i {
				display: inline-block;
				font-size: 28px;
				color: #ffff;
				margin-bottom: 15px;
			}
		}

		.title {
			p {
				margin: 0;
				font-size: 16px;
				font-weight: normal;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.5;
				letter-spacing: normal;
				text-align: center;
				color: #ffffff;
			}
		}
	}

	&.has_border {
		position: relative;

		&:before {
			content: "";
			position: absolute;
			width: 1px;
			height: 51px;
			top: 50%;
			background: #ffffff;
			transform: translateY(-50%);
			left: 0;
			@media (max-width: 767px) {
				transform: translate(-50%, -50%);
				width: 50%;
				height: 1px;
				top: 0;
				left: 50%;
			}
		}
	}

	&:hover {
		&.layout-1 {
			.title {
				p {
					color: $thim_body_primary_color;
				}
			}
		}
	}
}