/*--------------------------------------------------------------
BLOG STYLE
----------------------------------------------------------------
# Blog Grid
# Blog Carousel
--------------------------------------------------------------*/

.title-hover-line {
	--title-line-color: #666771;

	a {
		background-repeat: no-repeat;
		background-position-y: -1px;
		background-image: linear-gradient(transparent calc(100% - 1px), var(--title-line-color) 1px);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline forwards;

		&:hover {
			animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) pxl-wide-menu-underline-hover forwards;
		}
	}
}

.pxl-blog-style1 {
	.pxl-post--featured {
		margin-bottom: 18px;
	}

	.pxl-post--button {
		margin-top: 22px;
	}

	.pxl-post--title {
		font-size: 24px;
		font-weight: 500;
		line-height: 1.33;
		/* 133.333% */
		margin-bottom: 24px;
		border-bottom: 1px solid #DFE1E5;
		padding-bottom: 17px !important;

		.char {
			transition: transform 0.3s ease, color 0.3s ease;
			transition-delay: calc(var(--char-index) * 0.03s);
		}

		&:hover {
			.char {
				color: $primary_color;
				@include transform(translateY(-10px));
			}
		}
	}

	.pxl- {
		padding: 0 24px;
	}

	.pxl-post--meta {
		font-size: 18px;
		font-weight: 400;
		line-height: 1.56;
		/* 155.556% */
		position: relative;
		color: #07000E;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		text-transform: capitalize;

		a {
			color: inherit;

			&:hover {
				color: inherit;
			}
		}

		>div {
			display: inline-flex;
			align-items: center;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	.post-button-video {
		font-size: 18px;
		width: 70px;
		height: 70px;
	}

	.pxl-post--author {
		img {
			border-radius: 50%;
			margin-right: 13px;
		}

		cite {
			color: #BABABA;
			font-size: 18px;
			font-weight: 400;
			line-height: 1.56;
			font-family: "DM Sans";
			font-style: normal;
		}
	}

	.pxl-post--inner {
		margin-bottom: 30px;
		border-radius: 8px;
		border: 1px solid #DFE1E5;
		overflow: hidden;
	}
}
.pxl-blog-grid-layout3{
	.pxl-post--featured {
		border-radius: 12px 12px 0px 0px;
		overflow: hidden;
		margin-bottom: 17px;
	}
	.pxl-post--date{
		border-radius: 4px;
		overflow: hidden;
		display: inline-flex;
		background-color: #6300db;
		flex-direction: column;
		position: absolute;
		top: 24px;
		left: 24px;
		.date{
			color: var(--202020, #202020);
			font-size: 36px;
			font-style: normal;
			font-weight: 700;
			line-height: 48px;
			border-radius: 4px;
			text-transform: uppercase;
			padding: 0 23px;
			background-color: #fff;
			display: inline-flex;
		}
		.month{
			color: var(--ffffff, #FFF);
			font-size: 14px;
			font-style: normal;
			font-weight: 600;
			line-height: 30px;
			padding: 0 23px;
		}
	}
	.pxl-post--title{
		a{
			color: $heading_color;
			font-size: 26px;
			font-style: normal;
			font-weight: 500;
			line-height: 1.23;
		}
	}
	.pxl-item--content{
		font-size: 18px;
		font-style: normal;
		font-weight: 400;
	}
	.pxl-holder{
		padding-right: 200px;
		@media (max-width: 880px) {
			padding-right: 120px;
		}
		@media (max-width: 767px) {
			padding-right: 80px;
		}
		@media (max-width: 580px) {
			padding-right: 15px;
		}
	}
}
.pxl-blog-grid-layout2{
	.pxl-post--inner {
		display: flex;
        align-items: center;
        padding: 25px;
        background: #f7f1fc;
        padding-right: 30px;
        margin-bottom: 32px;
        border-radius: 8px;
        border: 4px solid transparent;
        transition: all .3s;
        position: relative;
		gap: 30px;
     	@media (max-width:580px) {
        	display: block;
        	.pxl-post--featured {
        		margin-bottom: 30px;
        	}
    	}
		&:hover {
            border-color: #9117a0;
            transform: rotate(-2.5deg);
            filter: drop-shadow(-0.314px 2.984px 27px rgba(19, 19, 19, 0.18));

            @media #{$max-xs} {
                transform: rotate(0);
            }

            .pxl-post--title {
                background-size: 100% 1px;
            }
        }
		.pxl-post--featured {
			min-width: 160px;
			border-radius: 8px;
			display: inline-flex;
			img {
				max-width: 160px;
				min-height: 169px;
				border-radius: 8px;
				object-fit: cover;
			}
		}
		.pxl-post--title{
			font-size: 24px;
			line-height: 1.25;
			letter-spacing: -1.25px;
			display: inline;
			background-image: linear-gradient(currentColor, currentColor);
			background-position: 0 85%;
			background-repeat: no-repeat;
			background-size: 0% 1px;
			transition: background-size 0.3s ease-in-out;
		}
		.pxl-item--content{
			font-size: 16px;
			line-height: 1.5;
			margin-top: 8px;
			margin-right: 40px;
		}
		.pxl-post--meta{
			display: flex;
  			justify-content: space-between;
			margin-top: 10px;
			@media (max-width:360px) {
			  	margin-top: 15px;
			  	flex-wrap: wrap;
			  	gap: 15px;
			}
		}
		.pxl-post--author{
			font-size: 14px;
			color: $heading_color;
			font-weight: bold;
			line-height: 1.714;
			img{
				margin-right: 14px;
				width: 35px;
				min-width: 35px;
				height: 35px;
				border-radius: 50%;
				border: 3px solid #fff
			}
		}
		.pxl-date-tag{
			display: flex;
			align-items: center;
			.pxl-post--date {
				font-size: 14px;
				color: $heading_color;
				font-weight: bold;
				line-height: 1.714;
				margin-right: 16px;
			}
		
			.pxl-post--tag {
				font-size: 13px;
				color: rgb(255, 255, 255);
				font-weight: bold;
				text-transform: uppercase;
				line-height: 1;
				border-radius: 4px;
				background: $primary_color;
				padding: 5px 11px 3px;
			}
		}
	}
}


.pxl-post-carousel1 {
	.pxl-content {
		>a {
			position: relative;
			padding-left: 33px;

			&::before {
				position: absolute;
				content: '';
				background-color: $primary_color;
				width: 24px;
				height: 1px;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
			}
		}

		.pxl-post--title {
			color: var(--010101, #010101);
			font-size: 22px;
			font-style: normal;
			font-weight: 600;
			line-height: 1.27;
			/* 127.273% */
			letter-spacing: -0.44px;
			padding-bottom: 24px !important;
			padding-top: 10px;
		}
	}

	.pxl-swiper-slide {
		transition: all .3s;

		&.swiper-slide-active {
			margin: 0 -15px 0 0;

			@media #{$max-lg} {
				margin: 0;
			}
		}

		&.swiper-slide-next {
			margin: 0 0 0 -15px;

			@media #{$max-lg} {
				margin: 0;
			}
		}
	}

	.pxl-item--inner {
		display: flex;
		flex-wrap: wrap;
	}

	.pxl-swiper-slide{
		&:nth-child(odd) {
			.pxl-post--featured {
				order: 2;
				margin-bottom: 79px;
			}
	
			.pxl-content {
				order: 1;
				margin-top: 39px;
				margin-bottom: 63px;
				padding: 0 0 0 28px;
			}
		}
		&:nth-child(even) {
			.pxl-content {
				margin-top: 61px;
				padding: 0 28px;
			}
		}
	}

	.pxl-post--meta {
		color: #5F5D61;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: -0.16px;
		justify-content: start;

		.pxl-post--date {
			margin-right: 33px;
		}

		svg {
			margin-right: 12px;
		}
	}

	.pxl-post--featured {
		margin-bottom: 0;
		width: 100%;
	}
}

.pxl-post-carousel2 {
	.pxl-content {
		>a {
			position: relative;
			padding-left: 33px;

			&::before {
				position: absolute;
				content: '';
				background-color: $primary_color;
				width: 24px;
				height: 1px;
				top: 50%;
				transform: translateY(-50%);
				left: 0;
			}
		}

		.pxl-post--title {
			color: var(--010101, #010101);
			font-size: 22px;
			font-style: normal;
			font-weight: 600;
			line-height: 1.27;
			/* 127.273% */
			letter-spacing: -0.44px;
			padding-bottom: 24px !important;
			padding-top: 10px;
		}
	}

	.pxl-swiper-slide {
		transition: all .3s;

		&.swiper-slide-active {
			@media #{$max-md2} {
				margin: 0;
			}
			margin: 0 -15px 0 0;
		}

		&.swiper-slide-next {
			margin: 0 0 0 -15px;
			@media #{$max-md2} {
				margin: 0;
			}
		}
	}

	.pxl-item--inner {
		display: flex;
		flex-wrap: wrap;
	}

	// .item--odd {
	// 	.pxl-post--featured{
	// 		order: 2;
	// 		margin-bottom: 79px;
	// 	}
	// 	.pxl-content{
	// 		order: 1;
	// 		margin-top: 39px;
	// 		margin-bottom: 63px;
	// 		padding: 0 0 0 28px;
	// 	}
	// }
	.pxl-content {
		margin-top: 28px;
	}

	.pxl-post--meta {
		color: #5F5D61;
		font-size: 16px;
		font-weight: 400;
		letter-spacing: -0.16px;
		justify-content: start;

		.pxl-post--date {
			margin-right: 33px;
		}

		svg {
			margin-right: 12px;
		}
	}

	.pxl-post--featured {
		margin-bottom: 0;
	}
}

.pxl-post-carousel3 {
	.pxl-post--date {
		display: inline-grid;
		text-align: center;
		background: $primary_color;
		width: 80px;
		clip-path: polygon(13% 0%, 95% 0%, 100% 0%, 100% 82%, 93% 90%, 85% 100%, 0% 100%, 0% 95%, 0% 13%, 7% 7%);
		border-radius: 4px;
		position: absolute;
		bottom: -30px;
		left: 32px;

		.date {
			color: var(--202020, #202020);
			font-size: 36px;
			font-weight: 800;
			text-transform: uppercase;
			height: 48px;
			line-height: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			clip-path: polygon(11% 0, 100% 1%, 100% 82%, 90% 100%, 0 100%, 0 20%);
			background: #fff;
			border-radius: 4px;
		}

		.month {
			color: var(--ffffff, #FFF);
			font-size: 14px;
			font-weight: 600;
		}
	}

	.pxl-post--featured {
		img {
			clip-path: polygon(12% 0, 100% 0, 100% 85%, 89% 100%, 0 100%, 0 15%);
			border-radius: 8px;
		}
	}

	.pxl-post--title {
		color: var(--010101, #010101);
		font-size: 26px;
		font-weight: 600;
		line-height: 1.23;
		letter-spacing: -0.52px;
		margin: 54px 0 25px;
		padding: 0 0 24px 0;
		border-bottom: 1px solid #EDEDED;
	}

	.pxl-item--inner {
		position: relative;
		&::before {
			content: '';
			background: #D9D9D9;
			position: absolute;
			width: 100%;
			height: 100%;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: -1;
			clip-path: polygon(15% 0, 100% 0, 100% 92%, 90% 100%, 0 100%, 0 15%);
			border-radius: 8px;
		}
		&::after {
			content: '';
			background: #ffffff;
			position: absolute;
			width: calc(100% - 2px);
  			height: calc(100% - 2px);
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			z-index: -1;
			clip-path: polygon(15% 0, 100% 0, 100% 92%, 90% 100%, 0 100%, 0 15%);
			border-radius: 8px;
			@media #{$max-lg-1} {
				clip-path: polygon(15% 0, 100% 0, 100% 92%, 90% 99.8%, 0 99.8%, 0 15%);
			}
		}
	}

	.pxl-post--author {
		display: flex;
		align-items: center;

		img {
			border-radius: 50%;
			margin-right: 13px;
		}
	}
	.pxl-content{
		padding: 0 32px 20px 32px;
	}
	.pxl-post--meta{
		display: flex;
		align-items: center;
		margin-bottom: 31px;
		justify-content: space-between;
	}
	.pxl-text{
		color: var(--3-c-3-c-3-c, #3C3C3C);
		font-size: 18px;
		font-weight: 400;
		letter-spacing: -0.36px;
		display: flow-root list-item;
	}
	.author-name{
		a{
			color: var(--3-c-3-c-3-c, #3C3C3C);
			font-size: 18px;
			font-weight: 500;	
			letter-spacing: -0.36px;
		}
	}
}
.author-admin{
	#pxl-main{
		padding: 220px 0 120px 0;
	}
}

body.rtl {}