/* ============================================================
   Epoxy Master — Homepage refined / upmarket redesign
   Scoped entirely under .ep-home so the shared landing.css and
   every other page that imports it stay untouched. Markup and
   copy are unchanged; this is a pure visual layer.
   ============================================================ */
.ep-home {
  --h-ink: #1b1e23;
  --h-ink-soft: #454a52;
  --h-muted: #828893;
  --h-line: rgba(20, 22, 26, 0.10);
  --h-paper: #f4f5f7;
  --h-card: #ffffff;
  --h-amber: #9a7400;
  --h-amber-deep: #7a5d00;
  --h-gold: #ecc23e;
  --h-espresso: #1c1f24;
  --h-espresso-2: #262a30;
  --h-cream: #f6f7f9;

  --h-shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.04), 0 10px 30px rgba(20, 22, 26, 0.06);
  --h-shadow-md: 0 24px 60px rgba(20, 22, 26, 0.12);

  background: var(--h-paper);
  color: var(--h-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.ep-home h1,
.ep-home h2,
.ep-home h3,
.ep-home h4 {
  font-family: "Fraunces", "Georgia", serif;
  letter-spacing: -0.01em;
}

/* ----------------------------------------------------------------
   Header
   ---------------------------------------------------------------- */
.ep-home .header {
  background: rgba(244, 245, 247, 0.9);
  backdrop-filter: blur(12px);
  color: var(--h-ink);
  border-top: none;
  border-bottom: 1px solid var(--h-line);
  box-shadow: 0 1px 0 rgba(20, 22, 26, 0.04), 0 10px 30px rgba(20, 22, 26, 0.05);
  padding: 12px 0;
}

.ep-home .logo {
  gap: 18px;
}

.ep-home .logo-image {
  height: 72px;
  margin-left: 0;
}

.ep-home .logo-text h1 {
  color: var(--h-ink);
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  font-weight: 600;
  margin-bottom: 2px;
}

.ep-home .logo-text .tagline {
  color: var(--h-muted);
  font-size: 0.92rem;
  opacity: 1;
  letter-spacing: 0.01em;
}

.ep-home .contact-info {
  margin-right: 0;
}

.ep-home .cta {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, var(--h-amber) 0%, var(--h-amber-deep) 100%);
  color: #fff;
  padding: 13px 26px;
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 12px 26px rgba(224, 168, 0, 0.26);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.ep-home .cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 18px 34px rgba(224, 168, 0, 0.32);
}

/* ----------------------------------------------------------------
   Hero
   ---------------------------------------------------------------- */
.ep-home .hero-bottom-strip {
  background: rgba(20, 22, 26, 0.82);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(236, 194, 62, 0.4);
  padding: 14px 0;
}

.ep-home .scroll-text span {
  color: var(--h-cream);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.03em;
  display: inline-flex;
  align-items: center;
}

.ep-home .scroll-text span::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--h-gold);
  margin-right: 16px;
}

.ep-home .whatsapp-btn {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 26px rgba(20, 22, 26, 0.22);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.ep-home .whatsapp-btn:hover {
  transform: translateY(-2px);
}

/* Robust hero background: the admin-managed image is layered OVER a
   guaranteed local fallback. If the stored URL 404s, that layer renders
   transparent and the fallback below shows through — so the hero is
   never blank. */
.ep-home .hero-bg {
  background-color: var(--h-espresso);
  background-image:
    var(--desktop-hero-image, url('/static/images/hero-bg.jpeg')),
    url('/static/images/hero-bg.jpeg');
  background-position: center center, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

.ep-home .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 26, 0.12) 0%, transparent 38%, rgba(20, 22, 26, 0.42) 100%);
  pointer-events: none;
}

@media (max-width: 600px) {
  .ep-home .hero-bg {
    background-image:
      var(--mobile-hero-image, url('/static/images/hero-bg.jpeg')),
      url('/static/images/hero-bg.jpeg');
    background-position: center top, center top;
  }
}

/* ----------------------------------------------------------------
   Stats — "Introducing Epoxy Master" (premium dark band)
   ---------------------------------------------------------------- */
