/* event/view-overrides.css
   ==========================================================================
   Style overlay for /event/view.php — navy gradient hero matching the
   /program/view.php design (program-v2-overrides.css). Replaces the earlier
   white-card aesthetic per user feedback 2026-05-10: event should follow
   program design, not the other way around.

   Theme: navy #0a294f → #16447a gradient, accent red #a72d38 for the
   register button. Drop the <link> in event/view.php to revert.
   ========================================================================== */

/* ============== Page baseline ============== */
body { background: #f7f8fa !important; color: #1a2433; }

/* ============== Top centred event title (h1 above the courseSection) ==========
   Keep the navy gradient band over the page title. This is the same visual
   treatment as the program hero's title area — bold serif, white text, navy
   band, soft shadow. */
body > center > h1,
body h1.event-headline {
  background: linear-gradient(135deg, #0a294f 0%, #16447a 100%);
  color: #fff !important;
  font: 700 36px/1.15 "Playfair Display", Georgia, serif !important;
  letter-spacing: -0.5px;
  margin: 0 !important;
  padding: 48px 24px 18px !important;
  text-align: center;
  box-shadow: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  word-break: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

/* ============== courseSection — hero scoped to the FIRST row only ==========
   .courseSection is a 350-line container that holds the hero AND tabs +
   description. Apply navy ONLY to the first row (registration card +
   cover image). Everything below stays on the light page background. */
.courseSection {
  background: #f7f8fa !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
  position: relative;
}
.courseSection > .container,
.courseSection .container {
  max-width: 1180px;
  padding: 24px 16px !important;
  background: #f7f8fa !important;
}
/* Hero row only — first .row inside the container gets the navy gradient. */
.courseSection > .container > .row:first-of-type,
.courseSection .container > .row:first-of-type {
  background: linear-gradient(135deg, #0a294f 0%, #16447a 100%);
  margin: 0 !important;
  padding: 28px 16px !important;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(10, 41, 79, 0.15);
  align-items: stretch !important;
}
/* All non-hero rows inside courseSection — reset to light bg + dark text */
.courseSection > .container > .row:not(:first-of-type),
.courseSection .container > .row:not(:first-of-type) {
  background: transparent !important;
  color: #1a2433 !important;
  margin-top: 24px;
}
.courseSection > .container > .row:not(:first-of-type) *,
.courseSection .container > .row:not(:first-of-type) * {
  color: inherit;
}
/* Defensive: any nested .container further down in courseSection */
.courseSection .tab-pane,
.courseSection .tab-content1,
.courseSection .blog-text,
.courseSection h2,
.courseSection h3,
.courseSection p,
.courseSection ul,
.courseSection li,
.courseSection .nav-tabs,
.courseSection .nav-item {
  background: transparent !important;
  color: inherit;
}
.courseSection .blog-text,
.courseSection .blog-text * {
  color: #1a2433 !important;
  background: transparent !important;
}

/* ============== Left column: kill the white card, keep content on navy ====
   The legacy markup wraps the registration info in
   .innerUpperHeader > .classic-joblist.ultimate-center.  Make that
   transparent so the navy hero shows through; force all text white. */
.innerUpperHeader { padding-right: 18px; }
@media (max-width: 768px) { .innerUpperHeader { padding-right: 14px; } }

.innerUpperHeader .classic-joblist {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 8px 0 0 !important;
  box-shadow: none !important;
  height: 100%;
  color: #fff !important;
}

/* mUni / school logo + name at top of left column */
.innerUpperHeader .schoolImage img {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: #fff;
  width: 64px !important;
  height: 64px !important;
  object-fit: cover;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}
.innerUpperHeader h3.ourCourses {
  font: 700 16px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #ffffff !important;
  margin: 12px 0 18px;
  text-align: center;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

/* Quick-facts table (Start date / Time / Type / Category / Fee / GST) on navy */
.innerUpperHeader .course-info table {
  width: 100% !important;
  border-collapse: separate;
  border-spacing: 0 6px;
}
.innerUpperHeader .course-info th {
  color: rgba(255, 255, 255, 0.70) !important;
  font: 600 11px/1.4 -apple-system, sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px 4px 0 !important;
  vertical-align: top !important;
  text-align: left !important;
  font-weight: 600 !important;
  border: 0 !important;
  background: transparent !important;
}
.innerUpperHeader .course-info td {
  color: #ffffff !important;
  font: 600 13px/1.5 -apple-system, sans-serif !important;
  padding: 4px 0 !important;
  vertical-align: top !important;
  background: transparent !important;
  border: 0 !important;
}

/* Category dropdown — semi-transparent on navy (matches program PGP path) */
.innerUpperHeader select,
.innerUpperHeader #category1 {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font: 500 14px/1.4 -apple-system, sans-serif !important;
  height: 38px !important;
  width: 100%;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.innerUpperHeader select option { background: #0a294f; color: #fff; }

/* Fee + GST values — match the other quick-facts rows for consistency
   (Start Date, Time, Type all sit at 13px white). The markup uses the
   same id="eventFeeDisplay" on both Fee and GST cells, so this single
   rule normalises both. */
#eventFeeDisplay,
.innerUpperHeader td #eventFeeDisplay,
.innerUpperHeader td span#eventFeeDisplay {
  color: #ffffff !important;
  font: 600 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: normal !important;
}

/* ============== Register button — red gradient pill ============== */
.btn-muniregister,
a.btn-muniregister,
button.btn-muniregister,
#registerNow, #registerNowCategory, #payNowCategory {
  background: #a72d38 !important;
  color: #fff !important;
  border: 0 !important;
  font: 700 14px/1 -apple-system, sans-serif !important;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 13px 26px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 14px rgba(167, 45, 56, 0.35);
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
  width: 100%;
  display: inline-block;
  text-align: center;
  margin-top: 12px;
}
.btn-muniregister:hover,
#registerNow:hover, #registerNowCategory:hover, #payNowCategory:hover {
  background: #c63341 !important;
  box-shadow: 0 6px 18px rgba(167, 45, 56, 0.45);
  color: #fff !important;
  text-decoration: none !important;
}
.btn-muniregister:active { transform: translateY(1px); }

/* ============== Right column: cover image / video — sits on navy ============== */
/* h4 above the cover (event name in big serif) — white serif on navy */
.col-sm-8 > div > h4.course-single-img1,
.courseSection .col-sm-8 h4.course-single-img1,
body h4.course-single-img1 {
  font: 700 28px/1.2 "Playfair Display", Georgia, serif !important;
  color: #ffffff !important;
  letter-spacing: -0.4px;
  text-align: center !important;
  margin: 0 8px 14px !important;
  padding: 0 4px !important;
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}
@media (max-width: 768px) {
  .col-sm-8 > div > h4.course-single-img1,
  .courseSection .col-sm-8 h4.course-single-img1,
  body h4.course-single-img1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
}

/* The image / video wrapper. Rounded chrome with soft shadow. */
.course-single-img {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.course-single-img img,
.course-single-img iframe,
.course-single-img .intro-video-player iframe {
  display: block;
  width: 100% !important;
  height: 100%;
  max-width: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.course-single-img iframe { min-height: 320px; }

/* No-image fallback — calendar emoji on darker navy panel */
.course-single-img:empty::before,
.col-sm-8 > div > .course-single-img:not(:has(img)):not(:has(iframe))::before {
  content: "📅";
  font-size: 96px;
  color: rgba(255, 255, 255, 0.85);
  display: block;
  text-align: center;
  line-height: 1;
}

/* ===== Mobile responsive (≤768px) ===== */
@media (max-width: 768px) {
  body > center > h1,
  body h1.event-headline {
    font-size: 22px !important;
    line-height: 1.25 !important;
    padding: 24px 16px 14px !important;
  }
  .courseSection { padding: 0 0 28px; }
  .courseSection .container { padding: 0 12px !important; }
  .courseSection .row { flex-direction: column !important; }
  .courseSection .row > [class^="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  .innerUpperHeader { padding: 0 !important; margin-bottom: 14px; }
  .innerUpperHeader .classic-joblist { padding: 8px 0 0 !important; }
  .innerUpperHeader .schoolImage img { width: 56px !important; height: 56px !important; }
  .innerUpperHeader h3.ourCourses { font-size: 15px !important; margin: 10px 0 14px; }
  .innerUpperHeader .course-info table { border-spacing: 0 4px; }
  .innerUpperHeader .course-info th {
    width: 90px !important;
    font-size: 10px !important;
    padding: 4px 8px 4px 0 !important;
    white-space: nowrap;
  }
  .innerUpperHeader .course-info td { font-size: 13px !important; word-break: break-word; }
  .innerUpperHeader select,
  .innerUpperHeader #category1 { height: 42px !important; font-size: 14px !important; }
  .btn-muniregister,
  #registerNow, #registerNowCategory, #payNowCategory {
    width: 100% !important;
    padding: 14px 16px !important;
    min-height: 46px !important;
    font-size: 13px !important;
  }
  /* On mobile, drop the wrapper chrome around the cover image — no
     subtle white bg, no shadow, no border, no min-height. The image
     sits directly on the navy hero with its own rounded corners. */
  .course-single-img,
  .col-sm-8 > div > .course-single-img {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
  }
  .course-single-img img {
    border-radius: 10px !important;
    height: auto !important;
    object-fit: contain !important;
  }
  /* Video iframes still need a height since the iframe has no intrinsic */
  .course-single-img iframe { min-height: 200px !important; height: 200px !important; border-radius: 10px; }
  /* No-image fallback keeps a small navy panel with the calendar emoji */
  .course-single-img:empty,
  .col-sm-8 > div > .course-single-img:not(:has(img)):not(:has(iframe)) {
    min-height: 160px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px !important;
  }
  .course-single-img:empty::before { font-size: 64px; }

  /* Tighten the navy hero block — less empty vertical space on phones. */
  .courseSection > .container > .row:first-of-type,
  .courseSection .container > .row:first-of-type {
    padding: 18px 12px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(10, 41, 79, 0.15) !important;
  }
  .courseSection > .container,
  .courseSection .container { padding: 16px 12px !important; }

  /* Pull the h4 title closer to the image; tighten margins above + below. */
  .col-sm-8 > div > h4.course-single-img1,
  .courseSection .col-sm-8 h4.course-single-img1,
  body h4.course-single-img1 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    margin: 6px 4px 10px !important;
    padding: 0 4px !important;
  }

  /* Add a small breathing gap between the school-info column and the image
     when they stack vertically. */
  .innerUpperHeader { margin-bottom: 10px !important; }

  /* About / Contact pills + section headings (handled below the hero) */
  button.AboutEvent, button.ContactEvent {
    padding: 10px 22px !important;
    margin: 4px !important;
    font-size: 13px !important;
  }
  section h2,
  .about-event-section h2,
  .course-content-section h2 {
    font-size: 20px !important;
    margin: 28px 0 14px !important;
  }
  .about-event-section p,
  .about-event-section ul,
  .event-description,
  .course-content-section p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .employer-wrap, .cardJobs, .certifyCards, .skillCard { margin-bottom: 14px; }

  /* Floating Enquire Now side button — keep above the bottom CTA */
  body > a[href*="enquir"],
  body .floatingEnquire,
  .floatingEnquire { bottom: 70px !important; }
}

@media (max-width: 480px) {
  body > center > h1,
  body h1.event-headline {
    font-size: 20px !important;
    padding: 20px 14px 12px !important;
  }
  .col-sm-8 > div > h4.course-single-img1 { font-size: 16px !important; margin: 4px 4px 8px !important; }
  .course-single-img iframe { min-height: 170px !important; height: 170px !important; }
  .innerUpperHeader .course-info th { width: 80px !important; font-size: 9.5px !important; }
  .innerUpperHeader .course-info td { font-size: 12.5px !important; }

  /* Even tighter navy hero block on phones — less side padding, smaller radius */
  .courseSection > .container > .row:first-of-type,
  .courseSection .container > .row:first-of-type {
    padding: 14px 10px !important;
    border-radius: 8px !important;
  }
  .courseSection > .container,
  .courseSection .container { padding: 12px 10px !important; }
}

/* ============== About / Contact pill row (below the navy hero) ============== */
button.AboutEvent, .AboutEvent,
button#aboutEvent, #aboutEvent,
button.ContactEvent, .ContactEvent,
button#contactEvent, #contactEvent {
  background: #fff !important;
  color: #0a294f !important;
  border: 1.5px solid #d1d6de !important;
  border-radius: 999px !important;
  padding: 9px 28px !important;
  font: 600 13px/1 -apple-system, sans-serif !important;
  transition: all 0.12s;
  letter-spacing: 0.03em;
  margin: 0 5px;
}
button.AboutEvent:hover, .AboutEvent:hover,
button.ContactEvent:hover, .ContactEvent:hover {
  border-color: #0a294f !important;
  background: #f5f9ff !important;
  color: #0a294f !important;
}
button.AboutEvent.active, .AboutEvent.active,
button.AboutEvent.btn-primary, .AboutEvent.btn-primary,
button.ContactEvent.active, .ContactEvent.active {
  background: #0a294f !important;
  color: #fff !important;
  border-color: #0a294f !important;
}

/* ============== Below-the-fold sections (description / highlights / sponsors) */

/* Section big H2 (Event Highlights, Meet The Experts, etc.) */
section h2,
.courseSection ~ section h2,
.about-event-section h2,
.course-content-section h2 {
  font: 700 24px/1.2 "Playfair Display", Georgia, serif !important;
  color: #0a294f !important;
  margin: 36px 0 16px !important;
  position: relative;
  padding-bottom: 10px;
  letter-spacing: -0.01em;
}
section h2::after,
.about-event-section h2::after,
.course-content-section h2::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0;
  width: 56px; height: 3px;
  background: linear-gradient(90deg, #b8964a, #ffd86b);
  border-radius: 2px;
}
section h2[style*="float"]::after { display: none; }

/* Description body — max-width for readability */
.about-event-section p,
.about-event-section ul,
.event-description,
.course-content-section p {
  max-width: 880px;
  font: 400 16px/1.7 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  color: #1a2433 !important;
}
.about-event-section ul li,
.event-description li { margin-bottom: 6px; }
.about-event-section strong,
.event-description strong { color: #0a294f; }

/* ============== Description tables — modern desktop look =================
   CKEditor-authored tables ship with border="1" on every cell, which renders
   as a 2005-style grid with visible inner borders. Replace that with a clean
   modern look: navy header, no inner borders, subtle row striping. The gold
   "VIP Pass" header keeps its accent. Applies wherever event descriptions
   render (.blog-text + .event-description). */
.blog-text table[border]:not([border="0"]),
.event-description table[border]:not([border="0"]) {
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100% !important;
  max-width: 100%;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(10, 41, 79, 0.06);
  margin: 16px 0 !important;
}
.blog-text table[border]:not([border="0"]) th,
.event-description table[border]:not([border="0"]) th {
  background: #0a294f !important;
  color: #ffffff !important;
  border: 0 !important;
  text-align: center !important;
  padding: 14px 12px !important;
  font-weight: 700;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  vertical-align: middle !important;
  text-transform: none;
  line-height: 1.3;
}
.blog-text table[border]:not([border="0"]) th p,
.event-description table[border]:not([border="0"]) th p {
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}
/* Preserve the gold VIP Pass header — invert text colour for contrast */
.blog-text table[border]:not([border="0"]) th[style*="d4af37"],
.event-description table[border]:not([border="0"]) th[style*="d4af37"] {
  background: #d4af37 !important;
  color: #0a294f !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.blog-text table[border]:not([border="0"]) td,
.event-description table[border]:not([border="0"]) td {
  border: 0 !important;
  border-bottom: 1px solid #eef0f4 !important;
  padding: 11px 14px !important;
  font-size: 14px;
  color: #1a2433;
  vertical-align: middle !important;
  background: #ffffff;
}
.blog-text table[border]:not([border="0"]) td p,
.event-description table[border]:not([border="0"]) td p {
  margin: 0 !important;
}
.blog-text table[border]:not([border="0"]) tr:nth-child(even) td,
.event-description table[border]:not([border="0"]) tr:nth-child(even) td {
  background: #fafbfc;
}
.blog-text table[border]:not([border="0"]) tr:last-child td,
.event-description table[border]:not([border="0"]) tr:last-child td {
  border-bottom: 0 !important;
}
.blog-text table[border]:not([border="0"]) tr:hover td,
.event-description table[border]:not([border="0"]) tr:hover td {
  background: #f3f6fa;
}
/* The first column (feature labels) reads like a row header */
.blog-text table[border]:not([border="0"]) td:first-child,
.event-description table[border]:not([border="0"]) td:first-child {
  font-weight: 600;
  color: #0a294f;
  text-align: left !important;
}

/* ============== Description content (.blog-text) responsive ==============
   Event descriptions are CKEditor-authored HTML. Authors commonly use:
     - <table border="0"> as a multi-column LAYOUT primitive (side-by-side
       text columns). On mobile these need to stack vertically.
     - <table border="1"> for actual DATA tables (e.g. Pass Comparison).
       On mobile these stay tabular but become horizontally scrollable
       inside their own wrapper, instead of pushing the whole page wider.
   We target .blog-text + .event-description so this applies to event
   description areas wherever they render. */
@media (max-width: 768px) {
  /* Long URLs / words wrap, no element exceeds the viewport width */
  .blog-text *,
  .event-description *,
  .about-event-section * {
    max-width: 100% !important;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  /* Layout tables (no border) → stack cells, no horizontal layout */
  .blog-text table[border="0"],
  .blog-text table[border="0"] tbody,
  .blog-text table[border="0"] tr,
  .blog-text table[border="0"] td,
  .event-description table[border="0"],
  .event-description table[border="0"] tbody,
  .event-description table[border="0"] tr,
  .event-description table[border="0"] td {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
  }
  .blog-text table[border="0"] td:empty,
  .event-description table[border="0"] td:empty { display: none !important; }
  .blog-text table[border="0"] td,
  .event-description table[border="0"] td {
    margin-bottom: 12px;
    padding-bottom: 8px !important;
    border-bottom: 1px dashed #e6e9ef !important;
  }
  /* Data tables (with borders) on mobile:
     - Block-level scroll container so the table doesn't push the page wider
     - Sticky first column ("Details") stays pinned as user swipes sideways
     - Right-edge inset shadow as a "more content →" affordance */
  .blog-text table[border]:not([border="0"]),
  .event-description table[border]:not([border="0"]) {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 2px 12px rgba(10, 41, 79, 0.06),
                inset -10px 0 10px -10px rgba(10, 41, 79, 0.25);
    position: relative;
    border-radius: 10px !important;
  }
  .blog-text table[border]:not([border="0"]) tbody,
  .event-description table[border]:not([border="0"]) tbody {
    display: table !important;
    width: max-content;
    min-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
  }
  .blog-text table[border]:not([border="0"]) th,
  .blog-text table[border]:not([border="0"]) td,
  .event-description table[border]:not([border="0"]) th,
  .event-description table[border]:not([border="0"]) td {
    padding: 9px 12px !important;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    min-width: 92px;
  }
  /* Sticky first column — labels stay visible as user scrolls */
  .blog-text table[border]:not([border="0"]) th:first-child,
  .blog-text table[border]:not([border="0"]) td:first-child,
  .event-description table[border]:not([border="0"]) th:first-child,
  .event-description table[border]:not([border="0"]) td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 2;
    box-shadow: 1px 0 0 0 #e6e9ef;
    min-width: 130px;
    max-width: 160px;
    white-space: normal !important;
  }
  /* Re-paint sticky cells so they cover the cells scrolling underneath them */
  .blog-text table[border]:not([border="0"]) th:first-child,
  .event-description table[border]:not([border="0"]) th:first-child {
    background: #0a294f !important;
  }
  .blog-text table[border]:not([border="0"]) td:first-child,
  .event-description table[border]:not([border="0"]) td:first-child {
    background: #ffffff !important;
  }
  .blog-text table[border]:not([border="0"]) tr:nth-child(even) td:first-child,
  .event-description table[border]:not([border="0"]) tr:nth-child(even) td:first-child {
    background: #fafbfc !important;
  }
  /* Headings inside the description — slightly tighter */
  .blog-text h2, .event-description h2 { font-size: 20px !important; line-height: 1.3; margin: 18px 0 10px !important; }
  .blog-text h3, .event-description h3 { font-size: 17px !important; line-height: 1.3; margin: 16px 0 8px !important; }
  .blog-text p, .event-description p { font-size: 14.5px !important; line-height: 1.6; }
  /* Images inside the description never overflow */
  .blog-text img, .event-description img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin: 10px auto;
  }
}

/* Speaker / expert cards */
.employer-wrap {
  border-radius: 12px !important;
  border: 1px solid #e6e9ef !important;
  box-shadow: 0 2px 8px rgba(23, 36, 46, 0.06) !important;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  overflow: hidden;
}
.employer-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(10, 41, 79, 0.10) !important;
  border-color: #0a294f !important;
}
.employer-detail h4, .employer-detail h5,
.employer-detail .employer-title {
  color: #0a294f !important;
  font: 700 15px/1.3 -apple-system, sans-serif !important;
}
.employer-detail .designation {
  color: #5a6470 !important;
  font-size: 12px !important;
  margin-top: 2px;
}

/* Job / certification small cards */
.cardJobs, .certifyCards, .skillCard {
  border-radius: 10px !important;
  border: 1px solid #e6e9ef !important;
  box-shadow: 0 1px 4px rgba(23, 36, 46, 0.04) !important;
  background: #fff !important;
  padding: 16px !important;
  transition: border-color 0.12s, transform 0.12s;
}
.cardJobs:hover, .certifyCards:hover, .skillCard:hover {
  border-color: #0a294f !important;
  transform: translateY(-1px);
}