/*

Theme Name: Eduma Child

Theme URI: https://optionzcoaching.com

Description: Optionz Coaching Child Theme for Eduma LMS

Author: Optionz Coaching Dev Team

Author URI: https://optionzcoaching.com

Template: eduma

Version: 1.0.0

Text Domain: eduma-child

*/



/* ==========================================================================

   Optionz Coaching Custom Styles & Overrides

   ========================================================================== */



/* ---------------------------------------------------------

   1. Brand Identity: Letter (z / ز) in Orange, Word in Charcoal

   --------------------------------------------------------- */

:root {

	--optionz-orange: #f39200;

	--optionz-orange-dark: #d97706;

	--optionz-charcoal: #1e293b;

	--optionz-dark: #0f172a;

	--optionz-gold: #f59e0b;

	--optionz-blue: #0284c7;

	--optionz-gray-bg: #f8fafc;

	--optionz-card-border: #e2e8f0;

}



.brand-z-orange {

	color: var(--optionz-orange) !important;

	font-weight: 800;

}



.brand-word-black {

	color: var(--optionz-charcoal) !important;

}



/* ---------------------------------------------------------

   2. Floating Hero Card Star (*) & Branding

   --------------------------------------------------------- */

.optionz-hero-star {

	display: none !important;

}



/* ---------------------------------------------------------

   3. ICF Accreditation Badges (Level 1, Level 2, CCE)

   --------------------------------------------------------- */

.icf-badge-container {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	padding: 4px 10px;

	border-radius: 6px;

	font-size: 12px;

	font-weight: 700;

	line-height: 1.4;

	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

}



.icf-badge-l1 {

	background: #fff8f0;

	color: #c2410c;

	border: 1px solid #fed7aa;

}



.icf-badge-l2 {

	background: #fefce8;

	color: #854d0e;

	border: 1px solid #fef08a;

}



.icf-badge-cce {

	background: #f0f9ff;

	color: #0369a1;

	border: 1px solid #bae6fd;

}



/* ---------------------------------------------------------

   4. Course Card Pricing & Hours Badges

   --------------------------------------------------------- */

.optionz-card-price-lead {

	display: inline-block;

	font-size: 15px;

	font-weight: 800;

	color: var(--optionz-orange);

	background: rgba(243, 146, 0, 0.08);

	padding: 4px 12px;

	border-radius: 20px;

	border: 1px solid rgba(243, 146, 0, 0.25);

}



.optionz-hours-badge-row {

	display: flex;

	flex-wrap: wrap;

	gap: 6px;

	margin-top: 8px;

	font-size: 12px;

	font-weight: 600;

}



.optionz-hours-tag {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	background: #f1f5f9;

	color: #334155;

	padding: 3px 8px;

	border-radius: 4px;

}



.optionz-mentoring-tag {

	display: inline-flex;

	align-items: center;

	gap: 4px;

	background: #fef3c7;

	color: #92400e;

	padding: 3px 8px;

	border-radius: 4px;

}



/* ---------------------------------------------------------

   5. Interactive 3D Luxury Book Mockup Display (Slide 14)

   --------------------------------------------------------- */

.optionz-3d-book-container {

	perspective: 1200px;

	display: flex;

	justify-content: center;

	align-items: center;

	padding: 30px 15px;

}



.optionz-3d-book {

	width: 260px;

	height: 380px;

	position: relative;

	transform-style: preserve-3d;

	transform: rotateY(-22deg) rotateX(8deg);

	transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s ease;

	border-radius: 6px 16px 16px 6px;

	box-shadow: -15px 25px 35px rgba(0, 0, 0, 0.35), 0 5px 15px rgba(0, 0, 0, 0.2);

}



.optionz-3d-book:hover {

	transform: rotateY(-10deg) rotateX(3deg) translateY(-8px);

	box-shadow: -20px 35px 45px rgba(0, 0, 0, 0.4), 0 8px 25px rgba(0, 0, 0, 0.25);

}



.optionz-3d-book-cover {

	width: 100%;

	height: 100%;

	object-fit: cover;

	border-radius: 6px 16px 16px 6px;

	display: block;

}



.optionz-3d-book-spine {

	position: absolute;

	left: 0;

	top: 0;

	width: 28px;

	height: 100%;

	background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.4) 100%);

	border-radius: 6px 0 0 6px;

	pointer-events: none;

}



/* ---------------------------------------------------------

   6. Verified Graduate Optionz Coach Cards (Slide 8)

   --------------------------------------------------------- */

.optionz-coach-cards-grid {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

	gap: 24px;

	margin: 30px 0;

}



.optionz-coach-card {

	background: #ffffff;

	border: 1px solid #e2e8f0;

	border-radius: 14px;

	padding: 24px 20px;

	text-align: center;

	transition: all 0.35s ease;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

	position: relative;

	overflow: hidden;

}



.optionz-coach-card:hover {

	transform: translateY(-6px);

	border-color: var(--optionz-orange);

	box-shadow: 0 12px 30px rgba(243, 146, 0, 0.15);

}



.optionz-coach-card-avatar {

	width: 110px;

	height: 110px;

	border-radius: 50%;

	object-fit: cover;

	border: 3px solid var(--optionz-orange);

	padding: 3px;

	background: #fff;

	margin: 0 auto 16px;

}



.optionz-coach-card-name {

	font-size: 18px;

	font-weight: 800;

	color: var(--optionz-charcoal);

	margin-bottom: 4px;

}



.optionz-coach-card-cred {

	display: inline-block;

	font-size: 12px;

	font-weight: 700;

	color: #92400e;

	background: #fef3c7;

	border: 1px solid #fde68a;

	padding: 3px 10px;

	border-radius: 12px;

	margin-bottom: 10px;

}



.optionz-coach-card-date {

	font-size: 12px;

	color: #64748b;

	margin-bottom: 14px;

}



.optionz-coach-card-btn {

	display: inline-block;

	width: 100%;

	padding: 8px 14px;

	background: #f8fafc;

	color: var(--optionz-charcoal);

	border: 1px solid #cbd5e1;

	border-radius: 8px;

	font-size: 13px;

	font-weight: 700;

	transition: all 0.25s ease;

	text-decoration: none;

	cursor: pointer;

}



.optionz-coach-card-btn:hover {

	background: var(--optionz-orange);

	color: #ffffff;

	border-color: var(--optionz-orange);

}



/* ---------------------------------------------------------

   7. Course Archive 14 Category Filter Pills

   --------------------------------------------------------- */

.optionz-archive-filters {

	display: flex;

	flex-wrap: wrap;

	gap: 10px;

	margin: 20px 0 35px;

	justify-content: center;

}



.optionz-filter-pill {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	padding: 8px 18px;

	border-radius: 25px;

	background: #ffffff;

	border: 1.5px solid #e2e8f0;

	color: #334155;

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

	transition: all 0.25s ease;

	cursor: pointer;

}



.optionz-filter-pill:hover,

.optionz-filter-pill.active {

	background: var(--optionz-orange);

	border-color: var(--optionz-orange);

	color: #ffffff;

	box-shadow: 0 4px 12px rgba(243, 146, 0, 0.25);

}



/* ---------------------------------------------------------

   8. Responsive and RTL Polish

   --------------------------------------------------------- */

body.rtl {

	font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif !important;

}



/* =========================================================

   9. Super UI/UX Components (Badges, Map, Book, Curriculum)

   ========================================================= */



/* General Helpers */

.optionz-section-container {

	max-width: 1240px;

	margin: 0 auto;

	padding: 60px 20px;

}



.optionz-badge-pill {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	background: rgba(243, 146, 0, 0.1);

	border: 1px solid rgba(243, 146, 0, 0.3);

	color: #d97706;

	padding: 6px 16px;

	border-radius: 30px;

	font-size: 13px;

	font-weight: 700;

	margin-bottom: 16px;

}



.optionz-pill-dot {

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: #f39200;

	box-shadow: 0 0 8px #f39200;

}



