@charset "UTF-8";
.top-courses {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top-courses h2 {
  font-size: 18px;
  margin-bottom: 20px;
}
.top-courses .courses-grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 15px;
}
@media (max-width: 767px) {
  .top-courses .courses-grid {
    grid-template-columns: 1fr;
  }
}
.top-courses .courses-grid .course-card {
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
  background-color: white;
  text-decoration: none;
  color: unset;
  justify-content: space-between;
}
.top-courses .courses-grid .course-card .header {
  align-items: center;
  padding: 0 0 20px 0;
}
.top-courses .courses-grid .course-card .header .image {
  flex: 1;
}
.top-courses .courses-grid .course-card .header .image img {
  max-width: 100%;
  border-radius: 10px 10px 0 0;
}
.top-courses .courses-grid .course-card .header .description {
  padding: 20px 20px 0 20px;
  flex: 3;
  text-align: left;
}
@media (max-width: 767px) {
  .top-courses .courses-grid .course-card .header .description {
    flex: 5;
  }
}
.top-courses .courses-grid .course-card .header .description h2 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  display: block;
  padding: 0;
  line-height: 1.5;
  text-align: center;
  color: #a38c65;
  margin-bottom: 20px;
}
.top-courses .courses-grid .course-card .header .description p {
  font-size: 16px;
  color: #666;
}
.top-courses .courses-grid .course-card .body {
  padding: 20px;
  font-size: 15px;
  line-height: 1.6;
  color: #666;
  border-top: 1px solid #ccc;
}
.top-courses .courses-grid .course-card .body p {
  display: flex;
  align-items: center;
}
.top-courses .courses-grid .course-card .body p img {
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.top-courses .courses-grid .course-card .body strong {
  font-weight: bold;
  color: #000;
  margin-left: 5px;
}
.top-courses .courses-grid .course-card .body .btn-default {
  margin-top: 0px;
}
.top-courses .courses-grid .course-card .body .icon {
  width: 40px;
  display: block;
  font-size: 20px;
  text-align: center;
}
.top-courses .courses-grid .course-card:hover {
  box-shadow: 1px 1px 5px rgba(111, 111, 111, 0.68);
  opacity: 0.9;
}

#course_banner {
  background: #1e1e1c;
}
@media (min-with: 992px) {
  #course_banner {
    --banner-height: 323px;
  }
}
#course_banner .banner-top--container {
  max-width: var(--width-container);
  flex-direction: row;
}
@media (min-width: 992px) {
  #course_banner .banner-top--container {
    justify-content: flex-start;
  }
  #course_banner .banner-top--container .left {
    text-align: left;
    width: 62%;
  }
}
#course_banner .banner-top--container .banner-top--title {
  font-size: 38px;
  line-height: 50px;
}
#course_banner .banner-top--container .banner-top--description {
  font-size: 24px;
  line-height: 32px;
}
@media (max-width: 992px) {
  #course_banner .banner-top--container {
    text-align: left;
  }
}
#course_banner .banner-top--rating {
  margin-top: 20px;
}
#course_banner .banner-top--rating span {
  color: rgb(209, 181, 55);
}
#course_banner .banner-top--rating .star strong {
  margin-right: 5px;
}
#course_banner .banner-top--rating .bg {
  color: rgb(209, 181, 55);
  margin-right: 10px;
  display: inline-block;
}
#course_banner .banner-top--rating .bg strong {
  background: #d1b537;
  color: #fff;
  border-radius: 5px;
  padding: 2px 10px;
  margin-right: 10px;
}
#course_banner .banner-top--rating .on {
  color: rgb(209, 181, 55);
}
#course_banner .banner-top--rating .off {
  color: dimgrey;
}
@media (max-width: 992px) {
  #course_banner .banner-top--rating {
    display: flex;
    flex-direction: column;
  }
  #course_banner .banner-top--rating .bg {
    margin-bottom: 10px;
    margin-right: 0;
  }
}
@media (max-width: 992px) {
  #course_banner {
    --banner-height: 100%;
    padding: 20px 0 20px 0;
  }
  #course_banner .banner-top--container .banner-top--description {
    font-size: 17px;
    line-height: 21px;
  }
  #course_banner .banner-top--container .banner-top--title {
    font-size: 20px;
    line-height: 28px;
  }
}
#course_banner .course_thumb {
  z-index: 2;
}
#course_banner .course_thumb img {
  max-width: 100%;
}

#course #bar {
  background: #a38c65;
  padding: 20px 0;
  color: #fff;
}
#course #bar .container {
  display: flex;
}
@media (max-width: 992px) {
  #course #bar .container {
    justify-content: center;
  }
}
#course #bar .container p {
  font-size: 17px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  font-weight: 300;
}
#course #bar .container p .icon {
  margin-right: 10px;
  font-size: 25px;
}
@media (max-width: 992px) {
  #course #bar .container p {
    flex-direction: column;
    margin: 0 10px;
    text-align: center;
    font-size: 14px;
  }
  #course #bar .container p .icon {
    margin: 0;
  }
}

