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

    Evenzex — brand layer

    Loaded after style.css. Everything the rebuild adds lives here:

    01. Design tokens
    02. Mobile-first typography & spacing (fluid clamp scale)
    03. Brand wordmark
    04. Language switcher
    05. RTL mirroring (Bootstrap utilities + the handful of physical values
        that logical properties cannot reach: transforms, gradients, shorthands)
    06. Arabic typography
    07. New components — page banner, stats, gallery, schedule, testimonials,
        journal, contact, auth, 404, legal
    08. Utilities & polish

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

/*----------------------------------------*/
/*  01. Design tokens
/*----------------------------------------*/
:root {
  --ez-indigo: #4a2af0;
  --ez-indigo-deep: #2a0fa8;
  --ez-indigo-soft: #ede9ff;
  --ez-teal: #00d9a5;
  --ez-teal-deep: #00a37c;
  --ez-teal-soft: #e2fff7;
  --ez-cyan: #17c3ff;
  --ez-ink: #0e0b2b;
  --ez-deep: #1a1150;
  --ez-body: #55566b;
  --ez-muted: #7c7a99;
  --ez-line: #e6e3f5;
  --ez-surface: #f4f3ff;
  --ez-white: #fff;

  --ez-radius: 18px;
  --ez-radius-sm: 12px;
  --ez-shadow: 0 18px 50px -28px rgba(26, 17, 80, .45);
  --ez-shadow-lg: 0 30px 70px -34px rgba(26, 17, 80, .55);

  /* fluid rhythm — mobile value first, desktop as the cap */
  --ez-gutter: clamp(16px, 5vw, 24px);
  --ez-section: clamp(56px, 9vw, 120px);
  --ez-section-sm: clamp(40px, 7vw, 90px);
}

/*----------------------------------------*/
/*  02. Mobile-first typography & spacing
/*
/*  style.css is authored desktop-first with max-width overrides. Rather than
/*  fight that cascade, this block restates the type/space scale in fluid
/*  clamp() units so the small-screen value is the starting point everywhere
/*  and every step up to desktop is continuous instead of stepped.
/*----------------------------------------*/
html { -webkit-text-size-adjust: 100%; }

body {
  font-size: clamp(15px, 1.6vw, 16px);
  line-height: 1.75;
  overflow-x: clip;
}

h1 { font-size: clamp(32px, 6.2vw, 54px); line-height: 1.15; }
h2 { font-size: clamp(26px, 4.6vw, 40px); line-height: 1.2; }
h3 { font-size: clamp(20px, 3vw, 26px); line-height: 1.3; }
h4 { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.4; }
h5 { font-size: clamp(15px, 1.8vw, 17px); line-height: 1.5; }
h6 { font-size: clamp(14px, 1.5vw, 15px); line-height: 1.5; }

.section-title .title,
.section-title .title.white {
  font-size: clamp(27px, 5.2vw, 48px);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.about-area-4 .about-title .section-title .title {
  font-size: clamp(30px, 5.6vw, 56px);
  line-height: 1.14;
}

.section-title .sub-title {
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.section-title .sub-title::after { height: 10px; opacity: .16; }

.section-paragraph p,
.section-title-wrap p {
  font-size: clamp(15px, 1.7vw, 17px);
}

.section-padding-02 { padding: var(--ez-section) 0; }
.section-padding-04 { padding: var(--ez-section) 0; }
.section-padding-06 { padding-top: var(--ez-section); padding-bottom: calc(var(--ez-section) + 20px); }
.section-padding-09 { padding: var(--ez-section-sm) 0; }

.section-title-wrap { margin-bottom: clamp(32px, 5vw, 56px); }

/* The container should breathe on phones before it snaps to Bootstrap's steps */
@media (max-width: 575.98px) {
  .container, .container-fluid { padding-inline: var(--ez-gutter); }
}

/*----------------------------------------*/
/*  03. Brand wordmark
/*
/*  The logo is live text, not an image: it stays crisp at any density and
/*  keeps the same Sora cut as the rest of the headings.
/*----------------------------------------*/
.ez-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  line-height: 1;
}

.ez-brand__mark { flex: 0 0 auto; width: 38px; height: 38px; display: block; }

.ez-brand__text { display: flex; flex-direction: column; gap: 3px; }

.ez-brand__word {
  font-family: "Sora", "Cairo", sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.035em;
  color: var(--ez-ink);
  white-space: nowrap;
}

.ez-brand__word i { font-style: normal; color: var(--ez-teal); }

.ez-brand__tag {
  font-family: "Sora", "Cairo", sans-serif;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ez-muted);
  white-space: nowrap;
}