.ep-home .stats-section {
  background: var(--h-paper);
  padding: 64px 20px;
}

.ep-home .stats-container {
  position: relative;
  overflow: hidden;
  padding: 64px 56px;
  border-radius: 24px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(255, 194, 14, 0.20), transparent 55%),
    linear-gradient(160deg, var(--h-espresso) 0%, var(--h-espresso-2) 100%);
  box-shadow: 0 30px 70px rgba(20, 22, 26, 0.25);
}

.ep-home .intro-text {
  color: var(--h-gold);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ep-home .stats-title {
  color: #f7f8fa;
  font-size: clamp(2.2rem, 4vw, 3rem);
  font-weight: 600;
  margin-bottom: 16px;
}

.ep-home .stats-subtitle {
  color: rgba(237, 240, 245, 0.72);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto 48px;
}

.ep-home .stat-card {
  background: rgba(237, 240, 245, 0.05);
  border: 1px solid rgba(237, 240, 245, 0.12);
  border-radius: 16px;
  box-shadow: none;
  padding: 28px 24px;
}

.ep-home .stat-card:hover {
  transform: translateY(-4px);
  border-color: rgba(236, 194, 62, 0.5);
  background: rgba(237, 240, 245, 0.08);
}

.ep-home .stat-card h3 {
  color: #f2c230;
  font-size: 2.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

.ep-home .stat-card h4 {
  color: var(--h-cream);
  font-family: "Inter", sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.ep-home .stat-card p {
  color: rgba(237, 240, 245, 0.62);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ----------------------------------------------------------------
   Section headings + container rhythm
   ---------------------------------------------------------------- */
.ep-home .about {
  background: var(--h-paper);
  padding: 64px 0;
}

.ep-home .about > .container > h3,
.ep-home .course-heading {
  text-align: center;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
  color: var(--h-ink);
  margin-bottom: 36px;
}

/* ----------------------------------------------------------------
   Course fee cards
   ---------------------------------------------------------------- */
/* Let each card size to its own content so expanding one ("see more")
   doesn't stretch its row-mates. Without this the grid's default
   align-items: stretch makes every sibling grow with the expanded card. */
.ep-home .course-pricing {
  align-items: start;
}

.ep-home .course-card {
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: 20px;
  box-shadow: var(--h-shadow-sm);
}

.ep-home .course-card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 194, 14, 0.4);
  box-shadow: var(--h-shadow-md);
}

.ep-home .course-badge {
  background: linear-gradient(135deg, var(--h-amber) 0%, var(--h-amber-deep) 100%);
  border-radius: 999px;
  letter-spacing: 0.08em;
  box-shadow: 0 8px 18px rgba(224, 168, 0, 0.28);
}

.ep-home .course-header h4 {
  color: var(--h-ink);
  font-size: 1.35rem;
  font-weight: 600;
}

.ep-home .course-price {
  color: var(--h-amber);
  font-weight: 600;
}

.ep-home .course-highlight-box {
  background: #fbf4ea;
  border: 1px solid rgba(255, 194, 14, 0.18);
  box-shadow: none;
}

.ep-home .course-highlight-box h5 {
  color: var(--h-amber-deep);
}

.ep-home .course-highlights .highlight-arrow {
  color: var(--h-amber);
}

.ep-home .course-topics .topic-included .topic-icon {
  color: #3a9148;
}

.ep-home .course-topics .topic-excluded .topic-icon {
  color: #c0524a;
}

.ep-home .course-btn {
  background: linear-gradient(135deg, var(--h-amber) 0%, var(--h-amber-deep) 100%);
  border-radius: 11px;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(224, 168, 0, 0.24);
  margin-top: 0;
}

.ep-home .course-btn:hover {
  box-shadow: 0 18px 34px rgba(224, 168, 0, 0.3);
}

/* Cap the scrollable detail area to a fraction of the viewport so the whole
   card — including the "See full details" and "Enroll Now" buttons — stays
   visible on screen. Longer content (plan highlights + topics) scrolls inside
   the card instead of stretching it off the bottom of the page. */
.ep-home .course-details {
  max-height: clamp(220px, 40vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(224, 168, 0, 0.45) transparent;
  flex-grow: 0;
}

.ep-home .course-details::-webkit-scrollbar {
  width: 6px;
}

.ep-home .course-details::-webkit-scrollbar-thumb {
  background: rgba(224, 168, 0, 0.45);
  border-radius: 999px;
}

.ep-home .course-details::-webkit-scrollbar-track {
  background: transparent;
}

/* On phones the page scrolls normally, so don't trap content in a nested
   scroll area — let the card grow to its natural height. */
@media (max-width: 768px) {
  .ep-home .course-details {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }
}

.ep-home .course-duration {
  margin: 14px 0 0;
}

/* ----------------------------------------------------------------
   Compact course cards
   The topic list is now capped to a short preview in JS (full list on
   the detail page), so cards no longer stretch tall. Tighten the inner
   spacing and let the grid give every card an equal, compact height.
   ---------------------------------------------------------------- */
.ep-home .course-pricing {
  align-items: stretch;          /* equal-height columns */
}

.ep-home .course-card {
  min-height: 0;                 /* drop the old 460px floor */
  padding: 26px 24px;
}

.ep-home .course-price-wrap {
  margin: 8px 0 14px;
}

.ep-home .course-highlight-box {
  margin: 12px 0 14px;
  padding: 12px 14px;
}

.ep-home .course-topics {
  margin: 8px 0 0;
}

.ep-home .course-topics li {
  margin-bottom: 5px;
  line-height: 1.4;
}

.ep-home .course-topics-more {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--h-amber-deep);
}

/* Always-visible link to the detail page (replaces the expand toggle).
   margin-top: auto absorbs the card's free space so this link — and the
   "Enroll Now" button right after it — sit at the same bottom level across
   every card in the row. */
.ep-home .see-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: auto 0 12px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--h-amber);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}


