@font-face {
	font-family: "Dubai";
	src: url("../fonts/dubai/Dubai-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Dubai";
	src: url("../fonts/dubai/Dubai-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Dubai";
	src: url("../fonts/dubai/Dubai-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	--font-head: "Dubai", "Noto Kufi Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-body: "Noto Kufi Arabic", "Dubai", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--font-meta: Tahoma, Arial, system-ui, sans-serif;
	--container: 100%;
	--radius: 14px;
	--gap: 18px;
	--ink: #0f172a;
	--muted: #475569;
	--muted-2: #64748b;
	--line: #e2e8f0;
	--bg: #ffffff;
	--light-bg: #F8FAFC;
	--bg-soft: #f8fafc;
	--h1: 40px;
	--h2: 24px;
	--h3: 18px;
	--meta: 12px;
	--reef-navy: #06233b;
	--reef-blue: #35a7ff;
	--reef-line: rgba(255,255,255,.10);
	--reef-white-90: rgba(255,255,255,.90);
	--reef-white-80: rgba(255,255,255,.80);
	--reef-white-70: rgba(255,255,255,.70);
}

body, .body {
	font-family: var(--font-body);
	color: var(--ink);    background-color: var(--light-bg);
	text-rendering: optimizeLegibility;
}
.section-header h1{
	font-family: var(--font-head);}
.aireef-wrap {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0px;
}

.aireef-section {
	padding: 12px 0;
	/*border-top: 1px solid var(--line);*/
}

.aireef-section.home-hero {
	border-top: 0;
	padding-top: 28px;
}

.section-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 0px;
}

.section-header h2 {
	margin: 0;
	font-family: var(--font-head);
	font-size: var(--h2);
	font-weight: 700;
	line-height: 1.2;
}

.aireef-meta {
	font-family: var(--font-meta);
	font-size: var(--meta);
	line-height: 1.4;
	color: var(--muted-2);
	margin: 0 0 10px;
	font-variant-numeric: lining-nums tabular-nums;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.45fr 0.95fr;
	gap: 28px;
	align-items: stretch;
}

.hero-media {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--bg-soft);
	min-height: 360px;
}

.hero-media a {
	display: block;
	height: 100%;
}

.hero-media img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	object-position: center;
	aspect-ratio: 3 / 2;
}

.hero-content {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	background: var(--bg);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero-title {
	margin: 0 0 12px;
	font-family: var(--font-head);
	font-size: var(--h1);
	font-weight: 700;
	line-height: 1.15;
}

.hero-title a {
	color: var(--ink);
	text-decoration: none;
}

.hero-title a:hover {
	text-decoration: none;
}

.hero-summary {
	margin: 0 0 16px;
	color: var(--muted);
	line-height: 1.9;
	font-family: var(--font-body);
}

.hero-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: var(--ink);
	color: #fff;
	text-decoration: none;
	font-family: var(--font-meta);
	font-size: 13px;
	width: fit-content;
}

.hero-cta:hover {
	opacity: .92;
}

.home-quicklinks {
	padding-top: 24px;
	padding-bottom: 24px;
}

.quicklinks-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 14px;
}

.quicklink {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 16px 14px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: var(--bg);
	text-decoration: none;
	color: var(--ink);
	font-family: var(--font-head);
	font-weight: 700;
	transition: transform .15s ease, box-shadow .15s ease;
}

.quicklink:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.aireef-grid {
	display: grid;
	grid-template-columns: repeat(12,1fr);
	gap: var(--gap);
}

.aireef-card {
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

.aireef-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.aireef-card a.thumb {
	display: block;
	background: var(--bg-soft);
}

.aireef-card a.thumb img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
	aspect-ratio: 3 / 2;
}

.aireef-card .body {
	padding: 16px 16px 18px;
}

.aireef-card h3 {
	margin: 0 0 10px;
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.25;
	font-size: var(--h3);
}

.aireef-card h3 a {
	color: var(--ink);
	text-decoration: none;
}

.aireef-card h3 a:hover {
	text-decoration: none;
}

.aireef-card .body > p:not(.aireef-meta) {
	margin: 0;
	color: var(--muted);
	line-height: 1.85;
	font-family: var(--font-body);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.home-featuredgrid .aireef-grid, .home-latest .aireef-grid {
	margin-top: 6px;
}

.rtl .hero-content {
	text-align: right;
}

.rtl .hero-cta {
	align-self: flex-start;
}

.inside-header, .inside-navigation {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0px;
}

.site-logo img {
	height: 90px;
	width: auto;
}

.main-title, .site-description {
	margin: 0;
}

.main-title a {
	font-family: var(--font-head);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--ink);
	text-decoration: none;
}

.main-navigation {
	border-top: 0;
	box-shadow: none;
}

.main-navigation .main-nav ul li a {
	font-family: var(--font-meta);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
	padding: 18px 14px;
	letter-spacing: .2px;
}

.main-navigation .main-nav ul li a:hover {
	opacity: .85;
}

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
	font-weight: 700;
	border-bottom: 2px solid var(--ink);
}

.aireef-nav-search {
	margin-left: 8px;
	display: flex;
	align-items: center;
}

.aireef-nav-search form {
	margin: 0;
}

.aireef-nav-search input[type="search"] {
	width: 220px;
	max-width: 35vw;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 10px 14px;
	font-family: var(--font-meta);
	font-size: 13px;
	outline: none;
	background: #fff;
}

.aireef-nav-search input[type="search"]:focus {
	border-color: var(--muted-2);
}

.rtl .aireef-nav-search {
	margin-left: 0;
	margin-right: 8px;
}

.site-footer, .site-footer .footer-widgets, .site-footer .site-info {
	background: var(--reef-navy) !important;
}

.site-footer .footer-widgets {
	border-top: 0 !important;
}