.ez-brand--light .ez-brand__word { color: #fff; }
.ez-brand--light .ez-brand__tag { color: rgba(255, 255, 255, .62); }

/* The header is transparent over photography and #130c3d once it sticks, so
   the wordmark stays light in both states. Only the opaque --solid variant,
   used on pages with no banner, sits on white. */
.evenzex-header-4:not(.evenzex-header--solid) .ez-brand__word { color: #fff; }
.evenzex-header-4:not(.evenzex-header--solid) .ez-brand__tag { color: rgba(255, 255, 255, .62); }

@media (min-width: 992px) {
  .ez-brand__mark { width: 44px; height: 44px; }
  .ez-brand__word { font-size: 27px; }
  .ez-brand__tag { font-size: 9px; }
}

/*----------------------------------------*/
/*  04. Language switcher
/*----------------------------------------*/
.lang-switcher { position: relative; }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: .25s;
}

.lang-toggle svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* The two-letter code stands in for the full name where space is tight */
.lang-short { display: none; }
.lang-toggle .lang-caret { width: 9px; height: 9px; transition: transform .25s; }
.lang-switcher.open .lang-caret { transform: rotate(180deg); }
.lang-toggle:hover { background: var(--ez-teal); border-color: var(--ez-teal); color: var(--ez-ink); }

.evenzex-header-4.sticky .lang-toggle,
.lang-switcher--dark .lang-toggle {
  border-color: var(--ez-line);
  background: #fff;
  color: var(--ez-ink);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-end: 0;
  min-width: 168px;
  padding: 6px;
  border-radius: var(--ez-radius-sm);
  background: #fff;
  box-shadow: var(--ez-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: .25s;
  z-index: 60;
}

.lang-switcher.open .lang-menu { opacity: 1; visibility: visible; transform: none; }

.lang-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ez-ink);
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
  transition: .2s;
}