.ep-home .course-badge-zone {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 60px;
  margin-bottom: 10px;
}

.ep-home .course-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  max-width: 100%;
}

.ep-home .course-header h4 {
  min-height: 2.5em;
  margin: 0 0 12px;
}

.ep-home .see-more-btn:hover {
  color: var(--h-amber-deep);
  text-decoration: underline;
}

/* ----------------------------------------------------------------
   "What You Get" benefits panel
   ---------------------------------------------------------------- */
.ep-home .workshop-benefits {
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: 20px;
  padding: 44px;
  box-shadow: var(--h-shadow-sm);
  margin: 48px 0;
}

.ep-home .workshop-benefits h3 {
  text-align: center;
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 600;
  color: var(--h-ink);
  margin-bottom: 28px;
}

.ep-home .workshop-benefits ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 32px;
}

.ep-home .workshop-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  color: var(--h-ink-soft);
  font-size: 1rem;
  line-height: 1.5;
}

.ep-home .workshop-benefits li i {
  margin-top: 2px;
  color: var(--h-amber);
  flex: none;
}

/* ----------------------------------------------------------------
   "Why Take Our Course"
   ---------------------------------------------------------------- */
.ep-home .why-choose-us {
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: 24px;
  box-shadow: var(--h-shadow-sm);
  padding: 56px;
}

.ep-home .why-choose-us h3 {
  color: var(--h-ink);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  text-shadow: none;
  margin-bottom: 40px;
}

.ep-home .why-card {
  background: #fcfaf6;
  border: 1px solid var(--h-line);
  border-radius: 16px;
  box-shadow: none;
  text-align: left;
  padding: 30px 26px;
}

.ep-home .why-card:hover {
  transform: translateY(-5px);
  background: var(--h-card);
  box-shadow: var(--h-shadow-md);
}

.ep-home .why-card i {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #fff3cc, #ffe7a6);
  color: var(--h-amber);
  font-size: 1.3rem;
}

.ep-home .why-card:hover i {
  transform: none;
  color: var(--h-amber-deep);
}

