/* =========================================================================
   Anwalt — General custom tweaks (Omar John Law)
   Loaded in BOTH directions. Keep direction-specific rules in rtl.css.
   ========================================================================= */

/* Team member photos: equalise height (one portrait had a taller aspect ratio) */
.mkdf-team-image {
	overflow: hidden;
}

.mkdf-team-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 109 / 128;
	object-fit: cover;
	object-position: top center;
	display: block;
}

/* Profile pages exported from the company PDF, shown full-width edge-to-edge */
.ojl-profile-page,
.ojl-profile-page .mkdf-single-image-holder,
.ojl-profile-page .mkdf-si-inner {
	width: 100%;
}

.ojl-profile-page img {
	width: 100%;
	height: auto;
	display: block;
}

.ojl-profile-page .mkdf-single-image-holder {
	margin: 0;
	line-height: 0;
}

/* Packages page: quote-based packages have no public price -> hide the empty price area */
.page-id-1286 .mkdf-pt-price-holder,
.page-id-13 .mkdf-pt-price-holder {
	display: none;
}

.page-id-1286 .mkdf-pt-content,
.page-id-13 .mkdf-pt-content {
	padding-top: 20px;
}

/* =========================================================================
   Phone numbers: keep the Latin digits in LTR order inside the RTL page.
   Without this the bidi algorithm reorders "+966 54 558 7987" -> "7987 ... 966+".
   Every phone is inside a tel: link, so one rule fixes the whole site.
   ========================================================================= */
a[href^="tel:"] {
	direction: ltr;
	unicode-bidi: embed;
	display: inline-block;
}

/* =========================================================================
   HOME HERO (Slider Revolution) — match the original demo + make text sharp.
   The slide layers are NOT mirrored (RevSlider keeps its own engine), so the
   text block stays on the LEFT; we darken that side for contrast and sharpen
   the type. Layer width / colors are handled in the slider data itself.
   ========================================================================= */
/* Taupe veil over the slide photo (same idea as the testimonials section) so
   the light text reads clearly. The SR7 engine renders the slide background in
   the <sr7-px>/<sr7-mask> custom-element tags (z=0); text layers are <sr7-txt>
   (z=8), so this ::after veil sits above the photo but under the text. */
.home sr7-px::after,
.home sr7-mask::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(to right, rgba(61, 54, 46, 0.62) 0%, rgba(61, 54, 46, 0.5) 50%, rgba(61, 54, 46, 0.38) 100%);
}

/* =========================================================================
   HOME transparent header (over the dark hero): the menu bar is transparent
   and the theme keeps the black menu + dark logo, which vanish on the dark
   photo. Force the light logo + white menu/icons — but ONLY for the top
   (.mkdf-page-header) on home; the white sticky header is a separate element
   and keeps its dark-on-white styling, and inner pages are untouched.
   ========================================================================= */
.home .mkdf-page-header .mkdf-fixed-wrapper:not(.fixed) .mkdf-main-menu>ul>li>a {
	color: #ffffff !important;
}

.home .mkdf-page-header .mkdf-fixed-wrapper:not(.fixed) .mkdf-main-menu>ul>li>a:hover,
.home .mkdf-page-header .mkdf-fixed-wrapper:not(.fixed) .mkdf-main-menu>ul>li.current-menu-item>a,
.home .mkdf-page-header .mkdf-fixed-wrapper:not(.fixed) .mkdf-main-menu>ul>li.current-menu-ancestor>a {
	color: #bb9b6c !important;
	/* Lion for active/hover stays on-brand */
}

.home .mkdf-page-header .mkdf-side-menu-button-opener,
.home .mkdf-page-header .mkdf-search-opener,
.home .mkdf-page-header .mkdf-side-menu-button-opener span,
.home .mkdf-page-header .mkdf-search-opener span {
	color: #ffffff !important;
}

/* show the white logo at the top, hide the dark one */
.home .mkdf-page-header .mkdf-normal-logo,
.home .mkdf-page-header .mkdf-dark-logo {
	opacity: 0 !important;
}

.home .mkdf-page-header .mkdf-light-logo {
	opacity: 1 !important;
}

/* Sharpen every hero text layer against the busy photo */
.home rs-layer,
.home .sr7-layer,
.home .tp-caption {
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}


/* Hero slider: محاذاة الـ description والأزرار ناحية اليمين
   RevSlider بيحط النص مباشرةً في rs-layer من غير p/div wrapper
   عشان كده بنستهدف rs-layer نفسه + كل أبناؤه */
.home rs-layer,
.home rs-layer *,
.home .sr7-layer,
.home .sr7-layer *,
.home .tp-caption,
.home .tp-caption * {
	text-align: right !important;
	direction: rtl !important;
}

/* wrapper الأزرار: دفعهم لليمين */
.home rs-layer .mkdf-btn-holder,
.home .sr7-layer .mkdf-btn-holder,
.home rs-layer .wp-block-buttons,
.home .sr7-layer .wp-block-buttons {
	justify-content: flex-end !important;
	text-align: right !important;
}


/* Hero buttons: make the brand color bold and prominent */
.home rs-layer .mkdf-btn.mkdf-btn-solid,
.home .sr7-layer .mkdf-btn.mkdf-btn-solid,
.home .mkdf-btn.mkdf-btn-solid {
	background-color: #bb9b6c !important;
	border-color: #bb9b6c !important;
	color: #ffffff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.home rs-layer .mkdf-btn.mkdf-btn-outline,
.home .sr7-layer .mkdf-btn.mkdf-btn-outline,
.home .mkdf-btn.mkdf-btn-outline {
	border-color: #ffffff !important;
	color: #ffffff !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* =========================================================================
   TESTIMONIALS parallax section (home + about): veil the busy photo so the
   quotes stand out, center the text (RTL had pushed it to start mid-line).
   ========================================================================= */
.mkdf-parallax-row-holder {
	position: relative;
}

.mkdf-parallax-row-holder::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: rgba(61, 54, 46, 0.62);
	/* Taupe veil */
}

.mkdf-parallax-row-holder>* {
	position: relative;
	z-index: 1;
}

.mkdf-parallax-row-holder .mkdf-st-title,
.mkdf-parallax-row-holder .mkdf-section-subtitle,
.mkdf-parallax-row-holder .mkdf-testimonial-text,
.mkdf-parallax-row-holder .mkdf-testimonial-title,
.mkdf-parallax-row-holder .mkdf-testimonials-author-name {
	color: #f0ede4 !important;
}

.mkdf-parallax-row-holder .mkdf-testimonial-content,
.mkdf-parallax-row-holder .mkdf-testimonial-text,
.mkdf-parallax-row-holder .mkdf-testimonial-text-holder,
.mkdf-parallax-row-holder .mkdf-testimonials-author-name {}

/* =========================================================================
   Floating quick-contact buttons (WhatsApp + Call), fixed on the side like
   the back-to-top arrow. Markup injected from functions.php (wp_footer).
   ========================================================================= */
.ojl-float-contact {
	position: fixed;
	left: 28px;
	bottom: 30px;
	z-index: 9999;
	gap: 12px;
}

.ojl-float-btn {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ojl-float-btn:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.36);
}

