/*
|--------------------------------------------------------------------------
| PAGE
|--------------------------------------------------------------------------
*/

.fajar-subscription{

	padding:80px 0;

	background:#0B1220;

	min-height:100vh;

}

.fajar-subscription-container{

	width:min(1200px,92%);

	margin:auto;

}

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.fajar-subscription-hero{

	text-align:center;

	padding:80px 0 70px;

}

.fajar-subscription-badge{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:10px 22px;

	border-radius:999px;

	background:rgba(212,175,55,.15);

	color:var(--fajar-gold);

	font-size:14px;

	font-weight:700;

	margin-bottom:28px;

	border:1px solid rgba(212,175,55,.25);

}

.fajar-subscription-hero h1{

	margin:0 auto 24px;

	max-width:900px;

	font-size:58px;

	font-weight:800;

	line-height:1.15;

	color:#FFF;

}

.fajar-subscription-hero p{

	margin:0 auto 40px;

	max-width:760px;

	font-size:20px;

	line-height:1.8;

	color:#C9D2DD;

}

.fajar-premium-button{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:18px 42px;

	border-radius:12px;

	background:linear-gradient(
		135deg,
		#D4AF37,
		#F6D365
	);

	color:#111827;

	font-size:18px;

	font-weight:700;

	text-decoration:none;

	transition:.30s;

}

.fajar-premium-button:hover{

	transform:translateY(-3px);

	box-shadow:0 20px 40px rgba(212,175,55,.25);

}

.fajar-subscription-active{

	display:inline-block;

	padding:18px 30px;

	border-radius:12px;

	background:#123A25;

	color:#7CFFB2;

	font-size:18px;

	font-weight:700;

}
/*
|--------------------------------------------------------------------------
| AVANTAGES
|--------------------------------------------------------------------------
*/

.fajar-subscription-benefits{

	padding:90px 0;

}

.fajar-subscription-benefits h2{

	text-align:center;

	font-size:42px;

	font-weight:800;

	color:#FFF;

	margin-bottom:18px;

}

.fajar-subscription-intro{

	max-width:760px;

	margin:0 auto 60px;

	text-align:center;

	font-size:18px;

	line-height:1.8;

	color:#B8C2CC;

}

.fajar-subscription-grid{

	display:grid;

	grid-template-columns:repeat(
		auto-fit,
		minmax(300px,1fr)
	);

	gap:30px;

}

.fajar-subscription-card{

	background:#131C2D;

	border:1px solid rgba(255,255,255,.06);

	border-radius:22px;

	padding:35px;

	transition:.35s;

}

.fajar-subscription-card:hover{

	transform:translateY(-8px);

	border-color:rgba(212,175,55,.35);

	box-shadow:0 25px 60px rgba(0,0,0,.35);

}

.fajar-icon{

	width:70px;

	height:70px;

	border-radius:18px;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:34px;

	background:linear-gradient(
		135deg,
		#D4AF37,
		#F6D365
	);

	margin-bottom:24px;

}

.fajar-subscription-card h3{

	margin:0 0 16px;

	font-size:24px;

	font-weight:700;

	color:#FFF;

}

.fajar-subscription-card p{

	margin:0;

	font-size:16px;

	line-height:1.8;

	color:#B8C2CC;

}
/*
|--------------------------------------------------------------------------
| COMPARATIF
|--------------------------------------------------------------------------
*/

.fajar-subscription-comparison{

	padding:90px 0;

}

.fajar-subscription-comparison h2{

	text-align:center;

	font-size:42px;

	font-weight:800;

	color:#FFF;

	margin-bottom:50px;

}

.fajar-comparison-table{

	background:#131C2D;

	border-radius:24px;

	overflow:hidden;

	border:1px solid rgba(255,255,255,.08);

}

.fajar-comparison-header,

.fajar-comparison-row{

	display:grid;

	grid-template-columns:2fr 1fr 1fr;

	align-items:center;

}

.fajar-comparison-header{

	background:#1B263B;

	font-weight:700;

	color:#FFF;

}

.fajar-comparison-header div,

.fajar-comparison-row div{

	padding:22px 24px;

	text-align:center;

}

.fajar-comparison-header div:first-child,

.fajar-comparison-row div:first-child{

	text-align:left;

	font-weight:600;

}

.fajar-comparison-row{

	border-top:1px solid rgba(255,255,255,.05);

	color:#D5DCE5;

}

.fajar-comparison-row:nth-child(even){

	background:rgba(255,255,255,.02);

}

/*
|--------------------------------------------------------------------------
| OFFRE PREMIUM
|--------------------------------------------------------------------------
*/

.fajar-subscription-offer{

	padding:100px 0;

	display:flex;

	justify-content:center;

}