.ep-home .why-card h4 {
  color: var(--h-ink);
  font-size: 1.2rem;
  font-weight: 600;
}

.ep-home .why-card p {
  color: var(--h-muted);
}

/* ----------------------------------------------------------------
   Specialities
   ---------------------------------------------------------------- */
.ep-home .specialities {
  background: var(--h-card);
  border: 1px solid var(--h-line);
  border-radius: 20px;
  padding: 36px 40px;
}

.ep-home .specialities li {
  color: var(--h-ink-soft);
  font-size: 1rem;
}

.ep-home .specialities li i {
  color: var(--h-gold);
}

/* ----------------------------------------------------------------
   Success stories
   ---------------------------------------------------------------- */
.ep-home .success-stories h2 {
  color: var(--h-ink);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   FAQ
   ---------------------------------------------------------------- */
.ep-home .faq-section {
  background: var(--h-paper);
}

.ep-home .faq-container h2 {
  color: var(--h-ink);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 600;
}

.ep-home .faq-item {
  border: 1px solid var(--h-line);
  border-radius: 14px;
  box-shadow: var(--h-shadow-sm);
}

.ep-home .faq-question {
  font-family: "Inter", sans-serif;
  color: var(--h-ink);
  font-weight: 600;
}

.ep-home .arrow {
  color: var(--h-amber);
}

.ep-home .faq-answer p {
  color: var(--h-ink-soft);
}

/* ----------------------------------------------------------------
   Contact — premium "Get in touch" panel
   ---------------------------------------------------------------- */
.ep-home .contact {
  background: var(--h-paper);
  padding: 64px 20px;
}

.ep-home .contact-shell {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px;
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 88% 0%, rgba(255, 194, 14, 0.22), transparent 55%),
    linear-gradient(160deg, var(--h-espresso) 0%, var(--h-espresso-2) 100%);
  box-shadow: 0 30px 70px rgba(20, 22, 26, 0.25);
}

.ep-home .contact-glow {
  position: absolute;
  top: -40%;
  left: -10%;
  width: 50%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(236, 194, 62, 0.16), transparent 70%);
  pointer-events: none;
}

/* Intro column */
.ep-home .contact-intro {
  position: relative;
  z-index: 1;
  min-width: 0; /* allow the grid column to shrink below its content width */
}

.ep-home .contact-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--h-gold);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.ep-home .contact h3 {
  color: #f7f8fa;
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  font-weight: 600;
  margin: 0 0 16px;
}

.ep-home .contact-lead {
  color: rgba(237, 240, 245, 0.74);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 0 32px;
}

.ep-home .contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.ep-home .contact-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.ep-home .contact-btn i {
  font-size: 1.05em;
}

.ep-home .contact-btn-whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c4f 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(18, 140, 79, 0.32);
}

.ep-home .contact-btn-callback {
  background: linear-gradient(135deg, var(--h-amber) 0%, var(--h-amber-deep) 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(224, 168, 0, 0.28);
}

.ep-home .contact-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Contact cards column */
.ep-home .contact-cards {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0; /* allow the grid column to shrink below its content width */
}

.ep-home .contact-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  background: rgba(237, 240, 245, 0.06);
  border: 1px solid rgba(237, 240, 245, 0.12);
  text-decoration: none;
  min-width: 0;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.ep-home a.contact-card:hover {
  transform: translateY(-3px);
  border-color: rgba(236, 194, 62, 0.55);
  background: rgba(237, 240, 245, 0.09);
}

.ep-home .contact-card-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--h-amber) 0%, var(--h-amber-deep) 100%);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 8px 18px rgba(224, 168, 0, 0.3);
}