.ojl-float-btn svg {
	width: 27px;
	height: 27px;
	fill: #fff;
}

.ojl-float-btn.ojl-wa {
	background: #25d366;
}

.ojl-float-btn.ojl-call {
	background: #bb9b6c;
}

@media (max-width: 768px) {
	.ojl-float-contact {
		left: 16px;
		bottom: 18px;
		gap: 10px;
	}

	.ojl-float-btn {
		width: 48px;
		height: 48px;
	}

	.ojl-float-btn svg {
		width: 23px;
		height: 23px;
	}
}

/* =========================================================================
   SITE FONT — Montserrat Arabic across the whole site.
   Cairo (loaded from Google in functions.php) is the active, free near-match
   and the loaded fallback. To switch to the real Montserrat Arabic, drop the
   webfont files into anwalt-child/fonts/ and uncomment the @font-face block
   below — being first in the stack, it then takes over automatically.
   ========================================================================= */
@font-face {
	font-family: 'Montserrat Arabic';
	src: url('fonts/Montserrat-Arabic-Regular.ttf') format('truetype');
	font-weight: 300 700;
	/* one real weight; claim the range so headings are not faux-bolded heavy */
	font-style: normal;
	font-display: swap;
}

/* Drive the new font through body inheritance so the icon fonts (ElegantIcons,
   FontAwesome, Ionicons — used by the burger / search / close / back-to-top
   glyphs) are NEVER touched. Override ONLY the theme's explicit text fonts
   (Open Sans body + Lustria headings + menu / buttons / inputs). No bare
   span / a / [class*=mkdf] here — that is exactly what broke the icons. */
body {
	font-family: 'Montserrat Arabic', 'Cairo', sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
p,
blockquote,
li,
dd,
dt,
td,
th,
caption,
input,
textarea,
select,
optgroup,
button,
.mkdf-main-menu>ul>li>a,
.mkdf-main-menu ul ul li a,
.mkdf-drop-down ul li a,
.mkdf-mobile-menu a,
.mkdf-fullscreen-menu a,
.mkdf-btn,
.qbutton,
.mkdf-section-title,
.mkdf-st-title,
.mkdf-section-subtitle,
.mkdf-price,
.mkdf-pt-title,
.mkdf-pt-table-title-holder,
.mkdf-team-title,
.mkdf-t7-name,
.mkdf-post-title,
.mkdf-blog-title,
.wpb_text_column,
.vc_column_text,
.sr7-layer,
sr7-txt {
	font-family: 'Montserrat Arabic', 'Cairo', sans-serif !important;
}

/* =========================================================================
   Lawyer profile lightbox (team page) — a "mini page" of the PDF profile over
   a dark overlay. Toggled by the wp_footer script in functions.php.
   ========================================================================= */
.ojl-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.ojl-modal.is-open {
	display: block;
}

.ojl-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 16, 12, 0.82);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	cursor: zoom-out;
}

.ojl-modal-dialog {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 92vw;
	max-height: 90vh;
	border-radius: 5px;
	overflow: hidden;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
	animation: ojlModalIn 0.25s ease;
}

@keyframes ojlModalIn {
	from {
		opacity: 0;
		transform: translate(-50%, -48%) scale(0.97);
	}

	to {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

.ojl-modal-img {
	display: block;
	max-width: 92vw;
	max-height: 90vh;
	width: auto;
	height: auto;
}

.ojl-modal-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	font-size: 26px;
	line-height: 42px;
	cursor: pointer;
	z-index: 2;
	transition: background 0.2s ease;
}

.ojl-modal-close:hover {
	background: #bb9b6c;
}

/* hint that the photo/name is interactive */
.page-id-3366 .mkdf-team-image {
	position: relative;
}

.page-id-3366 .mkdf-team-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(61, 54, 46, 0);
	transition: background 0.25s ease;
}

.page-id-3366 .mkdf-team-holder:hover .mkdf-team-image::after {
	background: rgba(61, 54, 46, 0.22);
}

/* =========================================================================
   Contact page (399): two fields per row (first/last, email/phone), Lion
   submit button, and the embedded location map.
   ========================================================================= */
.ojl-cf7-row {
	gap: 30px;
}

.ojl-cf7-col {
	flex: 1 1 50%;
	min-width: 0;
}

@media (max-width: 600px) {
	.ojl-cf7-row {
		gap: 0;
	}
}

.cf7_custom_style_1 input[type="submit"],
.wpcf7 input.wpcf7-submit {
	background-color: #bb9b6c !important;
	border-color: #bb9b6c !important;
	color: #ffffff !important;
}

.cf7_custom_style_1 input[type="submit"]:hover,
.wpcf7 input.wpcf7-submit:hover {
	background-color: #9a7e52 !important;
	border-color: #9a7e52 !important;
}

.ojl-map {
	width: 100%;
	height: 505px;
	display: block;
	border: 0;
}

/* =========================================================================
   MOBILE LOGO — تصغير اللوجو في وضع الموبايل حتى لا يطلع من الناف بار
   ========================================================================= */
@media (max-width: 1024px) {

	.mkdf-page-header .mkdf-logo-wrapper img,
	.mkdf-page-header .mkdf-logo-wrapper a img,
	.mkdf-mobile-header .mkdf-logo-wrapper img,
	.mkdf-mobile-header .mkdf-logo-wrapper a img,
	.mkdf-mobile-header-inner .mkdf-logo-wrapper img,
	.mkdf-mobile-header-inner .mkdf-logo-wrapper a img {
		max-height: 45px !important;
		width: auto !important;
		height: auto !important;
	}

	.mkdf-mobile-logo-wrapper img,
	.mkdf-mobile-logo-wrapper a img {
		max-height: 45px !important;
		width: auto !important;
		height: auto !important;
	}
}

