<style>
	/* Global section headings styling */
	.top_heading, .features-heading {
		text-align: center;
		margin-bottom: 60px;
	}

	.heading-text {
		font-size: 2.75rem !important;
		font-weight: 800 !important;
		color: #ffffff;
		margin-bottom: 16px;
		font-family: 'Poppins', sans-serif;
		position: relative;
		display: inline-block;
		padding-bottom: 15px;
	}

	.theme-light .heading-text {
		color: #0f172a;
	}

	.heading-text::before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 70px;
		height: 4px;
		background: linear-gradient(to right, var(--dcolor), color-mix(in srgb, var(--dcolor) 40%, #ff7e5f)) !important;
		border-radius: 10px;
	}

	.features-heading p {
		font-size: 1.15rem;
		color: rgba(241, 245, 249, 0.75);
		max-width: 700px;
		margin: 0 auto;
		line-height: 1.7;
	}

	.theme-light .features-heading p {
		color: #475569;
	}

	/* Features Section - Glassmorphic Cards */
	.features_warp_content {
		margin-bottom: 24px;
	}

	.features-wrap {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
		border: 1px solid rgba(255, 255, 255, 0.06) !important;
		border-radius: 20px !important;
		padding: 25px 20px !important;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
		backdrop-filter: blur(12px) !important;
		transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	.theme-light .features-wrap {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
		border-color: rgba(255, 255, 255, 0.5) !important;
		box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04) !important;
	}

	.features-wrap:hover {
		transform: translateY(-5px);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
		border-color: color-mix(in srgb, var(--dcolor) 30%, transparent) !important;
	}

	.features-content h4 {
		font-size: 1.25rem !important;
		font-weight: 700 !important;
		color: #ffffff;
		margin-bottom: 8px;
		font-family: 'Poppins', sans-serif;
	}

	.theme-light .features-content h4 {
		color: #0f172a;
	}

	.features-content p {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
		color: rgba(241, 245, 249, 0.65);
		margin-bottom: 0;
	}

	.theme-light .features-content p {
		color: #475569;
	}

	/* Keep original icon dimensions but style color and hover transition */
	.features-wrap i {
		color: var(--dcolor) !important;
		transition: transform 0.3s ease !important;
	}

	.features-wrap img {
		transition: transform 0.3s ease !important;
	}

	.features-wrap:hover i, .features-wrap:hover img {
		transform: scale(1.15) rotate(5deg) !important;
	}

	.features-img {
		animation: floatFeature 6s ease-in-out infinite;
	}

	@keyframes floatFeature {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-12px); }
	}

	/* FAQ Section - Accordions */
	.single_accordion {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
		border: 1px solid rgba(255, 255, 255, 0.05) !important;
		border-radius: 16px !important;
		margin-bottom: 18px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
		overflow: hidden !important;
		transition: all 0.4s ease !important;
	}

	.theme-light .single_accordion {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.55) 100%) !important;
		border-color: rgba(255, 255, 255, 0.45) !important;
		box-shadow: 0 4px 15px rgba(15, 23, 42, 0.02) !important;
	}

	.single_accordion:hover {
		border-color: color-mix(in srgb, var(--dcolor) 25%, transparent) !important;
		box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
	}

	.page_accordion_header {
		padding: 22px 28px !important;
		font-size: 1.15rem !important;
		font-weight: 700 !important;
		color: #ffffff !important;
		cursor: pointer;
		position: relative;
		display: flex !important;
		align-items: center;
		justify-content: space-between !important;
		font-family: 'Poppins', sans-serif;
		transition: all 0.3s;
		user-select: none;
	}

	.theme-light .page_accordion_header {
		color: #0f172a !important;
	}

	.page_accordion_header.active {
		background: color-mix(in srgb, var(--dcolor) 6%, transparent) !important;
	}

	/* Overriding default accordion chevron styles */
	.page_accordion_header.arrow_down::after {
		content: "\f078" !important;
		font-family: "FontAwesome" !important;
		font-weight: 900 !important;
		font-size: 1rem !important;
		transform: rotate(180deg) !important;
		transition: transform 0.3s ease-in-out !important;
		color: var(--dcolor) !important;
		float: none !important;
	}

	.page_accordion_header.arrow_up::after {
		content: "\f078" !important;
		font-family: "FontAwesome" !important;
		font-weight: 900 !important;
		font-size: 1rem !important;
		transform: rotate(0deg) !important;
		transition: transform 0.3s ease-in-out !important;
		color: var(--dcolor) !important;
		float: none !important;
	}

	.accordion_content {
		padding: 24px 28px !important;
		line-height: 1.8 !important;
		color: rgba(241, 245, 249, 0.7) !important;
		font-size: 1rem !important;
		border-top: 1px solid rgba(255, 255, 255, 0.04) !important;
		background: rgba(0, 0, 0, 0.05) !important;
	}

	.theme-light .accordion_content {
		color: #475569 !important;
		border-top-color: rgba(0, 0, 0, 0.03) !important;
		background: rgba(255, 255, 255, 0.25) !important;
	}

	.faq_images img {
		border-radius: 24px !important;
		box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3) !important;
		border: 1px solid rgba(255, 255, 255, 0.05) !important;
	}

	.theme-light .faq_images img {
		box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08) !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
	}

	/* Services Section - Clean & Elegant layout (keeps default bootstrap row structure intact) */
	.home_service_mr {
		background: transparent !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin-bottom: 60px !important;
		align-items: center;
	}

	.service_home_img {
		height: auto !important;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.service_home_img img {
		max-width: 100%;
		height: auto;
		border-radius: 20px !important;
		box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
		border: 1px solid rgba(255, 255, 255, 0.08);
		transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
	}

	.theme-light .service_home_img img {
		box-shadow: 0 15px 35px rgba(15, 23, 42, 0.08) !important;
		border-color: rgba(255, 255, 255, 0.8);
	}

	.home_service_mr:hover .service_home_img img {
		transform: translateY(-8px) scale(1.02) !important;
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3) !important;
	}

	.theme-light .home_service_mr:hover .service_home_img img {
		box-shadow: 0 25px 50px rgba(15, 23, 42, 0.15) !important;
	}

	.service_home_details {
		padding: 20px;
	}

	.service_home_title h4 {
		font-size: 2rem !important;
		font-weight: 800 !important;
		color: #ffffff;
		margin-bottom: 20px !important;
		font-family: 'Poppins', sans-serif;
	}

	.theme-light .service_home_title h4 {
		color: #0f172a;
	}

	.service_home_details p {
		font-size: 1.1rem !important;
		line-height: 1.8 !important;
		color: rgba(241, 245, 249, 0.7) !important;
	}

	.theme-light .service_home_details p {
		color: #475569;
	}

	/* Team profiles customization */
	.teamLead {
		padding: 15px;
	}

	.single_team {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
		border: 1px solid rgba(255, 255, 255, 0.06) !important;
		border-radius: 24px !important;
		padding: 35px 25px !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
		text-align: center !important;
		transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
		backdrop-filter: blur(10px) !important;
	}

	.theme-light .single_team {
		background: linear-gradient(135deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.6) 100%) !important;
		border-color: rgba(255, 255, 255, 0.55) !important;
		box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03) !important;
	}

	.single_team:hover {
		transform: translateY(-8px) !important;
		box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
		border-color: var(--dcolor) !important;
	}

	.single_team .team_header img {
		width: 130px !important;
		height: 130px !important;
		border-radius: 50% !important;
		object-fit: cover !important;
		margin: 0 auto 20px !important;
		border: 4px solid rgba(255, 255, 255, 0.08) !important;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2) !important;
		transition: all 0.4s ease !important;
	}

	.theme-light .single_team .team_header img {
		border-color: #ffffff !important;
		box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08) !important;
	}

	.single_team:hover .team_header img {
		transform: scale(1.08) rotate(3deg) !important;
		border-color: var(--dcolor) !important;
	}

	.team_details h5 {
		font-size: 1.35rem !important;
		font-weight: 750 !important;
		color: #ffffff !important;
		margin-bottom: 6px !important;
		font-family: 'Poppins', sans-serif !important;
	}

	.theme-light .team_details h5 {
		color: #0f172a !important;
	}

	.team_details p {
		font-size: 1rem !important;
		color: var(--dcolor) !important;
		font-weight: 600 !important;
		margin-bottom: 0 !important;
		letter-spacing: 0.02em !important;
	}

	/* Custom slick slider buttons styling */
	.team_slider {
		position: relative;
	}

	.slick-prev, .slick-next {
		background: var(--dcolor) !important;
		color: #ffffff !important;
		width: 46px !important;
		height: 46px !important;
		border-radius: 50% !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		z-index: 10 !important;
		cursor: pointer !important;
		box-shadow: 0 6px 15px color-mix(in srgb, var(--dcolor) 35%, transparent) !important;
		transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
		border: none !important;
	}

	.slick-prev:hover, .slick-next:hover {
		background: #ffffff !important;
		color: var(--dcolor) !important;
		box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25) !important;
		transform: translateY(-50%) scale(1.08) !important;
	}

	.slick-prev i, .slick-next i {
		font-size: 1.25rem !important;
	}

	.slick-prev {
		left: -25px !important;
	}

	.slick-next {
		right: -25px !important;
	}

	@media (max-width: 767px) {
		.slick-prev { left: -5px !important; }
		.slick-next { right: -5px !important; }
	}