.optionz-btn-gold {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	background: linear-gradient(135deg, #f39200 0%, #d97706 100%);

	color: #ffffff !important;

	padding: 12px 26px;

	border-radius: 10px;

	font-weight: 800;

	font-size: 15px;

	text-decoration: none !important;

	box-shadow: 0 6px 20px rgba(243, 146, 0, 0.35);

	transition: all 0.3s ease;

	border: none;

	cursor: pointer;

}



.optionz-btn-gold:hover {

	transform: translateY(-2px);

	box-shadow: 0 10px 25px rgba(243, 146, 0, 0.45);

	color: #ffffff !important;

}



.optionz-btn-outline {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	background: #ffffff;

	color: #1e293b !important;

	border: 1.5px solid #cbd5e1;

	padding: 12px 24px;

	border-radius: 10px;

	font-weight: 700;

	font-size: 15px;

	text-decoration: none !important;

	transition: all 0.3s ease;

	cursor: pointer;

}



.optionz-btn-outline:hover {

	border-color: #f39200;

	color: #f39200 !important;

	background: #fff8f0;

}



/* ---------------------------------------------------------

   Component A: Coach Badges Grid & Lightbox Modal

   --------------------------------------------------------- */

.optionz-coaches-section {

	background: #f8fafc;

	border-top: 1px solid #e2e8f0;

	border-bottom: 1px solid #e2e8f0;

}



.optionz-coaches-header {

	text-align: center;

	max-width: 780px;

	margin: 0 auto 40px;

}



.optionz-coaches-title {

	font-size: 32px;

	font-weight: 900;

	color: #1e293b;

	margin-bottom: 12px;

}



.optionz-coaches-sub {

	font-size: 16px;

	color: #64748b;

	line-height: 1.7;

}



.optionz-badges-grid {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

	gap: 24px;

}



.optionz-badge-card {

	background: #ffffff;

	border-radius: 16px;

	border: 1px solid #e2e8f0;

	overflow: hidden;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);

	transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);

	display: flex;

	flex-direction: column;

}



.optionz-badge-card:hover {

	transform: translateY(-6px);

	border-color: #f39200;

	box-shadow: 0 16px 30px rgba(243, 146, 0, 0.15);

}



.optionz-badge-img-wrap {

	position: relative;

	width: 100%;

	aspect-ratio: 4 / 5;

	background: #ffffff;

	cursor: pointer;

	overflow: hidden;

	display: flex;

	align-items: center;

	justify-content: center;

}



.optionz-badge-img {

	width: 100%;

	height: 100%;

	object-fit: contain;

	display: block;

	transition: transform 0.4s ease;

}



.optionz-badge-card:hover .optionz-badge-img {

	transform: scale(1.03);

}



.optionz-badge-overlay {

	position: absolute;

	inset: 0;

	background: rgba(15, 23, 42, 0.7);

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	opacity: 0;

	transition: opacity 0.3s ease;

	color: #ffffff;

	gap: 8px;

}



.optionz-badge-img-wrap:hover .optionz-badge-overlay {

	opacity: 1;

}



.optionz-zoom-icon {

	font-size: 28px;

}



.optionz-zoom-text {

	font-size: 13px;

	font-weight: 700;

}



.optionz-badge-info {

	padding: 14px 16px 16px;

	text-align: center;

	display: flex;

	flex-direction: column;

	margin-top: auto;

	background: #ffffff;

}



.optionz-coach-name,

.optionz-coach-role,

.optionz-coach-verified {

	display: none !important;

}



.optionz-card-action-btn {

	margin-top: auto;

	background: linear-gradient(135deg, #f39200 0%, #e08300 100%);

	border: none;

	padding: 11px 16px;

	border-radius: 10px;

	font-size: 14px;

	font-weight: 700;

	color: #ffffff;

	cursor: pointer;

	transition: all 0.25s ease;

	width: 100%;

	display: flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	box-shadow: 0 4px 14px rgba(243, 146, 0, 0.28);

	font-family: inherit;

}



.optionz-card-action-btn:hover {

	background: linear-gradient(135deg, #e08300 0%, #c77200 100%);

	color: #ffffff;

	transform: translateY(-2px);

	box-shadow: 0 6px 20px rgba(243, 146, 0, 0.45);

}



/* Lightbox Modal */

.optionz-modal-backdrop {

	position: fixed;

	inset: 0;

	background: rgba(15, 23, 42, 0.85);

	backdrop-filter: blur(6px);

	z-index: 999999;

	display: flex;

	align-items: center;

	justify-content: center;

	padding: 20px;

	opacity: 0;

	pointer-events: none;

	transition: opacity 0.3s ease;

}



.optionz-modal-backdrop.active {

	opacity: 1;

	pointer-events: auto;

}



.optionz-modal-dialog {

	position: relative;

	background: #ffffff;

	border-radius: 20px;

	max-width: 900px;

	width: 100%;

	max-height: 90vh;

	overflow-y: auto;

	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);

	padding: 24px;

}



.optionz-modal-close {

	position: absolute;

	top: 16px;

	right: 16px;

	background: #f1f5f9;

	border: none;

	width: 38px;

	height: 38px;

	border-radius: 50%;

	font-size: 22px;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	color: #475569;

	transition: all 0.2s ease;

	z-index: 10;

}



.optionz-modal-close:hover {

	background: #ef4444;

	color: #ffffff;

}



.optionz-modal-body {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 24px;

	align-items: center;

}



.optionz-modal-img-container {

	border-radius: 12px;

	overflow: hidden;

	background: #f8fafc;

	border: 1px solid #e2e8f0;

}



.optionz-modal-img {

	width: 100%;

	height: auto;

	display: block;

}



.optionz-modal-meta {

	padding: 10px;

}



.optionz-status-badge {

	display: inline-block;

	background: #dcfce7;

	color: #15803d;

	border: 1px solid #bbf7d0;

	padding: 4px 12px;

	border-radius: 20px;

	font-size: 12px;

	font-weight: 800;

	margin-bottom: 12px;

}



.optionz-modal-title {

	font-size: 26px;

	font-weight: 900;

	color: #0f172a;

	margin-bottom: 8px;

}



.optionz-modal-desc {

	font-size: 15px;

	color: #64748b;

	margin-bottom: 24px;

	line-height: 1.6;

}



.optionz-nav-btn {

	position: absolute;

	top: 50%;

	transform: translateY(-50%);

	background: #ffffff;

	border: 1px solid #cbd5e1;

	width: 44px;

	height: 44px;

	border-radius: 50%;

	font-size: 18px;

	cursor: pointer;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

	transition: all 0.2s ease;

}



.optionz-nav-btn:hover {

	background: #f39200;

	color: #ffffff;

	border-color: #f39200;

}



.optionz-prev-btn { left: -22px; }

.optionz-next-btn { right: -22px; }



/* ---------------------------------------------------------

   Component B: Arab World 255 Stats, Interactive Map & Grid

   --------------------------------------------------------- */

.optionz-map-section {

	background: #ffffff;

	padding: 60px 0;

}



.optionz-map-header {

	max-width: 820px;

	margin: 0 auto 25px;

}



.optionz-map-title {

	font-size: 34px;

	font-weight: 900;

	color: #1e293b;

	margin-bottom: 12px;

}



.optionz-map-sub {

	font-size: 16px;

	color: #64748b;

}



/* Dual View Toggle Switcher */

.optionz-toggle-wrap {

	text-align: center;

	margin: 15px auto 28px;

}



.optionz-view-switcher {

	display: inline-flex;

	align-items: center;

	background: #f1f5f9;

	padding: 5px;

	border-radius: 40px;

	border: 1px solid #e2e8f0;

	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);

}