@media (max-width: 768px) {

	.mkdf-page-header .mkdf-logo-wrapper img,
	.mkdf-page-header .mkdf-logo-wrapper a img,
	.mkdf-mobile-header .mkdf-logo-wrapper img,
	.mkdf-mobile-header .mkdf-logo-wrapper a img,
	.mkdf-mobile-header-inner .mkdf-logo-wrapper img,
	.mkdf-mobile-header-inner .mkdf-logo-wrapper a img {
		max-height: 36px !important;
		width: auto !important;
		height: auto !important;
	}

	.mkdf-mobile-logo-wrapper img,
	.mkdf-mobile-logo-wrapper a img {
		max-height: 36px !important;
		width: auto !important;
		height: auto !important;
	}

	/* Footer logo */
	.mkdf-footer-bottom-holder .mkdf-logo-wrapper img,
	footer .mkdf-logo-wrapper img {
		max-height: 40px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* =========================================================================
   STICKY NAVBAR — لون كلمات القائمة يصبح أسود عند السكرول (الهيدر الـ sticky)
   ========================================================================= */
.mkdf-fixed-wrapper.fixed .mkdf-main-menu>ul>li>a,
.mkdf-page-header.scroll .mkdf-main-menu>ul>li>a,
.mkdf-page-header .mkdf-fixed-wrapper.fixed .mkdf-main-menu>ul>li>a,
.mkdf-sticky-header .mkdf-main-menu>ul>li>a,
.mkdf-sticky-header-inner .mkdf-main-menu>ul>li>a {
	color: #222222 !important;
}

.mkdf-fixed-wrapper.fixed .mkdf-main-menu>ul>li>a:hover,
.mkdf-fixed-wrapper.fixed .mkdf-main-menu>ul>li.current-menu-item>a,
.mkdf-fixed-wrapper.fixed .mkdf-main-menu>ul>li.current-menu-ancestor>a,
.mkdf-sticky-header .mkdf-main-menu>ul>li>a:hover,
.mkdf-sticky-header .mkdf-main-menu>ul>li.current-menu-item>a,
.mkdf-sticky-header .mkdf-main-menu>ul>li.current-menu-ancestor>a {
	color: #bb9b6c !important;
}

/* إخفاء اللوجو الأبيض وإظهار الداكن عند السكرول على الصفحة الرئيسية */
.home .mkdf-fixed-wrapper.fixed .mkdf-light-logo {
	opacity: 0 !important;
}

.home .mkdf-fixed-wrapper.fixed .mkdf-dark-logo,
.home .mkdf-fixed-wrapper.fixed .mkdf-normal-logo {
	opacity: 1 !important;
}

/* =========================================================================
   BLOG SIDEBAR — إظهار السايدبار على الموبايل + جعله على اليسار
   ========================================================================= */
/* إظهار السايدبار في الموبايل (كان مخفياً بالثيم) */
@media (max-width: 1024px) {
	.mkdf-content .mkdf-sidebar-holder {
		display: block !important;
		width: 100% !important;
		float: none !important;
		padding: 20px 15px !important;
	}

	.mkdf-content .mkdf-content-holder-in-grid {
		width: 100% !important;
		float: none !important;
	}
}

/* =========================================================================
   PRICING CARDS — توحيد ارتفاع العنوان وخلفيته الذهبية في الباقات الثلاث
   الهدف: نفس الارتفاع + نفس عدد السطور لكل كارد
   ========================================================================= */
.mkdf-pt-table-title-holder {
	min-height: 90px !important;
	padding: 16px 20px !important;
	box-sizing: border-box !important;
	line-height: 1.35 !important;
}

.mkdf-pt-table-title-holder .mkdf-pt-title {
	display: block !important;
	width: 100% !important;
	word-break: break-word !important;
	hyphens: auto !important;
	font-size: 1.1em !important;
	line-height: 1.4 !important;
	margin: 0 !important;
}
}



/* Hide title text on About Us cover image */
.page-id-236 .mkdf-title .mkdf-page-title, .page-id-236 .mkdf-title .mkdf-title-text {
    display: none !important;
}


/* Hide title text on About Us cover image FIX */
.page-id-236 .mkdf-page-title {
    display: none !important;
}


/* =========================================================================
   FLOATING CONTACT BUTTONS (RESTORED)
   ========================================================================= */
.ojl-float-contact {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ojl-float-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    text-decoration: none !important;
}

.ojl-float-btn:hover {
    transform: translateY(-3px);
}

.ojl-float-btn svg {
    width: 26px !important;
    height: 26px !important;
    fill: #fff !important;
}

.ojl-wa {
    background-color: #25d366 !important;
}

.ojl-call {
    background-color: #bb9b6c !important;
}


/* =========================================================================
   LAWYER MODAL (RESTORED)
   ========================================================================= */
.ojl-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
}

.ojl-modal.is-open {
    display: flex;
}

.ojl-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.ojl-modal-dialog {
    position: relative;
    z-index: 1;
    animation: modalIn 0.3s ease;
}

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.ojl-modal-img {
    display: block;
    max-width: 92vw;
    max-height: 90vh;
    width: auto;
    height: auto;
}

.ojl-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 26px;
    line-height: 42px;
    cursor: pointer;
    z-index: 2;
    transition: background 0.2s ease;
}

.ojl-modal-close:hover {
    background: #bb9b6c;
}

/* hint that the photo/name is interactive */
.page-id-3366 .mkdf-team-image { position: relative; }
.page-id-3366 .mkdf-team-image::after { content: ""; position: absolute; inset: 0; background: rgba(61, 54, 46, 0); transition: background 0.25s ease; }
.page-id-3366 .mkdf-team-holder:hover .mkdf-team-image::after { background: rgba(61, 54, 46, 0.22); }


/* =========================================================================
   CONTACT PAGE CF7 (RESTORED)
   ========================================================================= */