#content-course {
  position: relative;
}
#content-course .course-title, #content-course h3 {
  text-align: left;
  color: #3d4b51;
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 30px;
}
#content-course .course-title:after, #content-course h3:after {
  content: " ";
  display: block;
  height: 4px;
  background: #a38c65;
  width: 50px;
  margin-top: 3px;
}
#content-course .content_right {
  margin-top: 30px;
  color: #585858;
  background-color: #fff;
  border-radius: 10px;
  border: 1px solid #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.56);
  text-align: left;
}
@media (min-width: 992px) {
  #content-course .content_right {
    z-index: 999;
    position: absolute;
    right: 20px;
    top: -350px;
    width: 33%;
    margin-top: 0px;
    float: right;
  }
  #content-course .content_right.sticky {
    position: fixed;
    top: 80px;
  }
}
#content-course .content_right .image {
  height: 178px;
}
#content-course .content_right .image img {
  max-width: 100%;
  border-radius: 10px 10px 0 0;
}
#content-course .content_right .content {
  padding: 40px;
}
#content-course .content_right .content .price {
  margin-bottom: 30px;
  line-height: 30px;
  font-size: 30px;
  font-weight: 800;
}
#content-course .content_right .content .price .icon {
  margin-right: 20px;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #a38c65;
  font-size: 20px;
  color: #a38c65;
}
#content-course .content_right .content .price .obs {
  margin-left: 5px;
  font-size: 16px;
}
#content-course .content_right .content .price .split {
  font-size: 14px;
  display: block;
}
#content-course .content_right .content .price .from {
  font-size: 14px;
  display: block;
  color: #bebebe;
}
#content-course .content_right .content .price .from span {
  text-decoration: line-through;
}
#content-course .content_right .content .warranty {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 3px solid #f3f3f3;
}
@media (max-width: 800px) {
  #content-course .content_right .content {
    padding: 15px;
  }
}
#content-course .content_right .btn {
  background: #63b549 0 0 no-repeat padding-box;
  border-radius: 100px;
  color: #fff;
  font: normal normal 700 24px/32px Nunito;
  text-transform: uppercase;
  padding: 15px 45px;
  display: inline-block;
  width: 100%;
  text-align: center;
}
#content-course .content_right .btn:hover {
  background: #559a40;
}
#content-course .content_left {
  padding: 50px 0;
}
@media (min-width: 992px) {
  #content-course .content_left {
    width: 60%;
  }
}
#content-course .content_left .section {
  margin-bottom: 40px;
}
#content-course .content_left .section .text {
  color: #585858;
  font-size: 19px;
  line-height: 24px;
  font-weight: 400;
}
#content-course .content_left .section .text p {
  margin-bottom: 15px;
}
#content-course .content_left .section.content {
  border-radius: 10px;
  border: 1px solid #bebebe;
  padding: 20px;
  background: #f9f9f9;
}
#content-course .content_left .section.content ul {
  list-style: none;
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
@media (max-width: 767px) {
  #content-course .content_left .section.content ul {
    grid-template-columns: 1fr;
  }
}
#content-course .content_left .section.content ul li {
  font-size: 16px;
  display: flex;
}
#content-course .content_left .section.content ul li:before {
  margin-right: 10px;
  content: "✓ ";
}
#content-course .content_left .content_text ul {
  list-style: none;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  #content-course .content_left .content_text ul {
    grid-template-columns: 1fr;
  }
}
#content-course .content_left .content_text ul li {
  display: flex;
}
#content-course .content_left .content_text ul li:before {
  margin-right: 10px;
  content: "✓ ";
}
#content-course .content_left .teacher .content {
  display: flex;
}
#content-course .content_left .teacher .content button {
  padding: 6px 7px;
  font-size: 11px;
}
#content-course .content_left .teacher .photo {
  min-width: 120px;
  min-height: 120px;
  max-width: 120px;
  max-height: 120px;
  overflow: hidden;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  border: 4px solid #a38c65;
}
#content-course .content_left .teacher .photo img {
  max-width: 100%;
}
#content-course .content_left .teacher .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 15px;
}
#content-course .content_left .teacher .desc .name {
  font-size: 20px;
  margin-bottom: 10px;
}
#content-course .content_left .disclaimer .text {
  font-size: 14px;
}

.ratings {
  border-radius: 10px;
  border: 1px solid #bebebe;
  padding: 20px;
  background: #f9f9f9;
}
.ratings .rating {
  color: rgb(209, 181, 55);
  padding: 10px 0;
  font-size: 14px;
}
.ratings .name {
  font-size: 18px;
  font-weight: bold;
}
.ratings .description {
  font-size: 14px;
  font-weight: 300;
}
.ratings .list-item {
  margin-bottom: 30px;
}
.ratings .read-more.collapsed .text-content:after {
  content: " ";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 130px;
  background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, #f9f9f9 100%);
  background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #f9f9f9 100%);
  background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, #f9f9f9 100%);
}
.ratings button.btn-readmore {
  padding: 7px 8px !important;
}

#relateds {
  margin-bottom: 50px;
}