@use '../utils' as *;
/*---------------------------------
    1.1 Common Classes
---------------------------------*/
.w-img{
	& img{
		width: 100%;
	}
}
.m-img{
	& img{
		max-width: 100%;
	}
}
.fix {
    overflow:hidden
}
.clear{
    clear: both;
}

.z-index-1{
	position: relative;
	z-index: 1;
}
.z-index-2{
	position: relative;
	z-index: 2;
}
.z-index-3{
	position: relative;
	z-index: 3;
}
.z-index-4{
	position: relative;
	z-index: 4;
}
.z-index-5{
	position: relative;
	z-index: 5;
}
.z-index-6{
	position: relative;
	z-index: 6;
}
.z-index-7{
	position: relative;
	z-index: 7;
}
.z-index-8{
	position: relative;
	z-index: 8;
}
.z-index-9{
	position: relative;
	z-index: 9;
}
.z-index-10{
	position: relative;
	z-index: 10;
}

.gx-10{
	--bs-gutter-x: 10px;
}
.gx-20{
	--bs-gutter-x: 20px;
}
.gx-30{
	--bs-gutter-x: 30px;
}
.gx-40{
	--bs-gutter-x: 40px;
}
.gx-45{
	--bs-gutter-x: 45px;
}
.gx-50{
	--bs-gutter-x: 50px;
}
.gx-60{
	--bs-gutter-x: 60px;
}
.gx-70{
	--bs-gutter-x: 70px;
}
.gx-80{
	--bs-gutter-x: 80px;
}
.gx-90{
	--bs-gutter-x: 90px;
}
.gx-100{
	--bs-gutter-x: 100px;
}

.overflow-y-visible{
	overflow-x: hidden;
	overflow-y: visible;
}
.p-relative{
	position: relative;
}
.p-absolute{
	position: absolute;
}
.include-bg{
	@include tp-background();
}

/* dropcap */
.tp-dropcap{
	&::first-letter{
		float: left;
		width: 65px;
		height: 85px;
		font-size: 90px;
		line-height: .8;
		font-weight: 500;
		margin-right: 5px;
		text-align: center;
		line-height: inherit;
		text-transform: capitalize;
		color: var(--tp-common-white);
		font-family: var(--tp-ff-body);
	}
}
.tp-line-hover{
	position: relative;
	display: inline-block;
	&::after{
		right: 0;
		bottom: -2px;
		width: 0;
		height: 1px;
		content: '';
		position: absolute;
		background-color: var(--tp-common-black);
		transition: .4s;
	}
	&:hover{
		&::after{
			right: auto;
			left: 0;
			width: 100%;
		}
	}
}