.elementor-23005 .elementor-element.elementor-element-b45dadd{--display:flex;--min-height:480px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--overlay-opacity:0.69;--border-radius:20px 20px 20px 20px;--padding-top:0px;--padding-bottom:0px;--padding-left:50px;--padding-right:0px;}.elementor-23005 .elementor-element.elementor-element-b45dadd:not(.elementor-motion-effects-element-type-background), .elementor-23005 .elementor-element.elementor-element-b45dadd > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://beta.learneasy.pk/wp-content/uploads/2026/09/expert-mentor-teaching-code-to-an-enthusiastic-student-in-a-bright-modern-workspace-soft-bokeh-hig.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-23005 .elementor-element.elementor-element-b45dadd::before, .elementor-23005 .elementor-element.elementor-element-b45dadd > .elementor-background-video-container::before, .elementor-23005 .elementor-element.elementor-element-b45dadd > .e-con-inner > .elementor-background-video-container::before, .elementor-23005 .elementor-element.elementor-element-b45dadd > .elementor-background-slideshow::before, .elementor-23005 .elementor-element.elementor-element-b45dadd > .e-con-inner > .elementor-background-slideshow::before, .elementor-23005 .elementor-element.elementor-element-b45dadd > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:transparent;--background-overlay:'';background-image:linear-gradient(325deg, #00000061 26%, #000000 92%);}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-23005 .elementor-element.elementor-element-dbf4b16{width:var( --container-widget-width, 13% );max-width:13%;--container-widget-width:13%;--container-widget-flex-grow:0;text-align:center;font-family:"Poppins", Sans-serif;font-weight:500;color:#FFFFFF;}.elementor-23005 .elementor-element.elementor-element-dbf4b16 > .elementor-widget-container{background-color:#097CEA;padding:5px 20px 5px 20px;border-radius:20px 20px 20px 20px;}.elementor-23005 .elementor-element.elementor-element-dbf4b16.elementor-element{--align-self:flex-start;}.elementor-23005 .elementor-element.elementor-element-dbf4b16 p{margin-block-end:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-23005 .elementor-element.elementor-element-e0d939d{width:var( --container-widget-width, 57% );max-width:57%;--container-widget-width:57%;--container-widget-flex-grow:0;}.elementor-23005 .elementor-element.elementor-element-e0d939d .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:48px;font-weight:600;color:#FFFFFF;}.elementor-23005 .elementor-element.elementor-element-e7073bb{width:var( --container-widget-width, 590px );max-width:590px;--container-widget-width:590px;--container-widget-flex-grow:0;font-family:"Roboto", Sans-serif;font-size:17px;font-weight:400;line-height:20px;color:#FFFFFF;}.elementor-23005 .elementor-element.elementor-element-e7073bb p{margin-block-end:0px;}.elementor-23005 .elementor-element.elementor-element-f590ee6{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:flex-end;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-23005 .elementor-element.elementor-element-47c743b .elementor-button{background-color:#FFFFFF;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;fill:#097CEA;color:#097CEA;border-radius:10px 10px 10px 10px;}.elementor-23005 .elementor-element.elementor-element-47c743b .elementor-button:hover, .elementor-23005 .elementor-element.elementor-element-47c743b .elementor-button:focus{background-color:#FFFFFF;color:#000000;border-color:#000000;}.elementor-23005 .elementor-element.elementor-element-47c743b{width:var( --container-widget-width, 250px );max-width:250px;--container-widget-width:250px;--container-widget-flex-grow:0;}.elementor-23005 .elementor-element.elementor-element-47c743b .elementor-button:hover svg, .elementor-23005 .elementor-element.elementor-element-47c743b .elementor-button:focus svg{fill:#000000;}.elementor-23005 .elementor-element.elementor-element-f7ae415 .elementor-button{background-color:#097CEA;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:500;fill:#FFFFFF;color:#FFFFFF;border-radius:10px 10px 10px 10px;}.elementor-23005 .elementor-element.elementor-element-f7ae415 .elementor-button:hover, .elementor-23005 .elementor-element.elementor-element-f7ae415 .elementor-button:focus{background-color:#FFFFFF;color:#000000;border-color:#000000;}.elementor-23005 .elementor-element.elementor-element-f7ae415 .elementor-button:hover svg, .elementor-23005 .elementor-element.elementor-element-f7ae415 .elementor-button:focus svg{fill:#000000;}.elementor-23005 .elementor-element.elementor-element-832bbd5{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:70px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-23005 .elementor-element.elementor-element-d647ee2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-23005 .elementor-element.elementor-element-a4a19b1 .wplms_courses_directory{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}.elementor-23005 .elementor-element.elementor-element-a4a19b1 .wplms_courses_directory >*{max-width:100%;}@media(min-width:768px){.elementor-23005 .elementor-element.elementor-element-d647ee2{--width:100%;}}/* Start custom CSS for course_directory, class: .elementor-element-a4a19b1 *//* ==========================================================================
   WPLMS Course Directory — Card Redesign
   Drop this into your child theme's style.css (or enqueue as a separate
   file after the WPLMS/theme stylesheet so it overrides the defaults).
   Targets the exact markup WPLMS's [wplms_courses_directory] shortcode
   outputs — no PHP template changes required for this part.
   ========================================================================== */

