.timeline-wrapper{
    position: relative;
	
	&.style-1{
		&:after{
			content: "";
			background-image: url("data:image/svg+xml,<svg viewBox='0 0 1919 342' fill='none' xmlns='http://www.w3.org/2000/svg'><path opacity='0.25' d='M-3 1H910C937.614 1 960 23.3858 960 51V291C960 318.614 982.386 341 1010 341H1919' stroke='black' stroke-width='2'/></svg>");
			height: calc(100% - 65px);
			width: 100%;
			position: absolute;
			top: 30px;
			left: 0;
			background-position: center;
			background-size: cover;
			opacity: 0.5;
			background-repeat: no-repeat;
			z-index: -1;
			
			@include respond('laptop'){
				height: calc(100% - 50px);
				top: 20px;
			}
			@include respond('tab-port'){
				display: none;
			}
		}
		.timeline-inner{
			display: flex;
			margin-left: -70px;
			margin-right: -70px;
			position: relative;
			padding-top: 30px;
			justify-content: space-between;
			gap: 50px;

			@include respond('laptop'){
				margin-left: 0;
				margin-right: 0;
			}
			@include respond('tab-land'){
				gap: 30px;
			}
			@include respond('tab-port'){
				display: block;
			}
		}
		.timeline-wrap{
			width: 330px;
			padding-left: 10px;
			padding-right: 10px;
			position: relative;
			padding-top: 110px;
			transform: translateY(-30px);
			
			&.bottom{
				padding-top: 0;
				padding-bottom: 110px;
				transform: translateY(-10px);
			}
			@include respond('laptop'){
				width: 300px;
				padding-top: 110px;
				
				&.bottom{
					padding-top: 0;
					padding-bottom: 100px;
				}
			}
			@media only screen and (max-width: 1380px){
				width: 100%;
			}
			@include respond('tab-land'){
				padding-top: 85px;
				
				&.bottom{
					padding-top: 0;
					padding-bottom: 85px;
				}
			}
			@include respond('tab-port'){
				padding-top: 0;
				padding-left: 70px;
				padding-right: 0;
				transform: translateY(0);
				margin-bottom: 20px;
				
				&.bottom{
					padding-top: 0;
					padding-bottom: 0;
					transform: translateY(0);
				}
			}
			@include respond('phone'){
				padding-left: 55px;
			}
		}
		.timeline-left,
		.timeline-right{
			display: flex;
			
			@include respond('tab-port'){
				width: 100%;
				display: block;
			}
		}
		.timeline-right{
			justify-content: flex-end;
		}
		.timeline-info{
			background-color: var(--bs-light);
			border-radius: var(--radius-lg);
			padding: 30px;
			height: 100%;
			
			.title{
				font-size: 20px;
			}
			p{
				font-size: 15px;
				
				&:last-child{
					margin-bottom: 0;
				}
			}
			@include respond('laptop'){
				padding: 20px;
				
				.title{
					font-size: 18px;
				}
				p{
					font-size: 14px;
				}
			}
			@include respond('tab-land'){
				padding: 15px;
				
				.title{
					font-size: 16px;
				}
			}
		}
		.timeline-head{
			text-align: center;
			margin-bottom: 30px;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			
			.step{
				font-weight: 600;
				text-transform: uppercase;
			}
			@media only screen and (max-width: 1380px){
				.step{
					font-size: 14px;
				}
			}
			@include respond('tab-port'){
				left: 0;
				transform: translateX(0);
			}
			@include respond('phone'){
				.step{
					font-size: 12px;
				}
			}
		}
		.timeline-number{
			height: 55px;
			width: 55px;
			border-radius: 50%;
			background-color: var(--bs-primary);
			text-align: center;
			line-height: 55px;
			color: #fff;
			font-weight: 500;
			font-size: 24px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 5px;
			
			@include respond('laptop'){
				height: 45px;
				width: 45px;
				line-height: 45px;
				font-size: 18px;
			}
			@include respond('phone'){
				height: 40px;
				width: 40px;
				line-height: 40px;
				font-size: 15px;
			}
		}
		.timeline-line{
			position: absolute;
			left: 50%;
			width: 100vw;
			transform: translateX(-50%);
			top: 28px;
		}
		.timeline-wrap.bottom{
			.timeline-head{			
				bottom: 0;
				top: auto;
				margin-top: 30px;
				margin-bottom: 0;
				display: flex;
				flex-direction: column-reverse;
			}
			.timeline-number{
				margin-top: 5px;
				margin-bottom: 0;
			}
			@include respond('tab-port'){
				.timeline-head{
					margin-top: 0;
					top: 0;
					bottom: auto;
					flex-direction: column;
				}
				.timeline-number{
					margin-top: 0;
				}
			}
		}
	}
	&.style-2{
		.timeline-inner{
			position: relative;
			
			&:after{
				content: "";
				width: 100%;
				height: 1px;
				background-color: #000;
				opacity: 0.1;
				position: absolute;
				top: 30px;
				z-index: -1;
			}
			@include respond('laptop'){
				&:after{
					top: 25px;
				}
			}
			@include respond('tab-port'){
				&:after {
					width: 1px;
					height: 100%;
					top: 30px;
					left: 23px;
					top: 0;
				}
			}
			@include respond('phone'){
				&:after {
					left: 20px;
				}
			}
		}
		.timeline-number{
			height: 55px;
			width: 55px;
			border-radius: 50%;
			background-color: var(--bs-primary);
			text-align: center;
			line-height: 55px;
			color: #fff;
			font-weight: 500;
			font-size: 24px;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 5px;
			
			@include respond('laptop'){
				height: 45px;
				width: 45px;
				line-height: 45px;
				font-size: 18px;
			}
			@include respond('phone'){
				height: 40px;
				width: 40px;
				line-height: 40px;
				font-size: 15px;
			}
		}
		.timeline-wrap{
			text-align: center;
		}
		.timeline-head{
		    margin-bottom: 30px;
		}
		.title{
			font-size: 20px;
		}
		p{
			font-size: 18px;
			
			&:last-child{
				margin-bottom: 0;
			}
		}
		.timeline-info{
			padding-left: 15px;
			padding-right: 15px;
			
			@include respond('tab-port'){
				padding-left: 65px;
				padding-right: 0;
			}
			@include respond('phone'){
				padding-left: 55px;
			}
		}
		@include respond('laptop'){
			.title{
				font-size: 18px;
			}
			p{
				font-size: 16px;
			}
			.timeline-head{
				margin-bottom: 20px;
			}
		}
		@include respond('tab-port'){
			.timeline-wrap{
				text-align: left;
			}
			.timeline-head{
				position: absolute;
				left: 0;			
			}
		}
		@include respond('phone'){
			.title{
				font-size: 16px;
			}
			p{
				font-size: 15px;
			}
		}
	}
}