.lang-menu button:hover { background: var(--ez-indigo-soft); }
.lang-menu button[aria-current="true"] { background: var(--ez-ink); color: #fff; }
.lang-menu .lang-code { font-size: 11px; opacity: .55; letter-spacing: .1em; }

.lang-switcher-mobile { margin-top: 26px; }
.lang-switcher-mobile .lang-toggle {
  width: 100%;
  justify-content: space-between;
  border-color: var(--ez-line);
  background: var(--ez-surface);
  color: var(--ez-ink);
  padding: 12px 16px;
}
.lang-switcher-mobile .lang-menu { inset-inline: 0; }

/*----------------------------------------*/
/*  05. RTL mirroring
/*
/*  style.css was converted to logical properties, so it flips on its own.
/*  What is left is (a) Bootstrap 5.1's LTR-only utility build and (b) values
/*  that have no logical form — transforms, gradient angles, shorthand insets.
/*----------------------------------------*/

/* -- 5.1 Bootstrap spacing / alignment utilities ------------------------- */
[dir="rtl"] .ms-0 { margin-inline-start: 0 !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-right: 0 !important; margin-inline-start: .25rem !important; }
[dir="rtl"] .ms-2 { margin-right: 0 !important; margin-inline-start: .5rem !important; }
[dir="rtl"] .ms-3 { margin-right: 0 !important; margin-inline-start: 1rem !important; }
[dir="rtl"] .ms-4 { margin-right: 0 !important; margin-inline-start: 1.5rem !important; }
[dir="rtl"] .ms-5 { margin-right: 0 !important; margin-inline-start: 3rem !important; }
[dir="rtl"] .ms-auto { margin-right: 0 !important; margin-inline-start: auto !important; }
[dir="rtl"] .me-0 { margin-left: 0 !important; margin-inline-end: 0 !important; }
[dir="rtl"] .me-1 { margin-left: 0 !important; margin-inline-end: .25rem !important; }
[dir="rtl"] .me-2 { margin-left: 0 !important; margin-inline-end: .5rem !important; }
[dir="rtl"] .me-3 { margin-left: 0 !important; margin-inline-end: 1rem !important; }
[dir="rtl"] .me-4 { margin-left: 0 !important; margin-inline-end: 1.5rem !important; }
[dir="rtl"] .me-5 { margin-left: 0 !important; margin-inline-end: 3rem !important; }
[dir="rtl"] .me-auto { margin-left: 0 !important; margin-inline-end: auto !important; }
[dir="rtl"] .ps-0 { padding-left: 0 !important; padding-inline-start: 0 !important; }
[dir="rtl"] .ps-1 { padding-left: 0 !important; padding-inline-start: .25rem !important; }
[dir="rtl"] .ps-2 { padding-left: 0 !important; padding-inline-start: .5rem !important; }
[dir="rtl"] .ps-3 { padding-left: 0 !important; padding-inline-start: 1rem !important; }
[dir="rtl"] .ps-4 { padding-left: 0 !important; padding-inline-start: 1.5rem !important; }
[dir="rtl"] .ps-5 { padding-left: 0 !important; padding-inline-start: 3rem !important; }
[dir="rtl"] .pe-0 { padding-right: 0 !important; padding-inline-end: 0 !important; }
[dir="rtl"] .pe-1 { padding-right: 0 !important; padding-inline-end: .25rem !important; }
[dir="rtl"] .pe-2 { padding-right: 0 !important; padding-inline-end: .5rem !important; }
[dir="rtl"] .pe-3 { padding-right: 0 !important; padding-inline-end: 1rem !important; }
[dir="rtl"] .pe-4 { padding-right: 0 !important; padding-inline-end: 1.5rem !important; }
[dir="rtl"] .pe-5 { padding-right: 0 !important; padding-inline-end: 3rem !important; }

[dir="rtl"] .text-start { text-align: start !important; }
[dir="rtl"] .text-end { text-align: end !important; }
[dir="rtl"] .float-start { float: inline-start !important; }
[dir="rtl"] .float-end { float: inline-end !important; }
[dir="rtl"] .border-start { border-left: 0 !important; border-inline-start: 1px solid var(--ez-line) !important; }
[dir="rtl"] .border-end { border-right: 0 !important; border-inline-end: 1px solid var(--ez-line) !important; }

@media (min-width: 576px) {
  [dir="rtl"] .text-sm-start { text-align: start !important; }
  [dir="rtl"] .text-sm-end { text-align: end !important; }
}
@media (min-width: 768px) {
  [dir="rtl"] .text-md-start { text-align: start !important; }
  [dir="rtl"] .text-md-end { text-align: end !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .text-lg-start { text-align: start !important; }
  [dir="rtl"] .text-lg-end { text-align: end !important; }
}

/* -- 5.2 Offcanvas: BS positions and animates it with physical values ----- */
[dir="rtl"] .offcanvas-start {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid rgba(0, 0, 0, .2);
  transform: translateX(100%);
}
[dir="rtl"] .offcanvas-start.show { transform: none; }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; }

/* -- 5.3 Gradients: "to right" has to become "to left" ------------------- */
[dir="rtl"] .evenzex-hero-section-04::after,
[dir="rtl"] .speaker-section-4::after,
[dir="rtl"] .pricing-area-4::after,
[dir="rtl"] .footer-section-4 .footer-newsletter,
[dir="rtl"] .ez-cta::before {
  transform: scaleX(-1);
}

/* The newsletter panel is a real element, so flip its children back */
[dir="rtl"] .footer-section-4 .footer-newsletter > * { transform: scaleX(-1); }

/* -- 5.4 Decorative art: mirror it so composition follows the text ------- */
[dir="rtl"] .evenzex-hero-section-04 .shape-5,
[dir="rtl"] .section-shape-bottom,
[dir="rtl"] .event-agenda-area .shape-1,
[dir="rtl"] .event-agenda-area .shape-2,
[dir="rtl"] .footer-shape-1,
[dir="rtl"] .footer-shape-2,
[dir="rtl"] .about-thumbnail .thumbnail-shape,
[dir="rtl"] .price-card-shape,
[dir="rtl"] .event-body-shape,
[dir="rtl"] .ez-deco {
  transform: scaleX(-1);
}

/* -- 5.5 Chevrons and arrows point the other way ------------------------- */
[dir="rtl"] .ez-arrow,
[dir="rtl"] .ez-breadcrumb__sep,
[dir="rtl"] .swiper-button-next svg,
[dir="rtl"] .swiper-button-prev svg { transform: scaleX(-1); }

/* -- 5.6 Menus and accordions ------------------------------------------- */
[dir="rtl"] .header-menu .main-menu li .sub-menu { text-align: start; }
[dir="rtl"] .accordion-button::after { margin-left: 0; margin-inline-start: auto; }
[dir="rtl"] .offcanvas-menu .main-menu li .menu-icon { inset-inline-end: 0; inset-inline-start: auto; }

/* -- 5.7 Progress ring stays in the trailing corner ---------------------- */
[dir="rtl"] .progress-wrap { right: auto; left: 30px; }

/*----------------------------------------*/
/*  06. Arabic typography
/*----------------------------------------*/
[lang="ar"], [lang="ar"] body,
[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .section-title .title,
[dir="rtl"] .section-title .sub-title,
[dir="rtl"] .ez-brand__word,
[dir="rtl"] .btn,
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] button {
  font-family: "Cairo", "Plus Jakarta Sans", sans-serif;
}

/* Arabic needs a touch more leading and no upper-casing */
[dir="rtl"] body { line-height: 1.95; }
[dir="rtl"] .section-title .sub-title,
[dir="rtl"] .ez-eyebrow,
[dir="rtl"] .ez-brand__tag { text-transform: none; letter-spacing: 0; }
[dir="rtl"] .section-title .title { letter-spacing: 0; }

/* Latin numerals read better than Eastern Arabic for prices and dates here */
[dir="rtl"] .ez-num, [dir="rtl"] .count, [dir="rtl"] .price-ammount { direction: ltr; unicode-bidi: isolate; }

/*----------------------------------------*/
/*  07. New components
/*----------------------------------------*/

/* -- 7.1 Buttons: one shared pill, mobile-first -------------------------- */
.btn, .ez-btn {
  border-radius: 999px;
  font-family: "Sora", "Cairo", sans-serif;
  font-weight: 600;
}

.ez-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  background: var(--ez-indigo);
  color: #fff;
  cursor: pointer;
  transition: .28s;
}

