Viewing File: /home/maglabs/etascom/wp-content/themes/agenzio/assets/scss/elements/iconbox.scss

.pxl-icon-box {
	position: relative;
	.pxl-item--link {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
	}
}

.pxl-icon-box1 {
	.pxl-item-inner {
		.pxl-meta-content {
			background-color: $link_color;
			position: relative;
			border: 1px solid #3C3C3C;
			display: flex;
  			padding: 48px 30px 43px 49px;
  			@include transition(all 0.3s);
  			@media (max-width: 575px) {
  				padding: 40px 25px;
  			}
  			@media (max-width: 480px) {
  				display: block;
  			}
			.pxl-item-number {
				font-family: Outfit;
				font-size: 200px;
				font-style: normal;
				font-weight: 500;
				line-height: 1;
				color: rgba(#fff, 0.04);
				position: absolute;
				top: 50%;
				right: 19px;
				transform: translateY(-50%);
				@include transition(all 0.3s);
				opacity: 0;
				@media (max-width: 575px) {
					font-size: 150px;
				}
			}
			.pxl-item--icon {
				&.pxl-mr-49 {
					@media (max-width: 1200px) {
						margin-right: 25px;
					}
					@media (max-width: 480px) {
						margin-right: 0;
					}
				}
				@media (max-width: 480px) {
					margin-bottom: 20px;
				}
				svg {
					height: 120px;
					@media (max-width: 575px) {
						height: 80px;
  						width: auto;
					}
					path {
						
					}
				}
				.pxl-icon-seo {
					.pxl-hover-seo {
						stroke-dasharray: 2500;
  						stroke-dashoffset: 0;
  						fill: $primary_color;
					}
				}
				.pxl-icon-sem {
					.pxl-sem-hover {
						stroke-dasharray: 2500;
  						stroke-dashoffset: 0;
  						fill: $primary_color;
					}
				}
				.pxl-icon-calendar {
					.pxl-calendar-hover {
						stroke-dasharray: 2500;
  						stroke-dashoffset: 0;
  						fill: $primary_color;
					}
				}
			}
			.content-inner {
				.pxl-item-title {
					font-family: Outfit;
					font-size: 32px;
					font-style: normal;
					font-weight: 500;
					color: #ffffff;
					margin-bottom: 27px;
					@media (max-width: 575px) {
						font-size: 25px;
						margin-bottom: 20px;
					}
				}
				.pxl-item-desc {
					font-family: Inter;
					font-size: 18px;
					font-style: normal;
					font-weight: 400;
					color: rgba(#fff, 0.6);
					@media (max-width: 575px) {
						font-size: 16px;
					}
				}
			}
			&:hover {
				border-color: $primary_color;
				.pxl-item-number {
					opacity: 1;
				}
			}
		}
	}
}
body.rtl {
	
}