/*
 * Alkhozama – UI refresh layer
 * Loaded after css/style.css (or style-ar.css) from the header partials.
 * Only restyles the existing template classes; no page logic depends on it.
 */

:root {
	--kz-primary: #572884;
	--kz-primary-2: #763dad;
	--kz-accent: #d23389;
	--kz-ink: #2b2236;
	--kz-muted: #6f6680;
	--kz-soft: #f6f2fa;
	--kz-line: #e7e0ef;
	--kz-radius: 12px;
	--kz-shadow: 0 10px 30px rgba(43, 34, 54, .12);
	--kz-shadow-sm: 0 4px 14px rgba(43, 34, 54, .10);
}

html, body {
	overflow-x: hidden;
}
body {
	color: var(--kz-ink);
	-webkit-font-smoothing: antialiased;
}
img {
	max-width: 100%;
}

/* ---------- top bar (call + language) ---------- */
.kz-topbar {
	background: rgba(43, 18, 66, .72);
	color: #fff;
	font-size: 14px;
	position: relative;
	z-index: 20;
}
.kz-topbar .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 8px;
	padding-bottom: 8px;
}
.kz-topbar .container:before,
.kz-topbar .container:after {
	display: none;
}
.kz-call {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--kz-primary) !important;
	padding: 7px 16px;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: var(--kz-shadow-sm);
}
.kz-call:hover {
	background: var(--kz-soft);
}
.kz-call strong {
	letter-spacing: 1px;
}
.kz-lang a {
	color: rgba(255, 255, 255, .8);
	font-weight: 600;
	padding: 4px 6px;
	text-decoration: none !important;
}
.kz-lang a:hover,
.kz-lang a.active {
	color: #fff;
}
.kz-lang a.active {
	border-bottom: 2px solid var(--kz-accent);
}
.kz-lang span {
	color: rgba(255, 255, 255, .4);
}

/* ---------- banner / header ---------- */
.banner {
	background-position: center center !important;
	position: relative;
}
.banner:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(30, 10, 50, .35), rgba(30, 10, 50, .15) 40%, rgba(30, 10, 50, .55));
	pointer-events: none;
}
.banner > * {
	position: relative;
}
.header {
	padding: 1.2em 0 0;
}
.w3layouts-logo h1 a img {
	width: 130px;
	height: auto;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .35));
	transition: transform .3s ease;
}
.w3layouts-logo h1 a:hover img {
	transform: scale(1.04);
}