.optionz-view-switcher button.optionz-view-btn {

	display: inline-flex !important;

	align-items: center !important;

	gap: 8px !important;

	padding: 10px 22px !important;

	border-radius: 30px !important;

	font-family: inherit !important;

	font-size: 14.5px !important;

	font-weight: 800 !important;

	border: none !important;

	cursor: pointer !important;

	background: transparent !important;

	color: #64748b !important;

	line-height: 1.4 !important;

	box-shadow: none !important;

	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.optionz-view-switcher button.optionz-view-btn:hover {

	color: #0f172a !important;

}



.optionz-view-switcher button.optionz-view-btn.active {

	background: linear-gradient(135deg, #0d1b2a, #1e293b) !important;

	color: #ffffff !important;

	box-shadow: 0 4px 14px rgba(13, 27, 42, 0.25) !important;

}



.optionz-view-switcher button.optionz-view-btn .btn-badge {

	background: rgba(243, 146, 0, 0.18) !important;

	color: #f39200 !important;

	font-size: 11px !important;

	padding: 2px 8px !important;

	border-radius: 12px !important;

	font-weight: 800 !important;

}



.optionz-view-switcher button.optionz-view-btn.active .btn-badge {

	background: #f39200 !important;

	color: #0d1b2a !important;

}



/* Stats Ribbon */

.optionz-map-stats-strip {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 16px;

	margin-bottom: 30px;

}



.optionz-map-stat-box {

	background: #f8fafc;

	border: 1px solid #e2e8f0;

	border-radius: 14px;

	padding: 20px;

	text-align: center;

	transition: all 0.3s ease;

}



.optionz-map-stat-box:hover {

	transform: translateY(-4px);

	border-color: #f39200;

	box-shadow: 0 10px 25px rgba(243, 146, 0, 0.1);

}



.optionz-stat-num {

	font-size: 32px;

	font-weight: 900;

	color: #f39200;

	margin-bottom: 6px;

}



/* Interactive Map Dashboard Layout */

.optionz-map-dashboard {

	display: grid;

	grid-template-columns: 1fr 340px;

	gap: 24px;

	align-items: stretch;

	margin-bottom: 35px;

}



@media (max-width: 1024px) {

	.optionz-map-dashboard {

		grid-template-columns: 1fr;

	}

}



/* Map Canvas Container */

.optionz-map-canvas-card {

	background: radial-gradient(circle at 75% 35%, #132238 0%, #09101c 100%);

	border: 1px solid rgba(243, 146, 0, 0.3);

	border-radius: 24px;

	padding: 22px;

	position: relative;

	overflow: hidden;

	box-shadow: 0 20px 45px rgba(10, 17, 32, 0.35);

	display: flex;

	flex-direction: column;

}



/* Regional Filters */

.optionz-map-filter-bar {

	display: flex;

	gap: 8px;

	flex-wrap: wrap;

	margin-bottom: 14px;

	z-index: 10;

}



.optionz-filter-chip {

	background: rgba(255, 255, 255, 0.08);

	border: 1px solid rgba(255, 255, 255, 0.15);

	color: #cbd5e1;

	font-size: 12.5px;

	font-weight: 700;

	padding: 5px 14px;

	border-radius: 20px;

	cursor: pointer;

	transition: all 0.2s ease;

}



.optionz-filter-chip:hover,

.optionz-filter-chip.active {

	background: #f39200;

	color: #0d1b2a;

	border-color: #f39200;

	font-weight: 800;

}



/* SVG Map Canvas */

.optionz-svg-map-wrapper {

	position: relative;

	width: 100%;

	flex: 1;

	min-height: 480px;

}



.optionz-arab-svg {

	width: 100%;

	height: 100%;

	display: block;

}



/* Country Paths */

.map-land {

	fill: #16253b;

	stroke: #253952;

	stroke-width: 1;

	transition: all 0.3s ease;

}



.map-land-active {

	fill: #1b3558;

	stroke: #f39200;

	stroke-width: 1.5;

	cursor: pointer;

	transition: all 0.25s ease;

	filter: drop-shadow(0 0 6px rgba(243, 146, 0, 0.2));

}



.map-land-active:hover,

.map-land-active.highlighted {

	fill: #264b7c;

	stroke: #ffaa33;

	stroke-width: 2.5;

	filter: drop-shadow(0 0 16px rgba(243, 146, 0, 0.6));

}



/* Water labels */

.water-label {

	fill: #38bdf8;

	opacity: 0.35;

	font-size: 11px;

	font-weight: 700;

	letter-spacing: 1px;

	pointer-events: none;

}



/* Flight / Expansion Lines */

.expansion-line {

	fill: none;

	stroke: rgba(243, 146, 0, 0.45);

	stroke-width: 1.5;

	stroke-dasharray: 4, 5;

	animation: optionzFlowPulse 25s linear infinite;

}



@keyframes optionzFlowPulse {

	to { stroke-dashoffset: -200; }

}



/* Map Markers (Hotspots) */

.map-marker-group {

	cursor: pointer;

}



.map-marker-group circle,

.map-marker-group rect {

	transition: all 0.25s ease;

}



.map-marker-group:hover circle:nth-child(2),

.map-marker-group.active circle:nth-child(2) {

	stroke-width: 3.5px;

	filter: drop-shadow(0 0 10px #ffaa33);

}



.map-marker-group:hover rect,

.map-marker-group.active rect {

	stroke-width: 2.5px;

	stroke: #ffaa33;

	filter: drop-shadow(0 0 8px rgba(243, 146, 0, 0.8));

}



.marker-pulse {

	animation: optionzMarkerRadar 2.4s infinite cubic-bezier(0.4, 0, 0.6, 1);

	transform-origin: center;

}



@keyframes optionzMarkerRadar {

	0% { r: 6; opacity: 0.9; }

	50% { r: 18; opacity: 0.3; }

	100% { r: 24; opacity: 0; }

}



/* Spotlight Card (HUD) */

.optionz-spotlight-card {

	background: linear-gradient(145deg, #101c30 0%, #0d1726 100%);

	border: 1.5px solid rgba(243, 146, 0, 0.35);

	border-radius: 24px;

	padding: 26px 22px;

	color: #ffffff;

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);

	position: relative;

	overflow: hidden;

}



.optionz-spotlight-card::before {

	content: '';

	position: absolute;

	top: -50px;

	right: -50px;

	width: 140px;

	height: 140px;

	background: radial-gradient(circle, rgba(243, 146, 0, 0.2) 0%, transparent 70%);

	pointer-events: none;

}



.spotlight-header-badge {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	background: rgba(243, 146, 0, 0.15);

	color: #f39200;

	font-size: 12px;

	font-weight: 800;

	padding: 4px 12px;

	border-radius: 20px;

	align-self: flex-start;

	margin-bottom: 16px;

	border: 1px solid rgba(243, 146, 0, 0.3);

}



.spotlight-country-flex {

	display: flex;

	align-items: center;

	gap: 14px;

	margin-bottom: 18px;

}



.spotlight-flag-box {

	width: 60px;

	height: 42px;

	border-radius: 10px;

	overflow: hidden;

	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);

	border: 1px solid rgba(255, 255, 255, 0.2);

	flex-shrink: 0;

}



.spotlight-flag-box img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	display: block;

}



.spotlight-title h3 {

	font-size: 20px;

	font-weight: 900;

	color: #ffffff;

	margin: 0 0 2px 0;

}



.spotlight-title span {

	font-size: 12.5px;

	color: #94a3b8;

	font-weight: 600;

}



.spotlight-count-display {

	background: rgba(255, 255, 255, 0.04);

	border: 1px solid rgba(255, 255, 255, 0.08);

	border-radius: 16px;

	padding: 16px;

	margin-bottom: 18px;

	display: flex;

	justify-content: space-between;

	align-items: center;

}



.spotlight-big-num {

	font-size: 36px;

	font-weight: 900;

	color: #f39200;

	line-height: 1;

}



.spotlight-num-label {

	font-size: 13px;

	color: #cbd5e1;

	font-weight: 700;

}



.spotlight-share-bar-wrap {

	text-align: left;

}



.spotlight-share-num {

	font-size: 15px;

	font-weight: 800;

	color: #4ade80;

}



.spotlight-role-box {

	background: rgba(243, 146, 0, 0.08);

	border-right: 3px solid #f39200;

	padding: 12px 14px;

	border-radius: 8px;

	font-size: 13.5px;

	color: #e2e8f0;

	line-height: 1.55;

	margin-bottom: 22px;

}



[dir="ltr"] .spotlight-role-box {

	border-right: none;

	border-left: 3px solid #f39200;

}



.spotlight-cta-btn {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	gap: 8px;

	background: linear-gradient(135deg, #f39200 0%, #e07d00 100%);

	color: #0d1b2a !important;

	font-weight: 800;

	font-size: 13.5px;

	white-space: nowrap;

	padding: 11px 16px;

	border-radius: 12px;

	text-decoration: none;

	box-shadow: 0 8px 20px rgba(243, 146, 0, 0.35);

	transition: all 0.25s ease;

	border: none;

	cursor: pointer;

	width: 100%;

}



.spotlight-cta-btn:hover {

	transform: translateY(-2px);

	box-shadow: 0 12px 28px rgba(243, 146, 0, 0.5);

	background: linear-gradient(135deg, #ffaa33 0%, #f39200 100%);

	color: #0d1b2a !important;

}



.optionz-countries-grid-wrapper {

	transition: opacity 0.3s ease;

}



.optionz-countries-grid {

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

	gap: 16px;

	margin-bottom: 40px;

}



.optionz-country-card {

	background: #ffffff;

	border: 1.5px solid #f1f5f9;

	border-radius: 12px;

	padding: 16px 16px 18px;

	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);

	transition: all 0.25s ease;

	display: flex;

	flex-direction: column;

}



.optionz-country-card:hover {

	border-color: #fed7aa;

	background: #fffdfa;

	transform: translateY(-2px);

}



.optionz-country-header {

	display: flex;

	justify-content: space-between;

	align-items: center;

	margin-bottom: 8px;

}



.optionz-country-flag-wrap {

	display: inline-flex;

	align-items: center;

	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

	border-radius: 4px;

	overflow: hidden;

	line-height: 1;

}



.optionz-country-flag-img {

	width: 32px;

	height: 22px;

	object-fit: cover;

	display: block;

}



.optionz-country-flag {

	font-size: 26px;

}



.optionz-country-count {

	font-size: 18px;

	font-weight: 900;

	color: #f39200;

}



.optionz-country-count small {

	font-size: 11px;

	color: #64748b;

	font-weight: 600;

}



.optionz-country-name {

	font-size: 15px;

	font-weight: 800;

	color: #1e293b;

	margin-bottom: 4px;

}



.optionz-country-role {

	font-size: 12.5px;

	line-height: 1.5;

	color: #64748b;

	margin-bottom: 14px;

	min-height: 22px;

	overflow: visible;

}



.optionz-country-progress {

	height: 6px;

	background: #e2e8f0;

	border-radius: 3px;

	overflow: hidden;

	margin-top: auto;

}



.optionz-country-bar {

	height: 100%;

	background: linear-gradient(90deg, #f39200, #d97706);

	border-radius: 3px;

}



.optionz-map-cta-lead {

	font-size: 17px;

	font-weight: 800;

	color: #1e293b;

	margin-bottom: 16px;

}



/* ---------------------------------------------------------

   Component C: 3D Perspective Book Showcase

   --------------------------------------------------------- */

.optionz-book-section {

	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);

	border-top: 1px solid #e2e8f0;

	overflow: hidden;

	padding: 60px 0 80px;

}



.optionz-book-header {

	text-align: center;

	max-width: 820px;

	margin: 0 auto 40px;

}



.optionz-book-main-title {

	font-size: 34px;

	font-weight: 800;

	color: #0f172a;

	margin: 14px 0 10px;

}



.optionz-book-main-subtitle {

	font-size: 16px;

	color: #64748b;

	line-height: 1.7;

	margin-bottom: 22px;

}



.optionz-book-tabs {

	display: flex;

	justify-content: center;

	align-items: center;

	gap: 12px;

	flex-wrap: wrap;

	margin-top: 18px;

}



.optionz-book-tab-btn {

	display: inline-flex;

	align-items: center;

	gap: 8px;

	padding: 10px 24px;

	border-radius: 50px;

	border: 1.5px solid #e2e8f0;

	background: #ffffff;

	color: #334155;

	font-size: 14px;

	font-weight: 700;

	cursor: pointer;

	transition: all 0.25s ease;

	font-family: inherit;

	box-shadow: 0 2px 6px rgba(0,0,0,0.04);

}



.optionz-book-tab-btn:hover {

	border-color: #E99809;

	color: #E99809;

	transform: translateY(-2px);

}



.optionz-book-tab-btn.active {

	background: linear-gradient(135deg, #E99809 0%, #d68200 100%);

	border-color: #E99809;

	color: #ffffff;

	box-shadow: 0 4px 15px rgba(233,152,9,0.35);

}



.optionz-book-layout {

	display: grid;

	grid-template-columns: 1fr 1.2fr;

	gap: 50px;

	align-items: center;

}



.optionz-book-stage {

	display: flex;

	flex-direction: column;

	align-items: center;

	justify-content: center;

	perspective: 1200px;

	padding: 40px 10px;

}



.optionz-book-3d-wrap {

	position: relative;

	width: 280px;

	height: 400px;

	cursor: grab;

}



.optionz-book-3d-card {

	width: 100%;

	height: 100%;

	position: relative;

	transform-style: preserve-3d;

	transform: rotateY(-20deg) rotateX(10deg);

	transition: transform 0.15s ease-out;

	border-radius: 6px 16px 16px 6px;

	box-shadow: -15px 25px 40px rgba(0, 0, 0, 0.25);

}



.optionz-book-cover-img {

	width: 100%;

	height: 100%;

	object-fit: cover;

	border-radius: 6px 16px 16px 6px;

	display: block;

}



.optionz-book-spine-effect {

	position: absolute;

	top: 0;

	left: 0;

	width: 24px;

	height: 100%;

	background: linear-gradient(90deg, rgba(255,255,255,0.4) 0%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 100%);

	pointer-events: none;

	border-radius: 6px 0 0 6px;

}



.optionz-book-shadow {

	position: absolute;

	bottom: -30px;

	left: 5%;

	width: 90%;

	height: 25px;

	background: radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 70%);

	border-radius: 50%;

}



.optionz-book-hint {

	margin-top: 24px;

	font-size: 13px;

	color: #64748b;

	font-weight: 600;

}



.optionz-book-title {

	font-size: 34px;

	font-weight: 900;

	color: #0f172a;

	margin-bottom: 6px;

}



.optionz-book-author {

	font-size: 15px;

	font-weight: 700;

	color: #d97706;

	margin-bottom: 16px;

}



.optionz-book-lead {

	font-size: 16px;

	color: #475569;

	line-height: 1.7;

	margin-bottom: 24px;

}



.optionz-book-pillars {

	display: flex;

	flex-direction: column;

	gap: 14px;

	margin-bottom: 30px;

}



.optionz-pillar-item {

	display: flex;

	align-items: flex-start;

	gap: 12px;

	background: #ffffff;

	border: 1px solid #e2e8f0;

	padding: 12px 16px;

	border-radius: 10px;

}



.optionz-pillar-icon {

	font-size: 20px;

	flex-shrink: 0;

}



.optionz-pillar-text {

	font-size: 14px;

	color: #334155;

	line-height: 1.5;

}



.optionz-pillar-text strong {

	color: #0f172a;

}



.optionz-book-actions {

	display: flex;

	flex-wrap: wrap;

	gap: 14px;

}



/* ---------------------------------------------------------

   Component D: Curriculum & 4 Units Accordion

   --------------------------------------------------------- */

.optionz-curriculum-section {

	background: #ffffff;

	border-top: 1px solid #e2e8f0;

}



.optionz-badges-row-center {

	display: flex;

	justify-content: center;

	margin-bottom: 14px;

}



.optionz-icf-accredited-pill {

	display: inline-flex;

	align-items: center;

	gap: 6px;

	background: #fefce8;

	color: #854d0e;

	border: 1px solid #fef08a;

	padding: 6px 18px;

	border-radius: 30px;

	font-size: 13px;

	font-weight: 800;

}



.optionz-curriculum-title {

	font-size: 34px;

	font-weight: 900;

	color: #0f172a;

	margin-bottom: 12px;

}



.optionz-curriculum-sub {

	max-width: 780px;

	margin: 0 auto 35px;

	font-size: 16px;

	color: #64748b;

	line-height: 1.7;

}



.optionz-program-meta-bar {

	display: grid;

	grid-template-columns: repeat(4, 1fr);

	gap: 16px;

	background: #f8fafc;

	border: 1px solid #e2e8f0;

	border-radius: 16px;

	padding: 20px;

	margin-bottom: 35px;

}



.optionz-meta-item {

	display: flex;

	align-items: center;

	gap: 12px;

}



.optionz-meta-icon {

	font-size: 26px;

	background: #ffffff;

	width: 48px;

	height: 48px;

	display: flex;

	align-items: center;

	justify-content: center;

	border-radius: 12px;

	border: 1px solid #e2e8f0;

	flex-shrink: 0;

}



.optionz-meta-label {

	display: block;

	font-size: 12px;

	color: #64748b;

	font-weight: 600;

}



.optionz-meta-val {

	display: block;

	font-size: 15px;

	color: #0f172a;

	font-weight: 800;

}



.optionz-curriculum-accordion {

	display: flex;

	flex-direction: column;

	gap: 14px;

	margin-bottom: 40px;

}



.optionz-acc-item {

	background: #ffffff;

	border: 1.5px solid #e2e8f0;

	border-radius: 14px;

	overflow: hidden;

	transition: all 0.3s ease;

}



.optionz-acc-item.active {

	border-color: #f39200;

	box-shadow: 0 8px 20px rgba(243, 146, 0, 0.08);

}



.optionz-acc-header {

	padding: 18px 22px;

	display: flex;

	justify-content: space-between;

	align-items: center;

	cursor: pointer;

	background: #ffffff;

	user-select: none;

}



.optionz-acc-left {

	display: flex;

	align-items: center;

	gap: 14px;

}



.optionz-unit-num {

	display: flex;

	align-items: center;

	justify-content: center;

	width: 38px;

	height: 38px;

	border-radius: 10px;

	background: #f8fafc;

	color: #f39200;

	border: 1.5px solid rgba(243, 146, 0, 0.3);

	font-size: 15px;

	font-weight: 900;

}



.optionz-acc-item.active .optionz-unit-num {

	background: #f39200;

	color: #ffffff;

}



.optionz-acc-title {

	font-size: 17px;

	font-weight: 800;

	color: #0f172a;

	margin: 0;

}



.optionz-acc-right {

	display: flex;

	align-items: center;

	gap: 12px;

}



.optionz-unit-hours {

	background: #f1f5f9;

	color: #475569;

	padding: 4px 12px;

	border-radius: 20px;

	font-size: 12px;

	font-weight: 700;

}



.optionz-acc-chevron {

	font-size: 12px;

	color: #94a3b8;

	transition: transform 0.3s ease;

}



.optionz-acc-item.active .optionz-acc-chevron {

	transform: rotate(180deg);

	color: #f39200;

}



.optionz-acc-content {

	overflow: hidden;

	transition: max-height 0.35s ease;

	background: #fafaf9;

}



.optionz-acc-topics {

	list-style: none;

	padding: 16px 24px 20px;

	margin: 0;

	display: flex;

	flex-direction: column;

	gap: 10px;

}



.optionz-acc-topics li {

	font-size: 14px;

	color: #334155;

	display: flex;

	align-items: flex-start;

	gap: 10px;

	line-height: 1.6;

}



.optionz-topic-bullet {

	color: #10b981;

	font-weight: 800;

}



.optionz-target-outcomes-grid {

	display: grid;

	grid-template-columns: 1fr 1fr;

	gap: 24px;

	margin-bottom: 35px;

}



.optionz-info-card {

	background: #f8fafc;

	border: 1px solid #e2e8f0;

	border-radius: 14px;

	padding: 24px;

}



.optionz-card-heading {

	font-size: 18px;

	font-weight: 800;

	color: #0f172a;

	margin-bottom: 14px;

}



.optionz-check-list {

	list-style: none;

	padding: 0;

	margin: 0;

	display: flex;

	flex-direction: column;

	gap: 8px;

}



.optionz-check-list li {

	font-size: 14px;

	color: #475569;

	position: relative;

	padding-inline-start: 20px;

}



.optionz-check-list li::before {

	content: "•";

	color: #f39200;

	font-size: 20px;

	position: absolute;

	inset-inline-start: 4px;

	top: -4px;

}



.optionz-curriculum-cta-box {

	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);

	border-radius: 18px;

	padding: 35px 20px;

	color: #ffffff;

}



.optionz-cta-box-title {

	font-size: 24px;

	font-weight: 900;

	color: #ffffff;

	margin-bottom: 8px;

}



.optionz-cta-box-sub {

	font-size: 15px;

	color: #cbd5e1;

	margin-bottom: 22px;

}



.optionz-cta-buttons {

	display: flex;

	justify-content: center;

	flex-wrap: wrap;

	gap: 14px;

}



/* ---------------------------------------------------------

   Component E: Mobile Quick Action Bar (Bottom Floating)

   --------------------------------------------------------- */

.optionz-floating-quick-bar {

	display: none;

	position: fixed;

	bottom: 0;

	left: 0;

	right: 0;

	background: #ffffff;

	border-top: 1px solid #e2e8f0;

	box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.08);

	z-index: 99999;

	padding: 8px 12px;

	justify-content: space-around;

	align-items: center;

}



.optionz-bar-btn {

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 3px;

	color: #475569 !important;

	text-decoration: none !important;

	font-size: 11px;

	font-weight: 700;

}



.optionz-bar-icon {

	font-size: 20px;

}



.optionz-bar-ceo {

	color: #d97706 !important;

}



/* ---------------------------------------------------------

   Responsive Media Queries for Super UI/UX

   --------------------------------------------------------- */

@media (max-width: 992px) {

	.optionz-book-layout {

		grid-template-columns: 1fr;

		gap: 30px;

	}

	.optionz-program-meta-bar {

		grid-template-columns: 1fr 1fr;

	}

	.optionz-map-stats-strip {

		grid-template-columns: 1fr 1fr;

	}

	.optionz-target-outcomes-grid {

		grid-template-columns: 1fr;

	}

	.optionz-modal-body {

		grid-template-columns: 1fr;

	}

}



@media (max-width: 768px) {

	.optionz-floating-quick-bar {

		display: flex;

	}

	body {

		padding-bottom: 65px;

	}

	.optionz-badges-grid {

		grid-template-columns: repeat(2, 1fr);

		gap: 12px;

	}

	.optionz-program-meta-bar {

		grid-template-columns: 1fr;

	}

	.optionz-countries-grid {

		grid-template-columns: 1fr;

	}

	.optionz-coaches-title,

	.optionz-map-title,

	.optionz-book-title,

	.optionz-curriculum-title {

		font-size: 26px;

	}

	.optionz-book-3d-wrap {

		width: 220px;

		height: 320px;

	}

}



/* =========================================================

   UI Polish: Unblock Sarah AI Chatbot & Clean Hero Photography

   ========================================================= */

/* 1. Hide redundant floating language switcher (official switcher is in top navbar) */

#optionz-lang-toggle,

.optionz-floating-switcher {

	display: none !important;

}



/* 2. Hide ugly legacy hero Level 1 badge floating card */

.elementor-element-e3f69eb,

.elementor-element-2f1c3c2 {

	display: none !important;

}



/* 3. Hide Dummy Followers in Footer (Image 1) */

footer .desc-icon-box,

footer .desc-content:has(.icon-box-link),

footer .icon-box-link[href="#"],

.thim-widget-icon-box .desc-icon-box {

	display: none !important;

}



/* 3.1 Completely Hide Newsletter Row / Subscribe Section (Image Request) */

.elementor-element-3f5982f,

.footer_newsletter,

div:has(> .elementor-element-3f5982f) {

	display: none !important;

	visibility: hidden !important;

	height: 0 !important;

	padding: 0 !important;

	margin: 0 !important;

	overflow: hidden !important;

	opacity: 0 !important;

	pointer-events: none !important;

}



/* 3.2 TikTok Footer Widget */

.optionz-tiktok-widget {

	margin-top: 10px !important;

}

.optionz-tiktok-widget svg {

	width: 20px !important;

	height: 20px !important;

	fill: #000000 !important;

	transition: transform 0.25s ease !important;

}

.optionz-tiktok-widget a:hover svg {

	transform: scale(1.15) !important;

}



/* 4. Program Tabs ICF Badge Icons Sizing & Centering (Image 23) */

.elementor-tabs-wrapper .elementor-tab-title img,

.elementor-tab-desktop-title img,

.course-feature-tab img,

.thim-ekits-course-tabs img,

.elementor-element-7493846 img {

	transition: transform 0.25s ease;

}

.elementor-tabs-wrapper .elementor-tab-title img,

.elementor-tab-desktop-title img {

	width: 44px !important;

	height: 44px !important;

	min-width: 44px !important;

	max-width: 48px !important;

	object-fit: contain !important;

	display: inline-block !important;

}



/* 5. Hide Stock / Unrelated Photos in Gallery (Image 9) */

.gallery-wrapper img[src*="blog-01"],

.gallery-wrapper img[src*="blog-02"],

.gallery-wrapper img[src*="blog-03"],

.gallery-wrapper img[src*="blog-04"],

.gallery-wrapper img[src*="blog-05"],

.gallery-wrapper img[src*="blog-07"],

.gallery-item:has(img[src*="blog-"]),

.elementor-gallery-item:has(img[src*="blog-"]) {

	display: none !important;

}



/* 6. Hide Demo Student Profiles under Our Team (Image 12) */

.item-instructor:has(:contains("Optionz Demo Student")),

.item-instructor:has(:contains("الدارس النموذجي")),

.instructor-item:has(:contains("الدارس النموذجي")),

.elementor-widget-thim-ekits-instructors:has(:contains("الدارس النموذجي")) {

	display: none !important;

}



/* 7. Hide Unapproved Partner Logos Marked with X (Feedback Image 22: Ministry of Finance, Ebdaa Bank, Fatima Ansari) */

.elementor-element-7493846 [data-id="b998e3b"],

.elementor-element-7493846 [data-id="7de6b48"],

.elementor-element-7493846 [data-id="77fec6b"],

.elementor-element-7493846 img[src*="image-a009"],

.elementor-element-7493846 img[src*="image-a015"],

.elementor-element-7493846 img[src*="image-a017"],

.elementor-element-7493846 .e-con-inner > .e-con[data-id="b998e3b"],

.elementor-element-7493846 .e-con-inner > .e-con[data-id="7de6b48"],

.elementor-element-7493846 .e-con-inner > .e-con[data-id="77fec6b"] {

	display: none !important;

	visibility: hidden !important;

	width: 0 !important;

	height: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

}



/* 8. Ribbon Under Hero Official ICF Badge Icons (Enlarged to 115px) */

.elementor-element-ccd6fb8 .elementor-icon-box-icon {

	margin-left: 22px !important;

	margin-right: 0 !important;

	display: flex !important;

	align-items: center !important;

}

html[dir="ltr"] .elementor-element-ccd6fb8 .elementor-icon-box-icon {

	margin-left: 0 !important;

	margin-right: 22px !important;

}

.elementor-element-ccd6fb8 .elementor-icon-box-icon .elementor-icon {

	width: 115px !important;

	height: 115px !important;

	min-width: 115px !important;

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	background: transparent !important;

}

.elementor-element-ccd6fb8 .optionz-ribbon-badge-img {

	width: 115px !important;

	height: 115px !important;

	min-width: 115px !important;

	max-width: 115px !important;

	object-fit: contain !important;

	display: inline-block !important;

	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.16));

	transition: transform 0.25s ease;

}

