.icon-grid-section {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.2rem 0;

}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.icon-grid-section {
		padding: 0.4rem 0;

}
	}
.icon-grid-section .container {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.8rem;
	}
.icon-grid-section .title-text-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 0.24rem;
		max-width: 8.68rem;

	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.icon-grid-section .title-text-wrap {
			gap: 0.4rem;

	}
		}
:is(.icon-grid-section .title-text-wrap) .title {
			color: var(--blue);
			text-align: center;
		}
:is(:is(.icon-grid-section .title-text-wrap) .title) span {
				color: var(--orange);
			}
:is(.icon-grid-section .title-text-wrap) .text {
			color: var(--blue);
			text-align: center;
		}
.icon-grid-section .icon-card-list-wrap {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		visibility: visible;
	}
@media screen and (max-width: 768px) and (orientation: portrait) {
	.icon-grid-section .icon-card-list-wrap {
			align-items: flex-start;
	}
		}
.is-slider-inactive:is(.icon-grid-section .icon-card-list-wrap) .splide__track {
				width: 100%;
			}
:is(.is-slider-inactive:is(.icon-grid-section .icon-card-list-wrap) .splide__track) .splide__list {
					position: relative;
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					align-items: stretch;
					justify-content: flex-start;
					gap: 0.205rem 0.21rem;
					width: 100%;
				}
:is(.is-slider-inactive:is(.icon-grid-section .icon-card-list-wrap) .splide__track) .splide__slide {
					position: relative;
					display: flex;
					width: calc((100% - 0.42rem) / 3);

				}
.is-slider-active:is(.icon-grid-section .icon-card-list-wrap) .splide__track {
				position: relative;
				display: flex;
				width: 2.59rem;
			}
:is(.is-slider-active:is(.icon-grid-section .icon-card-list-wrap) .splide__track) .splide__list {
					position: relative;
					display: flex;
					width: 100%;
				}
:is(.icon-grid-section .icon-card-list-wrap) .splide__track {
			overflow: visible;
		}
.is-slider-active:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation {
				display: flex;
			}
:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation {
			position: relative;
			display: none;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 100%;
			margin-top: 0.4rem;
			gap: 0.2rem;
		}
:is(:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation) .custom-arrow-navigation-button {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 0.56rem;
				height: 0.56rem;
				background-color: var(--blue);
				border-radius: 50%;
				border: none;
				cursor: pointer;
				transition: background-color 0.4s ease-in-out;
				border: 1px solid var(--blue);
			}
.next:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation) .custom-arrow-navigation-button) {
					transform: rotate(180deg);
				}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation) .custom-arrow-navigation-button):disabled {
					background-color: var(--white);
					cursor: not-allowed;
				}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation) .custom-arrow-navigation-button):disabled svg {
						fill: var(--blue);
					}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .custom-arrow-navigation) .custom-arrow-navigation-button) svg {
					width: 0.16rem;
					height: 0.22rem;
					fill: var(--white);
					transition: fill 0.4s ease-in-out;
				}
:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			height: 100%;
			min-height: 3.77rem;
			background-color: var(--orange);
			border-radius: 0.32rem;
			border: 2px solid var(--orange);
			overflow: hidden;
			transition: background-color 0.4s ease-in-out;
			cursor: pointer;	
		
		}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap {
				min-height: 2.57rem;	
		
		}
			}
:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap):hover {
				background-color: transparent;
			}
:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap):hover .front-side {
					opacity: 0;
					visibility: hidden;
				}
:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap):hover .back-side {
					opacity: 1;
					visibility: visible;
				}
:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side {
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: space-between;
				gap: 0.7rem;
				padding: 0.4rem;
				width: 100%;
				height: 100%;
				opacity: 1;
				visibility: visible;
				transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
			}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side {
					padding: 0.2rem 0.1715rem;
					gap: 0.53rem;
			}
				}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .icon-card {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					width: auto;
					height: auto;
					max-width: 1.66rem;
				}
:is(:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .icon-card) img {
						width: 100%;
						height: auto;
					}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .number-card {
					position: relative;
					display: flex;
					height: auto;
				}
:is(:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .number-card) .number-text {
						font-weight: 300;
						font-size: 1.6rem;
						line-height: 74%;
						color: var(--blue);
					}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .number-card) .number-text {
							font-size: 1rem;
							line-height: 74%;
					}
						}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .icon-card-text-wrap {
					position: relative;
					display: flex;
					align-items: flex-start;
					justify-content: flex-start;
				}
:is(:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .icon-card-text-wrap) .icon-card-text {
						color: var(--white);
					}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .front-side) .icon-card-text-wrap) .icon-card-text {
							font-size: 0.2rem;
							line-height: 120%;
							letter-spacing: -0.02em;
					}
						}
:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .back-side {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				padding: 0.24rem;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: flex-end;
				opacity: 0;
				visibility: hidden;
				transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
			}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .back-side {
					padding: 0.16rem;
			}
				}
:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .back-side) .icon-card-text {
					color: var(--blue);
					font-size: 0.2rem;
					line-height: 130%;
					width: 3.65rem;
					letter-spacing: -0.02em;
				}
@media screen and (max-width: 768px) and (orientation: portrait) {
	:is(:is(:is(.icon-grid-section .icon-card-list-wrap) .icon-card-wrap) .back-side) .icon-card-text {
						width: 100%;
						font-size: 0.16rem;
						line-height: 100%;
				}
					}