.ep-home .contact-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ep-home .contact-card-label {
  color: var(--h-gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ep-home .contact-card-value {
  color: rgba(237, 240, 245, 0.92);
  font-size: 0.98rem;
  line-height: 1.45;
  overflow-wrap: anywhere; /* wrap long unbreakable values like the email */
  word-break: break-word;
}

.ep-home .contact-card-value a {
  display: block;
  color: rgba(237, 240, 245, 0.92);
  text-decoration: none;
  transition: color 0.2s ease;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.ep-home .contact-card-value a:hover {
  color: #f2c230;
}

@media (max-width: 860px) {
  .ep-home .contact-shell {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 28px;
  }

  .ep-home .contact-lead {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .ep-home .contact {
    padding: 40px 14px;
  }

  .ep-home .contact-shell {
    padding: 32px 20px;
  }

  .ep-home .contact-actions .contact-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* ----------------------------------------------------------------
   Carousel arrows (stats / courses / why / gallery / success / video)
   ---------------------------------------------------------------- */
.ep-home .stats-arrow,
.ep-home .course-arrow,
.ep-home .why-arrow,
.ep-home .gallery-arrow,
.ep-home .success-arrow,
.ep-home .video-arrow {
  background: var(--h-card);
  color: var(--h-ink);
  border: 1px solid var(--h-line);
  box-shadow: var(--h-shadow-sm);
}

/* ----------------------------------------------------------------
   Listen from our Master — premium video showcase
   ---------------------------------------------------------------- */
.ep-home .why-videos {
  /* Full-bleed: break out of the centered container to span the viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 64px;
  margin-bottom: 64px;
  padding: 72px clamp(20px, 6vw, 80px);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(110% 120% at 100% 0%, rgba(255, 194, 14, 0.20), transparent 55%),
    linear-gradient(160deg, var(--h-espresso) 0%, var(--h-espresso-2) 100%);
}

.ep-home .why-videos .master-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.ep-home .why-videos .master-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border: 1px solid rgba(236, 194, 62, 0.45);
  border-radius: 999px;
  color: #f2c230;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ep-home .why-videos h4 {
  margin: 18px 0 12px;
  font-family: "Fraunces", "Georgia", serif;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 600;
  color: #f7f8fa;
}

.ep-home .why-videos .master-head p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(237, 240, 245, 0.72);
}

.ep-home .why-videos .video-grid {
  margin: 0 auto;
  max-width: 1180px;
  grid-template-columns: repeat(var(--master-cols, 2), minmax(0, 1fr));
  justify-content: center;
}

.ep-home .why-videos .video-card {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.7);
}

.ep-home .why-videos .video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 32px 64px -26px rgba(0, 0, 0, 0.85);
}

.ep-home .why-videos .video-card iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: 11px;
}

@media (max-width: 600px) {
  .ep-home .why-videos {
    padding: 34px 16px;
    margin-top: 40px;
  }
  .ep-home .why-videos .master-head { margin-bottom: 28px; }
}

/* ----------------------------------------------------------------
   Footer
   ---------------------------------------------------------------- */
.ep-home .footer-new {
  background: var(--h-espresso);
  padding: 28px 20px 36px;
}

.ep-home .footer-links a:hover {
  color: var(--h-gold);
}

.ep-home .footer-disclaimer-title {
  color: var(--h-cream);
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .ep-home .stats-container { padding: 44px 22px; }
  .ep-home .why-choose-us { padding: 36px 22px; }
  .ep-home .workshop-benefits { padding: 30px 22px; }
  .ep-home .workshop-benefits ul { grid-template-columns: 1fr; }
  .ep-home .specialities { padding: 28px 22px; }
  .ep-home .logo-image { height: 58px; }
}

/* ----------------------------------------------------------------
   Brand-yellow CTAs — bright yellow fill with dark text (signature).
   Small accents (badges, icons) stay deep-gold for hierarchy.
   ---------------------------------------------------------------- */
.ep-home .cta,
.ep-home .course-btn,
.ep-home .contact-btn-callback {
  background: linear-gradient(135deg, #ffce33 0%, #f5b400 100%) !important;
  color: #1b1e23 !important;
  box-shadow: 0 14px 30px -12px rgba(245, 180, 0, 0.50) !important;
}
.ep-home .cta:hover,
.ep-home .course-btn:hover,
.ep-home .contact-btn-callback:hover {
  filter: brightness(1.03);
  box-shadow: 0 20px 38px -12px rgba(245, 180, 0, 0.60) !important;
}