.elementor-element-ccd6fb8 .elementor-widget-icon-box:hover .optionz-ribbon-badge-img {

	transform: scale(1.08);

}

@media (max-width: 767px) {

	.elementor-element-ccd6fb8 .elementor-icon-box-icon .elementor-icon,

	.elementor-element-ccd6fb8 .optionz-ribbon-badge-img {

		width: 80px !important;

		height: 80px !important;

		min-width: 80px !important;

		max-width: 80px !important;

	}

}



/* 9. Course Cards Super UI/UX Redesign */

/* Unconditionally hide the clunky default overlapping category banner that covered the round badge */

.elementor-element-1b37f25,

div[data-id="1b37f25"],

.elementor-widget-heading[data-id="1b37f25"],

.elementor-element-65268bf > .elementor-widget-heading,

.elementor-element-65268bf > .elementor-element-1b37f25 {

	display: none !important;

	visibility: hidden !important;

	opacity: 0 !important;

	pointer-events: none !important;

	height: 0 !important;

	width: 0 !important;

	margin: 0 !important;

	padding: 0 !important;

	border: none !important;

	background: transparent !important;

	backdrop-filter: none !important;

	-webkit-backdrop-filter: none !important;

	overflow: hidden !important;

}



/* Remove old injected unstyled hours row */

