/*EXplorew page  css*/


/* ===========================================================
   Explore Our Courses — scoped stylesheet
   Everything lives under .eoc-page and every class is
   prefixed with eoc- , so nothing here can collide with the
   host website's own CSS (and its CSS can't reach in either).
   =========================================================== */

/* ---------- tokens (scoped to the block, not :root) ---------- */
.eoc-page{
  --eoc-blue:#0A54BC;
  --eoc-blue-dark:#0056B3;
  --eoc-blue-soft:#EAF1FC;
  --eoc-ink:#262421;
  --eoc-ink-2:#1A1A1A;
  --eoc-grey:#555555;
  --eoc-grey-2:#999999;
  --eoc-line:#E2E8F0;
  --eoc-paper:#F8FAFC;
  --eoc-white:#FFFFFF;
  --eoc-mint:#D8EAD8;
  --eoc-star:#F5A623;
  --eoc-star-off:#DDE3EC;

  --eoc-container:1560px;   /* every section uses this width */
  --eoc-gutter:22px;
}

/* ---------- local reset (only inside the block) ---------- */
.eoc-page,
.eoc-page *,
.eoc-page *::before,
.eoc-page *::after{ box-sizing:border-box; }

.eoc-page h1, .eoc-page h2, .eoc-page h3, .eoc-page h4,
.eoc-page p, .eoc-page ul, .eoc-page li, .eoc-page figure{ margin:0; padding:0; }
.eoc-page ul{ list-style:none; }

.eoc-page{
  margin:0; padding:0;
  font-family:'Public Sans',-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:16px; line-height:1.5;
  background:var(--eoc-paper); color:var(--eoc-ink);
  display:flex; flex-direction:column; align-items:center;
  width:100%;
}
.eoc-page img{ display:block; max-width:100%; height:auto; border:0; }
.eoc-page a{ text-decoration:none; color:inherit; }
.eoc-page button{ font:inherit; color:inherit; background:none; border:0; }


/* ===========================================================
   1. HERO — slider (left) + banner column (right)
   =========================================================== */
.eoc-page .eoc-hero-section{ width:100%; padding:24px var(--eoc-gutter) 0; }
.eoc-page .eoc-hero-grid{
  width:100%; max-width:var(--eoc-container); margin:0 auto;
  display:grid; grid-template-columns:1fr 352px; gap:20px;
}

