@use '../../utils' as *;

/*----------------------------------------*/
/*  4.28 line css
/*----------------------------------------*/

//   line animation css
.line{
	&__wrap{
		&::before{
			width: 1px;
			height: 100%;
			position: absolute;
			content: "";
			background: rgba(20, 35, 64, 0.1);
			z-index: -1;
			top: 0;
      		left: 39%;
		}
		&::after{
			width: 1px;
			height: 100%;
			position: absolute;
			content: "";
			background: rgba(20, 35, 64, 0.1);
			z-index: -1;
			top: 0;
      		left: 360px;
			  @media #{$laptop}{
				left: 100px;
			}
		}
	}
	&__item{
		&::before{
      position: absolute;
      content: "";
      width: 2px;
      height: 40px;
      z-index: -1;
      background: var(--rs-theme-deep-blue);
      left: 359px;
      border-radius: 50%;
      animation: line1 15s linear infinite;

		}
		&::after{
      position: absolute;
      content: "";
      width: 2px;
      height: 40px;
      z-index: -1;
      background: var(--rs-theme-deep-blue);
      left:39%;
      border-radius: 50%;
      animation: line2 15s linear infinite;

		}
	}
	&__wrap-two{
		&::before{
			width: 1px;
			height: 100%;
			position: absolute;
			content: "";
			background: rgba(20, 35, 64, 0.1);
			z-index: -1;
			top: 0;
      		right: 41%;
		}
		&::after{
			width: 1px;
			height: 100%;
			position: absolute;
			content: "";
			background: rgba(20, 35, 64, 0.1);
			z-index: -1;
			top: 0;
      		right: 400px;
			@media #{$laptop}{
				right: 100px;
			}
		}
	}
	&__item-two{
		&::before{
      position: absolute;
      content: "";
      width: 2px;
      height: 40px;
      z-index: -1;
      background: var(--rs-theme-deep-blue);
      right: 400px;
      border-radius: 50%;
      animation: line1 15s linear infinite;

		}
		&::after{
      position: absolute;
      content: "";
      width: 2px;
      height: 40px;
      z-index: -1;
      background: var(--rs-theme-deep-blue);
      right:41%;
      border-radius: 50%;
      animation: line2 15s linear infinite;

		}
	}
}




// Line Animation keyframes
@keyframes line1 {
	0% {
		top: 0px;
		opacity: 1;
	}

	50% {
		top: 50%;
	}

	100% {
		top: 100%;
		opacity: 1;
	}
}

@keyframes line2 {
	0% {
		opacity: 1;
		bottom: 0px;
	}

	50% {
		bottom: 50%;
	}

	100% {
		bottom: 100%;
		opacity: 1;
	}
}
//   line animation css