.optionz-hours-badge-row {

	display: none !important;

}



/* Card Outer Box Luxury Styling */

[data-thim-ekit-loop-item-type="lp_course"] .elementor-element-5248f03,

.elementor-22044 .elementor-element-5248f03 {

	border-radius: 20px !important;

	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;

	border: 1px solid #edf2f7 !important;

	background: #ffffff !important;

	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

	overflow: hidden !important;

}

[data-thim-ekit-loop-item-type="lp_course"]:hover .elementor-element-5248f03,

.elementor-22044:hover .elementor-element-5248f03 {

	transform: translateY(-8px) !important;

	box-shadow: 0 20px 40px rgba(48, 57, 149, 0.12) !important;

	border-color: #cbd5e1 !important;

}



/* Image Wrapper Positioning for Floating Pill */

.elementor-element-1d01d2c,

.elementor-element-65268bf {

	position: relative !important;

	display: flex !important;

	justify-content: center !important;

	align-items: center !important;

	padding-top: 14px !important;

	padding-bottom: 8px !important;

}

.elementor-element-1d01d2c img {

	max-height: 185px !important;

	width: auto !important;

	object-fit: contain !important;

	transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

}

[data-thim-ekit-loop-item-type="lp_course"]:hover .elementor-element-1d01d2c img {

	transform: scale(1.05) !important;

}



