/*Place your CSS code here*/
/* Display courses in a grid layout */
.course-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* Style the course card */
.course-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Hover effect for course card */
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

/* Styling course title */
.course-card .title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  padding: 15px;
}

/* Price and certificate */
.course-card .price {
  color: #0065BD;
  font-size: 20px;
  padding: 10px 15px;
}

.course-card .certificate {
  color: #0065BD;
  font-size: 14px;
  padding: 10px 15px;
  background: #0065BD;
}
  .responsive-image-block img {
    width: 100%;
    height: auto;
    display: none;
  }

  /* Show desktop image by default */
  .responsive-image-block .desktop-image {
    display: block;
  }

  /* Switch to mobile image under 768px */
  @media screen and (max-width: 768px) {
    .responsive-image-block .desktop-image {
      display: none;
    }
    .responsive-image-block .mobile-image {
      display: block;
    }
  }

/* DO NOT ADD/EDIT AFTER THIS LINE */
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]{background-color:#0065BD;border-color:#0065BD;}
html.new-ui-html:root{--c-brand-primary:#0065bd;--c-brand-primary-darken-5:#0060b8;--c-brand-primary-darken-7:#005eb6;--c-brand-primary-darken-10:#005bb3;--c-brand-primary-darken-15:#0056ae;--c-brand-primary-darken-17:#0054ac;--c-brand-primary-darken-20:#0051a9;--c-brand-primary-darken-25:#004ca4;--c-brand-primary-lighten-7:#076cc4;--c-brand-primary-lighten-40:#288de5;}