.sq-image-box-widget {
	width: 100%;
	position: relative;
}

.sq-image-box-grid {
	display: grid;
	gap: 20px;
	width: 100%;
}

.sq-image-box-columns-desktop-1 .sq-image-box-grid {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.sq-image-box-columns-desktop-2 .sq-image-box-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sq-image-box-columns-desktop-3 .sq-image-box-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sq-image-box-columns-desktop-4 .sq-image-box-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sq-image-box-columns-desktop-5 .sq-image-box-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.sq-image-box-columns-desktop-6 .sq-image-box-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sq-image-box-grid-item {
	min-width: 0;
	display: flex;
}

.sq-image-box-card {
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
    background-color: #fafcff;
    border-radius: var(--sq-radius-md);
	border: 1px solid #eee;
	overflow: hidden;
	transition:
		transform 0.35s ease,
		box-shadow 0.35s ease,
		background-color 0.35s ease;
}

.sq-image-box-grid-item .sq-image-box-card,
.sq-image-box-swiper .swiper-slide .sq-image-box-card {
	width: 100%;
}

/* ---------------------------------------------------------
   Hover
--------------------------------------------------------- */

.sq-image-box-hover--lift .sq-image-box-card:hover {
	transform: translateY(-8px);
}

.sq-image-box-hover--scale .sq-image-box-card:hover {
	transform: scale(1.03);
}

.sq-image-box-hover--shadow .sq-image-box-card:hover {
	box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

/* ---------------------------------------------------------
   Media
--------------------------------------------------------- */

.sq-image-box-media {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 15px;
	margin-bottom: 25px;
}

.sq-image-box-image {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sq-image-box-image img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	transform: scale(1);
	transform-origin: center;
	transition: transform 0.35s ease;
}
.sq-image-box-card:hover .sq-image-box-image img {
	transform: scale(1.05);
	transform-origin: center;
	transition: transform 0.35s ease;
}

.sq-image-box-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
	line-height: 1;
}

.sq-image-box-icon svg {
	display: block;
	width: 50px;
	height: 50px;
}

/* ---------------------------------------------------------
   Horizontal Media
--------------------------------------------------------- */

.sq-image-box-media--left .sq-image-box-card,
.sq-image-box-media--right .sq-image-box-card {
	display: flex;
	align-items: flex-start;
	gap: 25px;
}

.sq-image-box-media--left .sq-image-box-media,
.sq-image-box-media--right .sq-image-box-media {
	flex: 0 0 auto;
	margin-bottom: 0;
}

.sq-image-box-media--right .sq-image-box-media {
	order: 2;
}

.sq-image-box-media--right .sq-image-box-content {
	order: 1;
}

/* ---------------------------------------------------------
   Content
--------------------------------------------------------- */

.sq-image-box-content {
	width: 100%;
    padding: 0 clamp(1.5625rem, 1.3546rem + 0.4337vw, 1.875rem) clamp(1.5625rem, 1.3546rem + 0.4337vw, 1.875rem);
}

.sq-image-box-title {
	margin-top: 0;
	margin-bottom: 10px;
	padding: 0;
}

.sq-image-box-subtitle {
	margin-bottom: 12px;
}

.sq-image-box-description:not(:last-child) {
	margin-bottom: 20px;
}

.sq-image-box-button-wrap {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sq-image-box-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition:
		color 0.25s ease,
		background-color 0.25s ease,
		border-color 0.25s ease;
}

.sq-image-box-button-icon {
	display: inline-flex;
	margin-left: 8px;
}

/* .sq-image-box-button--secondary {
	border: 1px solid currentColor;
} */

.sq-image-box-button:hover,
.sq-image-box-button:focus {
	text-decoration: none;
}

/* ---------------------------------------------------------
   Swiper
--------------------------------------------------------- */

.sq-image-box-swiper {
	width: 100%;
	overflow: hidden;
}

.sq-image-box-swiper .swiper-wrapper {
	align-items: stretch;
}

.sq-image-box-swiper .swiper-slide {
	box-sizing: border-box;
	height: auto;
	display: flex;
}

.sq-image-box-swiper .swiper-button-prev,
.sq-image-box-swiper .swiper-button-next {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
}

.sq-image-box-swiper .swiper-button-prev::after,
.sq-image-box-swiper .swiper-button-next::after {
	font-size: 16px;
}

.sq-image-box-swiper .swiper-pagination {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	margin-top: 25px;
}

.sq-image-box-swiper .swiper-pagination-bullet {
	opacity: 0.5;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.sq-image-box-swiper .swiper-pagination-bullet-active {
	opacity: 1;
	transform: scale(1.15);
}

/* ---------------------------------------------------------
   Buttons style
--------------------------------------------------------- */
@keyframes IconMoveNxt {
  0% { opacity: 1; transform: translateX(0px); transform-origin: center; }
  50% {opacity: 0;transform: translate3d(10px, -10px, 25px);transform-origin: center;}
  51% {opacity: 0;transform: translate3d(-10px, 10px, 25px);transform-origin: center;}
  100% {opacity: 1;transform: translateY(0px);transform-origin: center;}
}

.sq-image-box-button-wrap {
    margin-top: clamp(0.625rem, 0.3365rem + 1.2821vw, 1.875rem);
}
a.sq-image-box-button{
  display: inline-flex;
    align-items: center;
    font-size: var(--sq-text-base);
    font-weight: normal;
    color: var(--sq-color-ink);
    transition: var(--sq-transition);  
} 
a.sq-image-box-button:hover 
.sq-image-box-button-icon svg {
animation-name: IconMoveNxt !important; animation-duration: 500ms !important; 
  animation-timing-function: cubic-bezier(0.7, 0, 0.3, 1) !important; will-change: transform !important; 
  transition: opacity .4s ease-out,transform .8s !important;
}
a.sq-image-box-button 
.sq-image-box-button-icon {
    overflow: hidden;
    position: relative;
    display: flex;
    margin-left: 4px;
    display: inline-flex;
    font-size: clamp(1.125rem, 1.0962rem + 0.1282vw, 1.25rem);
}

/* Image Box 2 Style */
.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button-wrap {
    display: flex;
    gap: 10px;
    flex-flow: row wrap;
}

.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary) {
    display: inline-flex;
    align-items: center;
    border: 1px solid transparent;
    font-weight: normal;
    font-size: var(--sq-text-base);
    padding: var(--sq-btn-padding);
    border-radius: var(--sq-radius-sm);
    transition: var(--sq-transition);
    white-space: nowrap;
}
.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary) {
    padding: 3px 3px 3px 20px;
    gap: 10px;
    transition: var(--sq-transition);
    background: var(--sq-color-ink);
    color: var(--sq-color-accent-white);
}
.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary) .sq-image-box-button-icon {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background-color: var(--sq-color-accent-white);
    color: var(--sq-color-ink);
    transition: var(--sq-transition);
}
.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary):hover .sq-image-box-button-icon {
    color: var(--sq-color-ink-soft);
}

.sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary):hover, .sq-image-box-widget:has(.sq-image-box-has-sec-button) .sq-image-box-button:not(.sq-image-box-button--secondary):focus {
    background: var(--sq-color-ink-soft);
    box-shadow: var(--sq-shadow-sm);
    color: var(--sq-color-accent-white);
}


/* ---------------------------------------------------------
   Accessibility
--------------------------------------------------------- */

.sq-image-box-button:focus-visible,
.sq-image-box-swiper .swiper-button-prev:focus-visible,
.sq-image-box-swiper .swiper-button-next:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media (max-width: 1024px) {

	.sq-image-box-columns-tablet-1 .sq-image-box-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sq-image-box-columns-tablet-2 .sq-image-box-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sq-image-box-columns-tablet-3 .sq-image-box-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sq-image-box-columns-tablet-4 .sq-image-box-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sq-image-box-columns-tablet-5 .sq-image-box-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sq-image-box-columns-tablet-6 .sq-image-box-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sq-image-box-grid {
		gap: 20px;
	}

}

/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media (max-width: 767px) {

	.sq-image-box-grid {
		gap: 20px;
	}

	.sq-image-box-columns-mobile-1 .sq-image-box-grid {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}

	.sq-image-box-columns-mobile-2 .sq-image-box-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sq-image-box-columns-mobile-3 .sq-image-box-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.sq-image-box-columns-mobile-4 .sq-image-box-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.sq-image-box-columns-mobile-5 .sq-image-box-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.sq-image-box-columns-mobile-6 .sq-image-box-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.sq-image-box-media--left .sq-image-box-card,
	.sq-image-box-media--right .sq-image-box-card {
		flex-direction: column;
	}

	.sq-image-box-media--left .sq-image-box-media,
	.sq-image-box-media--right .sq-image-box-media {
		order: 0;
		width: 100%;
		margin-bottom: 20px;
	}

	.sq-image-box-swiper .swiper-button-prev,
	.sq-image-box-swiper .swiper-button-next {
		width: 36px;
		height: 36px;
	}

	.sq-image-box-swiper .swiper-button-prev::after,
	.sq-image-box-swiper .swiper-button-next::after {
		font-size: 13px;
	}

}

@media (max-width: 767px) {
    .sq-image-box-columns-mobile-1 .sq-image-box-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .sq-image-box-content {
    	padding: 0 20px 25px;
	}

}
@media (max-width: 479px) {
    .sq-image-box-columns-mobile-1 .sq-image-box-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}