/* Super Category Floating Pill */

.optionz-super-cat-pill {

	position: absolute !important;

	top: 14px !important;

	right: 14px !important;

	z-index: 10 !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	padding: 6px 14px !important;

	border-radius: 20px !important;

	letter-spacing: 0.5px !important;

	display: inline-flex !important;

	align-items: center !important;

	gap: 6px !important;

	backdrop-filter: blur(8px) !important;

	transition: transform 0.25s ease, box-shadow 0.25s ease !important;

}

html[dir="ltr"] .optionz-super-cat-pill {

	right: auto !important;

	left: 14px !important;

}

.optionz-super-cat-pill.optionz-pill-l1 {

	background: linear-gradient(135deg, #1e3a8a, #2563eb) !important;

	color: #ffffff !important;

	box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;

	border: 1px solid rgba(255, 255, 255, 0.25) !important;

}

.optionz-super-cat-pill.optionz-pill-l2 {

	background: linear-gradient(135deg, #0f766e, #0d9488) !important;

	color: #ffffff !important;

	box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35) !important;

	border: 1px solid rgba(255, 255, 255, 0.25) !important;

}

.optionz-super-cat-pill.optionz-pill-cce {

	background: linear-gradient(135deg, #4338ca, #6366f1) !important;

	color: #ffffff !important;

	box-shadow: 0 4px 14px rgba(99, 102, 241, 0.35) !important;

	border: 1px solid rgba(255, 255, 255, 0.25) !important;

}

[data-thim-ekit-loop-item-type="lp_course"]:hover .optionz-super-cat-pill {

	transform: scale(1.06) !important;

}



/* Feature Chips Row (Hours & Mentoring) */

.optionz-super-features-row {

	display: flex !important;

	justify-content: center !important;

	align-items: center !important;

	gap: 8px !important;

	flex-wrap: wrap !important;

	margin: 12px 0 8px 0 !important;

}

.optionz-super-chip {

	background: #f8fafc !important;

	border: 1px solid #e2e8f0 !important;

	color: #334155 !important;

	font-size: 13px !important;

	font-weight: 600 !important;

	padding: 5px 11px !important;

	border-radius: 8px !important;

	display: inline-flex !important;

	align-items: center !important;

	gap: 5px !important;

	transition: background 0.2s ease, border-color 0.2s ease !important;

}

[data-thim-ekit-loop-item-type="lp_course"]:hover .optionz-super-chip {

	background: #f1f5f9 !important;

	border-color: #cbd5e1 !important;

}



/* Meta Footer Section */

.elementor-element-ed481e7 {

	border-top: 1px solid #f1f5f9 !important;

	padding-top: 14px !important;

	margin-top: 12px !important;

	width: 100% !important;

}

.elementor-element-ed481e7 .elementor-icon-list-items {

	display: flex !important;

	justify-content: space-between !important;

	align-items: center !important;

	width: 100% !important;

}

.elementor-element-ed481e7 .elementor-icon-list-item {

	font-size: 14px !important;

	font-weight: 600 !important;

	color: #64748b !important;

}



/* ==========================================================================

   Level 1 & Level 2 Roadmap Timeline Super UI/UX Styling

   ========================================================================== */

.optionz-timeline-wrapper .timeline-card .timeline-text p:not(.timeline-duration) {

	display: none !important;

}



.optionz-timeline-wrapper {

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

}



.optionz-timeline-wrapper .section-title {

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 32px !important;

	font-weight: 900 !important;

	color: #0f172a !important;

	border-bottom: 3.5px solid #E99809 !important;

	padding-bottom: 12px !important;

	display: inline-block !important;

	letter-spacing: -0.3px !important;

}



.optionz-timeline-wrapper .timeline-card {

	background: #ffffff !important;

	border-radius: 20px !important;

	overflow: hidden !important;

	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06) !important;

	border: 1px solid #e2e8f0 !important;

	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.optionz-timeline-wrapper .timeline-row.active .timeline-card:hover {

	transform: translateY(-4px) !important;

	box-shadow: 0 18px 45px rgba(233, 152, 9, 0.12) !important;

	border-color: rgba(233, 152, 9, 0.35) !important;

}



.optionz-timeline-wrapper .timeline-text {

	padding: 22px 24px !important;

	display: flex !important;

	flex-direction: column !important;

	justify-content: center !important;

	align-items: flex-start !important;

}



[dir="rtl"] .optionz-timeline-wrapper .timeline-text {

	align-items: flex-start !important;

	text-align: right !important;

}



.optionz-timeline-wrapper .timeline-text h3 {

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 21px !important;

	font-weight: 800 !important;

	color: #0f172a !important;

	margin: 0 0 8px 0 !important;

	line-height: 1.35 !important;

}



.optionz-timeline-wrapper .timeline-duration {

	display: inline-flex !important;

	align-items: center !important;

	gap: 6px !important;

	background: linear-gradient(135deg, rgba(233, 152, 9, 0.12) 0%, rgba(233, 152, 9, 0.04) 100%) !important;

	border: 1px solid rgba(233, 152, 9, 0.35) !important;

	color: #d97706 !important;

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 13.5px !important;

	font-weight: 800 !important;

	padding: 5px 14px !important;

	border-radius: 20px !important;

	margin: 4px 0 0 0 !important;

	box-shadow: 0 2px 8px rgba(233, 152, 9, 0.1) !important;

}



.optionz-timeline-wrapper .timeline-side-title {

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 20px !important;

	font-weight: 800 !important;

	color: #1e293b !important;

	background: #ffffff !important;

	padding: 10px 22px !important;

	border-radius: 14px !important;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;

	border: 1px solid #e2e8f0 !important;

	display: inline-block !important;

	transition: all 0.35s ease !important;

}



.optionz-timeline-wrapper .timeline-row.active .timeline-side-title {

	border-color: rgba(233, 152, 9, 0.45) !important;

	color: #0f172a !important;

	box-shadow: 0 8px 24px rgba(233, 152, 9, 0.12) !important;

}



.optionz-timeline-wrapper .timeline-row.active .timeline-dot {

	background-color: #E99809 !important;

	border-color: #d97706 !important;

	box-shadow: 0 0 16px rgba(233, 152, 9, 0.6) !important;

}



.optionz-timeline-wrapper .timeline-fill-line {

	background: linear-gradient(to bottom, #E99809, #2563eb) !important;

}



/* ---------------------------------------------------------

   Optionz Coaching: Team Section, Coach Cards & Golden Strip (Super UI/UX)

   --------------------------------------------------------- */

/* 1. Hide subtitle 'فريق المدربين' as instructed */

[data-interaction-id="d362113"],

.tp-subtitle,

.elementor-element-b747e56 .tp-subtitle,

.tp-box-heading .tp-subtitle {

	display: none !important;

}



/* 2. Remove legacy course/student stats and portfolio link from any instructor cards */

.instructor-count-students,

.instructor-count-courses,

.instructor-view-profile,

.instructor-item .students,

.instructor-item .courses,

.instructor-item .optionz-card-btn-wrap {

	display: none !important;

}



/* 3. Luxury Coach Cards Layout - prevent squishing into 87px slivers */

.thim-carousel-list-instructors,

.thim-carousel-list-instructors.optionz-instructors-grid-active {

	display: flex !important;

	flex-direction: row !important;

	flex-wrap: wrap !important;

	justify-content: center !important;

	align-items: stretch !important;

	gap: 24px !important;

	width: 100% !important;

	max-width: 1280px !important;

	margin: 0 auto !important;

	overflow: visible !important;

}

.thim-carousel-list-instructors .owl-stage-outer,

.thim-carousel-list-instructors .owl-stage {

	display: flex !important;

	flex-direction: row !important;

	flex-wrap: wrap !important;

	justify-content: center !important;

	align-items: stretch !important;

	gap: 24px !important;

	width: 100% !important;

	transform: none !important;

	overflow: visible !important;

}

.thim-carousel-list-instructors .owl-item.cloned {

	display: none !important;

	width: 0 !important;

	min-width: 0 !important;

	max-width: 0 !important;

	height: 0 !important;

	padding: 0 !important;

	margin: 0 !important;

	flex: 0 0 0 !important;

	overflow: hidden !important;

	visibility: hidden !important;

}

.thim-carousel-list-instructors .owl-item:not(.cloned),

.thim-carousel-list-instructors .instructor-item {

	width: 270px;

	min-width: 200px;

	max-width: 280px;

	flex: 0 0 270px;

	flex-shrink: 0 !important;

	float: none !important;

	margin: 0 !important;

	display: block !important;

	box-sizing: border-box !important;

}

@media (min-width: 1100px) {

	.thim-carousel-list-instructors,

	.thim-carousel-list-instructors.optionz-instructors-grid-active,

	.thim-carousel-list-instructors .owl-stage {

		flex-wrap: nowrap !important;

		justify-content: center !important;

		gap: 16px !important;

	}

	.thim-carousel-list-instructors .owl-item:not(.cloned),

	.thim-carousel-list-instructors .instructor-item {

		width: calc(20% - 13px) !important;

		min-width: 200px !important;

		max-width: 235px !important;

		flex: 0 0 calc(20% - 13px) !important;

	}

}

.thim-carousel-list-instructors .owl-nav,

.thim-carousel-list-instructors .owl-dots {

	display: none !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .wrap-item {

	border-radius: 20px !important;

	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04) !important;

	border: 1px solid rgba(226, 232, 240, 0.9) !important;

	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

	background: #ffffff !important;

	padding-bottom: 24px !important;

	text-align: center !important;

	cursor: pointer !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card:hover .wrap-item {

	transform: translateY(-6px) !important;

	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(233, 152, 9, 0.15) !important;

	border-color: rgba(233, 152, 9, 0.4) !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .avatar_item {

	padding-top: 25px !important;

	display: flex !important;

	justify-content: center !important;

	align-items: center !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .avatar_item img {

	width: 135px !important;

	height: 135px !important;

	border-radius: 50% !important;

	object-fit: cover !important;

	border: 3.5px solid #ffffff !important;

	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 2px #E99809 !important;

	transition: transform 0.35s ease !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card:hover .avatar_item img {

	transform: scale(1.05) !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .name {

	margin-top: 14px !important;

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 19px !important;

	font-weight: 800 !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .name a {

	color: #0f172a !important;

	text-decoration: none !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .optionz-badge-pcc {

	display: inline-block !important;

	background: #fffbeb !important;

	color: #b45309 !important;

	border: 1px solid #fde68a !important;

	font-size: 12px !important;

	font-weight: 800 !important;

	padding: 3px 12px !important;

	border-radius: 20px !important;

	margin-top: 12px !important;

}

.thim-carousel-list-instructors .instructor-item.optionz-instructor-card .optionz-coach-join-year {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 6px !important;

	font-size: 13px !important;

	font-weight: 700 !important;

	color: #475569 !important;

	margin: 8px 0 10px 0 !important;

	background: #f8fafc !important;

	padding: 4px 14px !important;

	border-radius: 50px !important;

	border: 1px solid #e2e8f0 !important;

}



/* 4. Interactive Students Trigger Button */

.optionz-students-modal-btn {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 10px !important;

	background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;

	color: #ffffff !important;

	padding: 12px 28px !important;

	border-radius: 50px !important;

	font-family: 'Cairo', 'Tajawal', sans-serif !important;

	font-size: 15px !important;

	font-weight: 800 !important;

	border: 1.5px solid #E99809 !important;

	box-shadow: 0 8px 24px rgba(233, 152, 9, 0.22) !important;

	cursor: pointer !important;

	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

	text-decoration: none !important;

}

.optionz-students-modal-btn:hover {

	transform: translateY(-3px) scale(1.02) !important;

	box-shadow: 0 14px 30px rgba(233, 152, 9, 0.35) !important;

	background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;

	color: #ffffff !important;

}



/* 5. Golden Counter Ribbon Official Badge Images */

.optionz-counter-badge-img {

	width: 58px !important;

	height: 58px !important;

	object-fit: contain !important;

	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18)) !important;

	margin-bottom: 6px !important;

	display: inline-block !important;

	transition: transform 0.3s ease !important;

}

.elementor-widget-icon-box:hover .optionz-counter-badge-img {

	transform: scale(1.12) rotate(-3deg) !important;

}



/* ==========================================================================

   High-Contrast Optionz Brand Buttons & Lesson Navigation

   ========================================================================== */

.optionz-scorm-container button.optionz-ctrl-btn,

button.optionz-ctrl-btn,

#optionz-btn-fullscreen,

#optionz-btn-restart {

	background: #0f172a !important;

	border: 1.5px solid #E99809 !important;

	color: #ffffff !important;

	padding: 9px 20px !important;

	border-radius: 8px !important;

	cursor: pointer !important;

	display: inline-flex !important;

	align-items: center !important;

	gap: 8px !important;

	font-size: 14px !important;

	font-weight: 700 !important;

	text-decoration: none !important;

	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;

	transition: all 0.25s ease !important;

}

.optionz-scorm-container button.optionz-ctrl-btn .dashicons,

#optionz-btn-fullscreen .dashicons,

#optionz-btn-restart .dashicons {

	color: #E99809 !important;

	font-size: 17px !important;

	width: 17px !important;

	height: 17px !important;

	line-height: 17px !important;

}

.optionz-scorm-container button.optionz-ctrl-btn .btn-text,

#optionz-btn-fullscreen .btn-text {

	color: #ffffff !important;

	font-weight: 700 !important;

}

.optionz-scorm-container button.optionz-ctrl-btn:hover,

#optionz-btn-fullscreen:hover,

#optionz-btn-restart:hover {

	background: #E99809 !important;

	border-color: #E99809 !important;

	color: #0f172a !important;

	box-shadow: 0 6px 20px rgba(233, 152, 9, 0.45) !important;

	transform: translateY(-2px) !important;

}

.optionz-scorm-container button.optionz-ctrl-btn:hover .dashicons,

.optionz-scorm-container button.optionz-ctrl-btn:hover .btn-text,

#optionz-btn-fullscreen:hover .dashicons,

#optionz-btn-fullscreen:hover .btn-text,

#optionz-btn-restart:hover .dashicons {

	color: #0f172a !important;

}



/* Inactive Tabs */

.optionz-scorm-container button.optionz-tab-btn,

button.optionz-tab-btn {

	background: #0f1e33 !important;

	border: 1px solid rgba(255, 255, 255, 0.14) !important;

	border-bottom: 3px solid transparent !important;

	color: #f1f5f9 !important;

	padding: 11px 22px !important;

	border-radius: 8px 8px 0 0 !important;

	cursor: pointer !important;

	font-size: 14px !important;

	font-weight: 700 !important;

	display: inline-flex !important;

	align-items: center !important;

	gap: 8px !important;

	white-space: nowrap !important;

	transition: all 0.2s ease !important;

}

.optionz-scorm-container button.optionz-tab-btn .dashicons {

	color: #94a3b8 !important;

}

.optionz-scorm-container button.optionz-tab-btn .tab-label {

	color: #f1f5f9 !important;

}

.optionz-scorm-container button.optionz-tab-btn:hover {

	background: #1e3352 !important;

	color: #ffffff !important;

	border-color: rgba(233, 152, 9, 0.5) !important;

}

.optionz-scorm-container button.optionz-tab-btn:hover .dashicons,

.optionz-scorm-container button.optionz-tab-btn:hover .tab-label {

	color: #ffffff !important;

}



/* Active Tab */

.optionz-scorm-container button.optionz-tab-btn.active,

button.optionz-tab-btn.active {

	background: #172a45 !important;

	color: #fbbf24 !important;

	border: 1px solid #E99809 !important;

	border-bottom: 3px solid #E99809 !important;

	box-shadow: 0 -2px 14px rgba(233, 152, 9, 0.20) !important;

}

.optionz-scorm-container button.optionz-tab-btn.active .dashicons,

.optionz-scorm-container button.optionz-tab-btn.active .tab-label {

	color: #fbbf24 !important;

	font-weight: 800 !important;

}



/* Course Bottom Navigation & Action Buttons */

.course-item-nav {

	display: flex !important;

	align-items: center !important;

	justify-content: space-between !important;

	margin-top: 35px !important;

	padding: 16px 24px !important;

	background: #ffffff !important;

	border: 1px solid #e2e8f0 !important;

	border-radius: 12px !important;

	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;

	position: relative !important;

	z-index: 10 !important;

}

.course-item-nav .prev,

.course-item-nav .next {

	display: flex !important;

	flex-direction: column !important;

}

.course-item-nav .course-item-nav__name {

	font-size: 13px !important;

	font-weight: 600 !important;

	color: #64748b !important;

	margin-bottom: 6px !important;

}

.course-item-nav a {

	display: inline-flex !important;

	align-items: center !important;

	justify-content: center !important;

	gap: 8px !important;

	padding: 9px 22px !important;

	border-radius: 8px !important;

	font-weight: 700 !important;

	font-size: 14px !important;

	text-decoration: none !important;

	transition: all 0.25s ease !important;

}

.course-item-nav .prev a {

	background: #0f172a !important;

	color: #ffffff !important;

	border: 1.5px solid #0f172a !important;

}

.course-item-nav .prev a:hover {

	background: #1e293b !important;

	border-color: #1e293b !important;

	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.25) !important;

	transform: translateY(-2px) !important;

}

.course-item-nav .next a {

	background: #E99809 !important;

	color: #ffffff !important;

	border: 1.5px solid #E99809 !important;

}

.course-item-nav .next a:hover {

	background: #d97706 !important;

	border-color: #d97706 !important;

	box-shadow: 0 4px 14px rgba(233, 152, 9, 0.35) !important;

	transform: translateY(-2px) !important;

}



/* Complete Lesson Button */

.lp-button.button-complete-lesson,

button.button-complete-lesson,

.lp-btn-complete-item {

	background: linear-gradient(135deg, #0d1b2a 0%, #1e293b 100%) !important;

	border: 2px solid #E99809 !important;

	color: #ffffff !important;

	padding: 11px 26px !important;

	border-radius: 8px !important;

	font-size: 14px !important;

	font-weight: 700 !important;

	cursor: pointer !important;

	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;

	transition: all 0.25s ease !important;

}

.lp-button.button-complete-lesson:hover,

button.button-complete-lesson:hover,

.lp-btn-complete-item:hover {

	background: #E99809 !important;

	color: #0d1b2a !important;

	border-color: #E99809 !important;

	box-shadow: 0 6px 20px rgba(233, 152, 9, 0.40) !important;

}



/* Sara AI widget position on lesson popup */

body.course-item-popup .optionz-sara-widget,

body.single-lp_course .optionz-sara-widget {

	bottom: 12px !important;

	transform: scale(0.88) !important;

	transform-origin: bottom left !important;

}


/* ==========================================================================
   OPTIONZ COACHING — HERO SECTION ELEGANT IMAGE SIZING & HARMONY
   ========================================================================== */
.elementor-element-eda8b14 {
	position: relative !important;
}

.elementor-element-eda8b14 .elementor-element-37ce04b {
	align-items: center !important;
}

/* Container for left image */
.elementor-element-eda8b14 .elementor-element-94e7d84 {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	position: relative !important;
}

/* Sizing for the hero student image (R-slider.png) */
.elementor-element-eda8b14 .elementor-element-94e7d84 img#38809,
.elementor-element-eda8b14 .elementor-element-94e7d84 img[src*="R-slider"] {
	max-width: 440px !important;
	width: 82% !important;
	height: auto !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 auto !important;
	filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.08)) !important;
	transition: transform 0.35s ease, filter 0.35s ease !important;
}

.elementor-element-eda8b14 .elementor-element-94e7d84 img#38809:hover,
.elementor-element-eda8b14 .elementor-element-94e7d84 img[src*="R-slider"]:hover {
	transform: translateY(-4px) scale(1.01) !important;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.12)) !important;
}