.site-footer .footer-widgets .widget {
	background: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer-widgets {
	padding: 32px 32px 32px 32px;
}

.footer-widgets .inside-footer-widgets {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 22px !important;
	display: grid !important;
	grid-template-columns: repeat(4,1fr) !important;
	gap: 60px !important;
	align-items: start;
}
.footer-section h3{
	font-family: var(--font-head) !important;
	font-size: 1.2rem !important;
    margin-bottom: 1.5rem !important;
    color: white !important;font-weight: bold;}
.footer-widgets .widget-title {
	font-family: var(--font-head) !important;
	font-weight: 700 !important;
	font-size: 18px !important;
	line-height: 1.25 !important;
	color: #fff !important;
	margin: 0 0 18px !important;
	letter-spacing: 0 !important;
}

.footer-widgets, .footer-widgets p, .footer-widgets li, .footer-widgets a {
	font-family: var(--font-meta) !important;
	font-size: 14px !important;
	line-height: 1.95 !important;
	color: var(--reef-white-80) !important;
}

.footer-widgets p {
	margin: 0 0 18px !important;
}

.footer-widgets ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer-widgets li {
	margin: 10px 0 !important;
}

.footer-widgets a {
	color: var(--reef-white-90) !important;
	text-decoration: none !important;
}

.footer-widgets a:hover {
	color: #fff !important;
	text-decoration: none !important;
}.wp-block-social-links .wp-social-link svg {
    height: 1.5em;
    width: 1.5em;
}

.footer-widgets .social-icons, .footer-widgets .social-links {
	display: flex;
	gap: 14px;
	align-items: center;
	flex-wrap: wrap;
}

.footer-widgets .social-icons a, .footer-widgets .social-links a {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.10);
	color: #fff !important;
	text-decoration: none !important;
}

.footer-widgets .social-icons a:hover, .footer-widgets .social-links a:hover {
	background: rgba(255,255,255,.16);
}

.footer-widgets .mc4wp-form {
	margin: 0 !important;
	max-width: 360px;
}

.footer-widgets .mc4wp-form-fields > p {
	margin: 0 0 18px !important;
	color: var(--reef-white-80) !important;
}

.footer-widgets .mc4wp-form .aireef-mc-row {
	display: flex !important;
	align-items: stretch !important;
	gap: 0 !important;
	width: 100%;
}

.footer-widgets .mc4wp-form .aireef-mc-row input, .footer-widgets .mc4wp-form .aireef-mc-row button {
	margin: 0 !important;
	box-sizing: border-box !important;
}

.footer-widgets .mc4wp-form .aireef-mc-row input[type="email"] {
	flex: 1 1 auto !important;
	height: 44px !important;
	border: 0 !important;
	outline: none !important;
	background: #fff !important;
	color: var(--ink) !important;
	padding: 0 14px !important;
	font-family: var(--font-meta) !important;
	font-size: 13px !important;
	border-radius: 6px 0 0 6px !important;
}

.footer-widgets .mc4wp-form .aireef-mc-row button {
	flex: 0 0 auto !important;
	height: 44px !important;
	min-width: 118px !important;
	border: 0 !important;
	background: var(--reef-blue) !important;
	color: #fff !important;
	padding: 0 18px !important;
	font-family: var(--font-meta) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	border-radius: 0 6px 6px 0 !important;
	line-height: 44px !important;
}

.footer-widgets .mc4wp-form .aireef-mc-row button:hover {
	opacity: .92;
}

.footer-widgets .mc4wp-response {
	margin-top: 12px !important;
	font-family: var(--font-meta) !important;
	font-size: 12px !important;
	color: var(--reef-white-70) !important;
}

.rtl .footer-widgets .mc4wp-form .aireef-mc-row input[type="email"] {
	border-radius: 0 6px 6px 0 !important;
}

.rtl .footer-widgets .mc4wp-form .aireef-mc-row button {
	border-radius: 6px 0 0 6px !important;
}
.container{
	padding: 32px;
}
.site-info {
	background: var(--reef-navy) !important;
	border-top: 1px solid var(--reef-line) !important;
}

.site-info .inside-site-info {
	max-width: var(--container);
	margin: 0 auto;
	padding: 18px 22px !important;
	text-align: center !important;
}

.site-info .copyright-bar {
	font-family: var(--font-meta) !important;
	font-size: 12px !important;
	line-height: 1.4 !important;
	color: var(--reef-white-70) !important;
}

.site-info a {
	color: var(--reef-white-90) !important;
	text-decoration: none !important;
}

.site-info a:hover {
	color: #fff !important;
	text-decoration: none !important;
}

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.inside-header {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0px 0px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.aireef-header-tools {
	display: flex;
	align-items: center;
	gap: 14px;
}

.aireef-header-search {
	position: relative;
	display: flex;
	align-items: center;
}

.aireef-header-search .dashicons {
	position: absolute;
	left: 12px;
	font-size: 18px;
	color: #64748b;
}

.rtl .aireef-header-search .dashicons {
	left: auto;
	right: 12px;
}

.aireef-header-search input[type="search"] {
	width: 260px;
	max-width: 60vw;
	height: 40px;
	padding: 0 14px 0 40px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #f8fafc;
	font-family: var(--font-meta);
	font-size: 13px;
	outline: none;
}

.rtl .aireef-header-search input[type="search"] {
	padding: 0 40px 0 14px;
}

.aireef-header-user {
	width: 40px;
	height: 40px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #2b74ff;
	color: #fff !important;
	text-decoration: none;
}

.aireef-header-user .dashicons {
	font-size: 18px;
}

.inside-navigation {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 22px;
}

.main-navigation {
	background: #fff;
	box-shadow: 0 6px 20px rgba(0,0,0,.06);
	border-top: 1px solid var(--line);
}

.main-navigation .main-nav ul li a {
	font-family: var(--font-meta);
	font-size: 13px;
	font-weight: 700;
	padding: 16px 14px;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 10px;
}

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
	color: #2b74ff;
	border-bottom: 3px solid #2b74ff;
}



.main-navigation .main-nav ul li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}



.rtl .main-navigation .main-nav ul li a {
	flex-direction: row-reverse;
}



.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
	border-bottom: 2px solid #2563eb;
	padding-bottom: 14px;
}

.menu-bar-items {
	display: none !important;
}

.inside-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 20px !important;
}

.aireef-header-tools {
	display: flex !important;
	align-items: center !important;
	gap: 14px !important;
}

.site-header, .main-navigation, .inside-header, .inside-navigation {
	width: 100%;
	max-width: none !important;
}

