Na}{

File Content: _grid.scss

.grid-filter-wrap{
	row-gap:10px;
	column-gap: 42px;
	margin-bottom: 60px;
	@media (max-width: $lg_max){
		column-gap: 30px;
		margin-bottom: 40px;
	}
	.filter-item{
		position: relative;
		color: $heading_color;
	    display: inline-block;
	    font-family: $heading_font_family;
	    font-weight: 500;
	    font-size: 18px;
	    text-transform: capitalize;
	    cursor: pointer;
	    padding-bottom: 10px;
	    @include transition( all .3s ease);
	    @media (max-width: $lg_max){
	    	padding-bottom: 5px;
	    }
	    @media (max-width: $sm_max){
	    	font-size: 16px;
	    	padding-bottom: 0;
	    }
		&:before{
			content: "";
			width: 0;
			height: 2px;
			background-color: $second_color;
			position: absolute;
			bottom: 0;
			left: 50%;
			@include transform(translateX(-50%));
			transform-origin: center;
			@include transition( all .3s ease);
		} 
		&.active, &:hover{
			color: $second_color;
			&:before{
				width: 100%;
				left: 50%;
			}
		}
	}
}

.pxl-post-grid{
	&.layout-post-1{
		.item-title{
			margin-bottom: 0;
			@include text-multi-line(28px, 1.25em, 2);
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 22px;
			}
		}
		.item-meta{
			font-size: 16px;
			line-height: 35px;
			font-weight: 500;
			text-transform: capitalize;
			a{
				@include multiline-hover-underline($body_color);
			}
			.pxl-dash{
				position: relative;
				display: inline-block;
				width: 10px;
				height: 1px;
				background-color: var(--body-color);
				top: -5px;
				margin: 0 6px;
			}
		}
		.pxl-readmore{
            width: 60px;
            height: 60px;
            background-color: $primary_color;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
			opacity: 0;
			transform: translateX(-100%) rotate(-360deg);
            transition: all 0.5s ease-out;
			.pxl-icon{
				overflow: hidden;
			}
            i{
                font-size: 24px;
				color: $heading_color;
            }
            &:hover{
                color: initial;
                i{
                    animation: toTopFromBottom 0.4s forwards;
                }
            }
			@media (max-width: $sm_max) {
				width: 50px;
				height: 50px;
			}
        }
		.item-content{
			margin-top: 22px;
			display: flex;
			justify-content: space-between;
			gap: 15px;
		}
		.post-image {
			img{
				@media (max-width: $xs_max) {
					min-height: 400px;
					width: 100%;
				}
			}
		}
		.grid-item-inner{
			&:hover{
				.pxl-readmore{
					transform: translateX(0) rotate(0);
					opacity: 1;
				}
			}
		}
	}
}