/* Floating Card "سجل الآن فى المنصة التعليمية" alignment with image */
.elementor-element-eda8b14 .elementor-element-e3f69eb {
	position: absolute !important;
	bottom: 25px !important;
	right: 15px !important;
	z-index: 5 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12) !important;
	backdrop-filter: blur(8px) !important;
}

/* Responsive Tablet */
@media (max-width: 1024px) {
	.elementor-element-eda8b14 .elementor-element-94e7d84 img#38809,
	.elementor-element-eda8b14 .elementor-element-94e7d84 img[src*="R-slider"] {
		max-width: 360px !important;
		width: 85% !important;
	}
	.elementor-element-eda8b14 .elementor-element-e3f69eb {
		bottom: 15px !important;
		right: 5px !important;
	}
}

/* Responsive Mobile */
@media (max-width: 767px) {
	.elementor-element-eda8b14 .elementor-element-94e7d84 img#38809,
	.elementor-element-eda8b14 .elementor-element-94e7d84 img[src*="R-slider"] {
		max-width: 290px !important;
		width: 90% !important;
		margin: 20px auto 0 auto !important;
	}
	.elementor-element-eda8b14 .elementor-element-e3f69eb {
		position: relative !important;
		bottom: auto !important;
		right: auto !important;
		margin: -25px auto 0 auto !important;
	}
}