/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 10 2026 | 10:14:52 */
/* ========================================= GRID CARDS ========================================= */
.grid-cards-section {
	.text-wrapper {
		display: flex;
		justify-content: center;
		background-color: var(--white-dyn-1);
		transition: all 0.4s;
		
		.text-container {
			max-width: 1200px;
			text-align: center;
			color: var(--gray-dark-1-dyn-1);
			transition: all 0.4s;
		}
	}
	
	.grid-wrapper {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		
		@media screen and (min-width: 768px) {
			grid-template-columns: repeat(4, 1fr);
		}
		
		.grid-card {
			height: 50vw;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 1rem;
			position: relative;
			padding: 1.5rem;
			
			&:nth-child(1) {order: 1}
			&:nth-child(2) {order: 2}
			&:nth-child(3) {order: 4}
			&:nth-child(4) {order: 3}
			&:nth-child(5) {order: 6}
			&:nth-child(6) {order: 5}
			&:nth-child(7) {order: 7}
			&:nth-child(8) {order: 8}
			
			@media screen and (min-width: 576px) {
				padding: 3rem 2.5rem;
			}
			
			@media screen and (min-width: 768px) {
				height: 25vw;
				order: unset !important;
				padding: 1.5rem 1rem;
			}
			
			@media screen and (min-width: 1200px) {
				padding: 3rem 2.5rem;
			}
			
			&::before {
				content: "";
				position: absolute;
			}
			
			&.card-color {
				&.color-white {
					background-color: var(--white);
					color: var(--green-dark-1);
				}
				
				&.color-light-blue {
					background-color: var(--light-blue);
					color: var(--green-dark-1);
				}
				
				&.color-green-dark {
					background-color: var(--green-dark-2);
					color: var(--white);
				}
				
				&.color-teal-light {
					background-color: var(--teal-light);
					color: var(--white);
				}
				
				&::before {
					right: 0;
					top: 50%;
					transform: translate(50%, -50%) rotate(45deg);
					width: clamp(1rem, 10%, 2rem);
					aspect-ratio: 1 / 1;
					background-color: inherit;
					z-index: 3;
				}
				
				@media screen and (max-width: 768px) {
					&:nth-child(3), &:nth-child(8) {
						&::before {
							right: unset;
							left: 0;
							transform: translate(-50%, -50%) rotate(45deg);
						}
					}
				}
				
				@media screen and (min-width: 768px) {
					&:nth-last-child(-n + 4):nth-child(n + 5) {
						&::before {
							right: unset;
							left: 0;
							transform: translate(-50%, -50%) rotate(45deg);
						}
					}
				}
			}
			
			&.card-image {
				background-position: center;
				background-size: cover;
				background-repeat: no-repeat;
				color: #fff;
				z-index: 2;
				
				&::before {
					background-color: var(--green-dark-transparent-2);
					top: 0;
					bottom: 0;
					right: 0;
					left: 0;
					z-index: -1;
				}
			}
			
			.card-title {
				font-size: 1.25rem;
				font-weight: 600;
				text-align: center;
				line-height: 1.1;
				
				@media screen and (min-width: 1200px) {
					font-size: 1.5rem;
				}
			}
			
			.card-icon {
				max-height: 45%;
			}
			
			.card-text {
				font-size: 0.9rem;
				line-height: 1.3;
				color: inherit;
				
				@media screen and (min-width: 576px) {
					font-size: 1rem;
					line-height: 1.5;
				}
				
				@media screen and (min-width: 768px) {
					font-size: 0.9rem;
					line-height: 1.3;
				}
				
				@media screen and (min-width: 991px) {
					font-size: 1rem;
					line-height: 1.5;
				}
			}
		}
	}
}