/* Why Choose Us — Veronica layout, Suntech brand colors */

.work4-section-area,
.work4-section-area .auto-container,
.work4-section-area .row,
.work4-section-area .others-widget-area,
.work4-section-area .others-widget-area > .row,
.work4-section-area .others-widget-area > .row > [class*="col-"] {
	overflow: visible !important;
}

.work4-section-area {
	position: relative;
	z-index: 1;
	
}

.work4-section-area .sec-title {
	margin-bottom: 50px;
}

.work4-section-area .space30 {
	height: 30px;
}

.work4-section-area .others-widget-area {
	background: #ffffff;
	border-radius: 16px;
	position: relative;
}

.work4-section-area .work4-connectors {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	overflow: visible;
}

.work4-section-area .work4-connector-line {
	fill: none;
	stroke: url(#work4-grad);
	stroke-width: 1.5;
	stroke-dasharray: 6 4;
}

.work4-section-area .work4-connector-dot-outer {
	fill: #ffffff;
	stroke: url(#work4-grad);
	stroke-width: 2;
}

.work4-section-area .work4-connector-dot-inner {
	fill: url(#work4-grad);
	stroke: none;
}

.work4-section-area .work4-grid {
	position: relative;
	z-index: 2;
}

.work4-section-area .others-widget-area .card-boxarea {
	position: relative;
	z-index: 2;
}

.work4-section-area .work4-icon-wrap--end {
	text-align: right;
}

.work4-section-area .work4-icon-wrap--start {
	text-align: left;
}

.work4-section-area .others-widget-area .card-boxarea h3,
.work4-section-area .others-widget-area .work4-icon {
	line-height: 60px;
	display: inline-block;
	position: relative;
	z-index: 3;
	transition: all 0.4s ease;
	border-radius: 50%;
	height: 60px;
	width: 60px;
	margin: 0;
	text-align: center;
	background: rgba(26, 58, 107, 0.08);
}

.work4-section-area .others-widget-area .card-boxarea:hover h3,
.work4-section-area .others-widget-area .card-boxarea:hover .work4-icon {
	transform: rotateY(360deg);
	background: var(--gradient-main);
}

.work4-section-area .others-widget-area .card-boxarea h3 i,
.work4-section-area .others-widget-area .work4-icon i {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 22px;
	line-height: 60px;
	color: #2563b0;
	background: none !important;
	-webkit-text-fill-color: #2563b0;
	transition: color 0.4s ease;
}

.work4-section-area .others-widget-area .card-boxarea:hover h3 i,
.work4-section-area .others-widget-area .card-boxarea:hover .work4-icon i {
	color: #ffffff;
	-webkit-text-fill-color: #ffffff;
}

.work4-section-area .others-widget-area .content-area,
.work4-section-area .others-widget-area .content-area2 {
	background: #f7f7f8;
	padding: 28px;
	border-radius: 8px;
	text-align: left;
	position: relative;
	z-index: 2;
	overflow: hidden;
}

.work4-section-area .others-widget-area .content-area {
	margin: 0 40px 0 0;
}

.work4-section-area .others-widget-area .content-area2 {
	margin: 0 0 0 40px;
}

.work4-section-area .others-widget-area .content-area::after,
.work4-section-area .others-widget-area .content-area2::after {
	position: absolute;
	content: "";
	height: 100%;
	width: 10px;
	left: 0;
	top: 0;
	background: var(--gradient-main);
	z-index: -1;
	border-radius: 8px;
	visibility: hidden;
	opacity: 0;
	transition: all 0.4s ease;
}

.work4-section-area .others-widget-area .content-area:hover::after,
.work4-section-area .others-widget-area .content-area2:hover::after {
	width: 100%;
	left: 0;
	visibility: visible;
	opacity: 1;
}

.work4-section-area .others-widget-area .content-area:hover .content-area__title,
.work4-section-area .others-widget-area .content-area:hover p,
.work4-section-area .others-widget-area .content-area2:hover .content-area__title,
.work4-section-area .others-widget-area .content-area2:hover p {
	color: #ffffff;
}

.work4-section-area .others-widget-area .content-area__title {
	margin: 0 0 14px;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--color-dark);
	transition: color 0.4s ease;
}

.work4-section-area .others-widget-area .content-area p,
.work4-section-area .others-widget-area .content-area2 p {
	margin: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 26px;
	letter-spacing: 0.16px;
	color: rgba(34, 34, 34, 0.75);
	opacity: 0.9;
	transition: color 0.4s ease;
}

/* Left column — icon on right, toward center circle */
.work4-section-area .others-widget-area .card-boxarea.box1 .work4-icon {
	position: relative;
	left: -6px;
	margin-bottom: 20px;
}

.work4-section-area .others-widget-area .card-boxarea.box2 .work4-icon {
	position: relative;
	left: -13px;
	margin-top: 13px;
}

/* Right column — icon on left, toward center circle */
.work4-section-area .others-widget-area .card-boxarea.box3 .work4-icon {
	position: relative;
	left: 20px;
	margin-top: -33px;
	margin-bottom: 16px;
}

.work4-section-area .others-widget-area .card-boxarea.box4 .work4-icon {
	position: relative;
	left: 32px;
	margin-top: 16px;
	margin-bottom: -16px;
}

.work4-section-area .others-widget-area .images {
	position: relative;
	z-index: 2;
	overflow: visible;
	max-width: 340px;
	margin: 0 auto;
}

.work4-section-area .others-widget-area .images::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% + 72px);
	height: calc(100% + 72px);
	border: 1px dashed rgba(37, 99, 176, 0.35);
	border-radius: 50%;
	z-index: 0;
	pointer-events: none;
}

.work4-section-area .others-widget-area .images .img1,
.work4-section-area .others-widget-area .work4-center-circle {
	position: relative;
	z-index: 2;
	padding: 16px;
	border-radius: 50%;
	background: rgba(26, 58, 107, 0.08);
}

.work4-section-area .others-widget-area .images .img1 img,
.work4-section-area .others-widget-area .work4-center-circle img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

@media (max-width: 767px) {
	.work4-section-area {
		padding: 60px 0 40px;
	}
}

@media (max-width: 991px) {
	.work4-section-area .work4-connectors {
		display: none !important;
	}

	.work4-section-area .others-widget-area .images::before {
		display: none;
	}

	.work4-section-area .others-widget-area .card-boxarea.box1 .work4-icon,
	.work4-section-area .others-widget-area .card-boxarea.box2 .work4-icon,
	.work4-section-area .others-widget-area .card-boxarea.box3 .work4-icon,
	.work4-section-area .others-widget-area .card-boxarea.box4 .work4-icon {
		left: 0;
		margin: 0 0 16px;
	}

	.work4-section-area .work4-icon-wrap--end,
	.work4-section-area .work4-icon-wrap--start {
		text-align: center !important;
	}

	.work4-section-area .others-widget-area .images {
		margin: 30px auto;
		max-width: 320px;
	}

	.work4-section-area .others-widget-area .content-area,
	.work4-section-area .others-widget-area .content-area2 {
		margin: 0;
	}
}