/* --- slider --- */
.eoc-page .eoc-slider{
  position:relative; height:520px; border-radius:14px; overflow:hidden;
  background:var(--eoc-white); border:1px solid var(--eoc-line);
  box-shadow:0 10px 30px -18px rgba(16,24,40,.4);
}
.eoc-page .eoc-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .7s ease, visibility .7s ease;
}
.eoc-page .eoc-slide.eoc-is-active{ opacity:1; visibility:visible; }
.eoc-page .eoc-slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 7s linear;
}
.eoc-page .eoc-slide.eoc-is-active img{ transform:scale(1); }
.eoc-page .eoc-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 38%, rgba(0,0,0,.22) 74%, rgba(0,0,0,.45) 100%);
}
.eoc-page .eoc-slide-body{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  left:52px; max-width:580px;
}
.eoc-page .eoc-s-kicker{
  display:inline-flex; align-items:center; gap:7px;
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#fff; background:var(--eoc-blue); padding:7px 13px; border-radius:50px; margin-bottom:18px;
}
.eoc-page .eoc-s-kicker::before{ content:''; width:5px; height:5px; border-radius:50%; background:#fff; }
.eoc-page .eoc-s-title{
  font-family:'Poppins',sans-serif; font-weight:600; color:#fff;
  font-size:46px; line-height:1.12; letter-spacing:-.022em;
}
.eoc-page .eoc-s-title em{ font-style:normal; color:#8FB8F5; }
.eoc-page .eoc-s-desc{ color:rgba(255,255,255,.85); font-size:15px; line-height:1.6; margin-top:16px; max-width:440px; }
.eoc-page .eoc-s-actions{ display:flex; align-items:center; gap:13px; margin-top:26px; flex-wrap:wrap; }

.eoc-page .eoc-btn-primary{
  display:inline-block; background:var(--eoc-blue); color:#fff; font-weight:600; font-size:14.5px;
  padding:14px 28px; border-radius:8px;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.eoc-page .eoc-btn-primary:hover{ background:var(--eoc-blue-dark); color:#fff; transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(10,84,188,.85); }
.eoc-page .eoc-btn-ghost{
  display:inline-block; color:#fff; font-size:14.5px; font-weight:600; padding:13px 22px; border-radius:8px;
  border:1px solid rgba(255,255,255,.35); transition:background .2s ease, border-color .2s ease;
}
.eoc-page .eoc-btn-ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; color:#fff; }

.eoc-page .eoc-s-meta{ display:flex; gap:28px; margin-top:30px; }
.eoc-page .eoc-s-meta div span{ display:block; font-family:'Poppins',sans-serif; font-size:20px; font-weight:600; color:#fff; }
.eoc-page .eoc-s-meta div small{ font-size:11px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:rgba(255,255,255,.6); }

/* slider controls */
.eoc-page .eoc-s-nav{ position:absolute; z-index:5; bottom:30px; right:30px; display:flex; gap:9px; }
.eoc-page .eoc-s-nav button{
  width:42px; height:42px; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.34); color:#fff;
  display:grid; place-items:center; backdrop-filter:blur(6px);
  transition:background .2s ease, border-color .2s ease;
}
.eoc-page .eoc-s-nav button:hover{ background:var(--eoc-blue); border-color:var(--eoc-blue); }
.eoc-page .eoc-s-dots{ position:absolute; z-index:5; bottom:44px; left:52px; display:flex; gap:8px; }
.eoc-page .eoc-s-dots button{
  width:26px; height:4px; padding:0; border:0; border-radius:50px; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .25s ease, width .25s ease;
}
.eoc-page .eoc-s-dots button.eoc-on{ width:44px; background:var(--eoc-blue); }
.eoc-page .eoc-s-progress{ position:absolute; z-index:5; left:0; bottom:0; height:3px; width:0; background:var(--eoc-blue); }

/* --- hero right banner column --- */
.eoc-page .eoc-side-banners{ display:grid; grid-template-rows:1fr 1fr; gap:20px; height:520px; }
.eoc-page .eoc-side-card{
  position:relative; border-radius:14px; overflow:hidden; isolation:isolate;
  display:flex; flex-direction:column; justify-content:flex-end; padding:24px;
  border:1px solid var(--eoc-line); background:var(--eoc-white);
  box-shadow:0 6px 20px -14px rgba(16,24,40,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.eoc-page .eoc-side-card:hover{ transform:translateY(-3px); box-shadow:0 16px 28px -16px rgba(16,24,40,.45); }
.eoc-page .eoc-side-card img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.eoc-page .eoc-side-card::before{
  content:''; position:absolute; inset:0; z-index:-1;
  /* background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 100%); */
}
.eoc-page .eoc-side-card.eoc-solid{ background:var(--eoc-blue); border-color:var(--eoc-blue); justify-content:center; }
.eoc-page .eoc-side-card.eoc-solid::before{ display:none; }
.eoc-page .eoc-side-card.eoc-solid::after{
  content:''; position:absolute; z-index:-1; right:-40px; top:-40px;
  width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08);
}
.eoc-page .eoc-sc-tag{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 11px; border-radius:50px; margin-bottom:12px; background:var(--eoc-blue); color:#fff;
}
.eoc-page .eoc-side-card.eoc-solid .eoc-sc-tag{ background:rgba(255,255,255,.2); }
.eoc-page .eoc-sc-title{ font-family:'Poppins',sans-serif; font-size:21px; font-weight:600; line-height:1.22; color:#fff; margin-bottom:8px; }
.eoc-page .eoc-sc-sub{ font-size:13px; color:rgba(255,255,255,.85); line-height:1.5; }
.eoc-page .eoc-sc-link{ margin-top:15px; display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:700; color:#fff; }
.eoc-page .eoc-sc-link svg{ transition:transform .25s ease; }
.eoc-page .eoc-side-card:hover .eoc-sc-link svg{ transform:translateX(4px); }


/* ===========================================================
   2. COURSE CARD GRID + PAGINATION
   =========================================================== */
.eoc-page .eoc-courses-section{ width:100%; display:flex; flex-direction:column; align-items:center; padding:54px var(--eoc-gutter) 20px; }

.eoc-page .eoc-sec-head{ width:100%; max-width:var(--eoc-container); margin-bottom:34px; }
.eoc-page .eoc-sec-head h2{
  font-family:'Poppins',sans-serif; font-size:44px; font-weight:700;
  letter-spacing:-.035em; line-height:1.1; color:var(--eoc-ink-2);
}
.eoc-page .eoc-sec-head h2 span{ color:var(--eoc-blue); }
.eoc-page .eoc-sec-head p{ margin-top:12px; font-size:16px; color:var(--eoc-grey); max-width:680px; }

.eoc-page .eoc-course-grid{
  width:100%; max-width:var(--eoc-container);
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}

.eoc-page .eoc-course-card{
  background:var(--eoc-white); border:1px solid var(--eoc-line); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 4px 16px -10px rgba(16,24,40,.2);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.eoc-page .eoc-course-card:hover{ transform:translateY(-4px); border-color:#C9DBF5; box-shadow:0 16px 30px -16px rgba(16,24,40,.4); }
.eoc-page .eoc-course-card[hidden]{ display:none; }

.eoc-page .eoc-cc-thumb{ position:relative; aspect-ratio:16/10; background:#0B1020; overflow:hidden; }
.eoc-page .eoc-cc-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.eoc-page .eoc-course-card:hover .eoc-cc-thumb img{ transform:scale(1.06); }

.eoc-page .eoc-cc-cat{
  position:absolute; top:12px; left:12px; z-index:2;
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background:var(--eoc-blue); color:#fff; padding:5px 10px; border-radius:50px;
}
.eoc-page .eoc-cc-flag{
  position:absolute; top:12px; right:12px; z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 10px; border-radius:50px; box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.eoc-page .eoc-cc-flag::before{ font-size:11px; line-height:1; }
.eoc-page .eoc-cc-flag.eoc-best{ background:var(--eoc-star); color:#3A2400; }
.eoc-page .eoc-cc-flag.eoc-best::before{ content:'\2605'; }               /* star */
.eoc-page .eoc-cc-flag.eoc-demand{ background:var(--eoc-mint); color:#1F5130; }
.eoc-page .eoc-cc-flag.eoc-demand::before{ content:'\2197'; }            /* arrow up-right */
.eoc-page .eoc-cc-flag.eoc-new{ background:#fff; color:var(--eoc-blue); }
.eoc-page .eoc-cc-flag.eoc-new::before{ content:'\25CF'; font-size:8px; } /* dot */

.eoc-page .eoc-cc-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1; }
.eoc-page .eoc-cc-title{
  font-family:'Poppins',sans-serif; font-size:15.5px; font-weight:600; text-transform:uppercase;
  line-height:1.38; letter-spacing:-.005em; color:var(--eoc-ink-2); min-height:43px;
}

/* star rating — set --eoc-pct inline, e.g. style="--eoc-pct:96%" */
.eoc-page .eoc-cc-rating{ display:flex; align-items:center; gap:8px; margin:11px 0 18px; }
.eoc-page .eoc-stars{
  position:relative; display:inline-block; font-size:14px; line-height:1;
  letter-spacing:2px; color:var(--eoc-star-off); white-space:nowrap;
}
.eoc-page .eoc-stars::before{ content:'\2605\2605\2605\2605\2605'; }
.eoc-page .eoc-stars::after{
  content:'\2605\2605\2605\2605\2605'; position:absolute; left:0; top:0;
  width:var(--eoc-pct,100%); overflow:hidden; color:var(--eoc-star);
}
.eoc-page .eoc-cc-score{ font-size:13px; font-weight:700; color:var(--eoc-ink-2); }
.eoc-page .eoc-cc-count{ font-size:12px; color:var(--eoc-grey-2); }

.eoc-page .eoc-cc-actions{
  margin-top:auto; padding-top:16px; border-top:1px solid var(--eoc-line);
  display:flex; gap:10px;
}
.eoc-page .eoc-btn-outline,
.eoc-page .eoc-btn-solid{
  flex:1; text-align:center; font-size:13.5px; font-weight:600;
  padding:11px 10px; border-radius:6px;
  transition:background .2s ease, color .2s ease, box-shadow .2s ease;
}
.eoc-page .eoc-btn-outline{ border:1px solid var(--eoc-blue); color:var(--eoc-blue); background:var(--eoc-white); }
.eoc-page .eoc-btn-outline:hover{ background:var(--eoc-blue-soft); color:var(--eoc-blue); }
.eoc-page .eoc-btn-solid{ background:var(--eoc-blue); color:#fff; border:1px solid var(--eoc-blue); }
.eoc-page .eoc-btn-solid:hover{ background:var(--eoc-blue-dark); color:#fff; box-shadow:0 8px 16px -8px rgba(10,84,188,.7); }

/* pagination */
.eoc-page .eoc-sec-foot{
  width:100%; max-width:var(--eoc-container); margin-top:38px;
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
}
.eoc-page .eoc-pg-count{ font-size:13.5px; color:var(--eoc-grey); }
.eoc-page .eoc-pagination{ display:flex; align-items:center; gap:7px; }
.eoc-page .eoc-pagination button{
  min-width:40px; height:40px; padding:0 12px; cursor:pointer;
  font-family:'Public Sans',sans-serif; font-size:14px; font-weight:600;
  color:var(--eoc-ink-2); background:var(--eoc-white); border:1px solid var(--eoc-line);
  border-radius:8px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.eoc-page .eoc-pagination button:hover:not(:disabled):not(.eoc-on){ border-color:var(--eoc-blue); color:var(--eoc-blue); background:var(--eoc-blue-soft); }
.eoc-page .eoc-pagination button.eoc-on{ background:var(--eoc-blue); border-color:var(--eoc-blue); color:#fff; }
.eoc-page .eoc-pagination button:disabled{ opacity:.42; cursor:not-allowed; }
.eoc-page .eoc-pagination button[hidden]{ display:none; }


/* ===========================================================
   3. BILLBOARD (left) + BANNER (right)
   =========================================================== */
.eoc-page .eoc-review-area{ width:100%; display:flex; flex-direction:column; align-items:center; padding:64px var(--eoc-gutter) 90px; }
.eoc-page .eoc-page-head{ width:100%; max-width:var(--eoc-container); margin-bottom:28px; }
.eoc-page .eoc-eyebrow{ font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--eoc-blue); margin-bottom:10px; }
.eoc-page .eoc-page-head h2{ font-family:'Poppins',sans-serif; font-size:27px; font-weight:600; color:var(--eoc-ink-2); letter-spacing:-.01em; }

.eoc-page .eoc-stack{ width:100%; max-width:var(--eoc-container); display:flex; flex-direction:column; gap:26px; }
.eoc-page .eoc-row{ display:grid; grid-template-columns:1fr 352px; gap:20px; align-items:stretch; }
.eoc-page .eoc-row[hidden]{ display:none; }

.eoc-page .eoc-billboard{
  height:250px; background:var(--eoc-white); border:1px solid var(--eoc-line);
  border-radius:12px; overflow:hidden; position:relative;
  display:grid; grid-template-columns:1fr 290px;
  box-shadow:0 4px 18px -10px rgba(16,24,40,.18);
}
.eoc-page .eoc-bb-text{ padding:0 40px 0 32px; display:flex; flex-direction:column; justify-content:center; }
.eoc-page .eoc-bb-main{ display:flex; flex-direction:column; justify-content:center; width:100%; }
.eoc-page .eoc-bb-kicker{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--eoc-blue); background:var(--eoc-blue-soft); padding:6px 11px; border-radius:50px; margin-bottom:13px;
}
.eoc-page .eoc-bb-kicker::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--eoc-blue); }
.eoc-page .eoc-headline{
  font-family:'Poppins',sans-serif; font-weight:600; font-size:29px; line-height:1.18;
  color:var(--eoc-ink-2); letter-spacing:-.015em; max-width:40ch;
}
.eoc-page .eoc-bb-desc{ font-size:14px; line-height:1.6; color:var(--eoc-grey); margin-top:11px; max-width:62ch; }
.eoc-page .eoc-bb-cta-row{ display:flex; align-items:center; gap:15px; margin-top:20px; flex-wrap:wrap; }
.eoc-page .eoc-bb-cta{
  display:inline-flex; background:var(--eoc-blue); color:#fff; font-weight:600; font-size:14px;
  padding:12px 24px; border-radius:8px;
  transition:background .2s ease, transform .15s ease, box-shadow .2s ease;
}
.eoc-page .eoc-bb-cta:hover{ background:var(--eoc-blue-dark); color:#fff; transform:translateY(-1px); box-shadow:0 8px 18px -8px rgba(10,84,188,.6); }
.eoc-page .eoc-bb-sub{ font-size:13px; color:var(--eoc-grey); }

.eoc-page .eoc-bb-visual{ position:relative; }
.eoc-page .eoc-bb-visual img{ width:100%; height:100%; object-fit:cover; }
.eoc-page .eoc-bb-badge{
  position:absolute; top:14px; right:14px; background:rgba(255,255,255,.94); color:var(--eoc-ink-2);
  font-size:11px; font-weight:700; padding:6px 11px; border-radius:50px; box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* right banner of each row */
.eoc-page .eoc-banner{
  height:250px; border-radius:12px; overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end; padding:20px;
  isolation:isolate; border:1px solid var(--eoc-line); background:var(--eoc-white);
  box-shadow:0 4px 18px -10px rgba(16,24,40,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.eoc-page .eoc-banner:hover{ transform:translateY(-3px); box-shadow:0 14px 26px -14px rgba(16,24,40,.35); }
.eoc-page .eoc-ad-label{ position:absolute; top:8px; right:12px; z-index:3; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--eoc-grey-2); }

.eoc-page .eoc-banner.eoc-photo img{ position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.eoc-page .eoc-banner.eoc-photo::before{
  content:''; position:absolute; inset:0; z-index:-1;
  /* background:linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.6) 60%, rgba(0,0,0,0) 100%); */
}
.eoc-page .eoc-banner.eoc-photo .eoc-bn-tag{ background:var(--eoc-blue); color:#fff; }
.eoc-page .eoc-banner.eoc-photo .eoc-bn-title{ color:#fff; }
.eoc-page .eoc-banner.eoc-photo .eoc-bn-sub{ color:rgba(255,255,255,.82); }
.eoc-page .eoc-banner.eoc-photo .eoc-bn-link{ color:#fff; }

.eoc-page .eoc-banner.eoc-solid{ background:var(--eoc-blue); border-color:var(--eoc-blue); justify-content:center; }
.eoc-page .eoc-banner.eoc-solid .eoc-bn-tag{ background:rgba(255,255,255,.18); color:#fff; }
.eoc-page .eoc-banner.eoc-solid .eoc-bn-title{ color:#fff; font-size:21px; }
.eoc-page .eoc-banner.eoc-solid .eoc-bn-sub{ color:rgba(255,255,255,.85); }
.eoc-page .eoc-banner.eoc-solid .eoc-bn-link{ color:#fff; }
.eoc-page .eoc-banner.eoc-solid .eoc-ad-label{ color:rgba(255,255,255,.55); }
.eoc-page .eoc-banner.eoc-solid::after{
  content:''; position:absolute; right:-40px; top:-40px;
  width:150px; height:150px; border-radius:50%; background:rgba(255,255,255,.07);
}

.eoc-page .eoc-banner.eoc-light{ background:var(--eoc-white); justify-content:center; }
.eoc-page .eoc-banner.eoc-light .eoc-bn-tag{ background:var(--eoc-mint); color:#1F5130; }
.eoc-page .eoc-banner.eoc-light .eoc-bn-title{ color:var(--eoc-ink-2); }
.eoc-page .eoc-banner.eoc-light .eoc-bn-sub{ color:var(--eoc-grey); }
.eoc-page .eoc-banner.eoc-light .eoc-bn-link{ color:var(--eoc-blue); }
.eoc-page .eoc-bn-rule{ display:block; height:3px; width:38px; background:var(--eoc-blue); border-radius:50px; margin-bottom:14px; }

.eoc-page .eoc-bn-tag{
  align-self:flex-start; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:5px 10px; border-radius:50px; margin-bottom:11px;
}
.eoc-page .eoc-bn-title{ font-family:'Poppins',sans-serif; font-size:19px; font-weight:600; line-height:1.24; margin-bottom:7px; }
.eoc-page .eoc-bn-sub{ font-size:12.5px; line-height:1.5; }
.eoc-page .eoc-bn-link{ margin-top:14px; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; }
.eoc-page .eoc-bn-link svg{ transition:transform .25s ease; }
.eoc-page .eoc-banner:hover .eoc-bn-link svg{ transform:translateX(4px); }


/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1180px){
  .eoc-page .eoc-hero-grid{ grid-template-columns:1fr; }
  .eoc-page .eoc-slider{ height:440px; }
  .eoc-page .eoc-side-banners{ grid-template-rows:none; grid-template-columns:1fr 1fr; height:220px; }
  .eoc-page .eoc-s-title{ font-size:38px; }
  .eoc-page .eoc-slide-body,
  .eoc-page .eoc-s-dots{ left:36px; }
  .eoc-page .eoc-course-grid{ grid-template-columns:repeat(3,1fr); }
  .eoc-page .eoc-sec-head h2{ font-size:36px; }
}
@media (max-width:1040px){
  .eoc-page .eoc-row{ grid-template-columns:1fr; }
  .eoc-page .eoc-banner{ height:300px; justify-content:flex-end; }
}
@media (max-width:880px){
  .eoc-page .eoc-course-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  .eoc-page .eoc-hero-section{ padding:14px 14px 0; }
  .eoc-page .eoc-slider{ height:520px; }
  .eoc-page .eoc-slide-body{ left:22px; right:22px; top:auto; bottom:110px; transform:none; }
  .eoc-page .eoc-s-title{ font-size:30px; }
  .eoc-page .eoc-s-meta{ display:none; }
  .eoc-page .eoc-s-dots{ left:22px; bottom:34px; }
  .eoc-page .eoc-s-nav{ right:20px; bottom:24px; }
  .eoc-page .eoc-side-banners{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; height:auto; }
  .eoc-page .eoc-side-card{ min-height:300px; padding:22px; }
}
@media (max-width:640px){
  .eoc-page .eoc-review-area{ padding:48px 14px 60px; }
  .eoc-page .eoc-courses-section{ padding:40px 14px 20px; }
  .eoc-page .eoc-billboard{ height:auto; grid-template-columns:1fr; }
  .eoc-page .eoc-bb-visual{ height:150px; order:-1; }
  .eoc-page .eoc-bb-text{ padding:22px; }
  .eoc-page .eoc-headline{ font-size:23px; max-width:none; }
  .eoc-page .eoc-bb-desc{ font-size:13px; }
  .eoc-page .eoc-course-grid{ grid-template-columns:1fr; }
  .eoc-page .eoc-sec-head h2{ font-size:29px; }
  .eoc-page .eoc-sec-head p{ font-size:14.5px; }
  .eoc-page .eoc-cc-title{ min-height:0; }
}