/* counter */
.counter .container { max-width: 1400px; }
.counter { background: #1f6c51; color: #fff; position: relative; padding: 200px 0; }
.counter::before { content: ''; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-image: url(../../assets/images/counter-bg.png); 
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.counter-wrapper { display: flex; gap: 50px; justify-content: center; align-items: center; }
.counter-main::before { content: ''; width: 100%; height: 165px; position: absolute; top: -1px; background-repeat: no-repeat; background-size: cover; background-position: left center; left: 0; background-image: url(../../assets/images/shape-top-transparent.svg); }
.counter-main::after { content: ''; width: 100%; height: 180px; position: absolute; bottom: -25px; background-repeat: no-repeat; background-size: cover; background-position: left center; left: 0; background-image: url(../../assets/images/shape-bottom-bg2.svg); }
.conter-item { display: flex; gap: 20px; position: relative; align-items: center; }
.conter-item::before { content: ''; width: 135px; height: 40px; background-image:url(../../assets/images/counter-line.svg); background-repeat: no-repeat; background-size: contain; position: absolute; right: -100%; }
.conter-item::after { content: ''; width: 10px; height: 10px; background: #b1dda0; border-radius: 20px; position: absolute; }
.conter-left .conter-item::before { right: -100px; }
.conter-left .conter-item:nth-child(even)::before { bottom: 30px; }
.conter-left .conter-item:nth-child(odd)::before { transform: rotateX(180deg); top: 30px; }
.conter-right .conter-item::before { left: -100px; transform: rotate(180deg); }
.conter-right .conter-item:nth-child(even)::before { transform: rotateY(180deg); bottom: 30px; }
.conter-right .conter-item:nth-child(odd)::before { top: 30px; }
.conter-left .conter-item:nth-child(even)::after { right: -105px; bottom: 27px; }
.conter-left .conter-item:nth-child(odd)::after { right: -105px; top: 27px; }
.conter-elements { display: flex; }
.conter-left .conter-elements { justify-content: flex-end; }
.conter-right .conter-item:nth-child(odd)::after { left: -105px; top: 27px; }
.conter-right .conter-item:nth-child(even)::after { left: -105px; bottom: 27px; }
.conter-details { text-align: right; width: calc(100% - 120px); }
.counter-title { font-size: 40px; font-weight: 600; line-height: 1; }
.counter-title-sub { display: block; font-size: 24px; }
.counter-title span { font-weight: 800; display: block; }
.conter-image-block { width: 100px; height: 100px; border-radius: 50%; background-color: #fec400; display: flex; align-items: center; justify-content: center; z-index: 1; position: relative; }
.counter-center-img { max-width: 530px; border-radius: 50%; }
.counter-center-block { padding: 15px; border: 1px dashed #b1dda0; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.counter-center-block .counter-img { height: auto; border: 5px solid white; border-radius: 50%; }
.conter-right .conter-details { text-align: left; }
.conter-right .conter-item { flex-direction: row-reverse; }
.conter-left, .conter-right { display: flex; flex-direction: column; row-gap: 150px; }

/* counter */

@media (max-width:1400px) {
	.counter-center-img { max-width: 350px; }
	.counter-title-sub { font-size: 20px; }
	.counter-title { font-size: 34px; }
}

@media (max-width:1200px) {
	.counter-wrapper { gap: 30px; }
	.counter-title { font-size: 30px; }
	.counter-title-sub { font-size: 18px; }
	.counter-center-img { max-width: 270px; }
	.conter-image-block { width: 80px; height: 80px; }
	.counter-img { width: unset; }
	.conter-details { width: calc(100% - 90px); }
	.conter-item { gap: 10px; }
}

@media (max-width:992px) {
	.counter-wrapper { flex-direction: column; }
	.conter-left, .conter-right { flex-direction: row; gap: 100px; }
	 .conter-item::before { content: unset; }
	.conter-item::after { content: unset; } 
	/* .conter-item:first-child { flex-direction: row; } */
	.conter-details { text-align: left; }
	.counter-main::after { height: 150px; background-position: center center; }
	.counter-main::before { height: 100px; }
	.counter { padding: 100px 0; }
	.conter-left .conter-elements{
		justify-content: flex-start;
		}
		.conter-left {
			order: 2;
			width: 100%;
		  }
		  
		  .conter-right {
			order: 3;
			width: 100%;
		  }
		  .conter-item{
			justify-content: space-between;
			width: 50%;
		  }
}

@media (max-width:767px) {
	.conter-left, .conter-right { gap: 30px; }
	.conter-left .conter-elements { justify-content: flex-start; }
	.counter-title { font-size: 24px; }
	.counter-main::before { height: 80px; background-position: center center; }
	
}

@media (max-width:575px) {
	.conter-item{
		flex-direction: column-reverse;
	}
	.conter-right .conter-item {
		flex-direction: column-reverse;
		text-align: center;
	  }
	  .conter-details {
		text-align: center;
		width: 100%;
	  }
	  .conter-right .conter-details {
		text-align: center;
	  }
	  .conter-left .conter-elements {
		justify-content: center;
	  }
	  .conter-elements{
		justify-content: center;
	  }
}