.ez-btn:hover { background: var(--ez-ink); color: #fff; }
.ez-btn--teal { background: var(--ez-teal); color: var(--ez-ink); }
.ez-btn--teal:hover { background: var(--ez-ink); color: #fff; }
.ez-btn--ghost { background: transparent; border-color: currentColor; color: var(--ez-ink); }
.ez-btn--ghost:hover { background: var(--ez-ink); border-color: var(--ez-ink); color: #fff; }
.ez-btn--light { background: #fff; color: var(--ez-ink); }
.ez-btn--light:hover { background: var(--ez-teal); color: var(--ez-ink); }
.ez-btn--block { width: 100%; }
.ez-btn .ez-arrow { width: 15px; height: 15px; }

@media (min-width: 768px) { .ez-btn { padding: 15px 32px; font-size: 15px; } }

/* -- 7.2 Page banner + breadcrumb ---------------------------------------- */
.ez-banner {
  position: relative;
  padding: 150px 0 clamp(56px, 9vw, 110px);
  background: var(--ez-deep) center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  text-align: center;
}

.ez-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 11, 43, .92), rgba(26, 17, 80, .78));
}

.ez-banner > .container { position: relative; z-index: 2; }
.ez-banner__title { color: #fff; margin-bottom: 12px; }

.ez-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: rgba(255, 255, 255, .72);
}

.ez-breadcrumb a { color: var(--ez-teal); text-decoration: none; }
.ez-breadcrumb a:hover { color: #fff; }
.ez-breadcrumb__sep { display: inline-block; opacity: .5; }

/* -- 7.3 Stats band ------------------------------------------------------ */
.ez-stats { background: var(--ez-ink); padding: var(--ez-section-sm) 0; position: relative; overflow: hidden; }
.ez-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
.ez-stat { text-align: center; }
.ez-stat__num {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 6vw, 52px);
  line-height: 1;
  color: #fff;
  display: block;
}
.ez-stat__num span { color: var(--ez-teal); }
.ez-stat__label {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, .66);
}
@media (min-width: 768px) { .ez-stats__grid { grid-template-columns: repeat(4, 1fr); gap: 24px; } }

/* -- 7.4 Gallery --------------------------------------------------------- */
.ez-gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ez-gallery__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--ez-radius);
  background: var(--ez-ink);
}
.ez-gallery__item img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ez-gallery__item:hover img { transform: scale(1.07); opacity: .82; }
.ez-gallery__item::after {
  content: "";
  position: absolute;
  inset-inline-end: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ez-teal) url("../images/icons/plus.svg") center/16px no-repeat;
  opacity: 0;
  transform: translateY(10px);
  transition: .3s;
}
.ez-gallery__item:hover::after { opacity: 1; transform: none; }
.ez-gallery__item--tall img { aspect-ratio: 3 / 4; }
@media (min-width: 576px) { .ez-gallery { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 992px) { .ez-gallery { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* -- 7.5 Schedule -------------------------------------------------------- */
.ez-daytabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: clamp(28px, 4vw, 46px);
  padding: 0;
  list-style: none;
}
.ez-daytabs button {
  border: 1px solid var(--ez-line);
  background: #fff;
  border-radius: 999px;
  padding: 11px 20px;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ez-ink);
  cursor: pointer;
  transition: .25s;
}
.ez-daytabs button small { display: block; font-weight: 500; font-size: 11px; opacity: .6; }
.ez-daytabs button:hover { border-color: var(--ez-indigo); color: var(--ez-indigo); }
.ez-daytabs button[aria-selected="true"] {
  background: var(--ez-indigo);
  border-color: var(--ez-indigo);
  color: #fff;
}
.ez-daytabs button[aria-selected="true"] small { opacity: .8; }

.ez-slot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius);
  background: #fff;
  margin-bottom: 14px;
  transition: .3s;
}
.ez-slot:hover { border-color: transparent; box-shadow: var(--ez-shadow); transform: translateY(-3px); }
.ez-slot__time {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ez-indigo);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ez-slot__time img { width: 17px; height: 17px; }
.ez-slot__title { margin-bottom: 6px; }
.ez-slot__title a { color: var(--ez-ink); text-decoration: none; }
.ez-slot__title a:hover { color: var(--ez-indigo); }
.ez-slot__meta { font-size: 13px; color: var(--ez-muted); }
.ez-slot__host { display: flex; align-items: center; gap: 12px; }
.ez-slot__host img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ez-slot__host b { display: block; font-family: "Sora", "Cairo", sans-serif; font-size: 14px; color: var(--ez-ink); }
.ez-slot__host span { font-size: 12px; color: var(--ez-muted); }
.ez-slot__tag {
  align-self: start;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ez-teal-soft);
  color: var(--ez-teal-deep);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
