﻿/* =========== © 2024 Centroarts.com - https://honista.com =========== */

:root {
	--features-gap: var(--bmob-gap);
}
@media (min-width: 992px) {
	:root {
		--features-gap: var(--b-gap);
	}
}

.features-intro-cont .title { margin-bottom: 0; }

.features-intro-arrow { display: flex; pointer-events: none; }
.features-intro-arrow::after, .features-intro-arrow::before { content: ""; flex: 1 1 auto; }
.features-intro-arrow > i {
	display: flex; overflow: hidden; background-color: var(--color-body);
}
.features-intro-arrow > i::after,
.features-intro-arrow > i::before { content: ""; display: block; min-width: 72px; width: 72px; min-height: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--color-primary); }

@media (min-width: 768px) and (max-width: 991px) {
	.features-cont { --features-gap: var(--bmob-gap); }
	.features-cont .short-list { display: block; }
	.features-cont .short-item + .short-item { margin-top: var(--features-gap); }
}
@media (max-width: 767px) {
	.features-section { text-align: center; }
	.features-intro-cont .btn-line { justify-content: center; }
	.features-intro-arrow { margin-top: var(--section-gap); margin-bottom: calc(var(--section-gap) / 2); direction: ltr; }
	.features-intro-arrow > i { height: 36px; width: 72px; justify-content: center; }
	.features-intro-arrow::after, .features-intro-arrow::before { height: 2px; }
	.features-intro-arrow > i::after { margin-left: -2px; }
	.features-intro-arrow::after { background-image: linear-gradient(to left, rgba(var(--color-primary-rgb),0), rgba(var(--color-primary-rgb),1)); }
	.features-intro-arrow::before { background-image: linear-gradient(to right, rgba(var(--color-primary-rgb),0), rgba(var(--color-primary-rgb),1)); }

	.features-cont .short-icon { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575px) {
	.features-cont .short-list { display: block; }
	.features-cont .short-item + .short-item { margin-top: var(--features-gap); }
	.features-cont .short-icon { margin-bottom: 12px; }
}
@media (min-width: 768px) {
	.features-str { display: flex; }
	.features-intro { flex: 0 0 100%; max-width: 376px; min-width: 320px; padding: 64px 0; }
	.features-intro-cont { padding-right: 48px; position: sticky; z-index: 1; top: 64px; min-height: 50vh; display: flex; justify-content: center; flex-direction: column; }
	.features-cont { position: relative; flex: 1 1 auto; padding: 48px; padding-right: 0 !important; }
	:dir(rtl) .features-cont { padding-right: 48px !important; padding-left: 0 !important; }

	.features-line { position: absolute; left: 0; top: 0; bottom: 0; width: 64px; overflow: hidden; pointer-events: none; }
	.features-line::after { content: ""; display: block; height: 100%; width: 128px; border: 2px solid var(--color-primary); border-radius: 64px; opacity: .2; }

	.features-intro-arrow { position: absolute; z-index: 1; bottom: 0; top: 0; left: 100%; width: 2px; flex-direction: column; justify-content: center; align-items: flex-end; }
	
	:dir(rtl) .features-line { left: auto; right: 0; }
	:dir(rtl) .features-intro-arrow { left: auto; right: 100%; }

	.features-intro-arrow::after, .features-intro-arrow::before { width: 2px; }
	.features-intro-arrow::after { background-image: linear-gradient(to top, rgba(var(--color-primary-rgb),0), rgba(var(--color-primary-rgb),1)); }
	.features-intro-arrow::before { background-image: linear-gradient(to bottom, rgba(var(--color-primary-rgb),0), rgba(var(--color-primary-rgb),1)); }
	.features-intro-arrow > i { width: 36px; height: 72px; flex-direction: column; justify-content: center; align-items: flex-end; }
	.features-intro-arrow > i::after { margin-top: -2px; }
}
@media (min-width: 576px) and (max-width: 767px) {
	.features-cont {
		--grid-cols: 2;
		--grid-gap: var(--features-gap);
	}
}
@media (min-width: 992px) {
	.features-cont {
		--grid-cols: 2;
		--grid-gap: var(--features-gap);
		padding: 64px;
	}
	.features-intro-cont { padding-right: 64px; }

	:dir(rtl) .features-cont { padding-right: 64px !important; }
	:dir(rtl) .features-intro-cont { padding-left: 64px; padding-right: 0; }
}