/* ============================================================================
   Onlineglish / Bastak — UX Enhancement Layer
   Brand: emerald #00563F + warm gold #F0E3B2. Scholarly, premium, RTL.
   Non-destructive polish over the Parsa theme. All overrides are intentional.
   ========================================================================== */

:root{
  --og-emerald:#00563F;
  --og-emerald-700:#013d2c;
  --og-emerald-600:#0a6b50;
  --og-emerald-500:#0c7a59;
  --og-emerald-300:#3f8f76;
  --og-gold:#F0E3B2;
  --og-gold-deep:#d9c074;
  --og-gold-soft:#f7efce;
  --og-ink:#16231e;
  --og-ease:cubic-bezier(.22,.61,.36,1);
  --og-ease-out:cubic-bezier(.16,1,.3,1);
  --og-shadow-1:0 2px 8px rgba(16,40,32,.06);
  --og-shadow-2:0 10px 30px -8px rgba(0,86,63,.18), 0 4px 12px rgba(16,40,32,.06);
  --og-shadow-3:0 22px 48px -16px rgba(0,86,63,.30), 0 8px 20px rgba(16,40,32,.08);
  /* neutral ramp */
  --og-paper:#ffffff; --og-bg:#f5f8f6; --og-surface:#ffffff; --og-surface-2:#eef3f0;
  --og-line:rgba(16,40,32,.10); --og-line-soft:rgba(16,40,32,.06);
  --og-muted:#6b7a73; --og-ink-soft:#2b3a34;
  /* radii */
  --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:30px; --r-pill:999px;
  /* spacing (4-based) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  /* container */
  --og-container:1240px;
  /* fluid type scale */
  --t-xs:clamp(.78rem,.76rem + .2vw,.85rem);
  --t-sm:clamp(.86rem,.82rem + .25vw,.96rem);
  --t-base:clamp(.96rem,.92rem + .3vw,1.06rem);
  --t-lg:clamp(1.1rem,1.02rem + .5vw,1.32rem);
  --t-xl:clamp(1.35rem,1.18rem + 1vw,1.85rem);
  --t-2xl:clamp(1.7rem,1.38rem + 1.9vw,2.7rem);
  --t-3xl:clamp(2.1rem,1.5rem + 3.2vw,3.7rem);
  /* semantic aliases (brand stays a token swap) */
  --c-primary:var(--og-emerald); --c-primary-700:var(--og-emerald-700);
  --c-on-primary:#fff; --c-accent:var(--og-gold); --c-accent-deep:var(--og-gold-deep);
  --c-price:var(--og-emerald);
}

/* ---------------------------------------------------------------------------
   1. Reveal-on-scroll: prevent FOUC. Gated by html.og-anim (added pre-paint,
   auto-removed after 5s as a failsafe; never added under reduced-motion).
   Only opacity is pre-set here; GSAP owns the transform.
   ------------------------------------------------------------------------- */
html.og-anim [data-elementor-type="wp-page"] .elementor-widget{ opacity:0; }
/* theme-rendered (non-Elementor) pages: hide showcase blocks for reveal */
html.og-anim body:not(.elementor-page) .woocommerce ul.products > li.product,
html.og-anim body:not(.elementor-page) .article-box,
html.og-anim body:not(.elementor-page) .article-item,
html.og-anim body:not(.elementor-page) .single-product .woocommerce-product-gallery,
html.og-anim body:not(.elementor-page) .single-product .woocommerce-tabs,
html.og-anim body:not(.elementor-page) .single-post .wp-post-image,
html.og-anim body:not(.elementor-page) .single .post-thumbnail img,
html.og-anim body:not(.elementor-page) .og-reveal,
html.og-anim body:not(.elementor-page) .og-rail__item{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  html [data-elementor-type="wp-page"] .elementor-widget,
  html .woocommerce ul.products > li.product, html .article-box, html .article-item,
  html .single-product .woocommerce-product-gallery, html .single-product .woocommerce-tabs,
  html .single-post .wp-post-image, html .og-reveal, html .og-rail__item{ opacity:1 !important; transform:none !important; }
}