[dir="rtl"] .ez-slot__tag { text-transform: none; letter-spacing: 0; }
@media (min-width: 768px) {
  .ez-slot {
    grid-template-columns: 130px 1fr auto;
    align-items: center;
    gap: 26px;
    padding: 24px 30px;
  }
  .ez-slot__tag { justify-self: end; }
}

/* -- 7.6 Testimonials ---------------------------------------------------- */
.ez-quote {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--ez-radius);
  background: #fff;
  box-shadow: var(--ez-shadow);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ez-quote__stars { color: var(--ez-teal); font-size: 14px; letter-spacing: 2px; }
.ez-quote__text { color: var(--ez-body); font-size: clamp(15px, 1.7vw, 17px); margin: 0; flex: 1; }
.ez-quote__by { display: flex; align-items: center; gap: 13px; }
.ez-quote__by img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.ez-quote__by b { display: block; font-family: "Sora", "Cairo", sans-serif; font-size: 15px; color: var(--ez-ink); }
.ez-quote__by span { font-size: 12px; color: var(--ez-muted); }

/* -- 7.7 Journal / blog -------------------------------------------------- */
.ez-post {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--ez-radius);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ez-line);
  transition: .3s;
}
.ez-post:hover { border-color: transparent; box-shadow: var(--ez-shadow-lg); transform: translateY(-4px); }
.ez-post__thumb { display: block; overflow: hidden; }
.ez-post__thumb img {
  width: 100%;
  aspect-ratio: 10 / 7;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.ez-post:hover .ez-post__thumb img { transform: scale(1.06); }
.ez-post__body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.ez-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
  color: var(--ez-muted);
}
.ez-post__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ez-post__title { margin: 0; }
.ez-post__title a { color: var(--ez-ink); text-decoration: none; }
.ez-post__title a:hover { color: var(--ez-indigo); }
.ez-post__excerpt { margin: 0; font-size: 15px; color: var(--ez-body); flex: 1; }
.ez-post__more {
  align-self: start;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ez-indigo);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ez-post__more:hover { gap: 12px; color: var(--ez-ink); }

.ez-article { font-size: clamp(15px, 1.8vw, 17px); color: var(--ez-body); }
.ez-article h2, .ez-article h3 { margin: 34px 0 14px; color: var(--ez-ink); }
.ez-article p { margin-bottom: 18px; }
.ez-article img { width: 100%; border-radius: var(--ez-radius); margin: 24px 0; }
.ez-article blockquote {
  margin: 28px 0;
  padding: 24px 28px;
  border-inline-start: 4px solid var(--ez-teal);
  border-radius: var(--ez-radius-sm);
  background: var(--ez-surface);
  font-size: clamp(16px, 2vw, 19px);
  font-family: "Sora", "Cairo", sans-serif;
  color: var(--ez-ink);
}
.ez-article ul { margin: 0 0 20px; padding-inline-start: 22px; }
.ez-article li { margin-bottom: 8px; }

/* -- 7.8 Sidebar --------------------------------------------------------- */
.ez-widget {
  padding: 26px;
  border-radius: var(--ez-radius);
  background: var(--ez-surface);
  margin-bottom: 24px;
}
.ez-widget__title { margin-bottom: 18px; }
.ez-widget ul { margin: 0; padding: 0; list-style: none; }
.ez-widget li + li { margin-top: 12px; }
.ez-widget a { color: var(--ez-body); text-decoration: none; font-size: 15px; }
.ez-widget a:hover { color: var(--ez-indigo); }
.ez-widget__search { display: flex; gap: 8px; }
.ez-widget__search input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--ez-line);
  border-radius: 999px;
  padding: 12px 18px;
  background: #fff;
  font: inherit;
  font-size: 14px;
}
.ez-tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.ez-tagcloud a {
  padding: 7px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--ez-line);
  font-size: 12px;
}

/* -- 7.9 Contact --------------------------------------------------------- */
.ez-infocard {
  height: 100%;
  padding: 30px 26px;
  border-radius: var(--ez-radius);
  background: #fff;
  border: 1px solid var(--ez-line);
  text-align: center;
  transition: .3s;
}
.ez-infocard:hover { border-color: transparent; box-shadow: var(--ez-shadow); transform: translateY(-4px); }
.ez-infocard img { width: 44px; height: 44px; margin-bottom: 16px; }
.ez-infocard h4 { margin-bottom: 8px; }
.ez-infocard p, .ez-infocard a { margin: 0; font-size: 15px; color: var(--ez-body); text-decoration: none; }
.ez-infocard a:hover { color: var(--ez-indigo); }