.ojl-cf7-row { display: flex; gap: 30px; }
.ojl-cf7-col { flex: 1 1 50%; min-width: 0; }
@media (max-width: 600px) { .ojl-cf7-row { flex-direction: column; gap: 0; } }
.cf7_custom_style_1 input[type="submit"], .wpcf7 input.wpcf7-submit { background-color: #bb9b6c !important; border-color: #bb9b6c !important; color: #ffffff !important; }
.cf7_custom_style_1 input[type="submit"]:hover, .wpcf7 input.wpcf7-submit:hover { background-color: #9a7e52 !important; border-color: #9a7e52 !important; }
.ojl-map { width: 100%; height: 505px; display: block; border: 0; }


/* =========================================================================
   PACKAGES SECTION (DYNAMIC WITH BACKGROUND)
   ========================================================================= */
.ojl-packages-wrapper {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 50px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.4);
}

.ojl-packages-header {
    text-align: center;
    margin-bottom: 40px;
}

.ojl-pkgs-title {
    color: #bb9b6c;
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ojl-pkgs-subtitle {
    color: #333;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.ojl-pkgs-intro {
    color: #555;
    font-size: 18px;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
}

.ojl-pkgs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.ojl-pkg-card {
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-top: 4px solid #bb9b6c;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ojl-pkg-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.ojl-pkg-card h4 {
    color: #333;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.5;
}

.ojl-pkg-card p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}

.ojl-pkgs-footer {
    background: rgba(187, 155, 108, 0.1);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid rgba(187, 155, 108, 0.3);
    text-align: center;
}

.ojl-pkgs-footer h4 {
    color: #bb9b6c;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}

.ojl-pkgs-footer p {
    color: #444;
    font-size: 16px;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 768px) {
    .ojl-packages-wrapper {
        padding: 30px 20px;
    }
    .ojl-pkgs-title {
        font-size: 28px;
    }
    .ojl-pkgs-subtitle {
        font-size: 20px;
    }
}

.ojl_bg_section {
    background-image: url('/wp-content/uploads/2026/06/Gemini_Generated_Image_o9ip07o9ip07o9ip_compressed.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

/* =========================================================================
   VISION SECTION (Dynamic Background & Content)
   ========================================================================= */
.ojl_vision_bg_wrapper {
    background-image: url('/wp-content/uploads/2026/06/Gemini_Generated_Image_bi982gbi982gbi98_compressed-1.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    padding-top: 120px !important;
    padding-bottom: 120px !important;
    position: relative;
    overflow: hidden;
}

/* Gradient overlay for readability */
.ojl_vision_bg_wrapper::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(53, 49, 44, 0.85) 60%, rgba(53, 49, 44, 0.95) 100%);
    pointer-events: none;
    z-index: 0;
}

.ojl_vision_bg_wrapper > .wpb_column {
    position: relative;
    z-index: 1;
}

/* Vision Text Content (Right Side) */
.ojl-vision-content {
    padding-right: 50px;
}

.ojl-vision-title {
    color: #c9a063; /* Elegant Gold */
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    padding-bottom: 15px;
}
.ojl-vision-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 3px;
    background: #c9a063;
}

.ojl-vision-subtitle {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
    margin-top: 25px;
}

.ojl-vision-text {
    color: #e5e5e5;
    font-size: 16px;
    line-height: 2;
    margin-bottom: 25px;
    text-align: justify;
}

/* Stats Content (Left Side) */
.ojl-vision-stats {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-left: 20px;
    margin-top: 50px;
}

.ojl-stat-item {
    display: flex;
    flex-direction: column;
    border-right: 3px solid rgba(201, 160, 99, 0.5);
    padding-right: 25px;
    transition: all 0.3s ease;
}

.ojl-stat-item:hover {
    border-right-color: #c9a063;
    transform: translateX(-10px);
}

.ojl-stat-num {
    color: #c9a063;
    font-size: 60px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.ojl-stat-desc {
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
}

@media (max-width: 991px) {
    .ojl-vision-content {
        padding-right: 0;
        margin-bottom: 50px;
    }
    .ojl_vision_bg_wrapper::before {
        background: rgba(53, 49, 44, 0.85);
    }
}

/* =========================================================================
   VISION SECTION - CENTERED LAYOUT
   ========================================================================= */
.ojl_vision_bg_wrapper::before {
    background: rgba(40, 36, 31, 0.75); /* Dark overlay to make everything readable */
}

.ojl-vision-content-center {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto;
}

.ojl-vision-title-center {
    color: #c9a063;
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 10px;
}

.ojl-vision-subtitle-center {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
}

.ojl-vision-text-center {
    color: #f1f1f1;
    font-size: 18px;
    line-height: 2;
    margin-bottom: 20px;
    text-align: center;
}

.ojl-vision-stats-horizontal {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1px solid rgba(201, 160, 99, 0.3);
    gap: 30px;
}

.ojl-stat-item-hz {
    flex: 1;
    min-width: 250px;
    max-width: 33%;
    padding: 0 10px;
    transition: transform 0.3s ease;
}

.ojl-stat-item-hz:hover {
    transform: translateY(-5px);
}

.ojl-stat-num-hz {
    display: block;
    color: #c9a063;
    font-size: 65px;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 15px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}

.ojl-stat-desc-hz {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 500;
}

/* =========================================================================
   MISSION SECTION - SCROLL CARDS
   ========================================================================= */
.ojl_mission_bg_wrapper {
    background-image: url('/wp-content/uploads/2026/06/Gemini_Generated_Image_bi982gbi982gbi98_compressed-1.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    padding-top: 100px !important;
    padding-bottom: 120px !important;
    position: relative;
    overflow: hidden;
}

.ojl_mission_bg_wrapper::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(40, 36, 31, 0.75); /* Dark overlay */
    pointer-events: none;
    z-index: 0;
}

.ojl_mission_bg_wrapper > .wpb_column {
    position: relative;
    z-index: 1;
}

/* Pure CSS Scroll Element */
.ojl-css-scroll {
    position: relative;
    background: #f4ecd8; /* Parchment color */
    padding: 50px 40px;
    margin: 30px 15px;
    box-shadow: 
        0 10px 20px rgba(0,0,0,0.3),
        inset 0 0 50px rgba(139, 115, 85, 0.2); /* Vintage shading */
    border-left: 2px solid #8b7355;
    border-right: 2px solid #8b7355;
    border-radius: 2px;
    z-index: 1;
    transition: transform 0.3s ease;
}

.ojl-css-scroll:hover {
    transform: translateY(-5px);
}

/* Rolled top and bottom edges using pseudo-elements */
.ojl-css-scroll::before,
.ojl-css-scroll::after {
    content: '';
    position: absolute;
    left: -15px;
    right: -15px;
    height: 35px;
    background: linear-gradient(to bottom, #d2b48c, #8b7355, #654321, #8b7355, #d2b48c);
    border: 2px solid #4a3018;
    border-radius: 20px; /* cylindrical look */
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    z-index: 2;
}

.ojl-css-scroll::before {
    top: -18px;
}

.ojl-css-scroll::after {
    bottom: -18px;
}

.ojl-scroll-title {
    color: #4a3018;
    font-size: 34px;
    font-weight: 900;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    position: relative;
}

.ojl-scroll-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 2px;
    background: repeating-linear-gradient(to right, #8b7355, #8b7355 5px, transparent 5px, transparent 10px);
}

.ojl-scroll-text {
    color: #3e2723;
    font-size: 19px;
    line-height: 2;
    text-align: justify;
    font-weight: 500;
}

/* =========================================================================
   VALUES SECTION & LOGO WATERMARKS
   ========================================================================= */
.ojl_values_bg_wrapper {
    background-image: url('/wp-content/uploads/2026/06/Gemini_Generated_Image_bi982gbi982gbi98_compressed-1.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    padding-top: 100px !important;
    padding-bottom: 120px !important;
    position: relative;
    overflow: hidden;
}

.ojl_values_bg_wrapper::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: rgba(40, 36, 31, 0.75);
    pointer-events: none;
    z-index: 0;
}

.ojl_values_bg_wrapper::after,
.ojl_mission_bg_wrapper::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 60%;
    background-image: url('/wp-content/uploads/2026/06/onar-jon-logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

.ojl_values_bg_wrapper > .wpb_column,
.ojl_mission_bg_wrapper > .wpb_column {
    z-index: 2;
}

.ojl-css-scroll {
    background-color: #f4ecd8;
    background-image: linear-gradient(rgba(244, 236, 216, 0.93), rgba(244, 236, 216, 0.93)), url('/wp-content/uploads/2026/06/onar-jon-logo.png') !important;
    background-position: center, center !important;
    background-size: auto, 70% !important;
    background-repeat: no-repeat, no-repeat !important;
}

.ojl-css-scroll-small {
    padding: 30px 25px;
    margin: 25px 15px;
}

.ojl-scroll-title-small {
    color: #4a3018;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px dashed #8b7355;
}

.ojl-scroll-text-small {
    color: #3e2723;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
    font-weight: 600;
}

/* =========================================================================
   VALUES SECTION - CLEAN TEXT
   ========================================================================= */
.ojl-value-item-clean {
    padding: 10px 30px;
    margin: 20px 0;
    text-align: right;
    position: relative;
    transition: transform 0.3s ease;
}

.ojl-value-item-clean:hover {
    transform: translateX(-5px);
}

.ojl-value-title-clean {
    color: #c9a063; /* Elegant Gold */
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
    position: relative;
    padding-top: 20px;
}

/* Top accent line matching the screenshot vibe */
.ojl-value-title-clean::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 4px;
    background: #c9a063;
    border-radius: 2px;
}

.ojl-value-text-clean {
    color: #f1f1f1;
    font-size: 18px;
    line-height: 1.8;
    font-weight: 500;
}

/* =========================================================================
   MOBILE LOGO RESIZE
   ========================================================================= */
.mkdf-mobile-header .mkdf-mobile-logo-wrapper a img {
    height: 70px !important;
    max-height: 70px !important;
}





/* =========================================================================
   MOBILE HEADER TWEAKS (SAFE)
   ========================================================================= */
/* 1. Change the Side Area Burger to an elegant Info icon */
.mkdf-mobile-header .mkdf-side-menu-button-opener .mkdf-side-menu-icon span::before {
    content: "\f05a" !important;
    font-family: "FontAwesome" !important;
    font-size: 26px !important;
}
/* 2. Add a soft premium shadow to the mobile header */
.mkdf-mobile-header .mkdf-mobile-header-inner {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
/* 3. Ensure Main Burger looks a bit more distinct */
.mkdf-mobile-header .mkdf-mobile-menu-icon {
    color: #bb9b6c !important;
}

/* =========================================================================
   FINAL ROUND — Omar John Law (client comments)
   1) الرؤية والرسالة : equal-height professional "letter" cards
   2) قيم العمل الأساسية : transparent glassmorphism cards (no border)
   3) فريق العمل : pyramid spacing
   4) الموسوعة القانونية cover title + mobile typography
   Palette: Lion #BB9B6C · Alabaster #F0EDE4 · Taupe #3D362E · Timberwolf #CCC5BB
   ========================================================================= */

/* Section headers centered (consistent on both mission + values rows) */
.ojl-mission-header { text-align: center !important; width: 100%; }
.ojl-mission-header .ojl-vision-title-center { text-align: center !important; }

/* ---- (1) الرؤية والرسالة : equal-height flex row so both cards match ---- */
.ojl_mission_bg_wrapper {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
}
.ojl_mission_bg_wrapper > .wpb_column {
    float: none !important;
    display: flex !important;
}
.ojl_mission_bg_wrapper > .wpb_column > .vc_column-inner,
.ojl_mission_bg_wrapper > .wpb_column > .vc_column-inner > .wpb_wrapper {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
}

/* ---- Elegant aged-PARCHMENT SCROLL card (designer-grade, equal height) ---- */
.ojl_mission_bg_wrapper .ojl-css-scroll {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* aged parchment body: highlight + vignette + faint fibre + warm base */
    background:
        radial-gradient(140% 120% at 50% -12%, rgba(255,251,240,.55), rgba(255,251,240,0) 55%),
        radial-gradient(120% 140% at 50% 112%, rgba(120,86,42,.18), rgba(120,86,42,0) 55%),
        repeating-linear-gradient(0deg, rgba(150,120,75,.035) 0 2px, rgba(150,120,75,0) 2px 6px),
        linear-gradient(180deg, #f4e9d1 0%, #ecdcbd 48%, #e2cda4 100%) !important;
    border: none !important;
    border-radius: 6px;
    padding: 46px 46px 42px;
    margin: 50px 22px;
    box-shadow:
        inset 0 0 70px rgba(120, 86, 42, .22),    /* aged vignette */
        inset 0 0 0 1px rgba(120, 86, 42, .14),   /* soft paper edge */
        0 18px 34px rgba(0, 0, 0, .36);           /* lift off the dark bg */
    overflow: visible;
}

/* the two rolled rods (top + bottom) — 3D tube w/ sheen + rounded ends */
.ojl_mission_bg_wrapper .ojl-css-scroll::before,
.ojl_mission_bg_wrapper .ojl-css-scroll::after {
    content: '';
    display: block;
    position: absolute;
    left: -20px;
    right: -20px;
    height: 32px;
    background:
        radial-gradient(circle at 15px 46%, rgba(255,247,228,.55) 0 4px, rgba(255,247,228,0) 9px),
        radial-gradient(circle at calc(100% - 15px) 46%, rgba(255,247,228,.55) 0 4px, rgba(255,247,228,0) 9px),
        linear-gradient(180deg, #ead6ab 0%, #d4b780 26%, #bb9b6c 50%, #8d6d43 76%, #694e30 100%);
    border-radius: 16px;
    box-shadow:
        inset 0 2px 2px rgba(255, 247, 228, .60),  /* top sheen */
        inset 0 -4px 7px rgba(74, 52, 24, .55),    /* bottom shade */
        0 8px 15px rgba(0, 0, 0, .42);             /* cast shadow */
    z-index: 3;
}
.ojl_mission_bg_wrapper .ojl-css-scroll::before { top: -20px; }
.ojl_mission_bg_wrapper .ojl-css-scroll::after  { bottom: -20px; }

.ojl_mission_bg_wrapper .ojl-scroll-title {
    color: #3a2f20;
    font-size: 30px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 18px;
    position: relative;
}
/* refined letter divider: short gold rule flanked by dots */
.ojl_mission_bg_wrapper .ojl-scroll-title::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 90px; height: 6px;
    background:
        radial-gradient(circle at 4px 50%, #8d6d43 0 3px, transparent 4px),
        radial-gradient(circle at calc(100% - 4px) 50%, #8d6d43 0 3px, transparent 4px),
        linear-gradient(#bb9b6c, #bb9b6c) center/56px 2px no-repeat;
}
.ojl_mission_bg_wrapper .ojl-scroll-text {
    color: #4a3c28;
    font-size: 17px;
    line-height: 2;
    text-align: center;
    font-weight: 500;
    flex: 0 0 auto;
}

/* ---- (2) قيم العمل الأساسية : frosted-glass transparent cards ---- */
.ojl_values_bg_wrapper .ojl-value-item-clean {
    background: rgba(240, 237, 228, 0.07);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: none;
    border-radius: 18px;
    padding: 30px 32px;
    margin: 15px 12px;
    min-height: 170px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: right;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.20),
                inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.ojl_values_bg_wrapper .ojl-value-item-clean:hover {
    transform: translateY(-5px);
    background: rgba(240, 237, 228, 0.11);
}
.ojl_values_bg_wrapper .ojl-value-title-clean {
    color: #bb9b6c;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
    padding-top: 18px;
}
.ojl_values_bg_wrapper .ojl-value-title-clean::before {
    background: #bb9b6c;
}
.ojl_values_bg_wrapper .ojl-value-text-clean {
    color: #f0ede4;
    font-size: 17px;
    line-height: 1.85;
    font-weight: 500;
}

/* ---- (3) فريق العمل : pyramid row spacing ---- */
.ojl-team-top  { padding-bottom: 10px !important; }
.ojl-team-pair { padding-bottom: 70px !important; }

/* ---- (4a) الموسوعة القانونية cover title (blog index) size fix ---- */
.blog .mkdf-page-title {
    font-size: 44px !important;
    line-height: 1.3 !important;
}

/* ---- (4b) Mobile typography — About + Encyclopedia ---- */
@media (max-width: 768px) {
    .blog .mkdf-title-holder { height: 220px !important; }
    .blog .mkdf-page-title   { font-size: 30px !important; }

    .ojl-vision-title-center   { font-size: 28px !important; }
    .ojl-vision-subtitle-center{ font-size: 21px !important; }
    .ojl-vision-text-center    { font-size: 16px !important; line-height: 1.9 !important; }
    .ojl-stat-num-hz           { font-size: 46px !important; }
    .ojl-stat-desc-hz          { font-size: 15px !important; }

    .ojl_mission_bg_wrapper,
    .ojl_values_bg_wrapper { padding-top: 55px !important; padding-bottom: 60px !important; }

    .ojl_mission_bg_wrapper .ojl-scroll-title    { font-size: 23px !important; }
    .ojl_mission_bg_wrapper .ojl-scroll-text     { font-size: 16px !important; line-height: 1.9 !important; }
    .ojl_mission_bg_wrapper .ojl-css-scroll      { padding: 38px 28px !important; margin: 42px 6px !important; }
    .ojl_mission_bg_wrapper .ojl-css-scroll::before,
    .ojl_mission_bg_wrapper .ojl-css-scroll::after { height: 26px !important; left: -12px !important; right: -12px !important; }
    .ojl_mission_bg_wrapper .ojl-css-scroll::before { top: -16px !important; }
    .ojl_mission_bg_wrapper .ojl-css-scroll::after  { bottom: -16px !important; }

    .ojl_values_bg_wrapper .ojl-value-item-clean { min-height: 0 !important; padding: 24px 24px !important; margin: 12px 0 !important; }
    .ojl_values_bg_wrapper .ojl-value-title-clean{ font-size: 20px !important; }
    .ojl_values_bg_wrapper .ojl-value-text-clean { font-size: 16px !important; }

    /* الموسوعة القانونية — blog post cards proportionate on mobile */
    .blog .mkdf-post-title    { font-size: 22px !important; line-height: 1.45 !important; }
    .blog .mkdf-post-excerpt  { font-size: 15px !important; line-height: 1.8 !important; }
    .blog .mkdf-post-info     { font-size: 12px !important; }
}

@media (max-width: 480px) {
    .blog .mkdf-page-title  { font-size: 25px !important; }
    .blog .mkdf-post-title  { font-size: 20px !important; }
}

/* =========================================================================
   LAW-SERVICES (783) — "الخدمات القانونية" + "من هم عملاؤنا" rebuilt on a
   shared architectural background (att 3660). Replaces the old PDF images.
   ========================================================================= */
.ojl-svc-section,
.ojl-clients-section {
    position: relative;
    background-image: url('/wp-content/uploads/2026/06/ojl-services-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 95px 0 !important;
    overflow: hidden;
}
.ojl-svc-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(22,19,15,.90) 0%, rgba(28,24,19,.93) 100%);
    z-index: 0;
}
.ojl-clients-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30,26,21,.86) 0%, rgba(22,19,15,.90) 100%);
    z-index: 0;
}
.ojl-svc-section > .wpb_column,
.ojl-clients-section > .wpb_column {
    position: relative;
    z-index: 1;
}

/* ---- shared inner width ---- */
.ojl-svc-head,
.ojl-svc-grid,
.ojl-cl-h2,
.ojl-cl-grid {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
}

/* ---- Services: 3-column scope of work ---- */
.ojl-svc-head { text-align: center; margin-bottom: 58px; }
.ojl-svc-h2 {
    color: #f0ede4;
    font-size: 42px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}
.ojl-svc-sub {
    display: block;
    color: #bb9b6c;
    font-size: 23px;
    font-weight: 600;
    margin-top: 8px;
    letter-spacing: .5px;
}
.ojl-svc-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.ojl-svc-col {
    padding: 32px 28px;
    background: rgba(20, 17, 13, .55);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    backdrop-filter: blur(8px) saturate(120%);
    border-radius: 14px;
    border-top: 3px solid #bb9b6c;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .35);
}
.ojl-svc-cat {
    color: #e3c889;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.6;
    padding-bottom: 18px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(187, 155, 108, .40);
}
.ojl-svc-num {
    display: inline-block;
    color: #20170d;
    background: #d8bd86;
    border-radius: 6px;
    padding: 1px 10px;
    margin-left: 6px;
    font-size: 15px;
    font-weight: 800;
}
.ojl-svc-item { margin-bottom: 24px; }
.ojl-svc-item:last-child { margin-bottom: 0; }
.ojl-svc-it-title {
    color: #ecd9ac;
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.5;
}
.ojl-svc-it-text {
    color: #f3efe6;
    font-size: 14.5px;
    line-height: 1.95;
    font-weight: 400;
    margin: 0;
    text-align: justify;
}

/* ---- Clients: 2x2 cards ---- */
.ojl-cl-h2 {
    text-align: center;
    color: #f0ede4;
    font-size: 42px;
    font-weight: 800;
    margin: 0 auto 58px;
    line-height: 1.2;
}
.ojl-cl-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
/* Light frosted "plaque" + dark bookmark ribbon on the right — matches the
   original profile image style, now on the new background. */
.ojl-cl-card {
    position: relative;
    background: linear-gradient(180deg, rgba(245,242,234,.95) 0%, rgba(232,227,214,.93) 100%);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 30px 62px 30px 34px;   /* extra right padding to clear the ribbon */
    box-shadow: 0 16px 36px rgba(0, 0, 0, .42);
    transition: transform .3s ease;
}
.ojl-cl-card::before {           /* the dark vertical ribbon (was a column image) */
    content: '';
    position: absolute;
    top: -9px;
    bottom: -9px;
    right: 20px;
    width: 30px;
    background: linear-gradient(180deg, #5a4c3a 0%, #3d362e 50%, #2a241d 100%);
    border-radius: 4px;
    box-shadow: 0 8px 16px rgba(0,0,0,.45),
                inset 1px 0 0 rgba(255,255,255,.12),
                inset 0 0 0 1px rgba(187,155,108,.30);
}
.ojl-cl-card::after {            /* faint engraved line on the ribbon */
    content: '';
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 33px;
    width: 4px;
    background: repeating-linear-gradient(180deg, rgba(187,155,108,.45) 0 3px, transparent 3px 8px);
    border-radius: 2px;
}
.ojl-cl-card:hover { transform: translateY(-6px); }
.ojl-cl-title {
    color: #2c2418;
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 14px;
}
.ojl-cl-text {
    color: #4a4032;
    font-size: 16px;
    line-height: 1.95;
    font-weight: 500;
    margin: 0;
    text-align: justify;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
    .ojl-svc-grid { grid-template-columns: 1fr 1fr; }
    .ojl-svc-grid .ojl-svc-col:last-child { grid-column: 1 / -1; }
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
    .ojl-svc-section,
    .ojl-clients-section { background-attachment: scroll; padding: 60px 0 !important; }
    .ojl-svc-h2, .ojl-cl-h2 { font-size: 30px !important; }
    .ojl-svc-sub { font-size: 19px !important; }
    .ojl-svc-head { margin-bottom: 36px; }
    .ojl-cl-h2 { margin-bottom: 36px !important; }

    .ojl-svc-grid { grid-template-columns: 1fr; gap: 20px; }
    .ojl-svc-grid .ojl-svc-col:last-child { grid-column: auto; }
    .ojl-svc-col { padding: 26px 22px; }
    .ojl-svc-cat { font-size: 18px; }
    .ojl-svc-it-title { font-size: 16px; }
    .ojl-svc-it-text { font-size: 14.5px; text-align: right; }

    .ojl-cl-grid { grid-template-columns: 1fr; gap: 18px; }
    .ojl-cl-card { padding: 24px 56px 24px 22px; }
    .ojl-cl-card::before { right: 16px; width: 26px; }
    .ojl-cl-card::after  { right: 28px; }
    .ojl-cl-title { font-size: 19px; }
    .ojl-cl-text { font-size: 15.5px; }
}



/* =========================================================================
   CAREERS (التوظيف) — WP Job Openings listing + application form styling
   ========================================================================= */
.awsm-job-wrap { direction: rtl; }

/* ---- Listing: RTL, bigger cards on the right, specs shown ---- */
.awsm-job-wrap .awsm-job-listings.awsm-grid-col-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    max-width: 1120px;
    margin: 0 auto;
    direction: rtl;
}
.awsm-job-wrap .awsm-job-listing-item {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.awsm-job-wrap .awsm-job-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-align: right;
    background: #ffffff;
    border: 1px solid #ece4d4;
    border-top: 4px solid #bb9b6c;
    border-radius: 14px;
    padding: 30px 30px 26px;
    box-shadow: 0 10px 26px rgba(61, 54, 46, .08);
    transition: transform .3s ease, box-shadow .3s ease;
}
.awsm-job-wrap .awsm-job-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(61, 54, 46, .16);
}
.awsm-job-wrap .awsm-grid-left-col,
.awsm-job-wrap .awsm-grid-right-col {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
}
.awsm-job-wrap .awsm-grid-right-col { margin-top: auto; }
.awsm-job-wrap .awsm-job-post-title {
    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    margin: 0 0 16px !important;
}
.awsm-job-wrap .awsm-job-post-title,
.awsm-job-wrap .awsm-job-post-title a { color: #3d362e !important; }
.awsm-job-wrap .awsm-job-post-title a:hover { color: #bb9b6c !important; }

.awsm-job-wrap .awsm-job-specification-wrapper {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 0 0 22px !important;
}
.awsm-job-wrap .awsm-job-specification-item {
    display: inline-flex; align-items: center;
    background: #f4efe4;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 13px; font-weight: 600;
    color: #6e5a3a !important;
}
.awsm-job-wrap .awsm-job-specification-item .awsm-job-specification-term { color: #6e5a3a !important; }
.awsm-job-wrap .awsm-job-more-container { margin: 4px 0 0 !important; }
.awsm-job-wrap .awsm-job-more {
    display: inline-block;
    background: #bb9b6c;
    color: #fff !important;
    font-size: 14px; font-weight: 700;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background .25s ease;
}
.awsm-job-wrap .awsm-job-more:hover { background: #a07f4f; }

/* search box */
.awsm-job-wrap .awsm-filter-wrap { max-width: 1120px; margin: 0 auto 26px; }
.awsm-job-wrap .awsm-job-search.awsm-job-form-control {
    font-size: 15px !important;
    padding: 11px 16px !important;
    border: 1px solid #d8cfba !important;
    border-radius: 8px !important;
}

/* ---- Application form: tidy sizes, desktop + mobile ---- */
.awsm-job-single-wrap { direction: rtl; }
.awsm-application-form {
    max-width: 760px;
    margin: 24px auto 0;
    background: #faf8f3;
    border: 1px solid #ece5d6;
    border-radius: 16px;
    padding: 36px 40px;
    box-shadow: 0 12px 30px rgba(61, 54, 46, .07);
}
.awsm-application-form h2,
.awsm-application-form h3,
.awsm-job-form-title {
    font-size: 24px !important;
    color: #3d362e !important;
    text-align: center;
    margin: 0 0 26px !important;
}
.awsm-job-form-group { margin-bottom: 18px; }
.awsm-job-form-group > label {
    display: block;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #3d362e !important;
    margin-bottom: 8px;
    line-height: 1.5;
}
.awsm-application-form .awsm-job-form-field,
.awsm-application-form input[type="text"],
.awsm-application-form input[type="email"],
.awsm-application-form input[type="tel"],
.awsm-application-form textarea {
    width: 100% !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    padding: 12px 14px !important;
    border: 1px solid #d8cfba !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #3d362e !important;
    box-sizing: border-box;
    line-height: 1.6;
}
.awsm-application-form textarea { min-height: 130px; resize: vertical; }
.awsm-application-form .awsm-job-form-field:focus { border-color: #bb9b6c !important; outline: none; box-shadow: 0 0 0 3px rgba(187,155,108,.15); }
.awsm-application-form .awsm-form-file-control { padding: 9px 12px !important; }
.awsm-job-form-group small { display: inline-block; margin-top: 6px; font-size: 12.5px; color: #8a8170; }
.awsm-job-form-group.awsm-job-inline-group {
    display: flex; align-items: flex-start; gap: 10px;
}
.awsm-job-inline-group input[type="checkbox"] { width: auto !important; margin: 4px 0 0 !important; flex: 0 0 auto; }
.awsm-job-inline-group label { font-size: 13.5px !important; font-weight: 400 !important; margin: 0 !important; line-height: 1.6; }
.awsm-application-submit-btn,
.awsm-application-form button[type="submit"] {
    background: #bb9b6c !important;
    color: #fff !important;
    border: none !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 13px 42px !important;
    border-radius: 8px !important;
    cursor: pointer;
    transition: background .25s ease;
}
.awsm-application-submit-btn:hover { background: #a07f4f !important; }

/* page/single titles sizing */
.page-id-3662 .mkdf-page-title,
.single-awsm_job_openings .mkdf-page-title { font-size: 40px !important; }

@media (max-width: 768px) {
    .awsm-job-wrap .awsm-job-listings.awsm-grid-col-3 { grid-template-columns: 1fr; gap: 18px; }
    .awsm-job-wrap .awsm-job-item { padding: 24px 22px; }
    .awsm-job-wrap .awsm-job-post-title { font-size: 20px !important; }

    .awsm-application-form { padding: 26px 20px; border-radius: 12px; }
    .awsm-application-form h2, .awsm-application-form h3, .awsm-job-form-title { font-size: 21px !important; }
    .awsm-job-form-group > label { font-size: 14px !important; }
    .awsm-application-form .awsm-job-form-field,
    .awsm-application-form input, .awsm-application-form textarea { font-size: 14px !important; padding: 11px 12px !important; }

    .page-id-3662 .mkdf-page-title,
    .single-awsm_job_openings .mkdf-page-title { font-size: 26px !important; }
    .page-id-3662 .mkdf-title-holder,
    .single-awsm_job_openings .mkdf-title-holder { height: 220px !important; }
}

/* Single job opening — tame the big headings/body on mobile */
@media (max-width: 768px) {
    .single-awsm_job_openings .mkdf-post-title { font-size: 23px !important; line-height: 1.4 !important; }
    .single-awsm_job_openings .awsm-job-content h2 { font-size: 21px !important; line-height: 1.4 !important; }
    .single-awsm_job_openings .awsm-job-content h3,
    .single-awsm_job_openings .awsm-job-content h4 { font-size: 18px !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
    .single-awsm_job_openings .awsm-job-content,
    .single-awsm_job_openings .awsm-job-content p,
    .single-awsm_job_openings .awsm-job-content li,
    .single-awsm_job_openings .awsm-job-entry-content p,
    .single-awsm_job_openings .awsm-job-entry-content li { font-size: 15px !important; line-height: 1.9 !important; }
    .single-awsm_job_openings .mkdf-post-info,
    .single-awsm_job_openings .mkdf-post-info * { font-size: 12px !important; }
}

/* Remove the "تقدّم لهذه الوظيفة" heading above the application form */
.awsm-job-form-inner > h2 { display: none !important; }