/* ---------------------------------------------------------------------------
   2. Global interaction easing
   ------------------------------------------------------------------------- */
a, .elementor-button, button, .course-item-three, .category-item,
.article-box, .article-item, .jumper, input, .e-image, img{
  transition-timing-function: var(--og-ease);
}

::selection{ background:var(--og-emerald); color:var(--og-gold-soft); }

/* refined scrollbar (subtle, emerald) */
@media (pointer:fine){
  *{ scrollbar-width:thin; scrollbar-color:var(--og-emerald-600) transparent; }
  ::-webkit-scrollbar{ width:11px; height:11px; }
  ::-webkit-scrollbar-thumb{ background:var(--og-emerald-600); border-radius:10px; border:3px solid #fff; }
  ::-webkit-scrollbar-thumb:hover{ background:var(--og-emerald); }
}

/* keyboard focus — accessible emerald/gold ring */
a:focus-visible, button:focus-visible, .elementor-button:focus-visible,
input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--og-emerald) !important;
  outline-offset:3px !important;
  border-radius:6px;
}

/* ---------------------------------------------------------------------------
   3. Header — refined sticky / scrolled state
   ------------------------------------------------------------------------- */
header.header{
  transition: background-color .4s var(--og-ease), box-shadow .4s var(--og-ease),
              backdrop-filter .4s var(--og-ease), padding .35s var(--og-ease);
  will-change: background-color, box-shadow;
}
header.header.og-scrolled{
  box-shadow:0 8px 30px -10px rgba(0,40,28,.45);
  backdrop-filter:saturate(1.15) blur(2px);
}

/* nav links — animated gold underline that grows from the start (RTL-aware) */
header.header .menu-item > a,
.elementor-widget-header_menu .menu-item > a{
  position:relative;
}
header.header .menu-item > a::after,
.elementor-widget-header_menu .menu-item > a::after{
  content:""; position:absolute; bottom:-4px; inset-inline-start:0;
  width:100%; height:2px; background:var(--og-gold);
  transform:scaleX(0); transform-origin:right; /* RTL: grow from right */
  transition:transform .32s var(--og-ease-out); border-radius:2px;
}
header.header .menu-item > a:hover::after,
header.header .menu-item.current-menu-item > a::after,
.elementor-widget-header_menu .menu-item > a:hover::after{ transform:scaleX(1); }

/* logo — crisp light wordmark on the emerald header (the gray PNG was low-contrast) */
header.header img[src*="logotype"]{ filter:brightness(0) invert(1); }
/* nav links — gold on hover/active, thicker glowing gold underline, comfier weight */
header.header .menu-item > a,
.elementor-widget-header_menu .menu-item > a{ font-weight:600; letter-spacing:-.01em; transition:color .25s var(--og-ease); }
header.header .menu-item > a:hover,
header.header .menu-item.current-menu-item > a,
header.header .current-menu-item > a,
.elementor-widget-header_menu .menu-item > a:hover{ color:var(--og-gold) !important; }
header.header .menu-item > a::after,
.elementor-widget-header_menu .menu-item > a::after{ height:3px; bottom:-6px; background:linear-gradient(90deg,var(--og-gold),var(--og-gold-deep)); box-shadow:0 1px 7px rgba(240,227,178,.45); }
/* scrolled → deeper emerald glass (if the header sticks) */
header.header.og-scrolled{ background:rgba(0,52,37,.86) !important; backdrop-filter:saturate(1.25) blur(12px); }
/* login/register → gold so it pops off the emerald (was green-on-green) */
header.header .btn_login{ background:linear-gradient(180deg,var(--og-gold),var(--og-gold-deep)) !important; color:var(--og-emerald-700) !important; font-weight:800 !important; border:0 !important; box-shadow:0 10px 22px -12px rgba(217,192,116,.85) !important; transition:transform .2s var(--og-ease), filter .2s var(--og-ease); }
header.header .btn_login:hover{ transform:translateY(-1px); filter:brightness(1.05); }
header.header .btn_login i, header.header .btn_login svg{ color:var(--og-emerald-700) !important; fill:var(--og-emerald-700) !important; }
/* social icons → glass circles, gold on hover */
header.header .social-header a{ display:inline-grid; place-items:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; transition:background .25s var(--og-ease), color .25s var(--og-ease), transform .25s var(--og-ease); }
header.header .social-header a:hover{ background:var(--og-gold); color:var(--og-emerald-700); transform:translateY(-2px); }
/* hairline that separates the header from the hero */
header.header{ border-bottom:1px solid rgba(240,227,178,.13); }
/* header bg — the theme's near-black gradient was meant to overlay the OLD emerald Elementor
   hero; on the coded/light pages it reads as black. Recolor to a cohesive emerald that flows
   straight into the coded hero. (first section = promo bar, left as-is.) */
