@font-face {
	font-weight: normal;
	font-style: normal;
	font-family: "woodmart-font";
	src: url("//a2englishacademy.com/wp-content/themes/woodmart/fonts/woodmart-font-3-400.woff2?v=8.2.7") format("woff2");
}

@font-face {
	font-family: "star";
	font-weight: 400;
	font-style: normal;
	src: url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/star.eot?#iefix") format("embedded-opentype"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/star.woff") format("woff"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/star.ttf") format("truetype"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/star.svg#star") format("svg");
}

@font-face {
	font-family: "WooCommerce";
	font-weight: 400;
	font-style: normal;
	src: url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.eot?#iefix") format("embedded-opentype"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.woff") format("woff"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.ttf") format("truetype"), url("//a2englishacademy.com/wp-content/plugins/woocommerce/assets/fonts/WooCommerce.svg#WooCommerce") format("svg");
}

:root {
	--wd-text-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #777777;
	--wd-text-font-size: 15px;
	--wd-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 700;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-widget-title-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 700;
	--wd-widget-title-transform: capitalize;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Manrope", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 600;
	--wd-header-el-transform: capitalize;
	--wd-header-el-font-size: 14px;
	--wd-brd-radius: 10px;
	--wd-primary-color: rgb(206,47,47);
	--wd-alternative-color: rgb(255,255,255);
	--wd-link-color: rgb(28,28,28);
	--wd-link-color-hover: rgba(30,7,7,0.79);
	--btn-default-bgcolor: rgb(221,51,51);
	--btn-default-bgcolor-hover: rgb(168,35,35);
	--btn-accented-bgcolor: rgb(221,51,51);
	--btn-accented-bgcolor-hover: rgb(188,39,39);
	--btn-transform: capitalize;
	--wd-form-brd-width: 1px;
	--notices-success-bg: #459647;
	--notices-success-color: #fff;
	--notices-warning-bg: #E0B252;
	--notices-warning-color: #fff;
	--wd-sticky-btn-height: 95px;
}
.wd-popup.wd-age-verify {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: none;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left center;
	--wd-popup-width: 800px;
}
:is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg, :is(.woodmart-archive-shop .wd-builder-off,.wd-wishlist-content,.related-and-upsells,.cart-collaterals,.wd-shop-product,.wd-fbt) .wd-products-with-bg :is(.wd-product,.wd-cat) {
	--wd-prod-bg:rgb(255,255,255);
	--wd-bordered-bg:rgb(255,255,255);
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title {
	background-color: rgb(250,248,245);
	background-image: none;
	background-size: cover;
	background-position: center center;
}
.wd-footer {
	background-color: rgb(221,51,51);
	background-image: none;
}
html .wd-nav-mobile > li > a {
	text-transform: capitalize;
}
html .wd-checkout-steps li {
	text-transform: capitalize;
}
html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
	font-size: 32px;
}
html table th {
	text-transform: capitalize;
}
.page .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-product .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-blog .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-post .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.woodmart-archive-portfolio .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
.single-portfolio .wd-page-content {
	background-color: rgb(250,248,245);
	background-image: none;
}
html .widget_price_filter [class*="price_slider_amount"] .button {
	color: rgb(255,255,255);
	background: rgb(140,188,103);
}
html .widget_price_filter [class*="price_slider_amount"] .button:hover {
	color: rgb(255,255,255);
	background: rgb(128,171,94);
}
body, [class*=color-scheme-light], [class*=color-scheme-dark], .wd-search-form[class*="wd-header-search-form"] form.searchform, .wd-el-search .searchform {
	--wd-form-bg: rgb(255,255,255);
}
.wd-nav-arrows.wd-pos-sep:not(:where(.wd-custom-style)) {
	--wd-arrow-size: 40px;
	--wd-arrow-icon-size: 16px;
	--wd-arrow-offset-h: 20px;
	--wd-arrow-color: rgb(51,51,51);
	--wd-arrow-color-hover: rgb(255,255,255);
	--wd-arrow-color-dis: rgba(51,51,51,0.8);
	--wd-arrow-bg: rgb(255,255,255);
	--wd-arrow-bg-hover: rgb(140,188,103);
	--wd-arrow-bg-dis: rgb(255,255,255);
	--wd-arrow-radius: 10px;
	--wd-arrow-shadow: 0px 0px 0px 0px rgba(255,255,255,0);
}
.wd-nav-scroll {
	--wd-nscroll-height: 3px;
	--wd-nscroll-drag-bg: rgb(140,188,103);
	--wd-nscroll-drag-bg-hover: rgb(128,171,94);
}
.product-labels .product-label.new {
	background-color: rgb(140,188,103);
	color: rgb(255,255,255);
}
.wd-popup.popup-quick-view {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}
	html .page-title > .container > .title, html .page-title .wd-title-wrapp > .title {
		font-size: 28px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}
	[class*="thumbs-grid-bottom"] .woocommerce-product-gallery__wrapper.wd-grid {
		--wd-col: 1;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 5px;
--btn-default-color: #fff;
--btn-default-color-hover: #fff;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 5px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-accented-brd-radius: 5px;
--btn-accented-box-shadow: none;
--btn-accented-box-shadow-hover: none;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


/* ========== a2 project • English Centre — Activities ========== */
/* Tokens + base */
.ec-activities{--ec-red:#eb2026; --ec-red-dark:#be0c11; --ec-dark:#262626; --ec-text:#111; --ec-dim:#6b7280}
.ec-activities *{box-sizing:border-box}

/* ---------- Mobile-first (default) ---------- */
.ec-mobile{display:block}
.ec-m-item{margin-top:24px}
.ec-m-item h2{font-weight:700;font-size:16px;color:#000;margin:0}
.ec-m-item p{margin:8px 0 0;color:#4f4f4fcc;font-size:14px;line-height:1.6}
.ec-m-item img{display:block;width:100%;max-width:328px;height:auto;margin-top:12px;border-radius:12px}

.ec-cta-wrap{display:flex;flex-direction:column;gap:12px;margin-top:18px}
.ec-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border-radius:12px;font-weight:800;text-decoration:none;border:0}
.ec-btn-red{background:var(--ec-red);color:#fff;box-shadow:0 4px 0 0 var(--ec-red-dark)}
.ec-btn-red:hover{background:#c51c21}
.ec-btn-dark{background:var(--ec-dark);color:#fff;box-shadow:0 4px 0 0 #000}
.ec-btn-dark:hover{background:#111}

.ec-timer{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}
.ec-timer p{color:#96193C;font-size:14px;font-weight:600;margin:0}

/* Hide desktop by default */
.ec-desktop{display:none}

/* ---------- Desktop (≥1024px) ---------- */
@media (min-width:1024px){
  .ec-mobile{display:none}
  .ec-desktop{
    display:grid;
    max-width:1200px;              /* container width */
    margin-inline:auto;
    grid-template-columns:520px minmax(0,1fr);
    gap:28px; align-items:start;
  }

  /* left list (options) */
  .ec-left{display:flex;flex-direction:column;gap:6px}
  .ec-item{
    position:relative;display:flex;gap:14px;align-items:flex-start;
    padding:12px 8px;border:0;background:transparent;text-align:left;cursor:pointer
  }
  .ec-item .ec-bar{
    width:2px;height:32px;border-radius:100px;background:#e5e7eb;
    display:inline-block;flex:0 0 auto;transition:height .25s ease, background .2s ease
  }
  /* Titles: 20px inactive → 24px on hover/active */
  .ec-item .ec-copy h3{
    font-size:20px; line-height:1.55; letter-spacing:-0.2px;
    color:#6b7280; margin:0; font-weight:700;
    transition:color .2s ease, font-size .15s ease;
  }
  .ec-item.is-active .ec-copy h3,
  .ec-item:hover .ec-copy h3,
  .ec-item:focus .ec-copy h3{ font-size:24px; color:#111 }

  /* Subtext: only on hover/active */
  .ec-item .ec-copy p{
    font-size:16px; line-height:1.7; color:#6b7280; max-width:446px;
    max-height:0; opacity:0; overflow:hidden; margin-top:0;
    transition:max-height .25s ease, opacity .2s ease, margin-top .2s ease;
  }
  .ec-item.is-active .ec-copy p,
  .ec-item:hover .ec-copy p,
  .ec-item:focus .ec-copy p{ max-height:160px; opacity:1; margin-top:8px }

  .ec-item.is-active .ec-bar,
  .ec-item:hover .ec-bar,
  .ec-item:focus .ec-bar{ height:88px; background:var(--ec-red) }

  /* Image pane */
  .ec-right{display:flex;justify-content:flex-start;align-items:flex-start}
  .ec-main-img{width:640px;max-width:640px;height:auto;border-radius:14px;opacity:1;transition:opacity .25s ease}

  /* CTAs + timer (centered like your screenshot) */
  .ec-cta-row{grid-column:1/-1;display:flex;gap:16px;justify-content:center;margin-top:24px}
  .ec-cta-row .ec-btn{width:218px;height:48px}
  .ec-timer{grid-column:1/-1;display:flex;justify-content:center;margin-top:10px}
}

/* Accessibility */
.ec-item:focus-visible{outline:2px solid var(--ec-red);outline-offset:3px;border-radius:10px}

/* ---------- Mobile fine-tune (≤1023.98px) ---------- */
@media (max-width:1023.98px){
  .ec-mobile .ec-m-item h2{font-size:18px}
  .ec-mobile .ec-m-item p{font-size:14px;line-height:1.7}
  .ec-mobile .ec-cta-wrap{align-items:flex-start}
  .ec-mobile .ec-timer{justify-content:flex-start}
}
/* a2 project • Hero + Centres */
.ec-hero{
  background:linear-gradient(135deg,#0b0f16 0%,#3a0a0a 50%,#7a0f18 100%);
  padding:48px 16px;
  color:#fff;
}
.ec-hero-wrap{
  max-width:1200px;
  margin-inline:auto;
  display:grid;
  gap:32px;
  grid-template-columns:1fr;
  align-items:center;
}
@media(min-width:1024px){
  .ec-hero-wrap{ grid-template-columns:1fr 580px; }
}

.ec-hero-title{
  font-size:32px; font-weight:800; line-height:1.25; margin:0;
}
@media(min-width:768px){ .ec-hero-title{ font-size:52px; } }

.ec-hero-text{
  margin-top:16px; font-size:16px; line-height:1.7; color:#9ca3af;
}
@media(min-width:768px){ .ec-hero-text{ font-size:18px; } }

.ec-hero-cta{
  display:flex; flex-wrap:wrap; gap:16px; margin-top:24px;
}
.ec-btn{
  display:inline-flex; justify-content:center; align-items:center;
  padding:0 24px; height:48px; border-radius:12px;
  font-weight:700; text-decoration:none; font-size:15px;
}
.ec-btn-red{ background:#eb2026; color:#fff; box-shadow:0 4px 0 #be0c11; }
.ec-btn-red:hover{ background:#c51c21; }
.ec-btn-light{ background:#fffbfa; color:#000; box-shadow:0 4px 0 #cdcccc; }
.ec-btn-light:hover{ background:#ddd; }

.ec-hero-right{ text-align:center }
.ec-hero-img{ width:100%; max-width:580px; border-radius:20px; }

/* Centres */
.ec-centres{ max-width:1200px; margin:40px auto 0; padding:0 16px }
.ec-centres-title{ font-size:20px; font-weight:700; margin-bottom:16px }

.ec-centres-slider{
  display:flex; gap:16px;
  overflow-x:auto; scrollbar-width:none;
}
.ec-centres-slider::-webkit-scrollbar{ display:none }

.ec-centre-card{
  flex:0 0 auto; display:flex; align-items:flex-start; gap:12px;
  padding:16px; border:2px solid #b7b7b8; border-radius:20px;
  background:rgba(255,255,255,0.08); backdrop-filter:blur(30px);
  max-width:320px; min-width:260px;
  transition:background .2s ease;
}
.ec-centre-card:hover{ background:rgba(176,28,28,0.14) }

.ec-centre-icon{ width:24px; height:24px; flex-shrink:0 }
.ec-centre-name{ font-size:16px; font-weight:600; margin:0 0 6px; color:#fff }
.ec-centre-address{ font-size:14px; color:#b7b7b8; line-height:1.5; margin:0 }

/* Carousel container */
.slider {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  max-width: 600px;
  width: 100%;
}

/* Slide track */
.slides {
  display: flex;
  transition: transform .2s ease;
}

/* Each slide */
.slides img {
  width: 100%;
  flex: 0 0 100%;
  border-radius: 20px;
}
/* ===== Smooth continuous marquee mode for your existing .slider ===== */
/* Put data-mode="marquee" on the .slider you want to run continuously */

.slider[data-mode="marquee"]{
  overflow: hidden;
}

.slider[data-mode="marquee"] .slides{
  display: flex;
  gap: var(--marquee-gap, 16px);
  /* Linear infinite motion */
  animation: ec-marquee var(--marquee-speed, 40s) linear infinite;
  will-change: transform;
}

/* Pause on hover (optional) */
.slider[data-mode="marquee"]:hover .slides{
  animation-play-state: paused;
}

/* Card sizing (matches your example; tweak as needed) */
.slider[data-mode="marquee"] .slides img{
  flex: 0 0 var(--marquee-item-w, 350px);
  width: var(--marquee-item-w, 350px);
  height: var(--marquee-item-h, 410px);
  object-fit: cover;
  border-radius: 20px;
  display: block;
}

/* Mobile sizes */
@media (max-width: 767px){
  .slider[data-mode="marquee"] .slides{
    gap: var(--marquee-gap, 12px);
  }
  .slider[data-mode="marquee"] .slides img{
    flex-basis: var(--marquee-item-w-sm, 220px);
    width: var(--marquee-item-w-sm, 220px);
    height: var(--marquee-item-h-sm, 260px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .slider[data-mode="marquee"] .slides{
    animation: none !important;
    transform: translateX(0) !important;
  }
}

/* Keyframes: because we duplicate the slide set once via JS,
   translating -50% returns us to the start seamlessly. */
@keyframes ec-marquee{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* 📱 Mobile Sticky Toolbar Styles */
@media only screen and (max-width: 768px) {
  .wd-toolbar {
    position: fixed !important;
    z-index: 9999;
    padding: 8px 0;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;

    /* 🎨 Added: white shade with adjustable opacity *
    --toolbar-bg-opacity: 0.07; /* ← change this value (0.05–0.25 recommended) */
    background: rgba(255, 255, 255, var(--toolbar-bg-opacity));
  }

  /* 🧊 Default Toolbar (All pages except Single Product) */
  body:not(.single-product) .wd-toolbar {
    bottom: 20px !important;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 480px;
    border-radius: 16px;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* 📦 Single Product Page Toolbar */
  body.single-product .wd-toolbar {
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    width: 100% !important;
    border-radius: 0 !important;
    --toolbar-bg-opacity: 0.15; /* slightly stronger white for single product */
    background: rgba(255, 255, 255, var(--toolbar-bg-opacity));
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  /* 🖱️ Toolbar Link Styles */
  .wd-toolbar a {
    color: #000 !important;
    background: transparent !important;
    transition: transform 0.2s ease;
  }
  .wd-toolbar a:hover {
    transform: scale(1.06);
  }

  /* 🎯 Active Page Highlight */
  .wd-toolbar a.nav-active {
    position: relative;
    background-color: rgba(94, 125, 163, 0.12) !important;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: inset 0 0 4px rgba(94, 125, 163, 0.08);
  }

  /* 💛 Yellow Dot for Shop Page */
  .wd-toolbar a.nav-shop::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 8px;
    width: 8px;
    height: 8px;
    background-color: #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 193, 7, 0.4);
  }
}

/* Fixing the variation clear option on single product */
.single-product .variations td.value {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.single-product .variations a.reset_variations {
  float:none !important;
  display:inline-flex !important;
  align-items:center;
  white-space:nowrap;
  word-break:normal !important;
  writing-mode:horizontal-tb !important;
  width:auto !important; max-width:none !important;
  line-height:1.2; margin-inline-start:8px;
}
.single-product .variations a.reset_variations::before {
  content:"×"; font-weight:700; margin-right:6px;
}

/* ================= Cart / Off-canvas Sidebar ALWAYS on top ================= */
/* (Covers WoodMart & common side panels) */
.wd-cart-side,
.cart-widget-side,
.wd-off-canvas-cart,
.xts-side-panel,
.wd-popup,
.xts-popup {
  position: fixed !important;
  z-index: 100020 !important; /* higher than toolbar */
}
.site-overlay,
.wd-popup-overlay,
.xts-site-overlay {
  position: fixed !important;
  z-index: 100019 !important; /* just under the panel */
}

/* Lock scroll when any popup/side-panel is open (theme usually does this; reinforcing) */
html.wd-opened-popup,
body.wd-opened-popup {
  overflow: hidden !important;
}
