:root {
	--animation-bg-color: rgba(27, 54, 93, 0.1);
}

@media (min-width: 1025px) and (max-width: 1440px) {
	.draw-section-1 > .e-con-inner.in-view::after {
		content: '';
    position: absolute;
    left: -60px;
    bottom: -50px;
    width: 0;
    height: 2px;
    background: var(--animation-bg-color);
    animation: draw-bottom-border-section-1-1440 1s ease-in-out forwards;
    animation-delay: 1s;
	}
		/* Keyframe for bottom border - draws from left to right */
		@keyframes draw-bottom-border-section-1-1440 {
			0% {
				width: 0;
			}
			100% {
				width: calc(100% + 20px);
			}
		}
}
@media (min-width: 1441px)  {
	/* Bottom border animation */
	.draw-section-1 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -60px;
		bottom: -52px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-1 .5s ease-in-out forwards;
		animation-delay: 1s;
	}
	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-1 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 120px);
		}
	}
}
@media (min-width: 1024px) {
	/* ===== DRAW SECTION 1 BORDER ANIMATION ===== */
	.draw-section-1 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-1 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -60px;
		top: -65px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-1 1s ease-in-out forwards;
	}

	

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-1 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 115px);
		}
	}


	/* ===== DRAW SECTION 2 BORDER ANIMATION ===== */
	.draw-section-2 > .e-con-inner {
		position: relative;
	}

	/* Right border animation */
	.draw-section-2 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -60px;
		top: -15px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-right-border-section-2 1s ease-in-out forwards;
		animation-delay: 0s;
		left: auto;
	}

	/* Keyframe for right border - draws from top to bottom */
	@keyframes draw-right-border-section-2 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 35px);
		}
	}


	/* ===== DRAW SECTION 3 BORDER ===== */
	.draw-section-3 > .e-con-inner {
		position: relative;
	}

	.draw-section-3 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -60px;
		top: -48px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-top-border-section-3 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-3 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -60px;
		top: -47px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-icon-box-border 1s ease-in-out forwards;
		animation-delay: 1.5s;
		/* right: auto; */
	}


	/* Keyframe for icon box bottom border - draws from right to left */
	@keyframes draw-top-border-section-3 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 120px);
		}
	}

	/* Keyframe for icon box right border - draws from top to bottom */
	@keyframes draw-icon-box-border {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 123px);
		}
	}

	/* ===== DRAW SECTION 4 BORDER ===== */
	.draw-section-4 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-4 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -60px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-4 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-4 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 30px);
		}
	}

	/* ===== DRAW SECTION 5 BORDER ===== */
	.draw-section-5 > .e-con-inner {
		position: relative;
	}

	/* Bottom border animation */
	.draw-section-5 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -60px;
		top: -38px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-5 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-5 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		right: -60px;
		top: -38px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-5 1s ease-in-out forwards;
		animation-delay: 1.5s;
	}


	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-5 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 120px);
		}
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-5 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 130px);
		}
	}

	/* ===== DRAW SECTION 6 BORDER ===== */
	.draw-section-6 > .e-con-inner {
		position: relative;
	}

	.draw-section-6 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -60px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-6 1s ease-in-out forwards;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-6 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 35px);
		}
	}

	/* ===== DRAW SECTION 7 BORDER ===== */
	.draw-section-7 > .e-con-inner {
		position: relative;
	}

	.draw-section-7 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -60px;
		top: -36px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-top-border-section-7 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-7 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -60px;
		top: -36px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-icon-box-border-7 1s ease-in-out forwards;
		animation-delay: 1.5s;
		/* right: auto; */
	}


	/* Keyframe for icon box bottom border - draws from right to left */
	@keyframes draw-top-border-section-7 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 120px);
		}
	}

	/* Keyframe for icon box right border - draws from top to bottom */
	@keyframes draw-icon-box-border-7 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 107px);
		}
	}

	/* ===== DRAW SECTION 8 BORDER ===== */
	.draw-section-8 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-8 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -60px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-8 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-8 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 30px);
		}
	}

	/* ===== DRAW SECTION 9 BORDER ===== */
	.draw-section-9 > .e-con-inner {
		position: relative;
	}

	/* Bottom border animation */
	.draw-section-9 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -60px;
		top: -47px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-9 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-9 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		right: -60px;
		top: -47px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-9 1s ease-in-out forwards;
		animation-delay: 1.5s;
	}


	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-9 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 120px);
		}
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-9 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 123px);
		}
	}
}