header.header .elementor-top-section:not(:first-child){ background-image:none !important; background-color:var(--og-emerald-700) !important; }

/* ============ Coded desktop header (.ogh) — replaces the Elementor header ============ */
.og-coded-header{ position:relative; z-index:50; border-bottom:1px solid rgba(240,227,178,.14); }
.ogh{ background:linear-gradient(180deg,var(--og-emerald-700),var(--og-emerald)); color:#fff; }
.ogh__wrap{ width:min(100% - 40px, 1280px); margin-inline:auto; display:flex; align-items:center; }
.ogh__top{ border-bottom:1px solid rgba(255,255,255,.1); }
.ogh__top .ogh__wrap{ justify-content:space-between; min-height:42px; gap:16px; }
.ogh__phone{ display:inline-flex; align-items:center; gap:8px; color:rgba(255,255,255,.92); text-decoration:none; font-size:var(--t-sm); font-weight:600; }
.ogh__phone i{ color:var(--og-gold); } .ogh__phone:hover{ color:#fff; } .ogh__phone span{ direction:ltr; }
.ogh__socials{ display:flex; align-items:center; gap:8px; }
.ogh__socials a{ display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.1); color:#fff; transition:background .25s var(--og-ease), color .25s var(--og-ease), transform .25s var(--og-ease); }
.ogh__socials a:hover{ background:var(--og-gold); color:var(--og-emerald-700); transform:translateY(-2px); }
.ogh__main .ogh__wrap{ min-height:76px; gap:clamp(16px,2.5vw,40px); }
.ogh__logo{ flex:0 0 auto; display:flex; align-items:center; }
.ogh__logo img{ height:46px; width:auto; display:block; filter:brightness(0) invert(1); }
.ogh__nav{ flex:1 1 auto; display:flex; justify-content:center; min-width:0; }
.ogh__actions{ flex:0 0 auto; display:flex; align-items:center; gap:14px; }
.ogh__menu{ display:flex; align-items:center; gap:clamp(4px,1.3vw,20px); list-style:none; margin:0; padding:0; }
.ogh__menu .menu-item{ position:relative; }
.ogh__menu > .menu-item > a{ display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-weight:600; font-size:var(--t-sm); padding:10px 2px; position:relative; transition:color .25s var(--og-ease); white-space:nowrap; }
.ogh__menu .sub-menu a::after{ content:none !important; }
.ogh__menu .sub-menu{ position:absolute; inset-block-start:calc(100% + 11px); right:0; left:auto; min-width:238px; background:#fff; border-radius:16px; padding:10px; box-shadow:0 30px 64px -24px rgba(0,40,28,.5), 0 0 0 1px rgba(0,86,63,.06); list-style:none; margin:0; opacity:0; visibility:hidden; transform:translateY(10px) scale(.97); transform-origin:top right; transition:opacity .26s var(--og-ease-out), transform .26s var(--og-ease-out), visibility .26s; z-index:60; }
.ogh__menu .sub-menu::before{ content:""; position:absolute; inset-block-start:-7px; right:26px; width:14px; height:14px; background:#fff; border-radius:3px; transform:rotate(45deg); box-shadow:-3px -3px 6px -3px rgba(0,40,28,.08); }
.ogh__menu .menu-item:hover > .sub-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ogh__menu .sub-menu a{ display:flex; align-items:center; gap:9px; padding:11px 14px; border-radius:11px; color:var(--og-ink-soft); font-size:var(--t-sm); font-weight:600; text-decoration:none; transition:background .2s var(--og-ease), color .2s var(--og-ease), padding-inline-start .2s var(--og-ease); white-space:nowrap; position:relative; }
.ogh__menu .sub-menu a::before{ content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--og-gold); opacity:0; transform:scale(.4); transition:opacity .2s var(--og-ease), transform .2s var(--og-ease); }
.ogh__menu .sub-menu a:hover{ background:linear-gradient(90deg, rgba(0,86,63,.07), rgba(0,86,63,0)); color:var(--og-emerald); padding-inline-start:18px; }
.ogh__menu .sub-menu a:hover::before{ opacity:1; transform:scale(1); }
.ogh__caret{ font-size:.7em; opacity:.55; margin-inline-start:3px; transition:transform .25s var(--og-ease), opacity .25s var(--og-ease); }
.ogh__menu .menu-item-has-children:hover > a .ogh__caret{ transform:rotate(180deg); opacity:.9; }
.ogh__cart-wrap{ display:inline-flex; align-items:center; }
.ogh__cart{ position:relative; display:inline-grid; place-items:center; width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1); color:#fff; font-size:18px; text-decoration:none; transition:background .25s var(--og-ease); }
.ogh__cart:hover{ background:rgba(255,255,255,.18); }
.ogh__cart .cart-cont{ position:absolute; inset-block-start:-6px; inset-inline-start:-6px; min-width:20px; height:20px; display:grid; place-items:center; padding:0 5px; border-radius:999px; background:var(--og-gold); color:var(--og-emerald-700); font-size:11px; font-weight:800; line-height:1; }
.ogh__login .btn_login{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:12px; background:linear-gradient(180deg,var(--og-gold),var(--og-gold-deep)); color:var(--og-emerald-700); font-weight:800; font-size:var(--t-sm); cursor:pointer; box-shadow:0 10px 22px -12px rgba(217,192,116,.85); transition:transform .2s var(--og-ease), filter .2s var(--og-ease); white-space:nowrap; }
.ogh__login .btn_login:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.ogh__login .btn_login .user-icon{ display:inline-flex; } .ogh__login .btn_login i{ color:var(--og-emerald-700); }
.ogh__login .login-button-intro{ position:relative; }
.ogh__login .box-user-head > label{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; color:#fff; font-weight:700; font-size:var(--t-sm); padding:9px 14px; border-radius:12px; background:rgba(255,255,255,.12); }
.ogh__login .box-user-content{ position:absolute; inset-inline-end:0; inset-block-start:calc(100% + 8px); min-width:225px; max-width:calc(100vw - 24px); background:#fff; border-radius:14px; box-shadow:0 26px 54px -20px rgba(0,40,28,.4); padding:8px; opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s var(--og-ease); z-index:9000; }
.ogh__login input:checked ~ .box-user-content{ opacity:1; visibility:visible; transform:translateY(0); }
.ogh__login .box-user-content ul{ list-style:none; margin:0; padding:0; }
.ogh__login .box-user-content a{ display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:9px; color:var(--og-ink-soft); font-size:var(--t-sm); font-weight:600; text-decoration:none; transition:background .2s var(--og-ease); }
.ogh__login .box-user-content a:hover{ background:var(--og-surface-2); color:var(--og-emerald); }
.ogh__login .box-user-content i{ color:var(--og-emerald); width:18px; text-align:center; }
/* mobile-only header elements — hidden on desktop */
.ogh__burger, .ogh__nav-head, .ogh__nav-foot{ display:none; }
body.ogh-lock{ overflow:hidden; }
/* ---- mobile (≤992px): hamburger + slide-in panel (theme .mobile-header is disabled) ---- */
@media (max-width:992px){
  html, body{ overflow-x:hidden !important; max-width:100%; }
  /* the theme's mini-cart sidebar is position:fixed + off-screen (white, 400px) — fixed elements
     aren't clipped by overflow:hidden, so on touch it created horizontal scroll. Drop it from
     layout while closed; it returns the moment body.active-mini-cart is set (cart opened). */
  body:not(.active-mini-cart) .ic-cart-sidebar-wrapper{ display:none !important; }
  .ogh__top{ display:none; }
  .ogh__main .ogh__wrap{ min-height:64px; gap:12px; }
  .ogh__logo{ margin-inline:auto; } /* burger (right) · logo (center) · cart+login (left) */
  .ogh__logo img{ height:38px; }
  .ogh__burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:rgba(255,255,255,.12); cursor:pointer; }
  .ogh__burger span{ display:block; width:20px; height:2px; margin-inline:auto; background:#fff; border-radius:2px; transition:transform .3s var(--og-ease), opacity .2s var(--og-ease); }
  .ogh.is-open .ogh__burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .ogh.is-open .ogh__burger span:nth-child(2){ opacity:0; }
  .ogh.is-open .ogh__burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .ogh__login .btn-login-text{ display:none; }
  .ogh__login .btn_login{ padding:0; width:44px; height:44px; justify-content:center; border-radius:12px; }
  /* logged-in account button → clean 44px icon like cart/burger (hide name + chevron) */
  .ogh__login .box-user-head > label{ width:44px; height:44px; padding:0; justify-content:center; gap:0; }
  .ogh__login .box-user-head > label .fa-chevron-down{ display:none; }
  .ogh__login .box-user-head > label .user-icon{ font-size:18px; }
  /* not-logged-in login → glass icon, consistent with cart/burger/account (override the reskin gold) */
  header.header .ogh__login .btn_login{ background:rgba(255,255,255,.1) !important; color:#fff !important; box-shadow:none !important; }
  header.header .ogh__login .btn_login i, header.header .ogh__login .btn_login .user-icon{ color:#fff !important; }
  .ogh__nav{ position:fixed; top:0; bottom:0; right:0; left:auto; width:min(330px,86vw); background:linear-gradient(180deg,var(--og-emerald-700),var(--og-emerald)); box-shadow:-20px 0 60px -20px rgba(0,0,0,.5); transform:translateX(100%); transition:transform .35s var(--og-ease-out); z-index:99999; display:flex; flex-direction:column; overflow-y:auto; padding:0; overscroll-behavior:contain; }
  .ogh.is-open .ogh__nav{ transform:translateX(0); }
  .ogh__nav-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.12); }
  .ogh__nav-title{ font-weight:800; color:#fff; }
  .ogh__nav-close{ display:inline-grid; place-items:center; width:38px; height:38px; border:0; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; font-size:18px; cursor:pointer; }
  .ogh__menu{ flex-direction:column; align-items:stretch; gap:0; padding:8px 10px; }
  .ogh__menu > .menu-item > a{ padding:13px 12px; font-size:1rem; border-radius:10px; }
  .ogh__menu > .menu-item > a:hover{ background:rgba(255,255,255,.08); color:#fff; }
  .ogh__menu .menu-item{ position:static; }
  .ogh__menu .sub-menu{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; background:rgba(0,0,0,.16); border-radius:10px; padding:4px; margin:2px 8px 6px; min-width:0; }
  .ogh__menu .sub-menu::before, .ogh__menu .sub-menu a::before{ display:none !important; }
  .ogh__menu .sub-menu a{ display:block; color:rgba(255,255,255,.85); padding:9px 12px; }
  /* accordion: collapse sub-menus, expand the tapped one (only when JS added .og-acc) */
  .ogh.og-acc .ogh__menu .sub-menu{ display:none !important; }
  .ogh.og-acc .ogh__menu .menu-item-has-children.is-expanded > .sub-menu{ display:block !important; }
  .ogh__menu > .menu-item-has-children > a{ display:flex; align-items:center; justify-content:space-between; }
  .ogh__caret{ font-size:1em; opacity:.85; padding:8px 11px; margin-inline-end:-6px; border-radius:9px; transition:transform .25s var(--og-ease), background .2s var(--og-ease); }
  .ogh__caret:active{ background:rgba(255,255,255,.12); }
  .ogh__menu .menu-item-has-children.is-expanded > a .ogh__caret{ transform:rotate(180deg); }
  .ogh__nav-head{ position:sticky; top:0; z-index:3; background:var(--og-emerald-700); }
  .ogh__menu .sub-menu a:hover{ background:rgba(255,255,255,.1); color:#fff; }
  .ogh__nav-foot{ display:flex; flex-direction:column; gap:14px; margin-top:auto; padding:18px; border-top:1px solid rgba(255,255,255,.12); }
  .ogh__nav-foot .ogh__phone{ font-size:1rem; }
  .ogh__nav-foot .ogh__socials{ justify-content:flex-start; }
  .ogh__backdrop{ position:fixed; inset:0; background:rgba(0,20,14,.55); opacity:0; visibility:hidden; transition:opacity .35s var(--og-ease), visibility .35s; z-index:99998; }
  /* hide the theme's fixed bottom toolbar while the menu is open so it can't sit over the panel */
  body.ogh-lock .mobile-toolbar, body.ogh-lock .mobile-toolbar-fixed{ display:none !important; }
  .ogh.is-open .ogh__backdrop{ opacity:1; visibility:visible; }
}

/* ---------------------------------------------------------------------------
   4. Buttons — premium emerald depth + gold sheen sweep + press feedback
   ------------------------------------------------------------------------- */
.elementor-button, .section-button, .section-button-v2, .member-course-button{
  position:relative; overflow:hidden;
  transition:transform .25s var(--og-ease), box-shadow .3s var(--og-ease), filter .25s var(--og-ease);
  will-change:transform;
}
.elementor-button::after, .section-button::after,
.section-button-v2::after, .member-course-button::after{
  content:""; position:absolute; top:0; inset-inline-start:-130%;
  width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(240,227,178,.45),transparent);
  transform:skewX(-18deg); transition:none;
}
.elementor-button:hover, .section-button:hover,
.section-button-v2:hover, .member-course-button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -10px rgba(0,86,63,.5);
  filter:saturate(1.05);
}
.elementor-button:hover::after, .section-button:hover::after,
.section-button-v2:hover::after, .member-course-button:hover::after{
  inset-inline-start:130%;
  transition:inset-inline-start .7s var(--og-ease-out);
}
.elementor-button:active, .section-button:active,
.section-button-v2:active, .member-course-button:active{ transform:translateY(0) scale(.985); }

/* ---------------------------------------------------------------------------
   5. Course cards (.course-item-three) — soft elevation, image zoom, gold price
   ------------------------------------------------------------------------- */
.course-item-three{
  border-radius:20px !important;
  box-shadow:var(--og-shadow-1);
  transition:transform .4s var(--og-ease-out), box-shadow .4s var(--og-ease-out);
  will-change:transform; overflow:hidden;
}
.course-item-three:hover{ transform:translateY(-8px); box-shadow:var(--og-shadow-3); }
.course-item-three img{ transition:transform .55s var(--og-ease-out); }
.course-item-three:hover img{ transform:scale(1.05); }

/* gold price pill emphasis */
.course-price-three{
  background:linear-gradient(180deg,var(--og-gold-soft),var(--og-gold)) !important;
  color:var(--og-emerald-700) !important;
  font-weight:700; box-shadow:0 4px 12px -4px rgba(217,192,116,.7);
}

/* ---------------------------------------------------------------------------
   6. Category items (hero category row) — lift + emerald glow
   ------------------------------------------------------------------------- */
.category-item{
  border-radius:16px;
  transition:transform .35s var(--og-ease-out), box-shadow .35s var(--og-ease-out), background-color .35s var(--og-ease);
  will-change:transform;
}
.category-item:hover{
  transform:translateY(-6px);
  box-shadow:0 16px 34px -14px rgba(0,86,63,.55);
}
.category-carousel-icon, .category-carousel-pic{ transition:transform .4s var(--og-ease-out); }
.category-item:hover .category-carousel-icon,
.category-item:hover .category-carousel-pic{ transform:scale(1.12); }

/* ---------------------------------------------------------------------------
   7. Article / blog cards — lift, image zoom, sliding read-more arrow
   ------------------------------------------------------------------------- */
.article-box, .article-item{
  border-radius:18px !important; overflow:hidden;
  box-shadow:var(--og-shadow-1);
  transition:transform .4s var(--og-ease-out), box-shadow .4s var(--og-ease-out);
}
.article-box:hover, .article-item:hover{ transform:translateY(-6px); box-shadow:var(--og-shadow-2); }
.article-box img, .article-item img{ transition:transform .55s var(--og-ease-out); }
.article-box:hover img, .article-item:hover img{ transform:scale(1.06); }

/* ---------------------------------------------------------------------------
   8. Section title accent — a small gold marker before headings
   ------------------------------------------------------------------------- */
.main-title-box .title, .main_title_box .title{ position:relative; }

/* ---------------------------------------------------------------------------
   9. BRAND FIX — Instagram banner (was magenta→pink). Now emerald with a warm
   gold glow. Inline gradient is non-!important, so this wins.
   ------------------------------------------------------------------------- */
.box-instagram{
  background:
    radial-gradient(120% 160% at 85% -20%, rgba(240,227,178,.22), transparent 55%),
    linear-gradient(100deg,var(--og-emerald-700) 0%,var(--og-emerald) 48%,var(--og-emerald-500) 100%) !important;
  border:1px solid rgba(240,227,178,.20);
  box-shadow:0 20px 46px -18px rgba(0,86,63,.55);
}
.box-instagram a, .box-instagram .elementor-button{
  background:var(--og-gold) !important; color:var(--og-emerald-700) !important;
  border:none !important;
}

/* ---------------------------------------------------------------------------
   10. BRAND FIX — footer vertical-menu panel (was indigo/green-pink). Emerald.
   ------------------------------------------------------------------------- */
/* footer-left column carried a solid indigo (#4F3FFF) — recolor the panel to emerald */
.elementor-element-142a079 > .elementor-widget-wrap,
.elementor-element-142a079 .elementor-widget-wrap.elementor-element-populated{
  background-color:var(--og-emerald-700) !important;
  background-image:linear-gradient(160deg,var(--og-emerald) 0%,var(--og-emerald-700) 100%) !important;
}
/* any decorative animated glow blob → emerald→gold (no-op if absent) */
.animate-slide-gradient{
  background-image:linear-gradient(135deg,var(--og-emerald-500),var(--og-emerald) 50%,var(--og-gold-deep)) !important;
}
/* menu widget itself stays transparent so the column reads as one clean emerald panel */
.elementor-widget-footer_vertical_menu{ background:transparent !important; }
/* keep menu text legible (light) on the emerald panel */
.elementor-widget-footer_vertical_menu a,
.elementor-widget-footer_vertical_menu .menu-item > a,
.elementor-widget-footer_vertical_menu h1, .elementor-widget-footer_vertical_menu h2,
.elementor-widget-footer_vertical_menu h3, .elementor-widget-footer_vertical_menu h4,
.elementor-widget-footer_vertical_menu p, .elementor-widget-footer_vertical_menu span{
  color:var(--og-gold-soft) !important;
}
.elementor-widget-footer_vertical_menu a{ transition:color .25s var(--og-ease), padding-inline-start .25s var(--og-ease); }
.elementor-widget-footer_vertical_menu a:hover{ color:var(--og-gold) !important; padding-inline-start:6px; }

/* ---------------------------------------------------------------------------
   11. Back-to-top jumper — emerald disc, gold arrow, lift
   ------------------------------------------------------------------------- */
.elementor-widget-footer_jumper .jumper, .jumper{
  background:var(--og-emerald) !important; color:var(--og-gold) !important;
  box-shadow:0 10px 24px -8px rgba(0,86,63,.6);
  transition:transform .3s var(--og-ease), box-shadow .3s var(--og-ease), background-color .3s var(--og-ease);
}
.elementor-widget-footer_jumper .jumper:hover, .jumper:hover{
  transform:translateY(-4px); background:var(--og-emerald-700) !important;
  box-shadow:0 16px 30px -10px rgba(0,86,63,.7);
}

/* ---------------------------------------------------------------------------
   12. Images: graceful tone — gentle rounding on content images already handled
   by theme; keep carousels untouched.
   ------------------------------------------------------------------------- */
[data-elementor-type="wp-page"] .elementor-widget-image img{ border-radius:14px; }