:root{
  --lc-green-1: #0b6e4f;
  --lc-green-2: #12a06b;
  --lc-blue: #1e6fea;
  --lc-blue-bg: #eaf2ff;
  --lc-border: #e6e8eb;
  --lc-text: #1a1a1a;
  --lc-muted: #6b7280;
  --lc-star: #f5a623;
}

/* ---------- Grid ---------- */
.wplms_courses_directory_main .wplms_courses_directory{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ---------- Card shell ---------- */
.wplms_courses_directory .vibebp_course{
  background: #fff;
  border: 1px solid var(--lc-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: transform .18s ease, box-shadow .18s ease;
}
.wplms_courses_directory .vibebp_course:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(16,24,40,.10);
}
.wplms_courses_directory .course_card,
.wplms_courses_directory .block.courseitem.course2{
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Media / header block ---------- */
.wplms_courses_directory .block_media{
  position: relative;
  aspect-ratio: 16 / 9.2;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lc-green-1), var(--lc-green-2));
}
/* Hide the real thumbnail so the block reads as a flat color header
   like the reference. Remove this rule if you'd rather keep photos. */
.wplms_courses_directory .block_media img{
  opacity: 0;
}

/* Heart / save icon, top-right — purely decorative, CSS-only */
.wplms_courses_directory .block_media::before{
  content: "\2661"; /* ♡ */
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #444;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 2;
}

/* Rating pill, bottom-right of the media block, built from the
   existing .star-rating markup */
.wplms_courses_directory .star-rating{
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: auto;
  top: auto;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lc-text);
  z-index: 2;
}
.wplms_courses_directory .star-rating .course-star-rating{
  display: flex;
  align-items: center;
  gap: 4px;
}
.wplms_courses_directory .star-rating .course-star-rating i.hide{
  display: inline !important;
  font-style: normal;
}
.wplms_courses_directory .star-rating .course-star-rating i.hide::before{
  content: "\2605"; /* ★ */
  color: var(--lc-star);
  margin-right: 2px;
}
.wplms_courses_directory .star-rating .bp_blank_stars,
.wplms_courses_directory .star-rating .bp_filled_stars{
  display: none; /* replace the sliding star-bar with the single ★ above */
}

/* ---------- Body ---------- */
.wplms_courses_directory .block_content{
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.wplms_courses_directory .block_title{
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 700;
}
.wplms_courses_directory .block_title a{
  color: var(--lc-text);
  text-decoration: none;
}
.wplms_courses_directory .block_title a:hover{
  color: var(--lc-blue);
}

/* Review count text, e.g. "( 9 REVIEWS )" -> tone it down */
.wplms_courses_directory .star-rating{ }
.wplms_courses_directory .block_content > .star-rating{ display:none; } /* avoid a duplicate if theme renders it twice in-body */

/* Instructor row — icon + name, like "👤 Angela Yu" in the reference */
.wplms_courses_directory .instructor_course{
  display: flex;
  align-items: center;
  gap: 8px;
  order: 3;
  margin: 4px 0 10px;
}
.wplms_courses_directory .instructor_course .item-avatar img{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}
.wplms_courses_directory .course_instructor{
  margin: 0;
  font-size: 13px;
  color: var(--lc-muted);
  font-weight: 500;
}
.wplms_courses_directory .course_instructor a{
  color: var(--lc-muted);
  text-decoration: none;
}

/* Learner count ("🎓 3,501") — reorder above instructor row */
.wplms_courses_directory .block_content > strong:has(.vicon-user){
  order: 2;
  font-size: 13px;
  color: var(--lc-muted);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.wplms_courses_directory .vicon-user::before{
  content: "\1F393"; /* 🎓 */
  font-style: normal;
}
.wplms_courses_directory .block_content > .clear{ display:none; }

/* Divider before the price row */
.wplms_courses_directory .block_content{
  position: relative;
}
.wplms_courses_directory .block_content > strong:last-child{
  order: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--lc-border);
}

/* "FREE" -> pill badge, left side */
.wplms_courses_directory .block_content > strong:last-child{
  font-weight: 400;
  font-size: 0;
}
.wplms_courses_directory .block_content > strong:last-child::before{
  content: "100% Free";
  font-size: 13px;
  font-weight: 600;
  color: var(--lc-blue);
  background: var(--lc-blue-bg);
  padding: 5px 10px;
  border-radius: 6px;
}
/* "Enroll Now ›" -> right side link, generated in CSS since the
   markup has no href here beyond the title/image links */
.wplms_courses_directory .block_content > strong:last-child::after{
  content: "Enroll Now \203A";
  font-size: 13px;
  font-weight: 600;
  color: var(--lc-blue);
  cursor: pointer;
}

/* ---------- Search / sort header ---------- */
.wplms_courses_directory_header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.wplms_courses_search input{
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}
.wplms_courses_sort select{
  border: 1px solid var(--lc-border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 14px;
}

/* ---------- Small screens ---------- */
@media (max-width: 480px){
  .wplms_courses_directory_main .wplms_courses_directory{
    grid-template-columns: 1fr;
  }
}/* End custom CSS */