/* blog page  */

.course-banner {
   background-size: cover;
   padding: 200px 0 300px;
}

.course-banner .public-wrapper {
   min-height: unset !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.course-text h1 {
   color: var(--white);
   font-size: 56px;
   font-weight: 700;
}

.course-text p {
   color: #bdbdbd;
   max-width: 580px;
   margin: 15px auto 0;
}

.blog-main-card {
   position: relative;
   z-index: 1;
   border-radius: 12px;
   overflow: hidden;
}

.blog-main-card::before {
   content: "";
   position: absolute;
   z-index: 1;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.44);
   width: 100%;
   height: 100%;
}

.blog-main-card .abs-text {
   position: absolute;
   z-index: 1;
   left: 0;
   bottom: 0;
   height: max-content;
   max-width: 607px;
   margin: 24px;
}

.blog-main-card .abs-text :is(h3, p) {
   color: white;
}

.blog-main-card .abs-text h3 {
   font-weight: 700;
   font-size: 24px;
}

.blog-main-card .abs-text a:hover {
   color: #00ceff;
}

.blog-main-card .info img {
   max-width: 36px;
}

.public-pagniation {
   margin-top: 60px;
}

.public-pagniation .pagination {
   gap: 10px;
}

.public-pagniation .pagination li a {
   border-radius: 50% !important;
   width: 45px;
   aspect-ratio: 1;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   padding: 5px;
   background-color: rgba(0, 206, 255, 0.13);
   border-color: transparent;
   color: #000612;
   font-weight: 500;
   box-shadow: unset !important;
   transition: 0.3s all ease;
}

.public-pagniation .pagination li a.active,
.public-pagniation .pagination li a:hover {
   background-color: #00ceff;
}

.public-pagniation .pagination li a i {
   font-size: 12px;
}

.public-pagniation .pagination li .dots {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   width: 45px;
   aspect-ratio: 1;
   font-weight: 500;
   color: #000612;
}

.public-tab-section .tab-wrapper > ul {
   flex-wrap: nowrap;
   overflow: auto;
}

/* course page  */
.course-banner {
   background-size: cover;
}

.course-banner .public-wrapper {
   min-height: 430px;
}

.course-text h1 {
   color: var(--white);
   font-size: 56px;
   font-weight: 700;
}

.course-text p {
   color: #bdbdbd;
   max-width: 580px;
   margin: 15px auto 0;
}

.course-card {
   position: relative;
   z-index: 1;
}

.red-badge {
   position: absolute;
   top: 16px;
   right: 16px;
   padding: 4px 14px;
   display: flex;
   align-items: center;
   gap: 6px;
   z-index: 1;
   border-radius: 30px;
   background-color: #ff0000;
   color: white;
   font-weight: 500;
}

@media (max-width: 767px) {
   .public-pagniation .pagination {
      gap: 6px;
   }

   .public-pagniation .pagination li a,
   .public-pagniation .pagination li .dots {
      width: 35px;
   }

   .course-banner {
      padding: 130px 0 160px;
   }

   .course-text h1 {
      font-size: 28px;
   }

   .blog-main-card .abs-text {
      margin: 10px;
   }

   .blog-main-card .abs-text p {
      margin: 10px 0 15px;
   }

   .blog-main-card > .image img {
      object-fit: cover;
      min-height: 270px;
   }

   .public-tab-section .tab-wrapper > ul {
      border-radius: 8px;
      gap: 10px;
   }

   .public-tab-section .tab-wrapper > ul::-webkit-scrollbar {
      display: none;
   }
   .public-pagniation {
      margin-top: 40px;
   }
   .detail-banner .video-thumbnail .red-badge {
      bottom: 10px;
      left: 10px;
   }
}

.pp-blog-image-container{
    width: 100%;
    height: 260px;
    overflow: hidden;
}
.pp-blog-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pp-popular-blog-image-container {
    width: 100%;
    height: 520px;
    overflow: hidden;
}
.pp-popular-blog-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.detail-banner .title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.detail-banner .title > a {
    text-decoration: none;
    color: inherit;
}

.detail-banner .title > a:visited {
    color: inherit;
}

.detail-banner .title > a:hover {
    color: inherit;
}

.detail-banner .info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.detail-banner .info .image {
    display: flex;
    align-items: center;
}

.detail-banner .info .image img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    display: block;
}

.detail-banner .info .name {
    display: flex;
    align-items: center;
}

.detail-banner .info .name p {
    margin: 0;
    color: #000612;
}

.detail-banner .image {
    max-height: 600px;
    overflow: hidden;
}

.detail-banner .image img {
    width: 100%;
    height: 100%;
    max-height: 600px;
    object-fit: cover;
}