/* ==========================================
   CONNECTOR ICON BOX - COMPREHENSIVE STYLES
   ========================================== */

/* Universal Reset & Container */
.connector-box-container,
.connector-box-container *,
.connector-box-container *::before,
.connector-box-container *::after {
	box-sizing: border-box;
}

.connector-box-container {
	width: 100%;
	position: relative;
	box-sizing: border-box;
	clear: both;
	text-align: center;
}

/* Row & Item Base */
.connector-row {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.connector-item {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: flex-start !important;
	text-align: center !important;
	position: relative;
	box-sizing: border-box;
	transition: all 0.3s ease;
	min-width: 0;
}

/* Graphics container (Badges & Dot) */
.connector-graphics {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	text-align: center;
}

/* ==========================================
   BADGE & IMAGE STYLES
   ========================================= */
.connector-badge-wrap {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	box-sizing: border-box;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
}

.connector-badge-link {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	text-decoration: none;
	max-width: 100%;
	margin: 0 auto !important;
}

/* Circle Badge (Number / Icon) - 100% PERFECT ROUND CIRCLES */
.connector-badge-is-circle .connector-badge {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	box-sizing: border-box !important;
	text-align: center !important;
	transition: all 0.3s ease;
	width: 60px !important;
	height: 60px !important;
	min-width: 60px !important;
	min-height: 60px !important;
	max-width: 60px !important;
	max-height: 60px !important;
	border-radius: 50% !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	margin: 0 auto !important;
}

/* Media Image Badge */
.connector-badge-has-image {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin-bottom: 20px;
	margin-left: auto !important;
	margin-right: auto !important;
}

.connector-badge-has-image .connector-badge-link {
	display: flex !important;
	justify-content: center !important;
	width: 100%;
}

.connector-badge-has-image .connector-badge {
	width: 100%;
	height: 200px;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	line-height: normal;
	border-radius: 16px;
	border: none;
	background: transparent;
	box-shadow: none;
	overflow: hidden;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	position: relative;
	transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
	margin: 0 auto !important;
}

.connector-badge-has-image .connector-badge-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
	transition: transform 0.4s ease, filter 0.4s ease;
}

/* Image Hover Animations */
.connector-item:hover .connector-badge-has-image .connector-badge-img {
	transform: scale(1.06);
}

.connector-badge-icon {
	display: flex;
	justify-content: center;
	align-items: center;
}

.connector-badge-icon i {
	display: inline-block;
}

.connector-badge-icon svg {
	display: inline-block;
	height: auto;
}

/* ==========================================
   DOTS & LINES (CONNECTORS)
   ========================================== */
.connector-dot-wrap {
	position: relative !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	height: 36px !important;
	min-height: 36px !important;
	box-sizing: border-box;
	z-index: 2;
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center !important;
	flex-shrink: 0 !important;
}

.connector-dot {
	box-sizing: border-box;
	border-radius: 50% !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	cursor: pointer;
	position: relative;
	z-index: 3;
	flex-shrink: 0;
	margin: 0 auto !important;
	float: none !important;
	width: 10px;
	height: 10px;
	background-color: #cccccc;
	border: 1px solid #ffffff;
	display: block !important;
}

/* ==========================================
   CONTENT WRAPPERS - ROCK-SOLID BLOCK CENTERING
   ========================================== */
.connector-content-wrap,
.connector-bottom-wrap,
.connector-description-wrap {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
	clear: both;
}

.connector-title-wrap {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	align-items: center !important;
	width: 100% !important;
	box-sizing: border-box;
	margin-left: auto !important;
	margin-right: auto !important;
}

.connector-title {
	display: block !important;
	margin: 0 auto !important;
	padding: 0;
	transition: all 0.3s ease;
	line-height: 1.35;
	text-align: center !important;
	width: 100% !important;
	float: none !important;
}

.connector-title a {
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
	text-align: inherit;
}

/* Subtitle / Step Label (100% CENTERED - BLOCK ENGINE) */
.connector-subtitle-wrap {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box;
	transition: all 0.3s ease;
	margin: 0 auto !important;
	padding: 0;
	float: none !important;
	clear: both;
}

.connector-subtitle-link {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	text-decoration: none;
	color: inherit;
	margin: 0 auto !important;
	float: none !important;
}

