:root{--color-primary: #455465;--color-secondary: #007ab8;--color-tertiary: #1ea4a9;--color-state: #0074be;--color-state-hover: #006ab4;--color-state-focus: #006ab4;--color-state-active: #0059a3;--color-state-highlight: #f6f9d7;--color-state-highlight-neutral: var(--color-neutral-3);--color-state-disabled: var(--color-neutral-5);--color-neutral-1: #fff;--color-neutral-2: #fafafa;--color-neutral-3: #f7f7f7;--color-neutral-4: #e6e4e4;--color-neutral-5: #c7c7c7;--color-neutral-6: #767676;--color-neutral-7: #262626;--color-background: var(--color-neutral-1);--color-border: var(--color-neutral-5);--color-text: var(--color-neutral-7);--color-text-disabled: var(--color-neutral-5);--color-text-hint: var(--color-neutral-6);--link-color: var(--color-state);--link-color-hover: var(--color-state-hover);--nav-bg-color: #fafafa;--nav-text-color: var(--color-text);--nav-selected-color: var(--color-state);--nav-border-colour: rgba(128, 128, 128, 0.2);--nav-width: 15rem;--nav-collapsed-width: 5rem;--nav-button-size: 1.25rem;--nav-logo-width: 7.5rem;--nav-logo-height: 7.5rem;--nav-logomark-width: 2.5rem;--nav-logomark-height: 2.5rem;--footer-bg-color: #fff;--footer-text-color: var(--color-text);--footer-text-color-hover: var(--footer-text-color);--btn-accent-color: var(--color-state);--btn-accent-color-active: var(--color-state-active);--btn-accent-color-hover: var(--color-state-hover);--btn-accent-color-disabled: var(--color-state-disabled);--page-content-padding-desktop: calc(var(--gap-base) * 8)}.tui-theme_inspire-navItem{--tui-theme_inspire-navItem-height: 2.75rem;--tui-theme_inspire-navItem-indicator-height: 2rem;--tui-theme_inspire-navItem-top-level-nav-item-padding: 10px;--tui-theme_inspire-navItem-nav-item-padding: 6px;display:flex;flex-grow:1;flex-wrap:wrap;height:var(--tui-theme_inspire-navItem-height);padding-top:calc(var(--gap-base) * 1);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem--navExpanded{height:100%}.tui-theme_inspire-navItem__icon{width:1.2em;height:1.2em;margin:auto}.tui-theme_inspire-navItem__icon--navExpanded{margin:calc(var(--gap-base) * 3) auto auto calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem .tui-theme_inspire-navItem{padding-top:0}.tui-theme_inspire-navItem--selected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem--selected:before{height:var(--tui-theme_inspire-navItem-indicator-height);margin-top:calc(var(--gap-base) * 1);border-right:calc(var(--gap-base) * 1) solid var(--nav-selected-color);border-top-right-radius:calc(var(--gap-base) * 1);border-bottom-right-radius:calc(var(--gap-base) * 1);content:""}.tui-theme_inspire-navItem .tui-theme_inspire-navItem--selected:before{margin-top:0}.tui-theme_inspire-navItem--link{flex-wrap:nowrap}.tui-theme_inspire-navItem__heading{display:flex;flex-grow:1;align-items:flex-start;padding:0;background-color:inherit;border:none;border-radius:var(--btn-radius)}.tui-theme_inspire-navItem__heading--childSelected{color:var(--nav-selected-color)}.tui-theme_inspire-navItem__heading--depth-0{margin-left:calc(var(--gap-base) * 5);font-weight:600}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 4)}.tui-theme_inspire-navItem__heading--depth-0.tui-theme_inspire-navItem__heading--selected.tui-theme_inspire-navItem__heading--navExpanded{margin-left:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-0 .tui-theme_inspire-navItem__headingAction{margin:calc(var(--gap-base) * 2)}.tui-theme_inspire-navItem__heading--depth-1{margin-left:calc(var(--gap-base) * 10);font-weight:400}.tui-theme_inspire-navItem__heading--depth-1.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 9)}.tui-theme_inspire-navItem__heading--depth-2{margin-left:calc(var(--gap-base) * 13)}.tui-theme_inspire-navItem__heading--depth-2.tui-theme_inspire-navItem__heading--selected{margin-left:calc(var(--gap-base) * 12)}.tui-theme_inspire-navItem__heading--link{color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__heading--link:hover,.tui-theme_inspire-navItem__heading--link:focus{color:var(--nav-tab-text-color);text-decoration:none}.tui-theme_inspire-navItem__heading--link.tui-theme_inspire-navItem__heading--selected{color:var(--nav-selected-color)}@media (hover:hover){.tui-theme_inspire-navItem__heading:hover{background-color:color-mix(in srgb, var(--nav-tab-text-color) 10%, transparent)}}.tui-theme_inspire-navItem__heading:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navItem__headingText{flex-grow:1;margin:auto;padding:var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-nav-item-padding) calc(var(--gap-base) * 3);text-align:left;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.tui-theme_inspire-navItem__headingText--depth-0{padding:var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 1) var(--tui-theme_inspire-navItem-top-level-nav-item-padding) calc(var(--gap-base) * 3)}.tui-theme_inspire-navItem__headingAction{flex-basis:1.5rem;flex-shrink:0;height:1.5rem;margin:calc(var(--gap-base) * 1) calc(var(--gap-base) * 2);padding:var(--tui-theme_inspire-navItem-nav-item-padding);color:var(--nav-tab-text-color)}.tui-theme_inspire-navItem__children{flex-basis:100%;margin-bottom:calc(var(--gap-base) * 2);margin-left:0;list-style:none}.tui-theme_inspire-navigation__toggle{position:absolute;z-index:1;width:var(--nav-button-size);height:var(--nav-button-size);margin:calc(var(--gap-base) * 4);color:var(--color-text)}.tui-theme_inspire-navigation__toggle--overlay{display:block}.tui-theme_inspire-navigation__toggle--expand{display:none}@media (min-width:992px){.tui-theme_inspire-navigation__toggle{left:var(--nav-collapsed-width);margin-left:calc(var(--gap-base) * 5)}.tui-theme_inspire-navigation__toggle--overlay{display:none}.tui-theme_inspire-navigation__toggle--expand{display:block}.tui-theme_inspire-navigation__toggle--navExpanded{left:var(--nav-width)}}.tui-theme_inspire-navigation__toggle--navHidden{left:0}.tui-theme_inspire-navigation{position:relative;z-index:var(--zindex-navbar);display:none;flex-direction:column;overflow:visible}@media (min-width:992px){.tui-theme_inspire-navigation{display:flex;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__nav{position:fixed;display:flex;flex-direction:column;width:var(--nav-collapsed-width);height:100%;background-color:var(--nav-bg-color);border-right:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__heading{margin:auto;border-bottom:1px inset var(--nav-border-colour)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logomark-width);max-height:var(--nav-logomark-height);margin:calc(var(--gap-base) * 8) 0}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse{float:right;width:var(--nav-button-size);height:var(--nav-button-size);margin-top:calc(var(--gap-base) * 4);margin-right:calc(var(--gap-base) * -3);color:var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__collapse:focus-visible{outline:2px solid var(--nav-tab-text-color)}.tui-theme_inspire-navigation .tui-theme_inspire-navigation__items{display:flex;flex-direction:column;gap:calc(var(--gap-base) * 1);height:100%;margin:0;padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) calc(var(--gap-base) * 5) 0;overflow-y:auto;list-style:none}.tui-theme_inspire-navigation--overlaid{position:fixed;z-index:var(--zindex-nav-overlay);display:flex;width:var(--nav-width)}@media (min-width:992px){.tui-theme_inspire-navigation--overlaid{position:relative;width:var(--nav-collapsed-width)}}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--overlaid .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}.tui-theme_inspire-navigation--desktopExpanded{display:none}@media (min-width:992px){.tui-theme_inspire-navigation--desktopExpanded{display:flex;width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__nav{width:var(--nav-width)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__heading{margin:0 calc(var(--gap-base) * 6)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__headingLogo{max-width:var(--nav-logo-width);max-height:var(--nav-logo-height)}.tui-theme_inspire-navigation--desktopExpanded .tui-theme_inspire-navigation__items{padding:calc(var(--gap-base) * 5) calc(var(--gap-base) * 3) calc(var(--gap-base) * 5) 0}}.tui-theme_inspire-navigation--hidden{display:none}.tui-settingsFormBrand__testEmailInfoButton{align-self:center}.tui-themeSettings__content{margin-top:var(--gap-8)}.tui-themeSettings__forms>*+*{margin-top:var(--gap-8)}:root{--nav-bg-color: #fafafa;--nav-text-color: #262626;--nav-selected-color: #0074be;}
a:hover,
a:focus {
  color: inherit !important; /* keeps whatever color the link currently has */
  text-decoration: none !important;
}


.AlJaziraTakaful-spot a:hover{
  color: white !important; /* keeps whatever color the link currently has */

}


.img-responsive{
width:100%
}
.onboarding-container {
  position: relative;
  background: linear-gradient(135deg, #007bff, #00aaff, #66ccff);
  border-radius: 20px;
  padding: 50px 35px;
  text-align: center;
  max-width: 700px;
  margin: 50px auto;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #ffffff;
  box-shadow: 0 15px 35px rgba(0,0,0,0.2);
  overflow: hidden;
}

.onboarding-shapes::before,
.onboarding-shapes::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  width: 200px;
  height: 200px;
  animation: float 12s linear infinite;
  z-index: 0;
}
.onboarding-shapes::before { top: -50px; left: -60px; }
.onboarding-shapes::after { bottom: -70px; right: -80px; }

@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(180deg); }
  100% { transform: translateY(0px) rotate(360deg); }
}