.ez-form { display: grid; gap: 16px; }
.ez-form label {
  display: block;
  margin-bottom: 7px;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ez-ink);
}
.ez-form input,
.ez-form select,
.ez-form textarea {
  width: 100%;
  border: 1px solid var(--ez-line);
  border-radius: var(--ez-radius-sm);
  padding: 14px 16px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--ez-ink);
  transition: .25s;
}
.ez-form textarea { min-height: 150px; resize: vertical; }
.ez-form input:focus,
.ez-form select:focus,
.ez-form textarea:focus {
  outline: none;
  border-color: var(--ez-indigo);
  box-shadow: 0 0 0 4px rgba(74, 42, 240, .12);
}
.ez-form__row { display: grid; gap: 16px; }
@media (min-width: 768px) { .ez-form__row { grid-template-columns: 1fr 1fr; } }
.ez-form__note { font-size: 13px; color: var(--ez-muted); margin: 0; }

.ez-map { border: 0; width: 100%; height: clamp(260px, 40vw, 440px); border-radius: var(--ez-radius); display: block; }

/* -- 7.10 Auth ----------------------------------------------------------- */
.ez-auth {
  max-width: 470px;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 44px);
  border-radius: var(--ez-radius);
  background: #fff;
  box-shadow: var(--ez-shadow-lg);
}
.ez-auth__switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--ez-surface);
  margin-bottom: 26px;
}
.ez-auth__switch button {
  border: 0;
  border-radius: 999px;
  padding: 11px;
  background: none;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ez-body);
  cursor: pointer;
  transition: .25s;
}
.ez-auth__switch button[aria-selected="true"] { background: var(--ez-indigo); color: #fff; }
.ez-auth__aside { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.ez-auth__aside a { color: var(--ez-indigo); text-decoration: none; }
.ez-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ez-body); }
.ez-check input { width: auto; }

/* -- 7.11 404 ------------------------------------------------------------ */
.ez-404 { text-align: center; padding: clamp(70px, 12vw, 150px) 0; }
.ez-404__code {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(84px, 22vw, 200px);
  line-height: .9;
  letter-spacing: -0.05em;
  background: linear-gradient(120deg, var(--ez-indigo), var(--ez-cyan) 55%, var(--ez-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* -- 7.12 CTA band ------------------------------------------------------- */
.ez-cta {
  position: relative;
  overflow: hidden;
  padding: var(--ez-section-sm) 0;
  background: var(--ez-deep) center/cover no-repeat;
  color: #fff;
  text-align: center;
}
.ez-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(74, 42, 240, .88), rgba(14, 11, 43, .82));
}
.ez-cta > .container { position: relative; z-index: 2; }
.ez-cta h2 { color: #fff; margin-bottom: 14px; }
.ez-cta p { color: rgba(255, 255, 255, .78); max-width: 620px; margin: 0 auto 26px; }
.ez-cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* -- 7.13 Speaker profile ------------------------------------------------ */
.ez-profile { display: grid; gap: 28px; align-items: start; }
.ez-profile__photo { border-radius: var(--ez-radius); overflow: hidden; }
.ez-profile__photo img { width: 100%; display: block; }
.ez-profile__role { color: var(--ez-indigo); font-family: "Sora", "Cairo", sans-serif; font-weight: 600; margin-bottom: 12px; }
.ez-social { display: flex; gap: 10px; padding: 0; margin: 22px 0 0; list-style: none; }
.ez-social a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ez-surface);
  color: var(--ez-ink);
  text-decoration: none;
  transition: .25s;
}
.ez-social a:hover { background: var(--ez-indigo); color: #fff; }
.ez-meta-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.ez-meta-list li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--ez-body); }
.ez-meta-list img { width: 22px; height: 22px; }
@media (min-width: 992px) { .ez-profile { grid-template-columns: 5fr 7fr; gap: 50px; } }

/* -- 7.14 Feature list --------------------------------------------------- */
.ez-features { display: grid; gap: 20px; }
.ez-feature {
  display: flex;
  gap: 16px;
  padding: 24px;
  border-radius: var(--ez-radius);
  background: #fff;
  border: 1px solid var(--ez-line);
  transition: .3s;
}
.ez-feature:hover { border-color: transparent; box-shadow: var(--ez-shadow); }
.ez-feature img { width: 40px; height: 40px; flex: 0 0 auto; }
.ez-feature h4 { margin-bottom: 6px; }
.ez-feature p { margin: 0; font-size: 15px; color: var(--ez-body); }
@media (min-width: 768px) { .ez-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .ez-features { grid-template-columns: repeat(3, 1fr); } }

/* -- 7.15 Overrides for base components ---------------------------------
/*
/*  A few rules in style.css were tuned around the exact pixel size of the
/*  images the original template shipped. The photography is all new, so
/*  those spots are re-laid out here as fluid, mobile-first blocks.
/*----------------------------------------*/

/* About: two stacked photos, no absolute offsets */
.about-area-4 .about-thumbnail { position: relative; padding: 0; }

