body {
  background-color: #edecf0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main {
  flex: 1;
}
/* برای صفحه درسنامه این هدر ست شده */

.header-main {
  height: 20rem;
}

.btn-blue {
  background-color: var(--blue-2);
  color: var(--white-2);
  transition: all .5s ease;
}

.btn-blue:hover {
  background-color: var(--blue-4);
  color: var(--white-2);
}

.card {
  transition: all .5s ease;
  width: 40rem;
  height: 35.5rem;
  margin: 0 auto;
}

.card:hover {
  box-shadow: 3px -1px 20px 0px #673AB7;
}

.text-justify {
  text-align: justify;
}

p {
  max-height: 60px;
  height: 55px;
  text-overflow: ellipsis !important;
  overflow: hidden;
}

.card-body h5 {
  margin-top: -2rem;
  height: 5.2rem;
}

/* ===========  Responsive ==================== */
/* **  xl */
@media (min-width: 1200px) and (max-width: 1398.98px) {
  .card {
    width: 35rem;
    height: 33.5rem;
  }
}


/* Medium  lg */
@media (min-width: 992px) and (max-width: 1199.98px) {
  
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .card {
    width: 36rem;
    height: 35rem;
  }
  p {
    max-height: 47px;
    height: 55px;
    text-overflow: ellipsis !important;
    overflow: hidden;
}
}

/* Small  sm*/
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Extra small */
@media (min-width: 382px) and (max-width: 576.98px) {
  .card-body p {
    max-height: 36px;
    height: 55px;
    text-overflow: ellipsis !important;
    overflow: hidden;
  }
}

@media (max-width: 381.98px) {
  .card-body p {
    max-height: 36px;
    height: 55px;
    text-overflow: ellipsis !important;
    overflow: hidden;
  }

  .card-img-top {
    padding: 10px;
  }
}