.inside-header.grid-container, .inside-navigation.grid-container {
	max-width: var(--container) !important;
	margin: 0 auto !important;
	padding: 0 0px !important;
}

.aireef-header-tools {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 14px !important;
	margin-left: auto !important;
}

.aireef-header-search {
	position: relative !important;
	margin: 0 !important;
}

.aireef-header-search .dashicons {
	position: absolute !important;
	left: 14px !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 18px !important;
	color: #64748b !important;
	opacity: .9;
	pointer-events: none !important;
}

.aireef-header-search input[type="search"] {
	width: 340px !important;
	max-width: 42vw !important;
	height: 44px !important;
	border: 1px solid #e2e8f0 !important;
	background: #f8fafc !important;
	border-radius: 10px !important;
	padding: 0 14px 0 42px !important;
	font-family: var(--font-meta) !important;
	font-size: 13px !important;
	color: #0f172a !important;
	outline: none !important;
}

.aireef-header-search input[type="search"]::placeholder {
	color: #94a3b8 !important;
}

.aireef-header-search input[type="search"]:focus {
	background: #ffffff !important;
	border-color: #cbd5e1 !important;
}

.aireef-header-user {
	width: 44px !important;
	height: 44px !important;
	border-radius: 999px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #42A9F6 !important;
	color: #fff !important;
	text-decoration: none !important;
}

.aireef-header-user .dashicons {
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	line-height: 20px !important;
	color: #fff !important;
}

.aireef-header-user:hover {
	opacity: .92 !important;
}

.rtl .aireef-header-tools {
	justify-content: flex-start !important;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.rtl .aireef-header-search .dashicons {
	left: auto !important;
	right: 14px !important;
}

.rtl .aireef-header-search input[type="search"] {
	padding-left: 14px !important;
	padding-right: 42px !important;
}

header#masthead .inside-header {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 0px 0px !important;
}

header#masthead .site-logo {
	order: 1 !important;    padding-left: 20px;
}

header#masthead .aireef-header-tools {
	order: 2 !important;
	margin-left: auto !important;    padding-right: 20px;
}

header#masthead nav#site-navigation {
	order: 3 !important;
	flex: 0 0 100% !important;
	width: 100% !important;
	margin-top: 0px !important;
}

header#masthead nav#site-navigation .inside-navigation {
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

header#masthead nav#site-navigation .main-nav {
	width: 100% !important;
}

header#masthead nav#site-navigation .main-nav > ul {
	display: flex !important;
	align-items: center !important;
	gap: 28px !important;
	justify-content: flex-start !important;
}

.rtl header#masthead nav#site-navigation .main-nav > ul {
	justify-content: flex-end !important;
}

.rtl header#masthead .aireef-header-tools {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.site-logo img.header-image {
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}

header#masthead {
	position: sticky !important;
	top: 0 !important;
	z-index: 9999 !important;
	box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
}

body.admin-bar header#masthead {
	top: 32px !important;
}

header#masthead nav#site-navigation .main-nav > ul > li > a {
	font-family: var(--font-meta) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: #0f172a !important;
}

header#masthead nav#site-navigation .main-nav > ul > li > a {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px !important;
}

header#masthead nav#site-navigation .main-nav > ul > li.current-menu-item > a, header#masthead nav#site-navigation .main-nav > ul > li.current-menu-ancestor > a {
	color: #42A9F6 !important;
	border-bottom: 3px solid #42A9F6 !important;
	padding-bottom: 12px !important;
}

header#masthead nav#site-navigation .main-nav > ul > li > a:hover {
	color: #42A9F6 !important;
	opacity: 1 !important;
}

.rtl header#masthead nav#site-navigation .main-nav > ul > li > a {
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-weight: 700 !important;
}

header#masthead nav#site-navigation .inside-navigation {
	justify-content: flex-start !important;
}

header#masthead nav#site-navigation .main-nav > ul {
	justify-content: flex-start !important;
	text-align: left !important;
}

header#masthead nav#site-navigation {
	margin-left: 0 !important;
}

header#masthead nav#site-navigation .inside-navigation {
	padding-left: 22px !important;
	padding-right: 22px !important;
}

header#masthead nav#site-navigation .inside-navigation.grid-container {
	max-width: var(--container) !important;
	margin: 0 auto !important;
}

header#masthead nav#site-navigation .main-nav > ul > li > a {
	background: transparent !important;
	border-bottom: 3px solid transparent !important;
	transition: color .18s ease, border-color .18s ease, opacity .18s ease !important;
}

header#masthead nav#site-navigation .main-nav > ul > li > a:hover {
	color: #42A9F6 !important;
	border-bottom-color: rgba(31,122,255,.45) !important;
	opacity: 1 !important;
}

header#masthead nav#site-navigation .main-nav > ul > li.current-menu-item > a, header#masthead nav#site-navigation .main-nav > ul > li.current-menu-ancestor > a {
	border-bottom-color: #42A9F6 !important;
}

.rtl header#masthead nav#site-navigation .main-nav > ul {
	justify-content: flex-start !important;
	text-align: right !important;
}

.main-navigation .main-nav > ul > li > a {
	text-transform: uppercase;
	letter-spacing: .6px;
	font-weight: 700;
	font-size: 13px;
	padding: 18px 16px;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.main-navigation .main-nav > ul > li > a:hover, .main-navigation .main-nav > ul > li > a:focus {
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	background: transparent !important;
	color: #0b63ff;
}

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
	color: #0b63ff !important;
	border-bottom: 3px solid #0b63ff !important;
}

.main-navigation .main-nav > ul > li > a {
	border-bottom: 3px solid transparent;
}

.main-navigation .main-nav > ul > li > a:hover {
	border-bottom-color: rgba(11,99,255,.35);
}