.connector-subtitle {
	display: block !important;
	width: 100% !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-align: center !important;
	margin: 0 auto !important;
	float: none !important;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.connector-subtitle-wrap.connector-subtitle-is-tag {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	margin: 0 auto !important;
}

.connector-subtitle-wrap.connector-subtitle-is-tag .connector-subtitle {
	display: inline-block !important;
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	line-height: 1.4;
	text-align: center !important;
	margin: 0 auto !important;
}

.connector-description {
	display: block !important;
	margin: 0 auto !important;
	padding: 0;
	transition: all 0.3s ease;
	line-height: 1.6;
	text-align: center !important;
	width: 100% !important;
	float: none !important;
}

.connector-bottom-wrap {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box;
	margin: 0 auto !important;
	float: none !important;
}

.connector-number-wrap {
	display: block !important;
	width: 100% !important;
	text-align: center !important;
	box-sizing: border-box;
	margin: 0 auto !important;
	float: none !important;
}

.connector-number-text {
	display: inline-block !important;
	font-weight: 600;
	text-align: center !important;
	margin: 0 auto !important;
	transition: all 0.3s ease;
}

/* ==========================================
   HORIZONTAL LAYOUT - BASE DEFAULTS
   ========================================== */
.connector-layout-horizontal .connector-row {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	--connector-column-gap: 20px;
}

/* Default fallback width: 4 columns = 25% */
.connector-layout-horizontal .connector-item {
	flex: 0 0 25%;
	max-width: 25%;
	width: 25%;
	min-width: 0;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	margin-bottom: 30px;
	box-sizing: border-box !important;
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	align-self: stretch !important;
	height: 100% !important;
	min-height: 100% !important;
	padding-bottom: 0 !important;
}

/* Horizontal Line Styling (Static Dotted Line on non-last items) */
.connector-line,
.connector-layout-horizontal.connector-has-line .connector-item:not(:last-child):not(.connector-item-last):not([data-is-last="true"]) .connector-dot-wrap::before,
.connector-layout-carousel.connector-has-line .connector-item:not(:last-child):not(.connector-item-last):not([data-is-last="true"]) .connector-dot-wrap::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(100% + var(--connector-column-gap, 20px));
	transform: translateY(-50%);
	z-index: 1;
	box-sizing: border-box;
	border-top-style: dotted;
	border-top-width: 1px;
	border-top-color: var(--connector-line-color, #cccccc);
	pointer-events: none;
	animation: none !important;
	background: none !important;
	display: block !important;
}

/* Hide line on the last item */
body .elementor-widget-connector_icon_box .connector-layout-horizontal .connector-item.connector-item-last .connector-dot-wrap::before,
body .elementor-widget-connector_icon_box .connector-layout-horizontal .connector-item[data-is-last="true"] .connector-dot-wrap::before,
body .elementor-widget-connector_icon_box .connector-layout-horizontal .connector-dot-wrap.connector-dot-wrap-last::before,
body .elementor-widget-connector_icon_box .connector-layout-horizontal .connector-dot-wrap.connector-no-line::before,
body .elementor-widget-connector_icon_box .connector-layout-horizontal [data-is-last="true"] .connector-dot-wrap::before,
body .elementor-widget-connector_icon_box .connector-layout-carousel .connector-item.connector-item-last .connector-dot-wrap::before,
body .elementor-widget-connector_icon_box .connector-layout-carousel .connector-item[data-is-last="true"] .connector-dot-wrap::before,
body .elementor-widget-connector_icon_box .connector-layout-carousel .connector-dot-wrap.connector-dot-wrap-last::before,
body .elementor-widget-connector_icon_box .connector-layout-carousel .connector-dot-wrap.connector-no-line::before,
.connector-layout-horizontal .connector-item.connector-item-last .connector-dot-wrap::before,
.connector-layout-horizontal .connector-dot-wrap.connector-dot-wrap-last::before,
.connector-layout-horizontal .connector-dot-wrap.connector-no-line::before,
.connector-layout-horizontal [data-is-last="true"] .connector-dot-wrap::before,
.connector-layout-carousel .connector-item.connector-item-last .connector-dot-wrap::before,
.connector-layout-carousel .connector-dot-wrap.connector-dot-wrap-last::before,
.connector-layout-carousel .connector-dot-wrap.connector-no-line::before,
.connector-item.connector-item-last .connector-dot-wrap::before,
.connector-item[data-is-last="true"] .connector-dot-wrap::before,
.connector-dot-wrap.connector-dot-wrap-last::before,
.connector-dot-wrap.connector-no-line::before,
.connector-dot-wrap-last::before,
.connector-no-line::before {
	display: none !important;
	content: none !important;
	border: 0 none transparent !important;
	border-top: 0 none transparent !important;
	border-top-style: none !important;
	border-top-width: 0px !important;
	width: 0px !important;
	height: 0px !important;
	max-width: 0px !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* Responsive grid fallbacks - inherit desktop columns on tablet */

@media (max-width: 767px) {
	.connector-layout-horizontal .connector-item {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================
   STYLE 1: TIMELINE (TITLE -> DOT -> YEAR)
   ========================================== */
.connector-style-timeline .connector-title-wrap {
	margin-bottom: 15px;
	width: 100%;
	text-align: center;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	flex: 1 1 auto !important;
}

.connector-style-timeline .connector-dot-wrap {
	margin-bottom: 15px;
}

.connector-style-timeline .connector-bottom-wrap,
.connector-style-timeline .connector-description-wrap {
	width: 100%;
	text-align: center;
	display: block;
}

/* ==========================================
   STYLE 2: BADGE TOP (CIRCLE -> DOT -> CONTENT)
   ========================================== */
.connector-style-badge_top .connector-graphics {
	margin-bottom: 20px;
}

.connector-style-badge_top .connector-badge-wrap {
	margin-bottom: 25px;
}

.connector-style-badge_top .connector-dot-wrap {
	margin-bottom: 0;
}

.connector-style-badge_top .connector-content-wrap {
	margin-top: 15px;
	text-align: center;
	display: block;
}

.connector-style-badge_top .connector-title {
	margin-bottom: 10px;
}

/* ==========================================
   STYLE 3: IMAGE PROCESS CARD
   (IMAGE -> TITLE -> DESC -> DOT -> STEP)
   ========================================== */
.connector-style-image_process_card .connector-badge-wrap,
.connector-style-timeline_card .connector-badge-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	flex-shrink: 0 !important;
}

.connector-style-image_process_card .connector-title-wrap,
.connector-style-timeline_card .connector-title-wrap {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	flex: 1 1 auto !important;
}

.connector-style-image_process_card .connector-title,
.connector-style-timeline_card .connector-title {
	margin-bottom: 10px;
}

.connector-style-image_process_card .connector-dot-wrap,
.connector-style-timeline_card .connector-dot-wrap {
	margin-bottom: 15px;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.connector-style-image_process_card .connector-bottom-wrap,
.connector-style-timeline_card .connector-bottom-wrap {
	width: 100%;
	text-align: center;
	display: block;
	margin-top: 5px;
}

/* ==========================================
   VERTICAL LAYOUT
   ========================================== */
.connector-layout-vertical .connector-row {
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow: hidden; 
}

.connector-layout-vertical .connector-item {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	width: 100%;
	text-align: left !important;
}

.connector-layout-vertical .connector-graphics {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	width: auto;
	margin-right: 20px;
}

.connector-layout-vertical .connector-content-wrap {
	flex-grow: 1;
	text-align: left !important;
	display: block !important;
}

.connector-layout-vertical .connector-title,
.connector-layout-vertical .connector-subtitle-wrap,
.connector-layout-vertical .connector-subtitle,
.connector-layout-vertical .connector-description {
	text-align: left !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.connector-layout-vertical.connector-has-line .connector-dot-wrap::before {
	content: '';
	position: absolute;
	left: 50%;
	width: 0;
	transform: translateX(-50%);
	z-index: 1;
	box-sizing: border-box;
	top: -500px;
	bottom: -500px;
	border-left-style: dotted;
	border-left-width: 1px;
	border-left-color: #cccccc;
	pointer-events: none;
}

.connector-layout-vertical.connector-has-line .connector-item:first-child .connector-dot-wrap::before {
	top: 50%;
	bottom: -500px;
}

.connector-layout-vertical.connector-has-line .connector-item:last-child .connector-dot-wrap::before {
	top: -500px;
	bottom: 50%;
}

.connector-layout-vertical.connector-has-line .connector-item:first-child:last-child .connector-dot-wrap::before {
	display: none !important;
}

/* ==========================================
   CAROUSEL LAYOUT SPECIFICS
   ========================================== */
.connector-layout-carousel {
	overflow: visible;
	width: 100%;
	position: relative;
	text-align: center;
}

.connector-layout-carousel .swiper {
	width: 100%;
	height: auto;
	overflow: hidden;
	position: relative;
	padding: 10px 0;
	box-sizing: border-box;
}

.connector-layout-carousel .swiper-wrapper {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch !important;
	overflow: visible !important;
	box-sizing: border-box;
	width: 100%;
}

.connector-layout-carousel .swiper-slide {
	flex-shrink: 0 !important;
	box-sizing: border-box;
}

/* =======================================================
   ROCK-SOLID ABSOLUTE TRACK: 100% PERFECT HORIZONTAL LINE
   ======================================================= */
.connector-layout-carousel .connector-item.swiper-slide {
	flex-shrink: 0 !important;
}

.connector-layout-carousel .connector-item.swiper-slide,
.connector-layout-horizontal .connector-item,
.connector-style-image_process_card .connector-item {
	position: relative !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	height: 100% !important;
	align-self: stretch !important;
	min-width: 0;
	box-sizing: border-box;
	overflow: visible !important;
	cursor: pointer;
	transition: transform 0.3s ease, opacity 0.3s ease;
	text-align: center !important;
	padding-bottom: 85px !important;
}

/* 1. Image / Badge at top */
.connector-item .connector-badge-wrap {
	flex-shrink: 0 !important;
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	margin: 0 auto 15px auto !important;
}

/* 2. Title & Description Box (absorbs all vertical space) */
.connector-layout-carousel .connector-title-wrap,
.connector-layout-horizontal .connector-title-wrap,
.connector-style-image_process_card .connector-title-wrap {
	flex: 1 1 auto !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 auto !important;
	overflow: visible !important;
}

.connector-title {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 auto 10px auto !important;
	padding: 0;
	transition: all 0.3s ease;
	line-height: 1.25 !important;
	text-align: center !important;
	width: 100% !important;
	float: none !important;
}

.connector-description-wrap {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin: 0 auto !important;
}

.connector-description {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	line-height: 1.4 !important;
	margin-bottom: 0 !important;
}

/* 3. Connector Dot & Line Track - LOCKED TO ABSOLUTE TRACK */
.connector-layout-carousel .connector-dot-wrap,
.connector-layout-horizontal .connector-dot-wrap,
.connector-style-image_process_card .connector-dot-wrap {
	position: relative !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 36px !important;
	margin: 15px auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2 !important;
	flex-shrink: 0 !important;
}

/* 4. Step Number / Subtitle Track - LOCKED BELOW THE DOT */
.connector-layout-carousel .connector-bottom-wrap,
.connector-layout-horizontal .connector-bottom-wrap,
.connector-style-image_process_card .connector-bottom-wrap {
	position: absolute !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	height: 40px !important;
	margin: 0 auto !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 3 !important;
}

/* Fallback width before Swiper JS initializes */
.connector-layout-carousel .swiper:not(.swiper-initialized) .connector-item.swiper-slide {
	flex: 0 0 25%;
	max-width: 25%;
	width: 25%;
}

@media (max-width: 1024px) {
	.connector-layout-carousel .swiper:not(.swiper-initialized) .connector-item.swiper-slide {
		flex: 0 0 50%;
		max-width: 50%;
		width: 50%;
	}
}

@media (max-width: 767px) {
	.connector-layout-carousel .swiper:not(.swiper-initialized) .connector-item.swiper-slide {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* Active Slide Transitions */
.connector-item .connector-dot,
.connector-item .connector-subtitle,
.connector-item .connector-title,
.connector-item .connector-badge,
.connector-item .connector-number-text {
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Style Inversion (Content on Top) */
.connector-style-content_top .connector-content-wrap {
	margin-bottom: 20px;
}

.connector-style-content_top .connector-dot-wrap {
	margin-bottom: 20px;
}

.connector-style-content_top .connector-badge-wrap {
	margin-bottom: 0;
}

/* ==========================================
   CAROUSEL NAVIGATION & PAGINATION
   ========================================== */
/* Bottom Navigation */
.connector-carousel-navigation.connector-nav-bottom {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	margin-top: 30px;
	box-sizing: border-box;
	position: relative;
	z-index: 10;
}

/* Side Navigation */
.connector-carousel-navigation.connector-nav-sides {
	position: static;
}

.connector-nav-sides .connector-carousel-prev {
	position: absolute;
	left: -20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
}

.connector-nav-sides .connector-carousel-next {
	position: absolute;
	right: -20px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 20;
}

/* Button Controls */
button.connector-carousel-prev,
button.connector-carousel-next,
.connector-carousel-prev,
.connector-carousel-next {
	display: inline-flex !important;
	justify-content: center !important;
	align-items: center !important;
	cursor: pointer;
	border-style: solid;
	border-width: 1px;
	border-color: #bbbbbb;
	background-color: #ffffff;
	background: #ffffff;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	flex-shrink: 0 !important;
	box-sizing: border-box;
	transition: all 0.3s ease;
	outline: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	color: #555555;
	appearance: none !important;
	-webkit-appearance: none !important;
	background-image: none !important;
}

button.connector-carousel-prev:hover,
button.connector-carousel-next:hover,
.connector-carousel-prev:hover,
.connector-carousel-next:hover {
	opacity: 0.85;
}

.connector-carousel-prev i,
.connector-carousel-next i {
	display: inline-block;
	line-height: 1;
}

.connector-carousel-prev svg,
.connector-carousel-next svg {
	display: inline-block;
	height: auto;
}

.connector-carousel-prev.swiper-button-disabled,
.connector-carousel-next.swiper-button-disabled {
	opacity: 0.45 !important;
	cursor: default !important;
	pointer-events: none !important;
	box-shadow: none !important;
}

/* Ensure arrows are visible even when Swiper tries to lock */
.connector-box-container .connector-carousel-navigation .swiper-button-lock {
	display: inline-flex !important;
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

/* Pagination */
.connector-carousel-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20px;
	position: relative;
	z-index: 10;
}

.connector-carousel-pagination .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #cccccc;
	opacity: 1;
	margin: 0 4px !important;
	cursor: pointer;
	transition: all 0.3s ease;
}

.connector-carousel-pagination .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.25);
}

/* ==========================================
   RESPONSIVE: TABLET (768px to 1024px) - Remove connector line completely
   ========================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	.connector-layout-horizontal.connector-has-line .connector-dot-wrap::before,
	.connector-layout-carousel.connector-has-line .connector-dot-wrap::before,
	.connector-has-line .connector-dot-wrap::before,
	.connector-has-line .connector-item::after,
	.connector-has-line .connector-graphics::after {
		display: none !important;
	}

	/* Absolute track: maintain baseline on tablet */
	.connector-layout-carousel .connector-item.swiper-slide,
	.connector-layout-horizontal .connector-item,
	.connector-style-image_process_card .connector-item {
		padding-bottom: 80px !important;
	}

	.connector-layout-carousel .connector-dot-wrap,
	.connector-layout-horizontal .connector-dot-wrap,
	.connector-style-image_process_card .connector-dot-wrap {
		bottom: 40px !important;
	}

	.connector-layout-carousel .connector-bottom-wrap,
	.connector-layout-horizontal .connector-bottom-wrap,
	.connector-style-image_process_card .connector-bottom-wrap {
		height: 36px !important;
	}

	/* Navigation arrows */
	.connector-nav-sides .connector-carousel-prev {
		left: -15px;
	}
	.connector-nav-sides .connector-carousel-next {
		right: -15px;
	}

	/* Image badge: slightly smaller on tablet */
	.connector-badge-has-image .connector-badge {
		height: 180px;
	}

	/* Vertical layout: reduce right margin of graphic area */
	.connector-layout-vertical .connector-graphics {
		margin-right: 15px;
	}
}

/* ==========================================
   RESPONSIVE: MOBILE (max-width: 767px)
   ========================================== */
@media (max-width: 767px) {
	.connector-box-container,
	.connector-layout-carousel,
	.connector-layout-horizontal .connector-row {
		--connector-column-gap: 10px;
	}

	.connector-box-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.connector-row {
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		justify-content: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
	}

	/* Mobile Layout: Left Column = Badge & Line, Right Column = Title & Description */
	.connector-layout-horizontal .connector-item {
		display: flex !important;
		flex-direction: row !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		position: relative !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-bottom: 28px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-bottom: 0 !important;
	}

	/* Left Column: Badge Wrap */
	.connector-layout-horizontal .connector-badge-wrap {
		width: 50px !important;
		min-width: 50px !important;
		max-width: 50px !important;
		flex-shrink: 0 !important;
		margin: 0 18px 0 0 !important;
		position: relative !important;
		display: flex !important;
		justify-content: center !important;
		align-items: flex-start !important;
		z-index: 2 !important;
	}

	.connector-badge-is-circle .connector-badge {
		width: 50px !important;
		height: 50px !important;
		min-width: 50px !important;
		min-height: 50px !important;
		max-width: 50px !important;
		max-height: 50px !important;
		font-size: 18px !important;
		line-height: 50px !important;
		margin: 0 auto !important;
	}

	/* STRICTLY HIDE HORIZONTAL DOT WRAP, DOT & LINE ON MOBILE GRID VIEW */
	.connector-layout-horizontal .connector-dot-wrap,
	.connector-layout-horizontal .connector-dot,
	.connector-layout-horizontal .connector-line {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		pointer-events: none !important;
		overflow: hidden !important;
	}

	/* Right Column: Title & Description Wrap */
	.connector-layout-horizontal .connector-title-wrap {
		flex: 1 1 auto !important;
		width: calc(100% - 68px) !important;
		max-width: calc(100% - 68px) !important;
		text-align: left !important;
		align-items: flex-start !important;
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
		margin: 0 !important;
		padding-top: 2px !important;
	}

	.connector-layout-horizontal .connector-title,
	.connector-layout-horizontal .connector-subtitle-wrap,
	.connector-layout-horizontal .connector-subtitle,
	.connector-layout-horizontal .connector-description {
		text-align: left !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		justify-content: flex-start !important;
		display: block !important;
	}

	.connector-layout-horizontal .connector-title {
		margin-bottom: 6px !important;
	}

	/* Mobile Vertical Line attached to item container (starts below badge, extends down to touch top of next badge) */
	.connector-layout-horizontal .connector-item:not(:last-child):not(.connector-item-last):not([data-is-last="true"])::after {
		content: '' !important;
		position: absolute !important;
		left: 25px !important; /* Centered on the 50px badge column */
		top: 50px !important; /* Starts right below the 50px circle badge */
		bottom: 0 !important; /* Extends to bottom of item to connect seamlessly to top of next badge */
		width: 0 !important;
		transform: translateX(-50%) !important;
		z-index: 1 !important;
		pointer-events: none !important;
		border-left-style: dotted !important;
		border-left-width: 2px !important;
		border-left-color: var(--connector-line-color, #cccccc) !important;
		animation: none !important;
		background: none !important;
		display: block !important;
	}

	/* Hide vertical line on absolute last item */
	.connector-layout-horizontal .connector-item.connector-item-last::after,
	.connector-layout-horizontal .connector-item[data-is-last="true"]::after,
	.connector-layout-horizontal .connector-item:last-child::after {
		display: none !important;
		content: none !important;
	}

	/* Navigation: smaller buttons on mobile */
	.connector-carousel-prev,
	.connector-carousel-next {
		width: 36px;
		height: 36px;
	}

	/* Bottom nav: tighter gap on mobile */
	.connector-carousel-navigation.connector-nav-bottom {
		margin-top: 20px;
	}

	/* Side nav: closer to edge on mobile */
	.connector-nav-sides .connector-carousel-prev {
		left: -8px;
	}
	.connector-nav-sides .connector-carousel-next {
		right: -8px;
	}

	/* Carousel fallback widths pre-JS init */
	.connector-layout-carousel .swiper:not(.swiper-initialized) .connector-item.swiper-slide {
		flex: 0 0 100%;
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================
   RESPONSIVE: VERY SMALL (max-width: 480px)
   ========================================== */
@media (max-width: 480px) {
	/* Badge image even smaller on tiny screens */
	.connector-badge-has-image .connector-badge {
		height: 120px;
	}

	/* Tighter bottom track on small phones (Carousel only) */
	.connector-layout-carousel .connector-item.swiper-slide {
		padding-bottom: 60px !important;
	}

	.connector-layout-carousel .connector-dot-wrap {
		bottom: 30px !important;
	}

	.connector-layout-carousel .connector-bottom-wrap {
		height: 28px !important;
	}
}