/* =========================================================
   Core sizing protection
   ========================================================= */

.ni-guide-tabs,
.ni-guide-tabs *,
.ni-guide-tabs *::before,
.ni-guide-tabs *::after{
	box-sizing:border-box;
}

.ni-guide-tabs{
	width:100%;
	max-width:100%;
	min-width:0;
	overflow:hidden;
}

.ni-guide-tabs-grid{
	display:grid;
	grid-template-columns:repeat(5,minmax(0,1fr));
	gap:1px;
	width:100%;
	max-width:100%;
	min-width:0;
	margin-top:36px;
	padding:1px;
	border-radius:24px;
	overflow:hidden;
	background:rgba(255,255,255,.06);
	box-shadow:
		0 0 0 1px rgba(255,255,255,.04) inset,
		0 12px 32px rgba(0,0,0,.18);
}

.ni-guide-tabs-grid > *{
	min-width:0;
	max-width:100%;
}

.ni-guide-tab{
	-webkit-appearance:none;
	appearance:none;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:flex-start;
	gap:12px;
	width:100%;
	max-width:100%;
	min-width:0;
	min-height:220px;
	padding:32px 24px;
	border:0;
	outline:0;
	border-radius:0;
	background:#080808;
	color:#eaeaea;
	text-align:left;
	cursor:pointer;
	position:relative;
	overflow:hidden;
	box-shadow:none;
	transition:
		background .35s ease,
		box-shadow .35s ease,
		transform .2s ease;
}

.ni-guide-tab::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:2px;
	background:linear-gradient(90deg,#0a4d7a 0%, #1e90d2 55%, #8fd6ff 100%);
	opacity:0;
	transition:opacity .3s ease;
}

.ni-guide-tab::after{
	content:'';
	position:absolute;
	inset:0;
	pointer-events:none;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
	opacity:1;
}

.ni-guide-tab:hover{
	background:linear-gradient(180deg, rgba(9,28,45,.96) 0%, rgba(8,8,8,1) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,.035),
		0 0 24px rgba(0,90,160,.08);
}

.ni-guide-tab.active{
	background:linear-gradient(180deg, rgba(10,36,58,.98) 0%, rgba(8,8,8,1) 100%);
	box-shadow:
		inset 0 0 0 1px rgba(120,190,235,.12),
		0 0 28px rgba(0,110,190,.10);
}

.ni-guide-tab.active::before{
	opacity:1;
}

.ni-guide-tab:focus,
.ni-guide-tab:focus-visible{
	outline:0;
	box-shadow:
		inset 0 0 0 1px rgba(120,190,235,.18),
		0 0 0 2px rgba(0,140,255,.18);
}

/* =========================================================
   Inner tab content
   ========================================================= */

.ni-guide-tab-content{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	flex:1 1 auto;
	width:100%;
	max-width:100%;
	min-width:0;
	overflow:hidden;
}

.ni-guide-tab-content > *{
	width:100%;
	max-width:100%;
	min-width:0;
}

/* Elementor wrappers inside saved templates */
.ni-guide-tab-content [data-elementor-type],
.ni-guide-tab-content .elementor,
.ni-guide-tab-content .elementor-section,
.ni-guide-tab-content .elementor-container,
.ni-guide-tab-content .elementor-column,
.ni-guide-tab-content .elementor-column-wrap,
.ni-guide-tab-content .elementor-widget-wrap,
.ni-guide-tab-content .elementor-widget,
.ni-guide-tab-content .elementor-widget-container,
.ni-guide-tab-content .e-con,
.ni-guide-tab-content .e-child,
.ni-guide-tab-content .e-parent{
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
}

.ni-guide-tab-content .elementor-heading-title,
.ni-guide-tab-content p,
.ni-guide-tab-content span,
.ni-guide-tab-content div{
	max-width:100%;
	min-width:0;
}

.ni-guide-tab-content .elementor-heading-title,
.ni-guide-tab-content p{
	overflow-wrap:anywhere;
	word-break:break-word;
}

/* Prevent template backgrounds/borders fighting card shell */
.ni-guide-tab-content .elementor-widget-container,
.ni-guide-tab-content .e-con{
	background:transparent !important;
	border:none !important;
	box-shadow:none !important;
}

/* =========================================================
   Arrow
   ========================================================= */

.ni-guide-arrow{
	margin-top:auto;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	color:#d9e7f2;
	opacity:.42;
	transition:
		transform .28s cubic-bezier(.2,.8,.2,1),
		opacity .25s ease,
		color .25s ease;
}

.ni-guide-arrow svg{
	display:block;
	width:18px;
	height:18px;
}

.ni-guide-tab:hover .ni-guide-arrow{
	transform:translateX(4px);
	opacity:.85;
	color:#fff;
}

.ni-guide-tab.active .ni-guide-arrow{
	transform:rotate(90deg);
	opacity:1;
	color:#fff;
}

/* =========================================================
   Panels
   ========================================================= */

.ni-guide-panels{
	width:100%;
	max-width:100%;
	min-width:0;
	margin-top:24px;
}

.ni-guide-panel{
	display:none;
	width:100%;
	max-width:100%;
	min-width:0;
	overflow:hidden;
	background:#111;
	border-radius:24px;
	padding:34px;
	box-shadow:
		0 0 0 1px rgba(255,255,255,.04) inset,
		0 16px 36px rgba(0,0,0,.16);
}

.ni-guide-panel.active{
	display:block;
}

.ni-guide-panel [data-elementor-type],
.ni-guide-panel .elementor,
.ni-guide-panel .elementor-section,
.ni-guide-panel .elementor-container,
.ni-guide-panel .elementor-column,
.ni-guide-panel .elementor-column-wrap,
.ni-guide-panel .elementor-widget-wrap,
.ni-guide-panel .elementor-widget,
.ni-guide-panel .elementor-widget-container,
.ni-guide-panel .e-con,
.ni-guide-panel .e-child,
.ni-guide-panel .e-parent{
	max-width:100% !important;
	min-width:0 !important;
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width:1024px){
	.ni-guide-tabs-grid{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}

	.ni-guide-tab{
		min-height:200px;
		padding:28px 20px;
	}
}

@media (max-width:767px){
	.ni-guide-tabs-grid{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}

	.ni-guide-tab{
		min-height:180px;
		padding:22px 16px;
	}

	.ni-guide-panel{
		padding:22px;
	}
}

.ni-guide-panel{
	scroll-margin-top: 100px;
}