/*
 Put your custom overlay styles in here
 You can use your northpass color palette in this file

{{ color_palette.button_font_color }}
{{ color_palette.button_color }}
{{ color_palette.button_hover_color }}
{{ color_palette.header_font_color }}
{{ color_palette.header_font_hover_color }}
{{ color_palette.header_color }}
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html *:not(i) {
  font-family: 'Poppins', sans-serif !important;
}

body, .np-main {
  background: #fff;
}

.np-main {
  padding-top: 123px;
}

@media screen and (min-width: 768px) {
  .np-main {
    padding-top: 123px;
  }
}

.np-alert {
  margin: 20px 0;
}

/* Course Cards */

.course-card {
  cursor: pointer;
  background-color: #dbd2f7;
  border-radius: 30px;
  box-shadow: none;
  padding: 24px 24px 44px;
  transition: .2s;
  width: 100%;
  margin: 20px 0;
}

.course-card:hover, .course-card:focus {
  box-shadow: 10px 10px 20px 0 rgb(62 51 102 / 20%);
}

.course-card-container {
  display: flex;
  width: 100%;
}

.course-card-container > * {
  transition: .2s;
}

.course-image {
  border-radius: 15px;
  display: block;
  margin-bottom: 16px;
  overflow: hidden;
  padding-top: 72%;
  position: relative;
  width: 100%;
}

.course-image img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  max-width: 100%;
}

.course-categories-container {
  font-size: 10px;
  font-weight: 500;
  margin: 0;
  min-height: 25.5px;
}

.course-name {
  font-weight: 500;
  letter-spacing: 1px;
  line-height: normal;
  margin: 20px 0 0;
  font-size: 18px;
  min-height: 60px
}

.course-name a {
  text-decoration: none;
  color: #000;
}

.course-category {
  background-color: #ffe7e1;
  color: #ff7676;
  border-radius: 4px;
  font-weight: 500;
  margin-right: 8px;
  padding: 4px 8px;
  text-transform: uppercase;
  transition: .2s;
  text-decoration: none;
  margin-bottom: 6px;
}

@media (min-width: 768px) {
  .course-card {
    padding: 24px 24px 35px;
  }

  .course-card-container {
    padding: 0 12px;
  }

  .course-image {
    padding-top: 66%;
  }

  .course-name {
    font-size: 20px;
  }
}