/* ---------- navigation ---------- */
.top-nav {
	margin: 1.2em 0 0;
	border-bottom: 0;
}
.top-nav .navbar-nav {
	background: rgba(255, 255, 255, .12);
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	display: inline-block;
	padding: 4px;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.top-nav .navbar-collapse {
	text-align: center;
}
.top-nav ul li a {
	padding: .7em 1.5em;
	border-radius: 999px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.top-nav ul li a:hover,
.top-nav ul li a:focus {
	background: rgba(255, 255, 255, .18) !important;
	color: #fff !important;
}
.top-nav ul li a.active,
.top-nav ul li.active > a {
	background: #fff !important;
	color: var(--kz-primary) !important;
	text-shadow: none;
}
.top-nav .dropdown-menu {
	background: #fff;
	border-radius: var(--kz-radius);
	box-shadow: var(--kz-shadow);
	padding: 6px;
	top: 115%;
	min-width: 160px;
}
.top-nav .dropdown-menu > li > a {
	color: var(--kz-ink) !important;
	text-shadow: none;
	border-radius: 8px;
}
.top-nav .dropdown-menu > li > a:hover {
	background: var(--kz-soft) !important;
	color: var(--kz-primary) !important;
}
.navbar-default .navbar-toggle {
	border-color: rgba(255, 255, 255, .5);
	margin: 0 auto 10px;
	float: none;
}
.navbar-default .navbar-toggle .icon-bar {
	background: #fff;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
	background: rgba(255, 255, 255, .15);
}

/* home banner title */
.w3-banner {
	padding: 5em 0 6em;
}
.w3-banner h2 {
	color: #fff;
	text-shadow: 0 4px 24px rgba(0, 0, 0, .55), 0 0 2px var(--kz-primary);
}

/* logged-in admin shortcuts */
.kz-adminbar {
	background: var(--kz-ink);
	padding: 8px 0;
	text-align: center;
}
.kz-adminbar span {
	color: rgba(255, 255, 255, .55);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 10px;
}
.kz-adminbar a {
	display: inline-block;
	color: #fff;
	background: rgba(255, 255, 255, .1);
	padding: 4px 14px;
	margin: 3px;
	border-radius: 999px;
	font-size: 13px;
	text-decoration: none !important;
}
.kz-adminbar a:hover {
	background: var(--kz-accent);
	color: #fff;
}

/* ---------- breadcrumbs / page title strip ---------- */
.breadcrumbs {
	background: #fff;
	border-bottom: 1px solid var(--kz-line);
	padding: 1.2em 0;
}
.breadcrumbs + .breadcrumbs {
	border-top: 0;
}
.w3layouts_breadcrumbs_right h2,
.w3layouts_breadcrumbs_left h2 {
	color: var(--kz-primary);
	font-size: 1.9em;
	margin: 0;
}
.w3layouts_breadcrumbs_left ul li,
.w3layouts_breadcrumbs_left ul li a {
	font-size: 14px;
}

/* ---------- sections ---------- */
.welcome, .team, .gallery, .about-top, .contact-top {
	padding: 3em 0;
}
.gallery + .gallery {
	padding-top: 0;
}
.wthree-heading h3 {
	color: var(--kz-primary);
	position: relative;
	padding-bottom: .4em;
}
.wthree-heading h3:after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin: .4em auto 0;
	border-radius: 3px;
	background: linear-gradient(to right, var(--kz-primary), var(--kz-accent));
}
.welcome-agileitsrow,
.w3ls_team_grids {
	margin-top: 2.5em;
}
.welcome-w3ls-text p {
	color: var(--kz-ink) !important;
	font-size: 1em;
	line-height: 1.9em;
}
.welcome-img img {
	border-radius: var(--kz-radius);
	border: 0;
	box-shadow: var(--kz-shadow-sm);
}
.welcome-right {
	background: var(--kz-soft);
	border-radius: var(--kz-radius);
	border: 1px solid var(--kz-line);
}
.welcome-right ul li {
	color: var(--kz-ink);
	font-size: 1em;
}
.welcome-right span.glyphicon {
	color: var(--kz-accent);
}
.about-top-left h4 {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 1.05em;
	line-height: 1.9em;
}
.about-top-right img {
	border-radius: var(--kz-radius);
	box-shadow: var(--kz-shadow);
}

/* ---------- video block (home) ---------- */
.testimonial {
	padding: 3.5em 0;
	background: linear-gradient(135deg, var(--kz-ink), var(--kz-primary)) !important;
}
.testimonial-top iframe,
.gal-img iframe {
	border: 0 !important;
	border-radius: var(--kz-radius);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
	display: block;
	margin: 0 auto;
}
.testimonial-top iframe {
	width: 100% !important;
	max-width: 900px;
	height: auto !important;
	aspect-ratio: 16 / 9;
}
.callbacks_tabs {
	display: none;
}

/* ---------- photo grids ---------- */
.gal-grid {
	margin-bottom: 30px;
}
.gal-img {
	border-radius: var(--kz-radius);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--kz-shadow-sm);
	transition: transform .3s ease, box-shadow .3s ease;
}
.gal-img:hover {
	transform: translateY(-4px);
	box-shadow: var(--kz-shadow);
}
.item,
.item-img,
.item-hover,
.item-hover .mask,
.item-info {
	height: 240px;
}
.item-img {
	overflow: hidden;
}
.item-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.gal-img:hover .item-img img {
	transform: scale(1.06);
}
.gal-img p {
	margin: 0;
	padding: .8em 1em;
	color: var(--kz-primary);
	font-weight: 600;
	text-align: center;
	background: #fff;
}
.gal-img .item-img iframe {
	width: 100%;
	height: 100%;
	border-radius: 0;
	box-shadow: none;
}
.gal-top {
	margin-top: 0;
}