.onboarding-icon img {
  width: 100px;
  height: 100px;
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  padding: 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}
.onboarding-icon img:hover {
  transform: scale(1.1) rotate(10deg);
}

.onboarding-text h2 {
  font-size: 30px;
  margin-bottom: 15px;
  font-weight: 800;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
  position: relative;
  z-index: 1;
}

.onboarding-text p {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 35px;
  position: relative;
  z-index: 1;
}

.onboarding-button a {
  display: inline-block;
  padding: 16px 40px;
  background: #ffffff;
  color: #007bff;
  font-weight: bold;
  border-radius: 12px;
  text-decoration: none;
  font-size: 16px;
  position: relative;
  z-index: 1;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
}
.onboarding-button a:hover {
  background: #e6f2ff;
  color: #0056b3;
  transform: translateY(-3px) scale(1.05);
}



/* CSS */
/* =========================================================
   Featured Collections (AlJaziraTakaful-fc)
   ========================================================= */

/* Container + tokens */
.AlJaziraTakaful-fc {
  --brand: #0B63F6;
  --ring: #E7ECF3;
  --card: #FFFFFF;
  --ink:  #0F172A;
  --muted:#6B7280;

  background: #F6F8FB;
  padding: 18px;
  border-radius: 16px;
}

/* Header */
.AlJaziraTakaful-fc-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;
}