.main-navigation .main-nav > ul > li[class*="icon-"] > a:before {
	display: inline-block;
	margin-right: 10px;
	font-size: 14px;
	line-height: 1;
	vertical-align: -1px;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.rtl .main-navigation .main-nav > ul > li[class*="icon-"] > a:before {
	margin-right: 0;
	margin-left: 10px;
}

.main-navigation .main-nav > ul > li > a:after {
	content: none !important;
	display: none !important;
}

.main-navigation .main-nav > ul > li:not([class*="icon-"]) > a:before {
	content: none !important;
	display: none !important;
}

.main-navigation .main-nav > ul > li > a:before {
	content: none;
}

.main-navigation .main-nav > ul > li[class*="icon-"] > a:before {
	display: inline-block;
}

@media (max-width: 700px) {
	.aireef-wrap {
		padding: 0 16px;
	}
}

@media (max-width: 980px) {
	.hero-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.hero-media {
		min-height: 240px;
	}
}

@media (max-width: 700px) {
	:root {
		--h1: 30px;
		--h2: 22px;
	}
}

@media (max-width: 980px) {
	.quicklinks-grid {
		grid-template-columns: repeat(2,1fr);
	}
}

@media (max-width: 600px) {
	.quicklinks-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.aireef-grid {
		grid-template-columns: repeat(6,1fr);
	}
}

@media (max-width: 600px) {
	.aireef-grid {
		grid-template-columns: 1fr;
	}

	.aireef-card {
		grid-column: span 1 !important;
	}
}

@media (max-width: 700px) {
	.inside-header, .inside-navigation {
		padding: 0 16px;
	}
}

@media (max-width: 980px) {
	.footer-widgets .inside-footer-widgets {
		grid-template-columns: repeat(2,1fr) !important;
		gap: 42px !important;
	}
}

@media (max-width: 600px) {
	.footer-widgets {
		padding: 54px 0 34px;
	}

	.footer-widgets .inside-footer-widgets {
		grid-template-columns: 1fr !important;
		padding: 0 16px !important;
		gap: 34px !important;
	}
}

@media (max-width: 700px) {
	.site-info .inside-site-info {
		padding: 16px !important;
	}
}

@media (max-width: 700px) {
	.inside-header {
		padding: 0px 0px;
		flex-wrap: wrap;
	}
}

@media (max-width: 700px) {
	.inside-navigation {
		padding: 0 16px;
	}
}

@media (min-width: 1025px) {
	#mobile-menu-control-wrapper {
		display: none !important;
	}

	#site-navigation .menu-toggle {
		display: none !important;
	}

	#site-navigation .main-nav {
		display: block !important;
	}

	#site-navigation .main-nav > ul {
		display: flex !important;
		align-items: center !important;
		gap: 22px !important;
		flex-wrap: nowrap !important;
	}
}

@media (max-width: 700px) {
	.inside-header.grid-container, .inside-navigation.grid-container {
		padding: 0 16px !important;
	}
}

@media (max-width: 700px) {
	.aireef-header-search input[type="search"] {
		width: 240px !important;
		max-width: 60vw !important;
	}
}

@media (max-width: 700px) {
	.site-logo img.header-image {
		height: 52px !important;
	}
}

@media (max-width: 782px) {
	body.admin-bar header#masthead {
		top: 46px !important;
	}
}
/* =========================
   AI REEF — NAV (Clean)
   Font Awesome icons in menu
   ========================= */

/* Base nav look (matches screenshot style) */
#site-navigation .main-nav > ul{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:nowrap;
}

#site-navigation .main-nav > ul > li > a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:0px 16px;
  font-family: var(--font-meta);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#0f172a;
  background:transparent;
  border-bottom:3px solid transparent;
  text-decoration:none;
  transition: color .18s ease, border-color .18s ease;
}

/* Hover + active (blue underline like photo) */
#site-navigation .main-nav > ul > li > a:hover{
  color:#42A9F6;
  border-bottom-color: rgba(31,122,255,.45);
}

#site-navigation .main-nav > ul > li.current-menu-item > a,
#site-navigation .main-nav > ul > li.current-menu-ancestor > a{
  color:#42A9F6;
  border-bottom-color:#42A9F6;
}



/* ---------- Font Awesome icons via ::before ---------- */
#site-navigation .main-nav > ul > li[class*="icon-"] > a::before{
  content:"\f111"; /* fallback circle (won't usually show) */
  font-family:"Font Awesome 6 Free";
  font-weight:900;              /* solid icons */
  font-size:16px;
  line-height:1;
  display:inline-block;
  width:18px;
  text-align:center;
  color: currentColor;
  transform: translateY(1px);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Map your classes to FA icons */
#site-navigation .main-nav > ul > li.icon-home   > a::before{ content:"\f015"; } /* fa-house */
#site-navigation .main-nav > ul > li.icon-news   > a::before{ content:"\f1ea"; } /* fa-newspaper */
#site-navigation .main-nav > ul > li.icon-video  > a::before{ content:"\f144"; } /* fa-circle-play */
#site-navigation .main-nav > ul > li.icon-trends > a::before{ content:"\f201"; } /* fa-chart-line */
#site-navigation .main-nav > ul > li.icon-podcast> a::before{ content:"\f2ce"; } /* fa-podcast */
#site-navigation .main-nav > ul > li.icon-opinion> a::before{ content:"\f4ad"; } /* fa-comment-dots */

/* Don’t show icon for language switcher (Polylang item) */
#site-navigation .main-nav > ul > li.lang-item > a::before{
  content:"" !important;
}

/* RTL: icon on the right + no uppercase/letter-spacing (like Arabic) */
.rtl #site-navigation .main-nav > ul > li > a{
  flex-direction:row-reverse;
  text-transform:none;
  letter-spacing:0;
}

.rtl #site-navigation .main-nav > ul > li[class*="icon-"] > a::before{
  transform: translateY(1px);
}

/* Mobile spacing tweak */
@media (max-width: 700px){
  #site-navigation .main-nav > ul{ gap:18px; flex-wrap:wrap; }
  #site-navigation .main-nav > ul > li > a{ padding:14px 12px; font-size:13px; }
}