</style>
<?php $features = section_name('features'); ?>
<?php if (!empty($features) && $features['status'] == 1) : ?>
	<section class="default feature_area">
		<div class="container">
			<?php if (count($left_features) > 0 && count($right_features) > 0) : ?>
				<div class="row">
					<div class="col-md-12 col-sm-12 features-heading top_heading">
						<h2 class="heading-text"><?= html_escape($features['heading']); ?></h2>
						<p><?= html_escape($features['sub_heading']); ?></p>
					</div>
					<!--col-md-12-->
					<div class="col-lg-4 col-sm-12 features-text mr-0 pr-0">
						<?php foreach ($left_features as $key => $left) : ?>
							<div class="features_warp_content" data-aos="fade-right" data-aos-delay="<?= $key + 1; ?>0">
								<div class="features-wrap left_wrap">
									<div class="features-content">
										<h4><?= html_escape($left['title']); ?></h4>
										<p><?= character_limiter(html_escape($left['details']), 120); ?> </p>
									</div>
									<!--features-content-->
									<?php if (!empty($left['icon'])) : ?>
										<?= $left['icon']; ?>
									<?php else : ?>
										<img src="<?= html_escape(base_url($left['thumb'])); ?>" alt="<?= html_escape($left['title']); ?>">
									<?php endif; ?>
								</div>
							</div>
						<?php endforeach; ?>

					</div>
					<!--col-md-6-->
					<div class=" col-lg-3 col-sm-6">
						<div class="features-img" data-aos="zoom-in" data-aos-delay="100">
							<img src="<?= !empty($features['images']) ? base_url($features['images']) : ""; ?>" alt="features-img">
						</div>
						<!--features-img-->
					</div>

					<!--col-md-4-->
					<div class="col-lg-4 col-sm-12  features-text ml-0 pl-0">
						<?php foreach ($right_features as $key => $right) : ?>
							<div class="features_warp_content" data-aos="fade-left" data-aos-delay="<?= $key + 1; ?>0">
								<div class="features-wrap right_wrap">
									<?php if (!empty($right['icon'])) : ?>
										<?= $right['icon']; ?>
									<?php else : ?>
										<img src="<?= base_url($right['thumb']); ?>" alt="<?= html_escape($right['title']); ?>">
									<?php endif; ?>
									<div class="features-content">
										<h4><?= html_escape($right['title']); ?></h4>
										<p><?= character_limiter(html_escape($right['details']), 120); ?> </p>
									</div>
									<!--features-content-->
								</div>
							</div>
						<?php endforeach; ?>

					</div>
					<!--col-md-6-->
				</div>
				<!--row-->
			<?php else : ?>
				<div class="row">
					<div class="empty_area">
						<div class="empty_text">
							<i class="fa fa-frown fa-2x"></i>
							<h4>Sorry! Data Not found</h4>
							<code>Admin-> settings -> Home settings -> Add Section Banners</code>
						</div>
					</div>
				</div>
			<?php endif; ?>
		</div>
	</section>