.pxl-service-grid{
	&.layout-services-1{
		.service-icon{
			svg{
				width: 60px;
				height: 60px;
				fill: $heading_color;
				@include transition(all 350ms ease-in 0s);
				@media (max-width: $xs_max) {
					width: 40px;
					height: 40px;
				}
			}
		}
		.item-content{
			margin-top: 30px;
			@media (max-width: $xs_max) {
				margin-top: 20px;
			}
		}
		.item-title{
			font-size: 24px;
			line-height: 20px;
			margin-bottom: 19px;
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 20px;
				margin-bottom: 12px;
			}
		}
		.item-excerpt{
			font-size: 18px;
			line-height: 20px;
			max-width: 295px;
			@media (max-width: $xs_max) {
				font-size: 16px;
			}
		}
		.pxl-readmore{
			font-size: 16px;
			font-weight: 500;
			color: $heading_color;
			border: 1px solid var(--border-color);
			padding: 11px 19px;
			gap: 6px;
			margin-top: 37px;
			position: relative;
			@include transition(all 250ms linear 0s);
			&::before{
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				top: 0;
				background-color: $primary_color;
				transform-origin: bottom left;
				@include transition(all 250ms linear 0s);
				@include transform(scale(0));
				z-index: -1;
			}
			i{
				font-size: 20px;
			}
			.pxl-icon{
				overflow: hidden;
			}
			&:hover{
				&::before{
					@include transform(scale(1));
				}
				i{
					animation: toTopFromBottom 0.4s forwards;
				}
				border-color: $primary_color;
			}
			@media (max-width: $xs_max) {
				margin-top: 25px;
			}
		}
		.pxl-divider{
			display: block;
			background-color: var(--border-color);
			width: 100%;
			height: 1px;
			margin: 20px 0;
			position: relative;
			&::before{
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 0;
				height: 100%;
				background-color: $heading_color;
				transition: all 350ms ease-in 0s;
			}
			@media (max-width: $xs_max) {
				max-width: 300px;
			}
		}
		.service-category{
			gap: 5px;
			a{
				color: $heading_color;
				font-size: 14px;
				line-height: 20px;
				font-weight: 500;
				text-transform: uppercase;
				border-radius: 4px;
				background-color: rgba(0, 0, 0, 0.04);
				padding: 1px 8px;
				transition: all 350ms ease 0s;
				&:hover{
					background-color: $primary_color;
				}
			}
		}
		.grid-item-inner{
			&:hover{
				.pxl-divider{
					&::before{
						width: 100%;
					}
				}
				svg{
					transform: scale(1.03) translateY(3px);
				}
			}
		}
	}
	&.layout-services-2{
		.item-content{
			display: flex;
			gap: 24px;
			padding: 53px 36px 42px 45px;
			border-bottom: 1px solid #ECECDE;
			@media (max-width: $xs_max) {
				flex-direction: column;
				padding: 40px 25px 35px 25px;
				gap: 17px;
			}
		}
		.item-title{
			font-size: 24px;
			line-height: 35px;
			margin-bottom: 3px;
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 22px;
				line-height: 30px;
			}
		}
		.item-excerpt{
			max-width: 374px;
			font-size: 16px;
			line-height: 1.5;
			@include text-multi-line(16px, 1.5, 3);
		}
		.grid-item-inner{
			background-color: #fff;
			border-radius: 20px;
			overflow: hidden;
			&:hover{
				.item-number{
					color: $primary_color;
				}
			}
		}
		.item-category{
			display: flex;
			padding: 21px 36px 22px 45px;
			gap: 29px;
			@media (max-width: $xs_max) {
				padding: 21px 20px 22px 25px;
				gap: 20px;
				flex-wrap: wrap;
			}
		}
		.item-number{
			font-size: 95px;
			font-weight: 700;
			color: $third_color;
			line-height: 35px;
			position: relative;
			top: 17px;
			transition: all 350ms ease-in-out 0s;
			@media (max-width: $lg_max) {
				font-size: 75px;
			}
			@media (max-width: $xs_max) {
				font-size: 55px;
				top: 0;
			}
		}
		.service-category{
			gap: 11px;
			> a{
				border-radius: 8px;
				border: 2px solid $third_color;
				font-size: 14px;
				font-weight: 500;
				padding: 5px 13px;
				color: $body_color;
				transition: all 350ms ease-in-out 0s;
				&:hover{
					background-color: $primary_color;
					border-color: $primary_color;
					color: $heading_color;
				}
			}
		}
		.service-icon{
			svg{
				@media (max-width: $xs_max) {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}

.pxl-team-list{
	.item-image{
		position: absolute;
		width: 300px;
    	height: 350px;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 0;
	}
	.reveal-image{
		position: relative;
		background-size: cover;
		background-position: 50% 50%;
		width: 100%;
		height: 100%;
	}
	.item-name{
		margin-bottom: 0;
		font-size: 40px;
		line-height: 1.75em;
		transition: all 300ms ease-in-out 0s;
	}
	.item-position{
		font-size: 18px;
	}
	.item-box-title{
		align-items: baseline;
		gap: 10px;
	}
	.inner-item{
		border-bottom: 1px solid var(--border-color);
		position: relative;
		&:first-child{
			border-top: 1px solid var(--border-color);
		}
		&::before, &::after {
			content: "";
			position: absolute;
			height: 0;
			width: 100%;
			left: 50%;
			transform: translateX(-50%);
			background-color: $primary_color;
			transition: height 0.35s cubic-bezier(0.785, 0.135, 0.15, 0.86);
			z-index: -1;
		}
		&::before {
			bottom: 50%;
		}
		&::after {
			top: 50%;
		}
		&:hover {
			&::before, &::after {
				height: 50%;
			}
			.item-position{
				color: rgba(0, 0, 0, 0.7);
			}
			.pxl-button-more{
				> a{
					color: $heading_color;
					span{
						color: $heading_color;
					}
				}
			}
			.item-social > * {
				opacity: 1;
				transform: translateY(0px);
			}
		}
	}
	.box-item{
		max-width: 1350px;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		padding: 26px 15px;
		@media (max-width: $md_max) {
			flex-wrap: wrap;
			gap: 20px;
			.pxl-button-more{
				width: 100%;
			}
		}
	}
	.pxl-button-more{
		> a{
			font-size: 18px;
			line-height: 24px;
			font-weight: 400;
			color: $body_color;
			display: inline-flex;
			align-items: center;
			gap: 5px;
			overflow: hidden;
			i{
				font-size: 20px;
			}
			span{
				@include multiline-hover-underline();	
				color: $body_color;
			}
			&:hover{
				i{
					animation: toTopFromBottom 0.4s forwards;
				}
			}
			@media (max-width: $xs_max) {
				font-size: 16px;
				i{
					font-size: 17px;
				}
			}
		}
	}
	.item-social{
		display: flex;
		gap: 10px;
		> * {
            opacity: 0;
            transform: translateY(10px);
            transition: all 250ms ease-in;
            &:nth-child(1) {
                transition-delay: 120ms;
            }
            &:nth-child(2) {
                transition-delay: 150ms;
            }
            &:nth-child(3) {
                transition-delay: 180ms;
            }
            &:nth-child(4) {
                transition-delay: 210ms;
            }
			@media (max-width: $sm_max) {
				opacity: 1;
				transform: translateY(0);
			}
        }
		a{
			border: 1px solid $heading_color;
			border-radius: 6px;
			width: 40px;
			height: 40px;
			align-items: center;
			display: flex;
			justify-content: center;
			transition: all 300ms ease-in-out;
			&:hover{
				background-color: $heading_color;
				i{
					color: $primary_color;
				}
			}
			@media (max-width: $xs_max) {
				width: 30px;
				height: 30px;
				i{
					font-size: 14px;
				}
			}
		}
		i{
			font-size: 16px;
			color: $heading_color;
		}
	}
}

.pxl-service-list{
	&.layout-services-list-1{
		.item-title{
			font-size: 30px;
			margin-bottom: 10px;
			> a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 22px;
				margin-bottom: 6px;
			}
		}
		.meta-item{
			font-size: 14px;
			font-weight: 500;
			color: $heading_color;
			opacity: 0.4;
			text-transform: uppercase;
		}
		.item-content{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 17px;
		}
		.pxl-button-more{
			min-width: 80px;
			height: 50px;
			background-color: $primary_color;
			border-radius: 40px;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			transform: translateX(-100%) scale(0.5);
			transition: all 350ms ease-in-out 0s;
			i{
				font-size: 20px;
				color: $heading_color;
			}
			&:hover{
				i{
					animation: toleftFromright 0.4s forwards;
				}
			}
			@media (max-width: $xs_max) {
				min-width: 60px;
				height: 42px;
				border-radius: 20px;
				i{
					font-size: 16px;
				}
			}
		}
		.item-featured{
			@media (max-width: $sm_max) {
				img{
					width: 100%;
					height: 400px;
					max-height: 400px;
					object-fit: cover;
				}
			}
		}
		.grid-item-inner{
			&:hover{
				.pxl-button-more{
					opacity: 1;
					transform: translateX(0) scale(1);
				}
			}
		}
	}
	&.layout-services-list-2{
		.item-content{
			display: flex;
			gap: 24px;
			padding: 53px 36px 42px 45px;
			border-bottom: 1px solid #ECECDE;
			@media (max-width: $xs_max) {
				flex-direction: column;
				padding: 40px 25px 35px 25px;
				gap: 17px;
			}
		}
		.item-title{
			font-size: 24px;
			line-height: 35px;
			margin-bottom: 3px;
			a{
				@include multiline-hover-underline();
			}
			@media (max-width: $xs_max) {
				font-size: 22px;
				line-height: 30px;
			}
		}
		.item-excerpt{
			max-width: 374px;
			font-size: 16px;
			line-height: 1.5;
			@include text-multi-line(16px, 1.5, 3);
		}
		.grid-item-inner{
			background-color: #fff;
			border-radius: 20px;
		}
		.item-category{
			display: flex;
			padding: 21px 36px 22px 45px;
			gap: 29px;
			@media (max-width: $xs_max) {
				padding: 21px 20px 22px 25px;
				gap: 20px;
				flex-wrap: wrap;
			}
		}
		.item-number{
			font-size: 95px;
			font-weight: 700;
			color: $third_color;
			line-height: 35px;
			position: relative;
			top: 17px;
			transition: all 350ms ease-in-out 0s;
			@media (max-width: $sm_max) {
				font-size: 75px;
			}
			@media (max-width: $xs_max) {
				font-size: 55px;
				top: 0;
			}
		}
		.service-category{
			gap: 11px;
			> a{
				border-radius: 8px;
				border: 2px solid $third_color;
				font-size: 14px;
				font-weight: 500;
				padding: 5px 13px;
				color: $body_color;
				transition: all 350ms ease-in-out 0s;
				&:hover{
					background-color: $primary_color;
					border-color: $primary_color;
					color: $heading_color;
				}
			}
		}
		.list-item{
			overflow: hidden;
			&.active, &:hover{
				.item-number{
					color: $primary_color;
				}
			}
		}
		.service-icon{
			svg{
				@media (max-width: $xs_max) {
					width: 80px;
					height: 80px;
				}
			}
		}
	}
}

.dark-mode{
	.pxl-post-grid.layout-post-1{
		.pxl-readmore{
			background-color: $heading_color;
			i{
				color: $dark;
			}
		}
	}
	.pxl-load-more{
		.btn-grid-loadmore{
			color: $dark;
		}
	}
	.pxl-service-grid{
		.pxl-readmore{
			&:hover{
				color: #191B1D;
			}
		}
		.service-category a{
			&:hover{
				color: #191B1D;
			}
		}
	}
	.pxl-team-list .pxl-button-more > a span{
		background-image: linear-gradient(transparent calc(100% - 1px), #191B1D 1px);
	}
}

Name	Size	Permission
_basic.scss	45693 bytes	0644
_carousel.scss	21992 bytes	0644
_grid.scss	14365 bytes	0644
_list.scss	6012 bytes	0644
_slider.scss	7318 bytes	0644
elements.scss	92 bytes	0644