/* Mobile: keep ONLY the hamburger controller, hide the main navigation */
@media (max-width: 1024px){
  /* keep this one (hamburger wrapper) */
  #mobile-menu-control-wrapper{
    display:block !important;
  }

  /* hide the full main navigation (menu list + its own toggle) */
  #site-navigation{
    display:none !important;
  }
}
/* Mobile: keep hamburger, hide the menu list by default */
@media (max-width: 1024px){
  /* keep navigation visible (so the button controls it) */
  #site-navigation{
    display:block !important;
  }

  /* hide the actual menu list */
  #site-navigation .main-nav{
    display:none !important;
  }

  /* when hamburger is opened (GeneratePress adds .toggled) show the list */
  #site-navigation.toggled .main-nav{
    display:block !important;
  }

  /* optional: hide the duplicate hamburger if you only want the wrapper one */
  #site-navigation > .inside-navigation > .menu-toggle{
    display:none !important;
  }
}/* Filters wrapper */
.aireef-filters{
  margin: 12px 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* Each tab */
.aireef-filters a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  border: 1px solid rgba(53, 167, 255, .28);
  background: rgba(53, 167, 255, .08);
  color: #0f2a43;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

/* Hover */
.aireef-filters a:hover{
  background: rgba(53, 167, 255, .14);
  border-color: rgba(53, 167, 255, .45);
  box-shadow: 0 6px 18px rgba(16, 24, 40, .08);
  transform: translateY(-1px);
}

/* Active tab (add class .is-active OR aria-current="page") */
.aireef-filters a.is-active,
.aireef-filters a[aria-current="page"]{
  background: #35a7ff;
  border-color: #35a7ff;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(53, 167, 255, .35), 0 10px 26px rgba(16, 24, 40, .10);
}

/* Keyboard focus */
.aireef-filters a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(53, 167, 255, .35), 0 10px 26px rgba(16, 24, 40, .10);
}

/* Optional: RTL spacing (if the page is Arabic) */
html[dir="rtl"] .aireef-filters{
  justify-content: flex-start;
}

.aireef-filters{
  margin: 12px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.aireef-filters .aireef-filter{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  line-height:1;
  border:1px solid rgba(53,167,255,.28);
  background:rgba(53,167,255,.08);
  color:#0f2a43;
  transition:transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.aireef-filters .aireef-filter:hover{
  background:rgba(53,167,255,.14);
  border-color:rgba(53,167,255,.45);
  box-shadow:0 6px 18px rgba(16,24,40,.08);
  transform:translateY(-1px);
}

.aireef-filters .aireef-filter.is-active{
  background:#35a7ff;
  border-color:#35a7ff;
  color:#fff;
  box-shadow:0 10px 26px rgba(53,167,255,.35);
}

.aireef-filters .aireef-filter:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(53,167,255,.35), 0 10px 26px rgba(16,24,40,.10);
}
body.lang-ar .footer-en { display: none !important; }
body.lang-en .footer-ar { display: none !important; }
/* ================================
   RTL: icon on the RIGHT of text
   (move icon from ::before to ::after)
================================ */


/* RTL: keep ::before but move it to the right visually */
.rtl header#masthead nav#site-navigation .main-nav > ul > li[class*="icon-"] > a {
  flex-direction:revert-layer; !important; /* text then icon on the right */
}

.rtl .main-navigation .main-nav > ul > li[class*="icon-"] > a:before {
  margin-right: 0px !important;
  margin-left: 10 !important;
}
.rtl header#masthead .site-logo {
   
    padding-right: 20px !important;
}header#masthead .aireef-header-tools {
 
    padding-left: 20px !important;
}
/* All AI Reef archives: grid should start immediately and fill width */
.aireef-grid{
  width: 100%;
  justify-content: start !important;
  justify-items: stretch;
  align-content: start;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

/* Default desktop: 3 cards per row */
.aireef-grid > .aireef-card{
  grid-column: span 4;
}

/* Tablet: 2 cards per row */
@media (max-width: 1024px){
  .aireef-grid > .aireef-card{
    grid-column: span 6;
  }
}

/* Mobile: 1 card per row */
@media (max-width: 640px){
  .aireef-grid > .aireef-card{
    grid-column: span 12;
  }
}

/* If there's only ONE post, make it full width */
.aireef-grid > .aireef-card:only-child{
  grid-column: 1 / -1;
}

/* Empty state full width (if you output one) */
.aireef-empty,
.no-results{
  width: 100%;
}
/* 1) Make sure the grid always starts from the beginning */
.aireef-section .aireef-grid{
  width: 100% !important;
  justify-content: start !important;
  align-content: start !important;
  justify-items: stretch !important;

  /* Ensure a real 12-col grid */
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: 16px; /* adjust if you already set gap elsewhere */
}

/* 2) OVERRIDE inline grid-column styles on cards */
.aireef-section .aireef-grid > .aireef-card{
  grid-column: span 4 !important; /* desktop: 3 per row */
}

/* Tablet: 2 per row */
@media (max-width: 1024px){
  .aireef-section .aireef-grid > .aireef-card{
    grid-column: span 6 !important;
  }
}

/* Mobile: 1 per row */
@media (max-width: 640px){
  .aireef-section .aireef-grid > .aireef-card{
    grid-column: span 12 !important;
  }
}

/* 3) If only 1 post exists, make it full width */
.aireef-section .aireef-grid > .aireef-card:only-child{
  grid-column: 1 / -1 !important;
}
/* RTL: make filters + grid start from the RIGHT edge */
.rtl .aireef-section{
  text-align: right;
}

/* Filters row (flex) */
.rtl .aireef-filters{
  direction: rtl;                 /* makes flex-start = right */
  justify-content: flex-start !important;
  text-align: right;
}

/* Grid loop (css grid) */
.rtl .aireef-grid{
  direction: rtl;                 /* makes grid start = right */
  justify-content: start !important;
  align-content: start !important;
  justify-items: stretch !important;
}

/* Each card should sit at the start (right) */
.rtl .aireef-grid > .aireef-card{
  justify-self: stretch !important;
}
/* Ensure the archive block itself is aligned to the right inside the page container */
.rtl .aireef-wrap{
  margin-right: 0 !important;
  margin-left: 0 !important;
}
/* =========================================================
   MOBILE (Layout B) — exact alignment rules (EN vs AR)
   ========================================================= */
@media (max-width: 1024px){

  /* ----- Base Layout B (two lines) ----- */
  header#masthead .inside-header{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
    padding:10px 14px !important;
  }

  /* Line 1: logo + burger */
  header#masthead .site-logo,
  header#masthead .site-branding{
    order:1 !important;
    flex: 1 1 auto !important;
    margin:0 !important;
  }

  #mobile-menu-control-wrapper{
    order:2 !important;
    flex:0 0 auto !important;
    width:auto !important;
    margin:0 !important;
  }

  #mobile-menu-control-wrapper .menu-toggle{
    width:44px !important;
    height:44px !important;
    padding:0 !important;
    border-radius:999px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* Line 2: tools full width */
  header#masthead .aireef-header-tools{
    order:3 !important;
    flex: 0 0 100% !important;
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:0 !important;
  }

  /* search fills remaining space */
  .aireef-header-search{ flex: 1 1 auto !important; }
  .aireef-header-search input[type="search"]{
    width:100% !important;
    height:40px !important;
    border-radius:999px !important;
  }

  /* profile fixed size */
  .aireef-header-user{ flex:0 0 auto !important; }

  /* ======================================================
     ENGLISH (LTR)
     - burger RIGHT (line 1)
     - profile RIGHT (line 2) aligned under burger
     ====================================================== */
  html:not([dir="rtl"]) header#masthead .aireef-header-tools{
    justify-content: flex-start !important; /* search left */
  }
  html:not([dir="rtl"]) header#masthead .aireef-header-user{
    margin-left: auto !important; /* push profile to far RIGHT */
    margin-right: 0 !important;
  }

  /* ======================================================
     ARABIC (RTL)
     - logo RIGHT (line 1)
     - burger LEFT (line 1)
     - profile LEFT (line 2) aligned under burger
     ====================================================== */
  html[dir="rtl"] header#masthead .inside-header{
    flex-direction: row-reverse !important; /* swaps line 1 sides */
  }

  html[dir="rtl"] header#masthead .aireef-header-tools{
    direction: rtl !important;
    justify-content: flex-start !important; /* in RTL, flex-start = RIGHT (search on right) */
  }

  html[dir="rtl"] header#masthead .aireef-header-user{
    margin-right: auto !important; /* push profile to far LEFT (under burger) */
    margin-left: 0 !important;
  }
}

