/* =========================================================
   BABYLONIA — POPULAR CONTENT
   SINGLE CARD — FINAL
   ========================================================= */


/* =========================================================
   VIEW WRAPPERS
   ========================================================= */

.view-populer-content .view-content,
.view-id-populer-content .view-content {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.view-populer-content .view-content > .views-row,
.view-id-populer-content .view-content > .views-row {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   CARD
   ========================================================= */

.babylonia-popular-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  background: #ffffff !important;

  border: 1px solid #e7e9ee !important;
  border-radius: 20px !important;

  overflow: hidden !important;

  box-shadow:
    0 5px 20px rgba(15, 23, 42, 0.07) !important;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease !important;
}


.babylonia-popular-card:hover {
  transform: translateY(-5px) !important;

  border-color: #d9dde5 !important;

  box-shadow:
    0 17px 38px rgba(15, 23, 42, 0.13) !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.babylonia-popular-media {
  flex: 0 0 auto !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;

  background: #f4f5f6 !important;
}


.babylonia-popular-media a {
  display: block !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


.babylonia-popular-media img {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  height: auto !important;

  aspect-ratio: 3 / 2 !important;

  object-fit: cover !important;
  object-position: center !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  transition: transform 0.45s ease !important;
}


.babylonia-popular-card:hover
.babylonia-popular-media img {
  transform: scale(1.035) !important;
}


/* =========================================================
   CONTENT
   ========================================================= */

.babylonia-popular-content {
  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;

  margin: 0 !important;

  padding: 21px 22px 17px !important;

  text-align: left !important;
}


/* =========================================================
   TITLE
   ========================================================= */

.babylonia-popular-title {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
}


.babylonia-popular-title a {
  display: block !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #171c26 !important;

  font-size: 19px !important;
  font-weight: 700 !important;
  line-height: 1.42 !important;

  text-decoration: none !important;

  transition: color 0.2s ease !important;
}


.babylonia-popular-title a:hover {
  color: #d83c8e !important;

  text-decoration: none !important;
}


/* =========================================================
   COURSE HEADLINE
   ========================================================= */

.babylonia-popular-description {
  margin: 0 !important;
  padding: 0 !important;

  color: #555e6c !important;

  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;

  text-align: left !important;
}


.babylonia-popular-description p {
  margin: 0 !important;
  padding: 0 !important;

  color: inherit !important;

  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}


.babylonia-popular-description:empty {
  display: none !important;
}


/* =========================================================
   ACTION
   ========================================================= */

.babylonia-popular-action {
  flex: 0 0 auto !important;

  width: 100% !important;

  margin: 0 !important;

  padding: 8px 22px 22px !important;
}


.babylonia-popular-action .btneggrafi {
  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.babylonia-popular-action .buttonprimary,
.babylonia-popular-action .btneggrafi a,
.babylonia-popular-action > a {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 45px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  background: #252b35 !important;

  border: 1px solid #252b35 !important;
  border-radius: 11px !important;

  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1 !important;

  text-decoration: none !important;

  box-shadow:
    0 4px 12px rgba(15, 23, 42, 0.12) !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease !important;
}


.babylonia-popular-action .buttonprimary:hover,
.babylonia-popular-action .btneggrafi a:hover,
.babylonia-popular-action > a:hover {
  background: #e8429d !important;

  border-color: #e8429d !important;

  color: #ffffff !important;

  transform: translateY(-1px) !important;

  box-shadow:
    0 7px 18px rgba(232, 66, 157, 0.22) !important;

  text-decoration: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .babylonia-popular-card {
    border-radius: 16px !important;
  }


  .babylonia-popular-content {
    padding: 18px 18px 14px !important;
  }


  .babylonia-popular-title a {
    font-size: 18px !important;
  }


  .babylonia-popular-description {
    font-size: 14.5px !important;

    line-height: 1.6 !important;
  }


  .babylonia-popular-action {
    padding: 7px 18px 18px !important;
  }

}