/* ---------- cards (services + food menu) ---------- */
.w3_agileits_team_grid {
	margin-bottom: 30px;
}
.w3layouts_team_grid {
	border-radius: var(--kz-radius) var(--kz-radius) 0 0;
	aspect-ratio: 4 / 3;
	background: var(--kz-soft);
}
.w3layouts_team_grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.w3_agileits_team_grid:hover .w3layouts_team_grid img {
	transform: scale(1.06);
}
.w3_agileits_team-info {
	background: #fff;
	border-radius: 0 0 var(--kz-radius) var(--kz-radius);
	box-shadow: var(--kz-shadow-sm);
	text-align: center;
	min-height: 4.6em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.w3_agileits_team-info h4 {
	color: var(--kz-primary);
	letter-spacing: .5px;
}
.w3_agileits_team-info p:empty {
	display: none;
}
/* menu.php opens a wrapper per item; keep them from stacking margins */
.w3ls_team_grids .w3ls_team_grids {
	margin: 0;
}

/* ---------- buttons ---------- */
.divdiv {
	display: inline-block;
}
.divdiv h4 {
	margin: 5px !important;
}
.btn,
a.btn {
	border: 0;
	border-radius: 999px;
	font-weight: 600;
	letter-spacing: .3px;
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.divdiv .btn,
.btn-default,
input.btn-default {
	background: linear-gradient(135deg, var(--kz-primary-2), var(--kz-primary)) !important;
	color: #fff !important;
	padding: 10px 26px;
	min-width: 140px;
	font-size: 16px;
	box-shadow: 0 6px 16px rgba(87, 40, 132, .28);
	text-decoration: none !important;
}
.divdiv .btn:hover,
.btn-default:hover,
.btn-default:focus {
	filter: brightness(1.12);
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(87, 40, 132, .32);
	color: #fff !important;
}
.btn:active {
	transform: translateY(0);
}

/* food menu categories (menu_1 / menu_2) */
.kz-menu-cats {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
	margin-bottom: 1em;
}
.kz-menu-cats a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 90px;
	padding: 18px;
	border-radius: var(--kz-radius);
	background: linear-gradient(135deg, var(--kz-primary-2), var(--kz-primary));
	color: #fff;
	font-size: 1.15em;
	font-weight: 600;
	text-decoration: none !important;
	box-shadow: var(--kz-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.kz-menu-cats a:hover,
.kz-menu-cats a:focus {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: var(--kz-shadow);
}
.kz-menu-cats a i {
	opacity: .75;
}

/* ---------- contact ---------- */
.map iframe {
	border-radius: var(--kz-radius);
	box-shadow: var(--kz-shadow-sm);
	border: 0;
}
.mail-grid-left h3 {
	color: var(--kz-primary);
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.form-control {
	border: 1px solid var(--kz-line) !important;
	border-radius: 10px !important;
	background: #fff !important;
	box-shadow: none !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus,
.form-control:focus {
	border-color: var(--kz-primary-2) !important;
	box-shadow: 0 0 0 3px rgba(118, 61, 173, .15) !important;
	outline: none;
}
.contact-form input[type="submit"] {
	background: linear-gradient(135deg, var(--kz-primary-2), var(--kz-primary)) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	padding: .8em 2.5em !important;
}

/* ---------- footer ---------- */
.footer {
	background: linear-gradient(135deg, #2b1242, var(--kz-primary) 60%, #7a2a73);
	padding: 3.5em 0 0;
	color: rgba(255, 255, 255, .8);
}
.agileinfo_footer_grid {
	margin-bottom: 2em;
}
.agileinfo_footer_grid h3 {
	font-size: 1em;
	letter-spacing: 1.5px;
}
.agileinfo_footer_grid h3:after {
	background: var(--kz-accent);
	width: 40px;
}
.agileits_w3layouts_footer_logo img {
	width: 120px;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3));
}
.agileinfo-social-grids ul li a i.fa {
	width: 42px;
	height: 42px;
	line-height: 42px;
	font-size: 1.3em;
	border-radius: 50%;
	border: 0 !important;
	background: rgba(255, 255, 255, .12);
	color: #fff;
}
.agileinfo-social-grids ul li a:hover i.fa {
	background: #fff;
	color: var(--kz-primary) !important;
}
.kz-contact-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.kz-contact-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: .8em;
	color: rgba(255, 255, 255, .75);
	font-size: .95em;
}
.kz-contact-list li i {
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	flex: 0 0 30px;
}
.kz-contact-list a,
.kz-contact-list strong {
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}
.kz-contact-list a:hover {
	color: #f7c6e3;
}
.agileinfo_footer_grid ul.w3layouts_footer_nav li a {
	color: rgba(255, 255, 255, .85);
}
.agileinfo_footer_grid ul.w3layouts_footer_nav li a:hover {
	color: #fff;
	padding-left: 4px;
}
.kz-fb-box iframe {
	width: 100%;
	max-width: 340px;
	height: 130px;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
}
.w3_agileits_footer_copy {
	background: rgba(0, 0, 0, .2);
	margin-top: 2em;
	padding: 1.1em 0;
}
.w3_agileits_footer_copy p {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	color: rgba(255, 255, 255, .75);
}
.w3_agileits_footer_copy p img {
	width: 80px;
	border-radius: 5px;
	vertical-align: middle;
}

/* ---------- scroll-to-top ---------- */
#toTop {
	border-radius: 50%;
	box-shadow: var(--kz-shadow-sm);
}

/* ---------- RTL (Arabic pages) ---------- */
[dir="rtl"] .kz-contact-list li,
.kz-rtl .kz-contact-list li {
	flex-direction: row;
}
.kz-rtl .agileinfo_footer_grid {
	text-align: right;
}
.kz-rtl .agileinfo_footer_grid h3:after {
	left: auto;
	right: 0;
}
.kz-rtl .w3layouts_footer_nav li i {
	padding-right: 0;
	padding-left: 1em;
}
.kz-rtl .agileinfo_footer_grid ul.w3layouts_footer_nav li a:hover {
	padding-left: 0;
	padding-right: 4px;
}
@media (min-width: 992px) {
	.kz-rtl .agileinfo_footer_grid {
		float: right;
	}
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.w3-banner {
		padding: 3em 0 4em;
	}
}
@media (max-width: 767px) {
	.kz-topbar .container {
		justify-content: center;
	}
	.w3layouts-logo h1 a img {
		width: 100px;
	}
	.top-nav .navbar-nav {
		display: block;
		border-radius: var(--kz-radius);
		margin: 0;
	}
	.top-nav ul li {
		display: block;
	}
	.top-nav .dropdown-menu {
		position: static;
		float: none;
		box-shadow: none;
		background: rgba(255, 255, 255, .95);
	}
	.w3-banner h2 {
		font-size: 3em;
		letter-spacing: 8px;
	}
	.w3layouts_breadcrumbs_left,
	.w3layouts_breadcrumbs_right {
		float: none;
		text-align: center;
	}
	.w3layouts_breadcrumbs_right h2 {
		margin-top: .4em;
	}
	.divdiv .btn {
		min-width: 120px;
		padding: 9px 18px;
	}
	.item,
	.item-img,
	.item-hover,
	.item-hover .mask,
	.item-info {
		height: 220px;
	}
}