.about-area-4 .about-thumbnail .about-thumb-1 {
  position: relative;
  inset-inline-start: auto;
  top: auto;
  width: 100%;
  border-radius: var(--ez-radius);
  display: block;
}

.about-area-4 .about-thumbnail .about-thumb-2 {
  position: relative;
  width: 46%;
  margin-top: -14%;
  margin-inline-start: auto;
  margin-inline-end: 6%;
  display: block;
  border-radius: var(--ez-radius);
  border: 8px solid #fff;
  box-shadow: var(--ez-shadow);
  z-index: 2;
}

.about-area-4 .about-thumbnail .thumbnail-shape {
  position: absolute;
  top: auto;
  bottom: -6%;
  inset-inline-start: -6%;
  width: 42%;
  max-width: 260px;
  z-index: 0;
}

.about-area-4 .about-title,
.about-area-4 .about-content { padding-inline: 0; margin-top: 34px; }
.about-area-4 .about-title::before { display: none; }
.about-area-4 .about-content .about-event { margin-inline-end: 0; align-items: center; }
.about-area-4 .about-content .about-event .thumb { margin-inline-end: 18px; width: 40px; height: 40px; }

@media (min-width: 992px) {
  .about-area-4 .about-title,
  .about-area-4 .about-content { padding-inline-start: 56px; }
  .about-area-4 .about-title { margin-top: 0; }
  .about-area-4 .about-title .section-title { padding-inline-end: 30px; }
  .about-area-4 .about-title::before {
    display: block;
    inset-inline-start: 0;
    top: 8px;
    height: 190px;
  }
}

/* Header: the wordmark is wider than the logo image it replaces, so the
   nav needs its own column rather than sitting flush against it */
.evenzex-header-2 .header-wrap { gap: 14px; }
/* Never let the wordmark be squeezed to nothing by a long nav */
.evenzex-header-2 .header-logo { flex: 0 0 auto; }
.evenzex-header-2 .header-menu { flex: 1 1 auto; }
.evenzex-header-2 .header-meta { flex: 0 0 auto; gap: 12px; }

/* Under 480px the tagline is what tips the header over — German runs longest */
@media (max-width: 479.98px) {
  .ez-brand__tag { display: none; }
  .ez-brand { gap: 8px; }
  .ez-brand__mark { width: 34px; height: 34px; }
  .ez-brand__word { font-size: 21px; }
  .evenzex-header-2 .header-wrap { gap: 8px; }
  .evenzex-header-2 .header-meta { gap: 8px; }
}

/* The active nav item is indigo in the base sheet, which disappears against
   the photographic header. Teal reads on both states. */
.evenzex-header-4:not(.sticky):not(.evenzex-header--solid) .header-menu .main-menu li.active-menu > a,
.evenzex-header-4:not(.sticky):not(.evenzex-header--solid) .header-menu .main-menu li:hover > a,
.evenzex-header-4:not(.sticky):not(.evenzex-header--solid) .header-menu .main-menu li.active-menu > .menu-icon::after,
.evenzex-header-4:not(.sticky):not(.evenzex-header--solid) .header-menu .main-menu li:hover > .menu-icon::after { color: var(--ez-teal); }

/* style.css title-cases labels, nav items and buttons. The copy here is
   written in sentence case, and German capitalisation rules make "Über Uns"
   plainly wrong, so the transform comes off everywhere except the eyebrows. */
label, .ez-check, .ez-form label, .price-plan,
.btn, .submit_btn, .price-btn,
.header-menu .main-menu li a,
.offcanvas-menu .main-menu li a,
.footer-nav-item, .widget-title, .event-title, .speaker-name,
.accordion-button, .counter-title, .form-title { text-transform: none; }

/* Long German compounds must break rather than push the grid */
.speaker-name, .speaker-designation, .ez-slot__title,
.event-title, .ez-post__title, .price-plan { overflow-wrap: anywhere; }

/* Nav labels must never wrap — German runs ~20% longer than English and a
   two-line item is what pushes the menu back over the logo.

   The caret is a sibling <span> that main.js injects after the link. As a
   flex item the <li> shrank to the link's min-content width, which pushed
   the caret onto a second line as soon as the nav got tight. Laying each
   <li> out as its own nowrap flex row keeps label and caret together. */
.evenzex-header-2 .header-menu .main-menu > li {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  white-space: nowrap;
  padding-inline: 14px;
}
.evenzex-header-2 .header-menu .main-menu > li > a { white-space: nowrap; }
.evenzex-header-2 .header-menu .main-menu > li > .menu-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* The horizontal nav is only shown from 1400px (see .d-xxl-block in the
   markup), and the container is capped at 1320px, so there is no extra room
   at wider viewports — one compact tier covers every desktop size. German is
   the constraint: with the tagline hidden and the switcher down to its globe,
   seven items and the CTA fit on one line in all three languages.
   The tagline still shows in the footer and on tablet/phone headers. */
