.banner-wrapper { display: flex; align-items: center; justify-content: space-between; z-index: 1; position: relative; }
.banner-left { width: 50%; }
.banner-right { width: 50%; border-radius: 50%; max-width: 500px; height: 500px; padding: 30px; position: relative; }
.banner-title-top { color: #b1dda0; font-size: 30px; line-height: 1; font-family: 'Century Gothic'; font-weight: 600; }
.banner-title { color: #1f6c51; margin-bottom: 20px; text-transform: capitalize;}
.banner-title span { color: #60c9a0; }
.banner-left-img { display: block; margin-bottom: 40px; width: 450px; height: auto;}
.banner-right-img { width: 100%; border-radius: 50%; height: 100%; object-fit: cover; z-index: 1; position: relative;}
.banner-bottom-icon { width: 220px; height: 220px; border-radius: 50%; border: 10px solid #ffffffc7; position: absolute; left: -50px; bottom: -50px; z-index: 1;}
.banner { position: relative; padding-top: 180px; height: 900px; }
.banner::after { content: ''; width: 80%; height: 100%; background-image: url(../../assets/images/banner-bg2.png); background-repeat: no-repeat; background-size: cover; background-position: left bottom; position: absolute; bottom: 30px; left: 0; z-index: 0; }
.banner::before { content: ''; background-image: url(../../assets/images/banner-object.png); width: 300px; height: 500px; background-repeat: no-repeat; background-size: contain; background-position: center center; position: absolute; }
.banner-dashed-line svg { fill: none; stroke: white; stroke-width: 10; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: dash 10s linear alternate infinite; width: 100%; }
.banner-dashed-line { position: absolute; left: 0; bottom: 0; width: 60%; transform: rotate(-1deg); }
.banner-right::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 65%;
	height: 65%;
	 border: 1px solid #eee;
	border-radius: 50%;
	animation: pulse-border 1100ms ease-out infinite;
 }
 .banner-right::after{
	     content: "";
	     position: absolute;
	     z-index: 0;
	     left: 50%;
	     top: 50%;
	     transform: translateX(-50%) translateY(-50%);
	     display: block;
	     width: 70%;
	     height: 70%;
		   border: 1px solid #eee;
	     border-radius: 50%;
	     animation: pulse-border 1100ms ease-out infinite;
	     animation-delay: 3s;
 }
 @keyframes pulse-border {
   0% {
     transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
  
   }
   100% {
     transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
     
   }
 }
 
@keyframes dash {
	from { stroke-dashoffset: 1000; }
	to { stroke-dashoffset: 0; }
}

@media (max-width:1600px){
	.banner { height: 800px; }
}

@media (max-width:1400px) {
	.banner-dashed-line { bottom: 8px; width: 70%; transform: rotate(0deg); }
}
@media (max-width:1200px) {
	.banner-bottom-icon { width: 180px; height: 180px; left: -20px; bottom: -100px; }
	.banner::after { width: 60%; }
	.banner-right { padding: 10px; }
	.banner-dashed-line { transform: rotate(4deg); }
}
@media (max-width:992px) {
	.banner-wrapper { flex-direction: column; gap: 50px; }
	.banner-left { width: 100%; }
	.banner-right {         
		width: 450px;
		height: 450px;
	}
	.banner { height: auto; }
	.banner-bottom-icon { left: auto; bottom: 0; right: 0; }
	.banner::after { width: 100%; background-size: contain; }
	.banner::before { width: 200px; }
	.banner-dashed-line { transform: rotate(0deg); }
}

@media (max-width:767px) {
	.banner { padding-top: 140px; }
}

@media (max-width:575px) {
	.banner-left-img { width: 100%; height: auto; }
	.banner-bottom-icon { width: 100px; height: 100px; }
	.banner-right {         
		width: 300px;
		height: 300px;
	}
}