/* If your Arabic pages use .rtl class instead of dir="rtl", enable this too */
@media (max-width: 1024px){
  .rtl header#masthead .inside-header{ flex-direction: row-reverse !important; }
  .rtl header#masthead .aireef-header-tools{ direction: rtl !important; }
  .rtl header#masthead .aireef-header-user{ margin-right: auto !important; margin-left: 0 !important; }
}
/* ==========================================
   RTL (Arabic) mobile: Logo RIGHT, Burger LEFT
   (Layout B – line 1 only)
   ========================================== */
@media (max-width: 1024px){

  /* Make sure we DON'T reverse the header row */
  html[dir="rtl"] header#masthead .inside-header,
  .rtl header#masthead .inside-header{
    flex-direction: row !important;
  }

  /* Logo goes to the RIGHT */
  html[dir="rtl"] header#masthead .site-logo,
  html[dir="rtl"] header#masthead .site-branding,
  .rtl header#masthead .site-logo,
  .rtl header#masthead .site-branding{
    margin-left: auto !important;   /* push to right */
    margin-right: 0 !important;
    text-align: right !important;
  }

  /* Burger goes to the LEFT */
  html[dir="rtl"] #mobile-menu-control-wrapper,
  .rtl #mobile-menu-control-wrapper{
    margin-left: 0 !important;
    margin-right: auto !important;  /* push to left */
  }
}
/* ==========================================
   MOBILE MENU — slimmer items (smaller li height)
   ========================================== */
@media (max-width: 1024px){

  /* reduce panel padding */
  html.mobile-menu-open #site-navigation{
    padding: 6px 0 !important;
  }

  /* remove extra spacing on UL/LI */
  html.mobile-menu-open #site-navigation .main-nav ul{
    margin: 0 !important;
    padding: 0 !important;
  }
  html.mobile-menu-open #site-navigation .main-nav ul li{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* smaller item height */
  html.mobile-menu-open #site-navigation .main-nav ul li a{
    padding: 6px 14px !important;   /* ↓ smaller height */
    font-size: 13px !important;     /* ↓ smaller text */
    line-height: 1.1 !important;    /* ↓ tighter */
    min-height: 0 !important;
  }

  /* reduce icon size + gap (Font Awesome ::before) */
  html.mobile-menu-open #site-navigation .main-nav ul li a::before{
    font-size: 13px !important;
    width: 14px !important;
    margin-right: 7px !important;
  }

  /* RTL: icon gap on left side */
  html[dir="rtl"] html.mobile-menu-open #site-navigation .main-nav ul li a::before,
  .rtl html.mobile-menu-open #site-navigation .main-nav ul li a::before{
    margin-right: 0 !important;
    margin-left: 7px !important;
  }
}
/* =========================
   Mobile H1 sizing
   ========================= */
@media (max-width: 700px){

  h1,
  .entry-title,
  .page-title{
  	font-family: var(--font-head) !important;
    font-size: 26px !important;   /* change to 24px if you want smaller */
    line-height: 1.25 !important;
  }
}
/* ============================================================
   HERO (wireframe match + fade) — UPDATED ARROWS PER YOUR RULE
   Prev/Next:
   - Default: BLUE background + WHITE icon/text + SQUARE
   - Hover: NAVY background + WHITE icon/text + SQUARE
   ============================================================ */

/* HERO spacing */
.aireef-hero { margin: 10px 0 34px; }
.aireef-hero-title{
    font-size: 29px;
    line-height: 1.15;
    margin: 0px 0 36px 0;
    font-weight: 800;

}

.aireef-hero-card{
  background: #e9f6ff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 40px;
  font-size: 24px;
}

.aireef-hero-top{
  font-weight: 800;
  letter-spacing: .6px;
  margin: 0 0 16px;
}

.aireef-hero-grid{
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 26px;
  align-items: center;
}