@media (min-width: 1400px) {
  .evenzex-header-2 .header-menu .main-menu > li { padding-inline: 10px; }
  .evenzex-header-2 .header-menu .main-menu > li > a { font-size: 14px; }
  .evenzex-header-2 .header-meta .lang-current { display: none; }
  .evenzex-header-2 .header-meta .lang-short { display: inline; }
  .evenzex-header-2 .header-meta .lang-toggle { padding-inline: 11px; }
  .ez-brand__tag { display: none; }
}

/* Pages with no photographic banner need an opaque header */
.evenzex-header-2.evenzex-header--solid { background: #fff; border-bottom: 1px solid var(--ez-line); }
.evenzex-header-2.evenzex-header--solid .header-wrap { background: #fff; }
.evenzex-header-2.evenzex-header--solid .ez-brand__word { color: var(--ez-ink); }
.evenzex-header-2.evenzex-header--solid .ez-brand__tag { color: var(--ez-muted); }
.evenzex-header-2.evenzex-header--solid .header-menu .main-menu li a,
.evenzex-header-2.evenzex-header--solid .header-menu .main-menu li .menu-icon::after,
.evenzex-header-2.evenzex-header--solid .header-search .search-btn,
.evenzex-header-2.evenzex-header--solid .header-toggle button span,
.evenzex-header-2.evenzex-header--solid .cart-btn { color: var(--ez-ink); }
.evenzex-header-2.evenzex-header--solid .header-toggle button span { background: var(--ez-ink); }
.evenzex-header-2.evenzex-header--solid .header-menu .main-menu li.active-menu > a,
.evenzex-header-2.evenzex-header--solid .header-menu .main-menu li:hover > a { color: var(--ez-indigo); }
.evenzex-header-2.evenzex-header--solid .lang-toggle {
  border-color: var(--ez-line);
  background: #fff;
  color: var(--ez-ink);
}

/* Decorative blobs, waves and glows are positioned outside their section on
   purpose; clip them at the section edge so they never create a scrollbar */
.evenzex-hero-section-04,
.event-agenda-area,
.speaker-section-4,
.pricing-area-4,
.faq-area,
.about-area-4,
.footer-section-4,
.ez-stats,
.ez-cta,
.ez-banner { overflow: hidden; }

/* Programme card. style.css only styles the body inside .event-agenda-area,
   which left the shape unanchored everywhere else — restate it on the card
   itself so it works on any background. */
.single-event { height: 100%; }
.single-event .event-header { display: block; overflow: hidden; }
.single-event .event-header img { width: 100%; aspect-ratio: 18 / 13; object-fit: cover; }

.single-event .event-body {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3vw, 36px);
  background-color: #fff;
}

.single-event .event-body .event-body-shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.single-event .event-body .ez-eyebrow { display: block; margin-bottom: 6px; }
.single-event .event-body .event-title { margin-bottom: 10px; transition: color .3s linear; }
.single-event .event-body .event-title:hover { color: var(--ez-teal-deep); }
.single-event .event-body .event-desc { margin-bottom: 0; }

/* Hero: the year outline needs to breathe on small screens */
.evenzex-hero-section-04 .evenzex-hero-title { padding: 150px 0 90px; }
@media (min-width: 992px) { .evenzex-hero-section-04 .evenzex-hero-title { padding: 210px 0 130px; } }

/* Countdown band carries no background at all now — no photo, no scrim, no
   tint. It reads off the page itself. */
.event-countdown-2.event-countdown-3 { background: none; }
.event-countdown-3 .counter-wrapper .counter-content-left .btn-orange { color: var(--ez-ink); }

/* Countdown: the separator colons crowd on narrow screens */
@media (max-width: 575.98px) {
  .evenzex-countdown-inner-3 { flex-wrap: wrap; gap: 10px 0; }
  .evenzex-countdown-inner-3 .single-countdown { flex: 0 0 50%; }
}

/* Speaker circles: keep them round at every width */
.single-speaker .speaker-thumbnail img { aspect-ratio: 1; object-fit: cover; }

/*----------------------------------------*/
/*  08. Utilities & polish
/*----------------------------------------*/
.ez-eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  font-family: "Sora", "Cairo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ez-indigo);
}
.ez-eyebrow--teal { color: var(--ez-teal-deep); }
.ez-eyebrow--light { color: var(--ez-teal); }

.ez-lead { font-size: clamp(16px, 2vw, 19px); color: var(--ez-body); }
.ez-surface { background: var(--ez-surface); }
.ez-ink-bg { background: var(--ez-ink); color: #fff; }
.ez-deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }

.ez-skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--ez-ink);
  color: #fff;
}
.ez-skip:focus { inset-inline-start: 12px; top: 12px; }

img { max-width: 100%; height: auto; }

/* Focus ring — the base template removed outlines entirely */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid var(--ez-teal);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}