/* LLBF Home — container width + safety overrides to match the original 1310px layout */
html { direction: rtl; min-width: 0 !important; } /* Enfold grid.css forces min-width:910px — kill it so mobile doesn't overflow */
html, body { max-width: 100%; overflow-x: hidden; }
img, iframe, table { max-width: 100%; }
body {
	margin: 0;
	font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
	background: #fff;
	overflow-x: hidden;
}

/* Cairo everywhere — override the original Tajawal/Enfold fonts */
body, h1, h2, h3, h4, h5, h6, p, a, span, div, input, textarea, button, li,
.av-special-heading-tag, .avia_textblock, .iconbox_content_title,
#sub_menu1 .avia-menu-text, .av-subheading {
	font-family: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif !important;
}

/* Original site used a 1310px responsive container */
.container {
	max-width: 1310px;
	margin: 0 auto;
	padding: 0 50px;
	box-sizing: border-box;
}
.container_wrap { width: 100%; clear: both; }

/* keep images fluid */
img { max-width: 100%; height: auto; }
.avia_image { display: inline-block; }

/* ---- Top navigation bar (matches the reference: white bar, red top line, centered items with dividers) ---- */
#sub_menu1 {
	position: static !important;
	width: auto !important;
	top: auto !important;
	background: #ffffff;
	border-top: 3px solid #60110e;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}
.sticky_placeholder { display: none !important; }

#sub_menu1 .av-subnav-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
#sub_menu1 .av-subnav-menu > li { margin: 0; padding: 0; }
#sub_menu1 .av-subnav-menu > li + li { border-inline-start: 1px solid #e0e0e0; }
#sub_menu1 .av-subnav-menu > li > a {
	display: block;
	padding: 16px 22px;
	color: #555;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	line-height: 1;
	transition: color .2s ease;
}
#sub_menu1 .av-subnav-menu > li > a:hover { color: #60110e; }

/* burger hidden on desktop */
.llbf-burger { display: none; }

/* contact form basic spacing if shortcode css misses anything */
.avia_ajax_form input[type="text"],
.avia_ajax_form textarea {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #ccc;
	background: #fff;
}
.avia_ajax_form .button {
	background: #60110e;
	color: #fff;
	border: 0;
	padding: 10px 26px;
	cursor: pointer;
}

/* footer */
#socket { background: #4a0d0b; color: #fff; padding: 20px 0; text-align: center; }
#socket a { color: #fff; }

/* =====================================================================
   Lightbox (gallery popup)
   ===================================================================== */