/* Left visual */
.aireef-hero-media{ display:block; }
.aireef-hero-media img{
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.aireef-hero-placeholder{
  width: 100%;
  aspect-ratio: 3 / 2;
  background: #bfe3ff;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: rgba(0,0,0,.45);
  font-weight: 600;
}

/* Right content */
.aireef-hero-headline{
  font-size: 29px;
  line-height: 1.18;
  margin: 0 0 12px;
  font-weight: 800;
}
.aireef-hero-headline a{ text-decoration:none;
  color: var(--ink) !important; }

.aireef-hero-excerpt{
  margin: 0 0 18px;
  color: var();
  line-height: 1.6;
  font-size: 15px;
}

/* Read more button: square + navy hover + white text */
.aireef-hero-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 0;
  background: #2f8bff;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: background .15s ease, transform .15s ease;
}
.aireef-hero-btn:hover{
  background: #0b2a5a;
  color: #fff;
  transform: translateY(-1px);
}
.aireef-hero-btn:active{ transform: translateY(0); }

/* =========================
   Slider mechanics: FADE
   ========================= */
.aireef-hero-stage{ position: relative; }
.aireef-hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(2px);
  transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
}
.aireef-hero-slide.is-active{
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .35s ease, transform .35s ease, visibility 0s;
}

/* =========================
   Controls (BLUE square arrows)
   ========================= */
.aireef-hero-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-top: 16px;
}

/* ===== FORCE SVG ARROWS TO SHOW INSIDE THE BLUE SQUARES ===== */
.aireef-hero-nav{
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background-color: #2f8bff;
  cursor: pointer;
  display: inline-flex;
  border-radius: 5px;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  /* keep the arrow character accessible but not visible */
  color: white;
  text-shadow: none;
}

/* IMPORTANT: must be display:block + explicit background */
.aireef-hero-nav::before{
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
  opacity: 1 !important;
}

/* White SVG chevrons */
.aireef-hero-nav[data-aireef-prev]::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important;
}
.aireef-hero-nav[data-aireef-next]::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") !important;
}

/* Hover = NAVY, icon stays white */
.aireef-hero-nav:hover{
  background-color: #0b2a5a !important;
}


/* Dots */
.aireef-hero-dots{
  display:flex;
  gap: 8px;
  align-items:center;
}

.aireef-hero-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.18);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, background .15s ease;
}
.aireef-hero-dot:hover{
  transform: scale(1.08);
  background: rgba(0,0,0,.28);
}
.aireef-hero-dot.is-active{
  background: rgba(0,0,0,.45);
}

/* Mobile */
@media (max-width: 768px){
  .aireef-hero-card{ padding: 16px; border-radius: 14px; }
  .aireef-hero-grid{ grid-template-columns: 1fr; gap: 14px; }
  .aireef-hero-headline{ font-size: 24px; }
}
/* =========================
   Homepage Category Cards (Reef.html match)
   ========================= */
.home-cats{
  margin-top: 0px;
  margin-bottom: 12px;
}

.home-cats-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}

.home-cat{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 26px 18px;

  text-decoration: none;
  color: inherit;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;

  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-cat:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,0,0,.08);
  border-color: rgba(47,139,255,.22);
}

.home-cat-icon{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(47,139,255,.10);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.home-cat-icon i{
  color: #2f8bff;
  font-size: 22px;
  line-height: 1;
}

.home-cat-title{
  font-weight: 800;
  font-size: 18px;
  color: rgba(0,0,0,.90);
}

.home-cat-desc{
  font-size: 13px;
  line-height: 1.6;
  color: rgba(0,0,0,.55);
  max-width: 28ch;
}

/* Responsive */
@media (max-width: 1024px){
  .home-cats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 560px){
  .home-cats-grid{
    grid-template-columns: 1fr;
  }
}
.home-cats-title{
  margin: 8px 0 24px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .2px;
  color: rgba(0,0,0,.90);
}
/* =========================
   Featured Stories (wireframe card style)
   ========================= */

.home-featuredgrid .section-header h2{
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .4px;
  margin: 0px  0 10px 0;
  text-transform: uppercase;
}

.home-featuredgrid .featured-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

/* White card (NO blue background) */
.home-featuredgrid .featured-card{
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 28px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-featuredgrid .featured-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(0,0,0,.10);
  border-color: rgba(47,139,255,.22);
}

.home-featuredgrid .featured-thumb{
  display: block;
}
.home-featuredgrid .featured-thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.home-featuredgrid .featured-body{
  padding: 18px 18px 16px;
}

/* main category label (top, blue link look) */
.home-featuredgrid .featured-kicker{
  font-weight: 700;
  font-size: 14px;
  color: #2f8bff;
  margin: 0 0 10px;
}

.home-featuredgrid .featured-title{
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 900;
}
.home-featuredgrid .featured-title a{
  text-decoration: none;
  color: rgba(0,0,0,.92);
}

.home-featuredgrid .featured-excerpt{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(0,0,0,.62);
}

/* footer row: left min read, right flag */
.home-featuredgrid .featured-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(0,0,0,.55);
}

.home-featuredgrid .featured-flag{
  color: rgba(0,0,0,.55);
}

