/* =========================================================
   FOOTER CSS
   assets/css/navigation/footer.css
   ========================================================= */

.vb-footer {
	margin-top: 80px;
	background: var(--vb-surface-soft);
	color: var(--vb-text);
	border-top: 1px solid var(--vb-border);
}

.vb-footer-main {
	padding: 72px 0 64px;
}

.vb-footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 70px;
}

.vb-footer-col h3 {
	margin: 0 0 18px;
	color: var(--vb-text);
	font-size: 15px;
	font-weight: 800;
}

.vb-footer-col p {
	max-width: 360px;
	margin: 0;
	color: var(--vb-text-muted);
	font-size: 14px;
	line-height: 1.7;
}

.vb-footer-col ul {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vb-footer-col li {
	margin: 0;
}

.vb-footer-col a {
	color: var(--vb-text-muted);
	font-size: 14px;
	text-decoration: none !important;
	transition: color var(--vb-transition);
}

.vb-footer-col a:hover,
.vb-footer-col a:focus {
	color: var(--vb-action);
}

/* Scroll Top Button */

.vb-scroll-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 10001;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	padding: 0;
	background: linear-gradient(
		135deg,
		var(--vb-action) 0%,
		var(--vb-action-active) 100%
	);
	color: var(--vb-text-inverse) !important;
	border: 0 !important;
	border-radius: 16px;
	box-shadow:
		0 20px 40px rgba(15, 23, 42, .18),
		0 4px 10px rgba(15, 23, 42, .12);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition:
		opacity var(--vb-transition),
		transform var(--vb-transition),
		visibility var(--vb-transition),
		background var(--vb-transition);
	backdrop-filter: blur(10px);
}

.vb-scroll-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.vb-scroll-top:hover,
.vb-scroll-top:focus-visible {
	background: linear-gradient(
		135deg,
		var(--vb-action-active) 0%,
		var(--vb-action-hover) 100%
	);
}

.vb-scroll-top svg {
	width: 20px;
	height: 20px;
	stroke: currentColor !important;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Responsive <= 1180 */

@media (max-width: 1180px) {

	.vb-footer-grid {
		gap: 46px;
	}
	
	.vb-scroll-top {
		right: 14px !important;
		bottom: 90px !important;
		width: 46px;
		height: 46px;
		border-radius: 14px;
		z-index: 10002;
	}
}

/* Responsive <= 900 */

@media (max-width: 900px) {

	.vb-footer-grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}

	.vb-scroll-top {
		right: 14px !important;
		bottom: 90px !important;
		width: 46px;
		height: 46px;
		border-radius: 14px;
		z-index: 10002;
	}
}

/* Responsive <= 560 */

@media (max-width: 560px) {

	.vb-footer-grid {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.vb-scroll-top {
		right: 12px !important;
		bottom: 88px !important;
		width: 44px;
		height: 44px;
		border-radius: 13px;
	}
}

/* Responsive <= 430 */

@media (max-width: 430px) {

	.vb-scroll-top {
		right: 10px !important;
		bottom: 84px !important;
		width: 42px;
		height: 42px;
		border-radius: 12px;
	}
}