.fajar-offer-card{

	width:100%;

	max-width:560px;

	background:linear-gradient(
		180deg,
		#1C2942,
		#111827
	);

	border-radius:28px;

	padding:55px;

	text-align:center;

	border:2px solid rgba(212,175,55,.35);

	box-shadow:0 35px 80px rgba(0,0,0,.45);

	position:relative;

}

.fajar-offer-badge{

	position:absolute;

	top:-18px;

	left:50%;

	transform:translateX(-50%);

	background:linear-gradient(
		135deg,
		#D4AF37,
		#F6D365
	);

	color:#111827;

	padding:10px 26px;

	border-radius:999px;

	font-size:14px;

	font-weight:800;

}

.fajar-offer-card h2{

	color:#FFF;

	font-size:34px;

	margin:20px 0;

}

.fajar-offer-price{

	font-size:56px;

	font-weight:800;

	color:#D4AF37;

	margin-bottom:35px;

}

.fajar-offer-price span{

	font-size:18px;

	color:#C7CED8;

	font-weight:500;

}

.fajar-offer-card ul{

	list-style:none;

	padding:0;

	margin:0 0 40px;

	text-align:left;

}

.fajar-offer-card li{

	padding:14px 0;

	color:#E3E8EE;

	font-size:17px;

	border-bottom:1px solid rgba(255,255,255,.05);

}

.fajar-wave-button{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	width:100%;

	padding:18px;

	border-radius:14px;

	background:linear-gradient(
		135deg,
		#27AE60,
		#2ECC71
	);

	color:#FFF;

	font-size:18px;

	font-weight:700;

	text-decoration:none;

	transition:.30s;

}

.fajar-wave-button:hover{

	transform:translateY(-3px);

	box-shadow:0 20px 45px rgba(39,174,96,.35);

}

.fajar-already-premium{

	padding:20px;

	border-radius:14px;

	background:#123A25;

	color:#7CFFB2;

	font-weight:700;

}
/*
|--------------------------------------------------------------------------
| FAQ
|--------------------------------------------------------------------------
*/

.fajar-subscription-faq{

	padding:100px 0;

}

.fajar-subscription-faq h2{

	text-align:center;

	font-size:42px;

	font-weight:800;

	color:#FFF;

	margin-bottom:60px;

}

.fajar-faq-list{

	max-width:900px;

	margin:auto;

	display:flex;

	flex-direction:column;

	gap:25px;

}

.fajar-faq-item{

	background:#131C2D;

	border-radius:20px;

	padding:30px;

	border:1px solid rgba(255,255,255,.06);

}

.fajar-faq-item h3{

	margin:0 0 18px;

	font-size:22px;

	color:#FFF;

}

.fajar-faq-item p{

	margin:0;

	color:#B8C2CC;

	line-height:1.8;

	font-size:16px;

}

/*
|--------------------------------------------------------------------------
| FOOTER PREMIUM
|--------------------------------------------------------------------------
*/

.fajar-subscription-footer{

	padding:100px 0 70px;

	text-align:center;

}

.fajar-subscription-footer h2{

	font-size:44px;

	color:#FFF;

	margin-bottom:25px;

	font-weight:800;

}

.fajar-subscription-footer p{

	max-width:760px;

	margin:0 auto 40px;

	font-size:18px;

	line-height:1.9;

	color:#B8C2CC;

}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width:992px){

	.fajar-subscription-hero h1{

		font-size:46px;

	}

	.fajar-offer-price{

		font-size:46px;

	}

}

@media (max-width:768px){

	.fajar-subscription{

		padding:50px 0;

	}

	.fajar-subscription-hero{

		padding:50px 0;

	}

	.fajar-subscription-hero h1{

		font-size:34px;

	}

	.fajar-subscription-hero p{

		font-size:17px;

	}

	.fajar-subscription-benefits h2,

	.fajar-subscription-comparison h2,

	.fajar-subscription-faq h2,

	.fajar-subscription-footer h2{

		font-size:30px;

	}

	.fajar-comparison-header,

	.fajar-comparison-row{

		grid-template-columns:1.6fr .7fr .7fr;

		font-size:14px;

	}

	.fajar-comparison-header div,

	.fajar-comparison-row div{

		padding:16px 12px;

	}

	.fajar-offer-card{

		padding:35px 25px;

	}

	.fajar-offer-price{

		font-size:40px;

	}

	.fajar-wave-button,

	.fajar-premium-button{

		width:100%;

	}

}

@media (max-width:480px){

	.fajar-subscription-grid{

		grid-template-columns:1fr;

	}

	.fajar-subscription-card{

		padding:28px;

	}

	.fajar-icon{

		width:60px;

		height:60px;

		font-size:28px;

	}

	.fajar-faq-item{

		padding:24px;

	}

}