@media (min-width: 769px) and (max-width: 1023px) {
	/* ===== DRAW SECTION 1 BORDER ANIMATION ===== */
	.draw-section-1 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-1 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -20px;
		top: -50px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-1 1s ease-in-out forwards;
	}

	/* Bottom border animation */
	.draw-section-1 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -20px;
		bottom: -32px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-1-768 1.5s ease-in-out forwards;
		animation-delay: 2s;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-1 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 80px);
		}
	}

	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-1-768 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 60px);
		}
	}


	/* ===== DRAW SECTION 2 BORDER ANIMATION ===== */
	.draw-section-2 > .e-con-inner {
		position: relative;
	}

	/* Right border animation */
	.draw-section-2 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -40px;
		top: -20px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-right-border-section-2 1s ease-in-out forwards;
		animation-delay: 0s;
		left: auto;
	}

	/* Keyframe for right border - draws from top to bottom */
	@keyframes draw-right-border-section-2 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 35px);
		}
	}


	/* ===== DRAW SECTION 3 BORDER ===== */
	.draw-section-3 > .e-con-inner {
		position: relative;
	}

	.draw-section-3 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -40px;
		top: -37px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-top-border-section-3 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-3 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -30px;
		top: -37px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-icon-box-border 1s ease-in-out forwards;
		animation-delay: 1.5s;
		/* right: auto; */
	}


	/* Keyframe for icon box bottom border - draws from right to left */
	@keyframes draw-top-border-section-3 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 60px);
		}
	}

	/* Keyframe for icon box right border - draws from top to bottom */
	@keyframes draw-icon-box-border {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 123px);
		}
	}

	/* ===== DRAW SECTION 4 BORDER ===== */
	.draw-section-4 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-4 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-4 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-4 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 30px);
		}
	}

	/* ===== DRAW SECTION 5 BORDER ===== */
	.draw-section-5 > .e-con-inner {
		position: relative;
	}

	/* Bottom border animation */
	.draw-section-5 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -20px;
		top: -20px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-5 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-5 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		right: -20px;
		top: -20px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-5 1s ease-in-out forwards;
		animation-delay: 1.5s;
	}


	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-5 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 40px);
		}
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-5 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 130px);
		}
	}

	/* ===== DRAW SECTION 6 BORDER ===== */
	.draw-section-6 > .e-con-inner {
		position: relative;
	}

	.draw-section-6 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -20px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-6 1s ease-in-out forwards;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-6 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 35px);
		}
	}

	/* ===== DRAW SECTION 7 BORDER ===== */
	.draw-section-7 > .e-con-inner {
		position: relative;
	}

	.draw-section-7 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		right: -20px;
		top: -17px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-top-border-section-7 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-7 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		left: -20px;
		top: -17px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-icon-box-border-7 1s ease-in-out forwards;
		animation-delay: 1.5s;
		/* right: auto; */
	}


	/* Keyframe for icon box bottom border - draws from right to left */
	@keyframes draw-top-border-section-7 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 40px);
		}
	}

	/* Keyframe for icon box right border - draws from top to bottom */
	@keyframes draw-icon-box-border-7 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 68px);
		}
	}

	/* ===== DRAW SECTION 8 BORDER ===== */
	.draw-section-8 > .e-con-inner {
		position: relative;
	}

	/* Left border animation */
	.draw-section-8 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -20px;
		top: 0;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-8 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-8 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 30px);
		}
	}

	/* ===== DRAW SECTION 9 BORDER ===== */
	.draw-section-9 > .e-con-inner {
		position: relative;
	}

	/* Bottom border animation */
	.draw-section-9 > .e-con-inner.in-view::before {
		content: '';
		position: absolute;
		left: -20px;
		top: -21px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-9 1s ease-in-out forwards;
		animation-delay: 0s;
	}

	.draw-section-9 > .e-con-inner.in-view::after {
		content: '';
		position: absolute;
		right: -20px;
		top: -21px;
		width: 2px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-9 1s ease-in-out forwards;
		animation-delay: 1.5s;
	}


	/* Keyframe for bottom border - draws from left to right */
	@keyframes draw-bottom-border-section-9 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% + 40px);
		}
	}

	/* Keyframe for left border - draws from top to bottom */
	@keyframes draw-left-border-section-9 {
		0% {
			height: 0;
		}
		100% {
			height: calc(100% + 72px);
		}
	}
}