<?php endif; ?>


<?php $faq = section_name('faq'); ?>
<?php if (!empty($faq) && $faq['status'] == 1) : ?>
	<section class=" default services_area">
		<div class="container">
			<?php if (count($faqs) > 0) : ?>
				<div class="row">
					<div class="col-md-12 col-sm-12 features-heading">
						<h2 class="heading-text"><?= html_escape($faq['heading']); ?></h2>
						<p><?= $faq['sub_heading']; ?></p>
					</div>
				</div>
				<div class="row">
					<div class="col-md-6">
						<div class="accordion_area">
							<div class="accordions">
								<?php foreach ($faqs as $key => $home_faq) : ?>
									<div class="single_accordion" dir="<?= direction(); ?>" data-aos="fade-up" data-aos-delay="<?= $key + 1; ?> 000">
										<div class="page_accordion_header active arrow_down"><?= html_escape($home_faq['title']); ?></div>
										<div class="accordion_content block">
											<?= $home_faq['details']; ?>
										</div>
									</div>
								<?php endforeach; ?>
							</div>
						</div>
					</div>
					<div class="col-md-6" data-aos="fade-left" data-aos-delay="100">
						<div class="faq_images">
							<img src="<?= !empty($faq['images']) ? base_url($faq['images']) : base_url('assets/frontend/images/faq.jpg'); ?>" alt="Faq Image">
						</div>
					</div>
				</div>
			<?php else : ?>
				<div class="row">
					<div class="empty_area">
						<div class="empty_text">
							<i class="fa fa-frown fa-2x"></i>
							<h4>Sorry! Data Not found</h4>
							<code>Admin-> Home -> FAQ -> Add FAQ</code>
						</div>
					</div>
				</div>
			<?php endif; ?>
		</div>
	</section>
