@use "../utilities" as *;

/**----------------------------------------
START: Strategy CSS
----------------------------------------*/
.gap-30-30 {
	--bs-gutter-x: 30px;
	.row {
		--bs-gutter-x: 30px;
		--bs-gutter-y: 30px;
	}
}
.h5-strategy {
	&-heading {
		padding: 60px 30px;
		border-radius: 10px;
		background-color: var(--tj-color-common-white);
		margin-bottom: 0;
		@media #{$xs} {
			padding: 40px 20px;
		}
		.sec-title {
			margin-bottom: 30px;
		}
	}
	&-item {
		padding: 30px;
		background-color: var(--tj-color-common-white);
		border-radius: 10px;
		position: relative;
		z-index: 0;
		overflow: hidden;
		@media #{$xs} {
			padding: 20px;
		}
		&-3 {
			background: url("../images/strategy/strategy-item-bg.webp") no-repeat
				center;
			background-size: cover;
			&::after {
				content: "";
				position: absolute;
				inset-inline-start: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: var(--tj-color-heading-primary);
				opacity: 0.7;
				z-index: -1;
			}
		}
	}
	&-title {
		font-weight: var(--tj-fw-sbold);
	}
	&-avatar {
		max-width: 295px;
		margin-inline-start: auto;
		margin-inline-end: auto;
		margin-top: 40px;
	}
	&-counter {
		margin-bottom: -7px;
		&-inner {
			display: flex;
			gap: 10px;
			align-items: center;
			padding-top: 5px;
			border-top: 1px dashed var(--tj-color-border-1);
			margin-top: 60px;
			.inline-content {
				margin-bottom: 0;
				.odometer {
					&-inside {
						display: inline-flex;
					}
					span {
						color: var(--tj-color-heading-primary);
					}
				}
			}
			.count-text {
				color: var(--tj-color-text-body-3);
			}
		}
	}
	&-chart {
		margin-top: 71px;
		@media #{$xl} {
			margin-top: 110px;
		}
		@media #{$lg} {
			margin-top: 145px;
		}
		@media #{$md} {
			margin-top: 100px;
		}
		@media #{$sm,$xs} {
			img {
				margin-inline-start: auto;
				margin-inline-end: auto;
				display: block;
			}
		}
	}
	&-tag {
		&-wrapper {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 180px;
			@media #{$xl} {
				margin-top: 153px;
			}
			@media #{$lg,$md} {
				margin-top: 106px;
			}
		}
		padding: 5px 8px 7px;
		background-color: rgba(255, 255, 255, 0.1);
		backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 4px;
		line-height: 1;
		color: var(--tj-color-common-white);
		&:hover {
			background-color: var(--tj-color-theme-primary);
			color: var(--tj-color-common-white);
			border-color: var(--tj-color-theme-primary);
		}
	}

	&-item {
		&-3 {
			.h5-strategy {
				&-title {
					color: var(--tj-color-common-white);
				}
				&-desc {
					color: var(--tj-color-grey-1);
					margin-top: 18px;
				}
			}
		}
	}
}

/* !END: Strategy CSS */