.llbf-lb {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(2px);
}
.llbf-lb.open { display: flex; }
.llbf-lb-fig {
	margin: 0;
	max-width: 92vw;
	max-height: 90vh;
	text-align: center;
}
.llbf-lb-fig img {
	max-width: 92vw;
	max-height: 82vh;
	border-radius: 4px;
	box-shadow: 0 12px 50px rgba(0, 0, 0, 0.6);
	background: #222;
}
.llbf-lb-fig figcaption {
	color: #fff;
	margin-top: 14px;
	font-size: 15px;
	direction: ltr;
}
.llbf-lb button {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease;
}
.llbf-lb button:hover { background: #60110e; }
.llbf-lb-close { top: 18px; right: 18px; font-size: 30px; }
.llbf-lb-prev { top: 50%; right: 18px; transform: translateY(-50%); } /* RTL: previous on the right */
.llbf-lb-next { top: 50%; left: 18px; transform: translateY(-50%); }  /* next on the left */
@media only screen and (max-width: 600px) {
	.llbf-lb button { width: 42px; height: 42px; font-size: 22px; }
	.llbf-lb-prev, .llbf-lb-next { top: auto; bottom: 18px; transform: none; }
	.llbf-lb-next { left: 18px; }
	.llbf-lb-prev { right: 18px; }
}

/* =====================================================================
   Category cards (أقسام المجموعة) — modern responsive grid
   ===================================================================== */
.llbf-cat-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
	max-width: 1200px;
	margin: 10px auto 0;
	clear: both;           /* clear any preceding Enfold floats */
	position: relative;
}
.llbf-cat-card {
	display: block;
	float: none !important; /* Enfold floats anchors with images; keep them as grid items */
	position: relative;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
	transition: transform .3s ease, box-shadow .3s ease;
}
.llbf-cat-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 18px 40px rgba(96, 17, 14, 0.25);
}
.llbf-cat-img {
	display: block;
	width: 100% !important;
	height: 200px !important;
	object-fit: cover;
	margin: 0;
	transition: transform .5s ease;
}
.llbf-cat-card:hover .llbf-cat-img { transform: scale(1.06); }
.llbf-cat-body {
	display: block;
	text-align: center;
	padding: 18px 16px 20px;
	border-top: 3px solid #60110e;
}
.llbf-cat-title { display: block; margin-bottom: 6px; }
.llbf-cat-title {
	color: #60110e;
	font-size: 21px;
	font-weight: 700;
}
.llbf-cat-more {
	color: #999;
	font-size: 13px;
	font-weight: 600;
	transition: color .25s ease;
}
.llbf-cat-card:hover .llbf-cat-more { color: #60110e; }

/* =====================================================================
   Marble product galleries (responsive grid of tiles w/ caption)
   ===================================================================== */
.llbf-marble-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
	margin: 12px 0 24px;
}
.llbf-marble-tile {
	position: relative;
	display: block;
	padding-top: 70%;
	background-size: cover;
	background-position: center;
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
	transition: transform .3s ease, box-shadow .3s ease;
}
.llbf-marble-tile:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22); }
.llbf-marble-tile .cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 13px;
	padding: 7px 10px;
	text-align: center;
	direction: ltr;
}
@media only screen and (max-width: 767px) { .llbf-marble-grid { grid-template-columns: repeat(2, 1fr); } }
@media only screen and (max-width: 430px) { .llbf-marble-grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Responsive — tablet & mobile
   ===================================================================== */
@media only screen and (max-width: 1100px) {
	.container { max-width: 100%; padding: 0 28px; }
}

@media only screen and (max-width: 989px) {
	.llbf-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

	/* stack Avia equal-height "table" columns */
	.flex_column_table,
	.av-equal-height-column-flextable { display: block !important; }
	.flex_column_table_cell { display: block !important; width: 100% !important; }
	.av-flex-placeholder { display: none !important; }

	/* stack layout-grid cells (about / map+form) */
	.av-layout-grid-container.av-flex-cells { display: block !important; }
	.av-layout-grid-container .flex_cell { display: block !important; width: 100% !important; }

	/* halves & thirds & fourths -> roughly half on tablet */
	.flex_column.av_one_third { width: 48% !important; }
}

/* ---- Burger menu (mobile / tablet) ---- */
@media only screen and (max-width: 900px) {
	#sub_menu1 .container {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 56px;
		padding: 0 16px;
	}
	.llbf-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px;
		height: 46px;
		padding: 10px;
		margin: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
	}
	.llbf-burger-bar {
		display: block;
		width: 100%;
		height: 3px;
		background: #60110e;
		border-radius: 2px;
		transition: transform .3s ease, opacity .3s ease;
	}
	#sub_menu1.llbf-nav-open .llbf-burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	#sub_menu1.llbf-nav-open .llbf-burger-bar:nth-child(2) { opacity: 0; }
	#sub_menu1.llbf-nav-open .llbf-burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	#sub_menu1 .av-subnav-menu {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 999;
		flex-direction: column;
		background: #ffffff;
		box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
		border-top: 1px solid #eee;
	}
	#sub_menu1.llbf-nav-open .av-subnav-menu { display: flex; }
	#sub_menu1 .av-subnav-menu > li { width: 100%; }
	#sub_menu1 .av-subnav-menu > li + li { border-inline-start: 0; border-top: 1px solid #eee; }
	#sub_menu1 .av-subnav-menu > li > a { padding: 15px 22px; text-align: right; }
}

@media only screen and (max-width: 767px) {
	.container { padding: 0 16px; }

	/* every Avia column becomes full width and stacks */
	.flex_column,
	.flex_column.av_one_half,
	.flex_column.av_one_third,
	.flex_column.av_one_fourth,
	.flex_column.av_one_full {
		width: 100% !important;
		margin: 0 0 18px !important;
		clear: both;
		float: none !important;
	}

	/* single-column cards on phones */
	.llbf-cat-grid { grid-template-columns: 1fr; gap: 18px; }
	.llbf-cat-img { height: 200px; }

	/* nav: tighter, wraps to multiple rows cleanly */
	#sub_menu1 .av-subnav-menu > li > a { padding: 12px 14px; font-size: 14px; }

	/* logo + section spacing */
	#logoarea .container { padding: 10px 16px; }
	#logoarea img { max-width: 220px; height: auto; }
	.avia-section { padding: 40px 0 !important; }

	/* headings scale down */
	.av-special-heading-tag { font-size: 22px !important; line-height: 1.4; }
	h1.av-special-heading-tag { font-size: 26px !important; }

	/* project galleries: full-width tiles */
	.avia-gallery-llbf a { flex: 1 1 100% !important; max-width: 100% !important; height: 220px; }

	/* map iframe height */
	.avia_textblock iframe { height: 300px !important; }

	/* contact section overlay text padding */
	#contact .container { padding: 0 16px; }
}

@media only screen and (max-width: 479px) {
	.av-special-heading-tag { font-size: 20px !important; }
	#sub_menu1 .av-subnav-menu > li > a { padding: 10px 10px; font-size: 13px; }
	.llbf-cat-title { font-size: 19px; }
}