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

@media (max-width: 1024px)  {
	.draw-section-1.in-view::after {
		content: '';
		position: absolute;
		left: 40px;
		bottom: -40px;
		width: 0;
		height: 2px;
		background: var(--animation-bg-color);
		animation: draw-bottom-border-section-1-1024 1.5s ease-in-out forwards;
		animation-delay: 2s;
	}
	@keyframes draw-bottom-border-section-1-1024 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% - 80px);
		}
	}
}
@media (min-width: 1025px) and (max-width: 1440px) {
	.draw-section-1.in-view::after {
		content: '';
    position: absolute;
    left: 40px;
    bottom: -40px;
    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% - 80px);
			}
		}
}
@media (min-width: 1441px)  {
	/* Bottom border animation */
	.draw-section-1.in-view::after {
		content: '';
		position: absolute;
		left: 40px;
		bottom: -40px;
		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% - 80px) ;
		}
	}
}
@media (min-width: 768px) {
	/* ===== DRAW SECTION 1 BORDER ANIMATION ===== */
	.draw-section-1 {
		position: relative;
	}

	/* Left border animation */
	.draw-section-1.in-view::before {
		    content: '';
        position: absolute;
        left: 40px;
        top: 0px;
        width: 1.5px;
        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% + 40px);
		}
	}


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

	/* Right border animation */
	.draw-section-2.in-view::before {
		content: '';
		position: absolute;
		right: 40px;
		top: 40px;
		width: 1.5px;
		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% - 40px);
		}
	}


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


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


	

	/* 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 {
		position: relative;
	}

	/* Left border animation */
	.draw-section-4.in-view::before {
		content: '';
		position: absolute;
		right: 40px;
		top: 0;
		width: 1.5px;
		height: 0;
		background: var(--animation-bg-color);
		animation: draw-left-border-section-4 1s ease-in-out forwards;
        left: auto;
	}

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

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

	/* Bottom border animation */
	.draw-section-5.in-view::before {
		content: '';
		position: absolute;
		left: 40px;
		top: 40px;
		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.in-view::after {
		content: '';
		position: absolute;
		left: 40px;
		top: 40px;
		width: 1.5px;
		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% - 80px) ;
		}
	}

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

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

	.draw-section-6.in-view::before {
		content: '';
		position: absolute;
		left: 40px;
		top: 0;
		width: 1.5px;
		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 {
		position: relative;
	}

	.draw-section-7.in-view::before {
		content: '';
		position: absolute;
		left: 40px;
		top: 35px;
		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.in-view::after {
		content: '';
		position: absolute;
		right: 40px;
		top: 35px;
		width: 1.5px;
		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% - 80px);
		}
	}

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

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

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

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

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

	/* Bottom border animation */
	.draw-section-9.in-view::after {
		content: '';
		position: absolute;
		right: 40px;
		top: 40px;
		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.in-view::before {
		content: '';
		position: absolute;
		left: 40px;
		top: 40px;
		width: 1.5px;
		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% - 80px);
		}
	}

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



/* Updated Animation */
@keyframes draw-left-border-section-1 {
    0% {
    	height: 0;
    }
    100% {
   		height: calc(100% + 38px);
	}
}

.draw-section-5.in-view::after {
	top: 42px;
}
@keyframes draw-left-border-section-5 {
    0% {
    	height: 0;
    }
    100% {
    	height: calc(100% - 42px);
    }
}

@media screen and (min-width: 768px) {
  .draw-section-5.in-view::before {
  	left: auto;
    right: 40px;
  }
}

@media screen and (min-width: 1700px) {
    .draw-section-1.in-view::before {
        left: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-1.in-view::after {
        left: calc((100vw - 1600px) / 2);
    }
    
    @keyframes draw-bottom-border-section-1 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% - ((100vw - 1600px) / 2) * 2);
		}
	}
    
    .draw-section-2.in-view::before {
        right: calc((100vw - 1600px) / 2);
        top: 40px;
        height: 0;
        left: auto;
    }
    
	.draw-section-3.in-view::after {
        right: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-4.in-view::after {
        right: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-5.in-view::before {
        left: auto;
        right: calc((100vw - 1600px) / 2);
    }
    
    @keyframes draw-bottom-border-section-5 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% - ((100vw - 1600px) / 2) * 2);
		}
	}
    
    
    .draw-section-6.in-view::before {
        left: calc((100vw - 1600px) / 2);
    }

    .draw-section-7.in-view::before {
        left: calc((100vw - 1600px) / 2);
    }
    
    @keyframes draw-top-border-section-7 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% - ((100vw - 1600px) / 2) * 2);
		}
	}
    
	.draw-section-9.in-view::after {
        left: auto;
        right: calc((100vw - 1600px) / 2);
    }
    
    @keyframes draw-bottom-border-section-9 {
		0% {
			width: 0;
		}
		100% {
			width: calc(100% - ((100vw - 1600px) / 2) * 2);
		}
	}
}

@media screen and (min-width: 1600px) {
    .draw-section-3.in-view::after {
        right: calc((100vw - 1600px) / 2);
	}
    
    .draw-section-4.in-view::before {
        right: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-5.in-view::after {
        left: calc((100vw - 1600px) / 2);
    }

    .draw-section-6.in-view::before {
        left: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-7.in-view::after {
        right: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-8.in-view::before {
        right: calc((100vw - 1600px) / 2);
    }
    
    .draw-section-9.in-view::before {
    	left: calc((100vw - 1600px) / 2);
    }
    
}