<?php endif; ?>





<?php $home_services = section_name('services'); ?>
<?php if (!empty($home_services) && $home_services['status'] == 1) : ?>
	<section class="default service_area">
		<div class="container">
			<?php if (count($services) > 0) : ?>
				<div class="row">
					<div class="col-md-12 col-sm-12 features-heading">
						<h2 class="heading-text"><?= html_escape($home_services['heading']); ?></h2>
						<p><?= html_escape($home_services['sub_heading']); ?></p>
					</div>
				</div>
				<?php foreach ($services as $key => $row) : ?>
					<div class="row mtb-20 mi-shadow home_service_mr <?= ($key + 1) % 2 == 0 ? 'row_reverse' : ''; ?> " data-aos="fade-down" data-aos-delay="<?= $key + 1; ?>00">
						<div class="col-sm-6">
							<div class="service_home_img ">
								<img src="<?= avatar($row['images'],'logo'); ?>" alt="service_home_img">
							</div>
						</div>
						<div class="col-sm-6">
							<div class="service_home_details <?= ($key + 1) % 2 == 0 ? 'text-right' : 'text-left'; ?>">
								<div class="service_home_title">
									<h4><?= html_escape($row['title']); ?></h4>
								</div>
								<p><?= $row['details']; ?></p>
							</div>
						</div>
					</div>
				<?php endforeach; ?>
			<?php else : ?>
				<div class="row">
					<div class="empty_area">
						<div class="empty_text">
							<i class="fa fa-frown fa-2x"></i>
							<h4>Sorry! Data Not found</h4>
							<code>Admin-> Home -> services -> Add services</code>
						</div>
					</div>
				</div>
			<?php endif; ?>
		</div>
	</section>
<?php endif; ?>

<?php $home_team = section_name('teams'); ?>
<?php if (!empty($home_team) && $home_team['status'] == 1) : ?>
	<div class="default teamSections section-padding-top section-padding-bottom">
		<div class="container">
			<?php if (count($team) > 0) : ?>
				<div class="row">
					<div class="col-md-12 col-sm-12 features-heading">
						<h2 class="heading-text"><?= html_escape($home_team['heading']); ?></h2>
						<p><?= html_escape($home_team['sub_heading']); ?></p>
					</div>
				</div>
				<div class="team_section">
					<div class="row team_slider slider-nav">
						<?php foreach ($team as $key => $row) : ?>
							<div class="teamLead">
								<div class="single_team style_2">
									<div class="team_header">
										<img src="<?= avatar($row['images'],'logo'); ?>" alt="team image">
										<div class="team_details">
											<h5><?= html_escape($row['name']); ?></h5>
											<p><?= html_escape($row['designation']); ?></p>
										</div>
									</div>
								</div>
							</div>
						<?php endforeach ?>
					</div>
				</div>
			<?php else : ?>
				<div class="row">
					<div class="empty_area">
						<div class="empty_text">
							<i class="fa fa-frown fa-2x"></i>
							<h4>Sorry! Data Not found</h4>
							<code>Admin-> Home -> Teams -> Add Teams</code>
						</div>
					</div>
				</div>
			<?php endif ?>
		</div>
	</div>
<?php endif; ?>


<script>
	$(document).ready(function() {
		var get_rtl = $('#rtl').data('id');

		if (get_rtl == 'rtl') {
			var rtl = true;
		} else {
			var rtl = false;
		}

		$('.team_slider').slick({
			slidesToShow: 3,
			slidesToScroll: 1,
			rtl: rtl,
			autoplay: false,
			prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>',
			nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>',
			autoplaySpeed: 2000,
			dots: false,
			arrows: true,
			focusOnSelect: true,
			responsive: [{
					breakpoint: 1024,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 1,
					}
				},
				{
					breakpoint: 600,
					settings: {
						slidesToShow: 2,
						slidesToScroll: 2
					}
				},
				{
					breakpoint: 480,
					settings: {
						slidesToShow: 1,
						slidesToScroll: 1
					}
				}
			]
		});
	})
</script>