.AlJaziraTakaful-fc-title {
  color: var(--ink);
  font: 900 20px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-fc-link {
  color: var(--brand);
  text-decoration: none;

  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-fc-link:hover {
  text-decoration: underline;
}

/* Grid */
.AlJaziraTakaful-fc-grid {
  display: grid;
  gap: 12px;

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

/* Card */
.AlJaziraTakaful-fc-card {
  display: block;

  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 14px;

  color: var(--ink);
  text-decoration: none;
}

/* Media */
.AlJaziraTakaful-fc-media {
  height: 170px;

  background-size: cover;
  background-position: center;

  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.AlJaziraTakaful-fc-media--one {
  background-image: url("https://images.unsplash.com/photo-1522071820081-009f0129c71c?q=80&w=1600&auto=format&fit=crop");
}

.AlJaziraTakaful-fc-media--two {
  background-image: url("https://images.unsplash.com/photo-1515187029135-18ee286d815b?q=80&w=1600&auto=format&fit=crop");
}

.AlJaziraTakaful-fc-media--three {
  background-image: url("https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=1600&auto=format&fit=crop");
}

.AlJaziraTakaful-fc-media--four {
  background-image: url("https://images.unsplash.com/photo-1551281044-8f785ba67e45?q=80&w=1600&auto=format&fit=crop");
}

/* Meta row */
.AlJaziraTakaful-fc-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 10px 12px;
}

.AlJaziraTakaful-fc-name {
  font-weight: 900;
}

.AlJaziraTakaful-fc-chip {
  background: #EEF3FB;
  border: 1px solid var(--ring);
  border-radius: 999px;

  padding: 4px 8px;
  color: #111827;

  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Responsive */
@media (max-width: 900px) {
  .AlJaziraTakaful-fc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .AlJaziraTakaful-fc-grid { grid-template-columns: 1fr; }
}

/* Language control */
html[lang="en"] .AlJaziraTakaful-fc .lang-ar { display: none !important; }
html[lang="ar"] .AlJaziraTakaful-fc .lang-en { display: none !important; }

/* RTL alignment */
html[lang="ar"] .AlJaziraTakaful-fc { direction: rtl; }




/* CSS */
/* =========================================================
   Library Intro (AlJaziraTakaful-lib)
   ========================================================= */

/* Container + tokens */
.AlJaziraTakaful-lib {
  --brand: #0B63F6;
  --ring:  #E7ECF3;
  --card:  #FFFFFF;
  --ink:   #0F172A;
  --muted: #6B7280;

  display: flex;
  gap: 16px;
  align-items: stretch;

  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;

  padding: 16px;
}

/* Copy area */
.AlJaziraTakaful-lib-text {
  flex: 1 1 auto;
  min-width: 260px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.AlJaziraTakaful-lib-eyebrow {
  color: var(--brand);
  letter-spacing: .3px;

  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-title {
  color: var(--ink);

  font: 900 20px/1.25 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-sub {
  color: var(--muted);
}

/* Button */
.AlJaziraTakaful-lib-cta {
  margin-top: 8px;
}

.AlJaziraTakaful-lib-button {
  display: inline-block;

  background: var(--brand);
  color: #FFFFFF;
  text-decoration: none;

  padding: 10px 14px;
  border-radius: 12px;

  font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-button:hover {
  filter: brightness(.95);
}

/* Topic tags */
.AlJaziraTakaful-lib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.AlJaziraTakaful-lib-tag {
  display: inline-block;

  background: #EEF3FB;
  border: 1px solid var(--ring);
  border-radius: 999px;

  padding: 6px 10px;
  text-decoration: none;
  color: #111827;

  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Artwork */
.AlJaziraTakaful-lib-art {
  width: 420px;
}

.AlJaziraTakaful-lib-bg {
  height: 220px;

  border-radius: 12px;

  background-size: cover;
  background-position: center;

  background-image: url("https://images.unsplash.com/photo-1543269865-4430f94492b2?q=80&w=1600&auto=format&fit=crop");
}

/* Responsive */
@media (max-width: 900px) {
  .AlJaziraTakaful-lib { flex-direction: column; }

  .AlJaziraTakaful-lib-art { width: auto; }
  .AlJaziraTakaful-lib-bg  { height: 200px; }
}

/* Language control */
html[lang="en"] .AlJaziraTakaful-lib .lang-ar { display: none !important; }
html[lang="ar"] .AlJaziraTakaful-lib .lang-en { display: none !important; }

/* RTL alignment */
html[lang="ar"] .AlJaziraTakaful-lib { direction: rtl; }





/* CSS */
/* =========================================================
   Library Intro (AlJaziraTakaful-lib)
   ========================================================= */

/* Container + tokens */
.AlJaziraTakaful-lib {
  --brand: #0B63F6;
  --ring:  #E7ECF3;
  --card:  #FFFFFF;
  --ink:   #0F172A;
  --muted: #6B7280;

  display: flex;
  gap: 16px;
  align-items: stretch;

  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;

  padding: 16px;
}

/* Copy area */
.AlJaziraTakaful-lib-text {
  flex: 1 1 auto;
  min-width: 260px;

  display: flex;
  flex-direction: column;
  gap: 6px;
}

.AlJaziraTakaful-lib-eyebrow {
  color: var(--brand);
  letter-spacing: .3px;

  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-title {
  color: var(--ink);

  font: 900 20px/1.25 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-sub {
  color: var(--muted);
}

/* Button */
.AlJaziraTakaful-lib-cta {
  margin-top: 8px;
}

.AlJaziraTakaful-lib-button {
  display: inline-block;

  background: var(--brand);
  color: #FFFFFF;
  text-decoration: none;

  padding: 10px 14px;
  border-radius: 12px;

  font: 800 14px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-lib-button:hover {
  filter: brightness(.95);
}

/* Topic tags */
.AlJaziraTakaful-lib-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.AlJaziraTakaful-lib-tag {
  display: inline-block;

  background: #EEF3FB;
  border: 1px solid var(--ring);
  border-radius: 999px;

  padding: 6px 10px;
  text-decoration: none;
  color: #111827;

  font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Artwork */
.AlJaziraTakaful-lib-art {
  width: 420px;
}

.AlJaziraTakaful-lib-bg {
  height: 220px;

  border-radius: 12px;

  background-size: cover;
  background-position: center;

  background-image: url("https://images.unsplash.com/photo-1543269865-4430f94492b2?q=80&w=1600&auto=format&fit=crop");
}

/* Responsive */
@media (max-width: 900px) {
  .AlJaziraTakaful-lib { flex-direction: column; }

  .AlJaziraTakaful-lib-art { width: auto; }
  .AlJaziraTakaful-lib-bg  { height: 200px; }
}

/* Language control */
html[lang="en"] .AlJaziraTakaful-lib .lang-ar { display: none !important; }
html[lang="ar"] .AlJaziraTakaful-lib .lang-en { display: none !important; }

/* RTL alignment */
html[lang="ar"] .AlJaziraTakaful-lib { direction: rtl; }








/* CSS */
/* =========================================================
   Onboarding Video — Creative/Elegant (AlJaziraTakaful-onbPro)
   Allowed tags in HTML: div, span, a, ul, li
   ========================================================= */

/* Container & tokens */
.AlJaziraTakaful-onbPro {
  --brand:  #0B63F6;
  --brand2: #10B981;
  --ink:    #0F172A;
  --muted:  #6B7280;
  --ring:   #E7ECF3;
  --card:   #FFFFFF;
  --bg:     #F6F8FB;

  background: var(--bg);
  padding: 18px;
  border-radius: 16px;
}

/* Card layout */
.AlJaziraTakaful-onbPro-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 16px;

  background: var(--card);
  border: 1px solid var(--ring);
  border-radius: 16px;
  overflow: hidden;
}

/* Media (photo + soft overlay pattern) */
.AlJaziraTakaful-onbPro-media {
  position: relative;
  min-height: 260px;

  background-image:
    linear-gradient(180deg, rgba(15,23,42,0.00), rgba(15,23,42,0.25)),
    url("https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?q=80&w=1600&auto=format&fit=crop");
  background-size: cover;
  background-position: center;
}

/* Small badge on the image */
.AlJaziraTakaful-onbPro-badge {
  position: absolute;
  top: 14px;
  left: 14px;

  background: rgba(255,255,255,0.92);
  border: 1px solid var(--ring);
  border-radius: 999px;

  padding: 6px 10px;
  color: var(--ink);
  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Content column */
.AlJaziraTakaful-onbPro-content {
  display: flex;
  flex-direction: column;
  gap: 10px;

  padding: 18px;
}

.AlJaziraTakaful-onbPro-eyebrow {
  color: var(--brand);
  letter-spacing: .3px;

  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-onbPro-title {
  color: var(--ink);

  font: 900 22px/1.25 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-onbPro-sub {
  color: var(--muted);
}

/* Info chips (time, format, certificate) */
.AlJaziraTakaful-onbPro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.AlJaziraTakaful-chip {
  display: inline-block;

  background: #EEF3FB;
  border: 1px solid var(--ring);
  border-radius: 999px;

  padding: 6px 10px;
  color: #111827;
  font: 700 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Feature bullets */
.AlJaziraTakaful-onbPro-features {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.AlJaziraTakaful-onbPro-features li {
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--ink);
  font-weight: 700;
}

.AlJaziraTakaful-onbPro-bullet {
  width: 10px;
  height: 10px;

  display: inline-block;
  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, var(--brand2) 0, var(--brand2) 40%, var(--brand) 41%, var(--brand) 100%);
}

/* CTAs */
.AlJaziraTakaful-onbPro-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  margin-top: 4px;
}

.AlJaziraTakaful-onbPro-btn {
  display: inline-block;

  text-decoration: none;
  border-radius: 12px;
  border: 1px solid var(--ring);

  padding: 10px 14px;
  font: 900 14px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-onbPro-btnPrimary {
  background: var(--brand);
  color: #FFFFFF;
  border-color: transparent;
}

.AlJaziraTakaful-onbPro-btnGhost {
  background: #FFFFFF;
  color: var(--ink);
}

.AlJaziraTakaful-onbPro-btnPrimary:hover {
  filter: brightness(.95);
}

.AlJaziraTakaful-onbPro-btnGhost:hover {
  background: #F8FAFF;
}

/* Note */
.AlJaziraTakaful-onbPro-note {
  margin-top: 2px;
  color: var(--muted);

  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Responsive */
@media (max-width: 980px) {
  .AlJaziraTakaful-onbPro-card { grid-template-columns: 1fr; }
  .AlJaziraTakaful-onbPro-media { min-height: 200px; }
  .AlJaziraTakaful-onbPro-features { grid-template-columns: 1fr; }
}

/* Language control */
html[lang="en"] .AlJaziraTakaful-onbPro .lang-ar { display: none !important; }
html[lang="ar"] .AlJaziraTakaful-onbPro .lang-en { display: none !important; }

/* RTL alignment for Arabic */
html[lang="ar"] .AlJaziraTakaful-onbPro { direction: rtl; }
html[lang="ar"] .AlJaziraTakaful-onbPro-badge { left: auto; right: 14px; }










/* CSS */
/* CSS */

/* =========================================================
   Spotlight (AlJaziraTakaful-spot)
   ========================================================= */

/* Container */
.AlJaziraTakaful-spot {
  --ring: #E7ECF3;
  --ink:  #0F172A;

  background: #F6F8FB;
  padding: 18px;
  border-radius: 16px;
}

/* Header */
.AlJaziraTakaful-spot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 10px;
}

.AlJaziraTakaful-spot-title {
  color: var(--ink);

  font: 900 20px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-spot-controls {
  display: flex;
  gap: 6px;
}

.AlJaziraTakaful-spot-btn {
  display: inline-block;

  width: 34px;
  height: 34px;

  border-radius: 50%;
  border: 1px solid var(--ring);

  text-align: center;
  line-height: 34px;
}

/* Rail + slides */
.AlJaziraTakaful-spot-rail {
  display: flex;
  gap: 12px;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.AlJaziraTakaful-spot-slide {
  position: relative;
  display: block;

  min-width: 66%;
  border-radius: 16px;

  overflow: hidden;
  text-decoration: none;
  color: #FFFFFF;
}

/* Media as <span> (so <a> doesn't wrap <div>) */
.AlJaziraTakaful-spot-media {
  display: block;
  height: 240px;

  background-size: cover;
  background-position: center;
}

/* Media sources */
.AlJaziraTakaful-spot-media--one {
  background-image: url("https://images.unsplash.com/photo-1535223289827-42f1e9919769?q=80&w=1600&auto=format&fit=crop");
}
.AlJaziraTakaful-spot-media--two {
  background-image: url("https://images.unsplash.com/photo-1521791055366-0d553872125f?q=80&w=1600&auto=format&fit=crop");
}
.AlJaziraTakaful-spot-media--three {
  background-image: url("https://tinyurl.com/37dxvxak");
}

/* Meta overlay (also spans) */
.AlJaziraTakaful-spot-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  padding: 14px;

  background: linear-gradient(180deg, rgba(15,23,42,0), rgba(15,23,42,.85));
}

.AlJaziraTakaful-spot-eyebrow {
  font: 800 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-spot-name {
  display: block;

  font: 900 18px/1.2 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.AlJaziraTakaful-spot-sub {
  opacity: .9;

  font: 12px/1 system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Responsive */
@media (max-width: 900px) {
  .AlJaziraTakaful-spot-slide { min-width: 90%; }
}

/* Language control (optional) */
html[lang="en"] .AlJaziraTakaful-spot .lang-ar { display: none !important; }
html[lang="ar"] .AlJaziraTakaful-spot .lang-en { display: none !important; }

/* RTL alignment */
html[lang="ar"] .AlJaziraTakaful-spot { direction: rtl; }














:root{
  --bg: #f6fbff;
  --card-start: #eaf6ff;
  --card-end: #ffffff;
  --accent: #67b7f0;
  --accent-dark: #2e90d6;
  --text: #0b2340;
  --muted: #567388;
  --radius: 12px;
  --shadow: 0 6px 18px rgba(16,40,60,0.08);
  --glass: rgba(255,255,255,0.6);
  font-family: "Segoe UI", Tahoma, "Helvetica Neue", Arial, "Noto Naskh Arabic", sans-serif;
}

html,body{
  height:100%;
  margin:0;
  background: linear-gradient(180deg,var(--bg), #ffffff 60%);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{
  max-width:1200px;
  margin:36px auto;
  padding:24px;
}

header{
  display:flex;
  gap:16px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:20px;
}
header .title{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:56px;
  height:56px;
  border-radius:10px;
  background: linear-gradient(135deg,var(--card-start),var(--card-end));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--shadow);
  border:1px solid rgba(46,144,214,0.06);
  font-weight:700;
  color:var(--accent-dark);
  font-size:20px;
}
h1{
  margin:0;
  font-size:20px;
  color:var(--text);
}
p.lead{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* Grid for cards */
.grid{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(3, 1fr);
}

/* Responsive breakpoints */
@media (max-width:1000px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:600px){
  .grid{ grid-template-columns: 1fr; }
  header{ flex-direction:column; align-items:flex-start; gap:8px; }
}

/* Card style */
.card{
  background: linear-gradient(180deg,var(--card-start), var(--card-end));
  border-radius: var(--radius);
  padding:18px;
  box-shadow: var(--shadow);
  border:1px solid rgba(46,144,214,0.06);
  display:flex;
  gap:12px;
  align-items:flex-start;
  transition: transform .18s ease, box-shadow .18s ease;
  min-height:86px;
}
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(16,40,60,0.12);
}

.badge{
  width:52px;
  min-width:52px;
  height:52px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(255,255,255,0.65), rgba(255,255,255,0.35));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
  color:var(--accent-dark);
  border:1px solid rgba(46,144,214,0.08);
  box-shadow: 0 6px 14px rgba(46,144,214,0.06) inset;
}

.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.card-title{
  margin:0;
  font-size:15px;
  color:var(--text);
  line-height:1.25;
  font-weight:700;
}
.card-sub{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.35;
}

/* small action row */
.card-actions{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
}
.btn{
  border:0;
  padding:8px 12px;
  border-radius:10px;
  background:transparent;
  color:var(--accent-dark);
  font-weight:600;
  cursor:pointer;
  transition: background .12s ease, color .12s ease;
}
.btn.primary{
  background: linear-gradient(90deg,var(--accent), var(--accent-dark));
  color:white;
  box-shadow: 0 6px 18px rgba(46,144,214,0.12);
}
.btn.ghost{
  background:transparent;
  border:1px solid rgba(46,144,214,0.08);
}

/* Footer small text */
footer{
  margin-top:22px;
  color:var(--muted);
  font-size:13px;
}

/* Accessibility focus */
.btn:focus, .card:focus{
  outline:3px solid rgba(103,183,240,0.18);
  outline-offset:3px;
}























.aljazira-takaful-container {
  direction: rtl;
  font-family: "Noto Naskh Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  padding: 16px;
  box-sizing: border-box;
  background-color: #f7faff;
}

.aljazira-takaful-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}

.aljazira-takaful-card {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aljazira-takaful-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.aljazira-takaful-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-weight: 700;
  color: #2e90d6;
  background: rgba(46, 144, 214, 0.1);
  margin-bottom: 12px;
}

.aljazira-takaful-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.aljazira-takaful-title {
  font-size: 15px;
  font-weight: 700;
  color: #0b2340;
  display: block;
}

.aljazira-takaful-sub {
  font-size: 13px;
  color: #567388;
  display: block;
  line-height: 1.4;
}

.aljazira-takaful-actions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.aljazira-takaful-link {
  padding: 6px 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  color: #2e90d6;
  border-radius: 8px;
  border: 1px solid rgba(46, 144, 214, 0.2);
  background-color: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.aljazira-takaful-link:hover {
  background-color: #2e90d6;
  color: #ffffff;
}

.aljazira-takaful-button {
  background: linear-gradient(90deg, #67b7f0, #2e90d6);
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.3s ease;
  box-shadow: 0 4px 12px rgba(46, 144, 214, 0.15);
}

.aljazira-takaful-button:hover {
  background: linear-gradient(90deg, #2e90d6, #67b7f0);
}

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

@media (max-width: 640px) {
  .aljazira-takaful-grid {
    grid-template-columns: 1fr;
  }

  .aljazira-takaful-badge {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .aljazira-takaful-title {
    font-size: 14px;
  }

  .aljazira-takaful-sub {
    font-size: 12px;
  }

  .aljazira-takaful-link,
  .aljazira-takaful-button {
    font-size: 12px;
    padding: 5px 10px;
  }
}


















.aljazira-takaful-mandatory {
  max-width: 900px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.aljazira-takaful-mandatory-card {
  display: flex;
  flex-wrap: wrap;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.aljazira-takaful-mandatory-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.aljazira-takaful-mandatory-media {
  flex: 0 0 300px;
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
}

.aljazira-takaful-image {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* Ensures full coverage */
  object-position: center; /* Centers the image */
  display: block;
  image-rendering: auto;   /* Preserves image quality */
}

.aljazira-takaful-mandatory-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #e53935;
  color: #fff;
  padding: 6px 14px;
  border-radius: 22px;
  font-weight: bold;
  font-size: 0.95rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.aljazira-takaful-mandatory-content {
  flex: 1 1 0;
  padding: 25px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.aljazira-takaful-mandatory-eyebrow {
  font-size: 0.85rem;
  color: #777;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.aljazira-takaful-mandatory-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 12px;
  color: #222;
}

.aljazira-takaful-mandatory-sub {
  font-size: 1rem;
  color: #555;
  margin-bottom: 18px;
  line-height: 1.4;
}

.aljazira-takaful-mandatory-features {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.aljazira-takaful-mandatory-features li {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  margin-bottom: 8px;
}

.aljazira-takaful-bullet {
  width: 10px;
  height: 10px;
  background: #1976d2;
  border-radius: 50%;
  margin-right: 10px;
  display: inline-block;
}

.aljazira-takaful-mandatory-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.aljazira-takaful-btn {
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  font-size: 0.95rem;
  transition: all 0.2s ease;
}

.aljazira-takaful-btn-primary {
  background: #1976d2;
  color: #fff;
}

.aljazira-takaful-btn-primary:hover {
  background: #1565c0;
}

.aljazira-takaful-btn-ghost {
  background: transparent;
  border: 1px solid #1976d2;
  color: #1976d2;
}

.aljazira-takaful-btn-ghost:hover {
  background: #e3f2fd;
}

.aljazira-takaful-mandatory-note {
  font-size: 0.85rem;
  color: #999;
}

/* Responsive */
@media (max-width: 768px) {
  .aljazira-takaful-mandatory-card {
    flex-direction: column;
  }

  .aljazira-takaful-mandatory-media {
    width: 100%;
    height: 200px; /* Adjust as needed */
  }

  .aljazira-takaful-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .aljazira-takaful-mandatory-content {
    padding: 20px;
  }
}






























.create-ticket-container {
  background: linear-gradient(135deg, #cde0ff, #a0c4ff); /* lighter gradient */
  border-radius: 14px;
  padding: 25px;
  text-align: center;
  max-width: 700px;
  width: 95%;
  margin: 25px auto;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  font-family: 'Segoe UI', Arial, sans-serif;
  position: relative;
}

.create-ticket-icon {
  font-size: 40px;
  display: block;
  margin-bottom: 10px;
  animation: float 3s ease-in-out infinite;
}

.create-ticket-title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #175caa; /* dark blue for readability */
  margin-bottom: 10px; /* spacing from subtitle */
}

.create-ticket-subtitle {
  display: block;
  font-size: 14px;
  color: #1f2f4f; /* darker gray-blue for readability */
  margin-bottom: 18px;
}

.create-ticket-link {
  display: inline-block;
  background: #1e88e5;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 25px;
  border-radius: 30px; /* pill-shaped button */
  transition: all 0.3s ease;
}

.create-ticket-link:hover {
  background: #1565c0;
  color: #fff; /* ensures text stays visible */
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(21, 101, 192, 0.3);
}

.create-ticket-benefits {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
}

.create-ticket-benefits li {
  font-size: 13.5px;
  color: #1f2f4f; /* readable on lighter blue background */
  margin-bottom: 6px;
  opacity: 0.9;
}

.create-ticket-icons {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding: 0;
}

.create-ticket-icons li {
  font-size: 20px;
  opacity: 0.7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.create-ticket-icons li:hover {
  transform: scale(1.2);
  opacity: 1;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (max-width: 600px) {
  .create-ticket-container {
    padding: 18px;
  }
  .create-ticket-title {
    font-size: 18px;
  }
  .create-ticket-subtitle {
    font-size: 12px;
  }
  .create-ticket-link {
    padding: 8px 20px;
    font-size: 13px;
  }
}




























/* Container */
.aljazira-quiz-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  padding: 12px 0;
}

/* Card Base */
.aljazira-quiz-card {
  flex: 1 1 480px;
  max-width: 600px;
  box-sizing: border-box;
}

.aljazira-quiz-card-inner {
  display: flex;
  align-items: stretch;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  overflow: hidden;
}

/* Image Section */
.aljazira-quiz-image-wrapper {
  flex: 0 0 40%;
  display: flex;
  align-items: stretch;
}

.aljazira-quiz-image {
  display: block;
  width: 100%;
  background-size: cover;
  background-position: center;
  border-right: 1px solid rgba(0,0,0,0.05);
}

/* Card 1 & 2 images */
.aljazira-quiz-img1 {
  background-image: url("https://media.istockphoto.com/id/2209114464/photo/business-performance-checklist-businessman-using-laptop-online-survey-filling-out-check.webp?a=1&b=1&s=612x612&w=0&k=20&c=cgixNCC0DpueQNtPTW60c4G-rh3gfjMylqzjAK9xOJA=");
}

.aljazira-quiz-img2 {
  background-image: url("https://media.gettyimages.com/id/79253051/photo/filling-in-bubble-test.jpg?s=612x612&w=0&k=20&c=d0Q3ePXVHlP7n5uE7g_4jCP5dh0tn1r0utfCKe0PXvA=");
}

/* Content Section */
.aljazira-quiz-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 8px;
}

.aljazira-quiz-eyebrow {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: inline-block;
  color: #0b6fb5;
}

.aljazira-quiz-title {
  font-size: 18px;
  font-weight: 600;
  display: block;
}

.aljazira-quiz-desc {
  font-size: 14px;
  color: rgba(0,0,0,0.75);
  display: block;
  line-height: 1.4;
}

/* Features */
.aljazira-quiz-features {
  margin: 0;
  padding-left: 16px;
  list-style: none;
}

.aljazira-quiz-features li {
  font-size: 13px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aljazira-quiz-bullet {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #0b6fb5;
  border-radius: 50%;
  flex: 0 0 8px;
}

/* Buttons container */
.aljazira-quiz-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: auto;
  gap: 10px; /* brings them close together */
}

/* Both Buttons */
.aljazira-quiz-cta,
.aljazira-quiz-resources {
  display: inline-block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
  transition: all 0.2s ease;
  min-width: 110px;
}

/* Start Quiz Button */
.aljazira-quiz-cta {
  background: #0b6fb5;
  color: #ffffff;
}

.aljazira-quiz-cta:hover,
.aljazira-quiz-cta:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(11,111,181,0.12);
  text-decoration: none;
}

/* Resources Button */
.aljazira-quiz-resources {
  background: #e8f2fb;
  color: #0b6fb5;
  border: 1px solid #bcd9f0;
}

.aljazira-quiz-resources:hover,
.aljazira-quiz-resources:focus {
  background: #d7ebfa;
  transform: translateY(-1px);
  text-decoration: none;
}

/* Responsive: stack image on top for small screens */
@media (max-width: 720px) {
  .aljazira-quiz-card-inner {
    flex-direction: column;
  }

  .aljazira-quiz-image-wrapper {
    flex: 0 0 auto;
    height: 160px;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.05);
  }

  .aljazira-quiz-buttons {
    flex-direction: column;
    gap: 8px;
  }

  .aljazira-quiz-cta,
  .aljazira-quiz-resources {
    width: 100%;
  }
}
























.journey-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  padding: 10px;
}

.journey-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.journey-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}

.journey-image {
  height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e0e7ef;
}

.journey-content {
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.journey-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.journey-btn {
  display: inline-block;
  padding: 8px 16px;
  background-color: #0073e6;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.95em;
  transition: background-color 0.25s ease;
}

.journey-btn:hover {
  background-color: #005bb5;
}

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

/* ===== Individual Course Images ===== */
.journey-img-communication { background-image: url('https://i.postimg.cc/vmCKz7nb/image.png'); }
.journey-img-email { background-image: url('https://tinyurl.com/yec9978s'); }
.journey-img-managerial { background-image: url('https://media.istockphoto.com/id/2173915109/photo/skill-competency-development-concept-up-new-ability-skill-training-for-technology-evolution.webp?a=1&b=1&s=612x612&w=0&k=20&c=rL50nnTUg3LkA5rPZOsI_TWc4G3n3xETibUmPfCWBUo='); }
.journey-img-excel { background-image: url('https://media.istockphoto.com/id/1597729432/photo/businessman-working-with-data-and-graphs-in-spreadsheet-documents-for-online-analysis.webp?a=1&b=1&s=612x612&w=0&k=20&c=r5Bp3btQnxtJgLIHX4LleWzCTML_37OxLis7Rdh4S9A='); }
.journey-img-word-arabic { background-image: url('https://media.istockphoto.com/id/2212676205/photo/businessman-working-with-data-and-graphs-in-spreadsheet-documents-for-online-analysis.jpg?s=612x612&w=0&k=20&c=S2TvJND_0mnp95gkxbdvXrQhIaPh7hMWmHLs_R-eDmw='); }
.journey-img-word-english { background-image: url('https://images.unsplash.com/photo-1649433391420-542fcd3835ea?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fG1pY3Jvc29mdHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=600'); }
.journey-img-softskills-ar { background-image: url('https://media.istockphoto.com/id/1456727993/photo/soft-skills-concept-with-emotional-intelligence-creativity-collaboration-adaptability.jpg?s=612x612&w=0&k=20&c=jBqJiWBCSWMwrZSjyn3h0CwyOZjFE0Kz0b5yXiMnS0I='); }
.journey-img-softskills-en { background-image: url('https://media.istockphoto.com/id/1290242927/photo/teamwork-concept.webp?a=1&b=1&s=612x612&w=0&k=20&c=GR22-1KiG4ZP6WGPyFwOyRFR5zoVSq_Hjrh-iu1F9LM='); }
.journey-img-selfdev { background-image: url('https://media.istockphoto.com/id/667434682/photo/personal-development-career-growth-and-motivation.webp?a=1&b=1&s=612x612&w=0&k=20&c=-si4ve65e1E-zs0Vyz2Cpwn5aihrjR9diGTTN0pC6-k='); }
.journey-img-pmp { background-image: url('https://plus.unsplash.com/premium_photo-1723291359453-aea7e6bcbebd?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8cHJvamVjdCUyMG1hbmFnZW1lbnR8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=600'); }


































/* ===== JAZIRA TAKAFUL TREE LAYOUT ===== */

/* Container */
.jaziraob-container {
  text-align: center;
  padding: 60px 20px 80px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 50%, #ffffff 100%);
  direction: rtl;
  border-radius: 30px;
  position: relative;
  font-family: "Cairo", "Noto Kufi Arabic", sans-serif;
  overflow: hidden;
}

/* Company Logo Watermark */
.jaziraob-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background-image: url('https://i.imgur.com/YourLogoHere.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.03;
  z-index: 0;
  pointer-events: none;
}

/* Floating animated background circles */
.jaziraob-container::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: -250px;
  right: -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 181, 246, 0.2), transparent);
  animation: jaziraobFloat 15s infinite ease-in-out;
  animation-delay: -7s;
  z-index: 0;
}

@keyframes jaziraobFloat {
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    border-radius: 50%;
  }
  33% { 
    transform: translate(30px, -30px) scale(1.1);
    border-radius: 40% 60% 70% 30%;
  }
  66% { 
    transform: translate(-20px, 20px) scale(0.9);
    border-radius: 60% 40% 30% 70%;
  }
}

/* Welcome Banner (Root of Tree) */
.jaziraob-welcome-banner {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, rgba(2, 119, 189, 0.95) 0%, rgba(1, 87, 155, 0.95) 100%);
  color: white;
  padding: 25px 40px;
  border-radius: 20px;
  margin: 0 auto 60px;
  max-width: 700px;
  box-shadow: 0 8px 32px rgba(2, 119, 189, 0.3);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  animation: jaziraobBannerFadeIn 1s ease-out;
  overflow: hidden;
}

/* Connecting line from banner to branches */
.jaziraob-welcome-banner::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: linear-gradient(180deg, #0277bd, transparent);
  z-index: 1;
}

@keyframes jaziraobBannerFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Banner shimmer effect */
.jaziraob-welcome-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: jaziraobBannerShimmer 3s infinite;
}

@keyframes jaziraobBannerShimmer {
  0% { left: -100%; }
  50%, 100% { left: 100%; }
}

.jaziraob-welcome-banner h2 {
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0 0 8px 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.jaziraob-welcome-banner .banner-subtitle-ar {
  font-size: 1.1rem;
  margin: 0 0 12px 0;
  opacity: 0.95;
  font-weight: 500;
}

.jaziraob-welcome-banner .banner-subtitle-en {
  font-size: 1rem;
  margin: 0 0 4px 0;
  opacity: 0.85;
  font-weight: 600;
  font-style: italic;
}

.jaziraob-welcome-banner .banner-subtitle-en-sub {
  font-size: 0.9rem;
  margin: 0;
  opacity: 0.8;
  font-weight: 400;
}

/* Small logo in banner */
.jaziraob-welcome-banner .banner-logo {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background-image: url('https://i.postimg.cc/Hx2gg1qv/image.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
}

/* Title */
.jaziraob-title {
  font-size: 2.5rem;
  background: linear-gradient(135deg, #0277bd, #01579b);
  color: #004080;
  background-clip: text;
  font-weight: 800;
  margin-bottom: 60px;
  position: relative;
  letter-spacing: 0;
  text-shadow: 0 2px 10px rgba(2, 119, 189, 0.2);
  z-index: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
  padding: 0 15px;
}

/* Connecting line from title to branches */
.jaziraob-title::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: linear-gradient(180deg, #0277bd, transparent);
}

/* Tree Structure */
.tree-structure {
  position: relative;
  z-index: 1;
}

/* Main Branches Container */
.main-branches {
  display: flex;
  justify-content: center;
  gap: 150px;
  margin-bottom: 100px;
  margin-top: 30px;
  position: relative;
}

/* Horizontal connecting line between two main branches */
.main-branches::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 400px);
  max-width: 500px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0277bd 20%, #0277bd 80%, transparent);
}

/* Vertical line from horizontal line to each branch */
.branch-item {
  position: relative;
}

.branch-item::before {
  content: '';
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 80px;
  background: linear-gradient(180deg, transparent, #0277bd);
}

/* Vertical line from Operations to sub-branches */
.main-branches .branch-item:last-child::after {
  content: '';
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 50px;
  background: linear-gradient(180deg, #0277bd, transparent);
  z-index: 0;
}

/* Sub Branches Container (Under Operations Only) */
.sub-branches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

/* Horizontal line connecting all sub-branches */
.sub-branches::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0277bd 10%, #0277bd 90%, transparent);
}

/* Vertical line from horizontal to each sub-branch */
.sub-branch-item {
  position: relative;
}

.sub-branch-item::before {
  content: '';
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 50px;
  background: linear-gradient(180deg, transparent, #0277bd);
}

/* Card Container */
.jaziraob-card {
  width: 170px;       /* Fixed width for all cards */
  height: 170px;      /* Fixed height for all cards */
  flex: 0 0 170px;    /* Prevents resizing in grid/flex layouts */
  margin: 0 auto;
  perspective: 1500px;
}

/* Card Inner */
.jaziraob-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.jaziraob-card:hover .jaziraob-inner {
  transform: rotateY(180deg);
}

/* Disable flip for Operations Management parent card */
.jaziraob-card.no-flip:hover .jaziraob-inner {
  transform: rotateY(0deg);
}

.jaziraob-card.no-flip {
  cursor: default;
}

/* Front and Back */
.jaziraob-front,
.jaziraob-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Front - Glassmorphism */
.jaziraob-front {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 
    0 8px 32px rgba(2, 119, 189, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  color: #01579b;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

/* Liquid movement effect */
.jaziraob-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, 
    rgba(3, 169, 244, 0.15) 0%, 
    rgba(2, 136, 209, 0.2) 50%, 
    rgba(1, 87, 155, 0.15) 100%);
  background-size: 200% 200%;
  animation: jaziraobLiquidMove 6s ease infinite;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

@keyframes jaziraobLiquidMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.jaziraob-card:hover .jaziraob-front::before {
  opacity: 1;
}

.jaziraob-card:hover .jaziraob-front {
  box-shadow: 
    0 12px 40px rgba(2, 119, 189, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border-color: rgba(3, 169, 244, 0.5);
}

/* Icon - Bouncing with rotation */
.jaziraob-icon {
  font-size: 3.2rem;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 8px rgba(2, 119, 189, 0.3));
  animation: jaziraobBounce 2.5s ease-in-out infinite;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

@keyframes jaziraobBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}

.jaziraob-card:hover .jaziraob-icon {
  animation: none;
  transform: scale(1.15) rotate(10deg);
}

/* Arabic Label */
.jaziraob-label-ar {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #01579b;
  margin-bottom: 5px;
}

/* English Label */
.jaziraob-label-en {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #01579b;
  opacity: 0.85;
}

/* Back Side */
.jaziraob-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #0288d1 0%, #01579b 100%);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 15px 45px rgba(1, 87, 155, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Link - Elegant hover with arrow reveal */
.jaziraob-link {
  background: rgba(255, 255, 255, 0.95);
  color: #01579b;
  padding: 14px 28px 14px 40px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Arrow reveal */
.jaziraob-link::after {
  content: '◄';
  position: absolute;
  right: -35px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  transition: right 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
}

/* Shimmer effect */
.jaziraob-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.6s ease;
}

.jaziraob-link:hover::before {
  left: 100%;
}

.jaziraob-link:hover {
  background: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  padding-right: 50px;
  padding-left: 28px;
}

.jaziraob-link:hover::after {
  right: 15px;
  opacity: 1;
}

/* Responsive */
@media (max-width: 1100px) {
  .sub-branches {
    grid-template-columns: repeat(3, 1fr);
    max-width: 700px;
  }
  
  .main-branches {
    gap: 120px;
  }
  
  .jaziraob-welcome-banner h2 {
    font-size: 1.5rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-ar {
    font-size: 1rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en {
    font-size: 0.9rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en-sub {
    font-size: 0.85rem;
  }
}

@media (max-width: 900px) {
  .main-branches {
    flex-direction: column;
    align-items: center;
    gap: 80px;
    margin-bottom: 80px;
  }

  .main-branches::before {
    display: none;
  }

  .branch-item::before {
    height: 30px;
    top: -30px;
  }

  .main-branches .branch-item:first-child::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 40px;
    background: linear-gradient(180deg, #0277bd, transparent);
  }

  .main-branches .branch-item:last-child::after {
    display: none;
  }

  .sub-branches {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  .jaziraob-card {
    height: 200px;
  }

  .jaziraob-title {
    font-size: 2rem;
    margin-bottom: 50px;
  }
  
  .jaziraob-welcome-banner {
    padding: 15px 20px;
  }
  
  .jaziraob-welcome-banner h2 {
    font-size: 1.3rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-ar {
    font-size: 0.9rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en {
    font-size: 0.85rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en-sub {
    font-size: 0.8rem;
  }
  
  .jaziraob-welcome-banner .banner-logo {
    width: 40px;
    height: 40px;
    right: 15px;
  }
}

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

  .jaziraob-card {
    max-width: 320px;
  }

  .jaziraob-container {
    padding: 40px 15px 60px;
  }

  .jaziraob-title {
    font-size: 1.6rem;
  }

  .main-branches {
    gap: 60px;
  }
  
  .jaziraob-welcome-banner h2 {
    font-size: 1.2rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-ar {
    font-size: 0.85rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en {
    font-size: 0.8rem;
  }
  
  .jaziraob-welcome-banner .banner-subtitle-en-sub {
    font-size: 0.75rem;
  }
  
  .jaziraob-welcome-banner .banner-logo {
    display: none;
  }
}
.jaziraob-container {
  background: 
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
    url('https://plus.unsplash.com/premium_photo-1661778490723-371305b4fb06?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8dGVhbXdvcmslMjBvZmZpY2V8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=600');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* creates elegant parallax-like effect */
}