/* responsive */
@media (max-width: 900px){
  .home-featuredgrid .featured-2col{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.aireef-wrap section h2{    font-size: 29px !important;
    line-height: 1.15 !important;
    margin: 0px 0 36px 0 !important;
    font-weight: 800 !important;}
    .section-header section{
    	margin-bottom:10px ;
    }
    /* =========================
   Home Videos (2 columns)
   ========================= */
.home-video .video-2col{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.home-video{    margin: 12px 0 0 0 ;}
.home-video .video-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 24px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.home-video .video-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,0,0,.08);
  border-color: rgba(47,139,255,.22);
}

.home-video .video-thumb{
  display:block;
}
.home-video .video-thumb img{
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display:block;
}

.home-video .video-thumb-placeholder{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(47,139,255,.10);
}

.home-video .video-body{
  padding: 14px 16px 16px;
}

.home-video .video-cat{
  font-weight: 700;
  font-size: 13px;
  color: #2f8bff;
  margin: 0 0 8px;
}

.home-video .video-title{
  margin: 0;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 900;
}
.home-video .video-title a{
  text-decoration: none;
  color: rgba(0,0,0,.92);
}

/* Mobile */
@media (max-width: 900px){
  .home-video .video-2col{
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.aireef-hero-meta,.aireef-card-meta{
  margin: 8px 0 12px;
  font-size: 13px;
  opacity: .8;
  color: var(--reef-navy);
    font-weight: bold;
  line-height: 1.3;
}
.aireef-card{
  display:flex;
  flex-direction:column;
  height:100%;
}

.aireef-card .body{
  flex:1;
  display:flex;
  flex-direction:column;
  background: rgba(53,167,255,.10); /* or your existing light blue */
}

.aireef-card-meta{
  margin: 6px 0 10px;
  font-size: 13px;
  opacity: .85;
  line-height: 1.3;
}
.aireef-loadmore-btn{
	margin-top: 12px;
}
.aireef-loadmore-btn.is-loading{
  opacity:.7;
  pointer-events:none;
}
.aireef-loadmore-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 0;
  background: #2f8bff;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  transition: background .15s ease, transform .15s ease;
}
.aireef-loadmore-btn:hover{
  background: #0b2a5a;
  color: #fff;
  transform: translateY(-1px);
}
/* Breadcrumbs */
.aireef-breadcrumbs{
  font-size: 13px;
  color: rgba(0,0,0,.55);
  margin: 0 0 10px;
}

.aireef-breadcrumbs a{
  color: rgba(0,0,0,.65);
  text-decoration: none;
}

.aireef-breadcrumbs a:hover{
  text-decoration: underline;
}

.aireef-breadcrumbs .current{
  color: rgba(0,0,0,.75);
  font-weight: 600;
}

/* RTL polish */
html[dir="rtl"] .aireef-breadcrumbs{
  text-align: right;
}
.aireef-single-thumb img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
:root{
  --aireef-blue: #2F8CFF;
  --aireef-blue-600: #1E6FE6;
  --aireef-ink: #0F172A;

  --aireef-bg: #ffffff;
  --aireef-surface: #F8FAFC;
  --aireef-border: #E2E8F0;

  --pill-radius: 999px;
  --pill-shadow: 0 1px 0 rgba(15, 23, 42, .04);
}

/* Filter row container */
.aireef-filters{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 16px;
}

/* Pill */
.aireef-filter{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;              /* default size */
  padding: 0 14px;

  border-radius: var(--pill-radius);
  border: 1px solid var(--aireef-border);
  background: var(--aireef-bg);
  color: var(--aireef-ink);

  text-decoration: none;
  white-space: nowrap;

  font-size: 13px;
  font-weight: 700;
  letter-spacing: .15px;

  box-shadow: var(--pill-shadow);
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease, color .15s ease;

  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Hover / focus */
.aireef-filter:hover{
  border-color: rgba(47,140,255,.45);
  background: rgba(47,140,255,.06);
  transform: translateY(-1px);
}
.aireef-filter:focus-visible{
  outline: 3px solid rgba(47,140,255,.25);
  outline-offset: 2px;
}

/* Active */
.aireef-filter.is-active{
  background: var(--aireef-blue);
  border-color: var(--aireef-blue);
  color: #fff;
  box-shadow: 0 6px 14px rgba(47,140,255,.18);
}
.aireef-filter.is-active:hover{
  background: var(--aireef-blue-600);
  border-color: var(--aireef-blue-600);
}

/* -------------------------
   OPTIONAL: Two-level styling
   If you can add these wrappers:
   .aireef-filters--type  (primary)
   .aireef-filters--topic (secondary)
--------------------------*/

/* Primary = Type pills */
.aireef-filters--type .aireef-filter{
  height: 40px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 800;
}

/* Secondary = Topic pills */
.aireef-filters--topic .aireef-filter{
  height: 34px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 700;
  background: var(--aireef-surface);
}

/* Slightly softer shadow for active topic pills */
.aireef-filters--topic .aireef-filter.is-active{
  box-shadow: 0 4px 12px rgba(47,140,255,.16);
}

/* =========================
   MOBILE: swipeable rows
========================= */
@media (max-width: 768px){
  .aireef-filters{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;

    gap: 10px;
    padding: 4px 4px 10px;
    margin: 10px 0 14px;

    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .aireef-filters::-webkit-scrollbar{ height: 0; }

  .aireef-filter{
    scroll-snap-align: start;
    height: 42px;        /* better tap target */
    padding: 0 16px;
    font-size: 14px;
  }

  /* If you use topic wrapper, keep it slightly smaller */
  .aireef-filters--topic .aireef-filter{
    height: 36px;
    padding: 0 14px;
    font-size: 13px;
  }

  /* Remove lift on mobile */
  .aireef-filter:hover{
    transform: none;
  }
}
@media (max-width: 768px){
  body .grid-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
#wpcf7-f244-p95-o1 form{
	direction: rtl;
}
/* Search results layout */
.aireef-search-results{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.aireef-search-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}

.aireef-search-thumb{
  flex:0 0 86px;
  width:86px;
  height:86px;
  border-radius:12px;
  overflow:hidden;
  display:block;
}

.aireef-search-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.aireef-search-thumb-fallback{
  width:100%;
  height:100%;
  display:block;
  background:rgba(0,0,0,.06);
}

.aireef-search-body{
  flex:1;
  min-width:0;
}

.aireef-search-title{
  margin:0 0 6px;
  font-size:18px;
  line-height:1.25;
}

.aireef-search-title a{
  text-decoration:none;
}

.aireef-search-meta{
  display:flex;
  gap:10px;
  font-size:12px;
  opacity:.75;
  margin-bottom:8px;
}

.aireef-search-excerpt{
  margin:0;
  line-height:1.6;
}

/* Highlighted search term */

.aireef-hl{
  background: #ffe86a;
  padding: 0 .18em;
  border-radius: .22em;
}
 .aireef-wrap section .aireef-body h2{    font-size: 24px !important;
    line-height: 1.15 !important;
    margin: 0px 0 6px 0 !important;
    font-weight: 500 !important;}
    .aireef-search-meta{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  opacity:.8;
  margin:6px 0 8px;
  flex-wrap:wrap;
}
.aireef-meta-sep{ opacity:.6; }