/* ============================================================
   Homepage & Global Branding Overrides
   Brand: dark=#1B3A2D  mid=#1B7A47  bright=#2FBF71
   ============================================================ */

/* --- Section sub-title labels (match E-Course badge style) --- */
.sub-title {
    color: #1B7A47 !important;
    background: #E8F5EE !important;
    border-color: #B8DFC9 !important;
}

/* --- Primary CTA buttons (.btn.arrow-btn) --- */
.btn.arrow-btn {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.btn.arrow-btn:hover,
.btn.arrow-btn:focus {
    background: #0f261d !important;
    border-color: #0f261d !important;
    color: #fff !important;
}

/* --- Banner play/video button --- */
.play-btn.popup-video {
    color: #1B3A2D;
    border-color: #1B3A2D;
}
.play-btn.popup-video:hover {
    background: #1B3A2D;
    color: #fff;
}

/* --- Course section tab navigation --- */
.courses__nav .nav-tabs .nav-link {
    color: #374151;
}
.courses__nav .nav-tabs .nav-link:hover {
    color: #1B3A2D;
    border-color: #1B3A2D;
}
.courses__nav .nav-tabs .nav-link.active {
    color: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.courses__nav .nav-tabs .nav-link::after,
.courses__nav .nav-tabs .nav-link.active::after {
    background: #1B3A2D !important;
}

/* --- Course carousel items: category tag --- */
.courses__item-tag a {
    color: #1B7A47 !important;
    border-color: #B8DFC9 !important;
    background: #F0FAF4 !important;
}
.courses__item-tag a:hover {
    color: #1B3A2D !important;
    background: #E0F5EA !important;
}

/* --- Course carousel items: add-to-cart / enrolled button --- */
.courses__item-bottom .button a {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
    color: #fff !important;
}
.courses__item-bottom .button a:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
    color: #fff !important;
}
.courses__item-bottom .button a.already-enrolled-btn {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}

/* --- Course price --- */
.courses__item-bottom .price {
    color: #1B3A2D !important;
}

/* --- Features section background --- */
.features__area {
    background: #1B3A2D !important;
}

/* --- Fact / counter section inner background --- */
.fact__inner-wrap {
    background: #1B7A47 !important;
}
.fact__item .count,
.fact__item h2 {
    color: #fff !important;
}
.fact__item p {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* --- Newsletter section --- */
.newsletter__area {
    background: #1B3A2D !important;
}
.newsletter__form .btn,
.newsletter__form button[type="submit"] {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}
.newsletter__form .btn:hover,
.newsletter__form button[type="submit"]:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}

/* --- Star ratings --- */
.avg-rating i.fas.fa-star,
.avg-rating i.fa-star {
    color: #F5A623;
}

/* --- Footer logo size --- */
.footer__widget .logo img {
    max-height: 52px;
    width: auto;
}

/* ---- Homepage course carousel: swiper-slide full-height ---- */
.courses-swiper-active .swiper-slide {
    height: auto !important;
    display: flex;
    flex-direction: column;
}
.courses-swiper-active .swiper-slide .sfc-course-card {
    flex: 1;
}
/* Star icon in sfc-card-stats → yellow */
.sfc-card-stats .fa-star {
    color: #F5A623 !important;
}

/* ============================================================
   Homepage course carousel cards → match /courses sfc-card style
   ============================================================ */
.courses-area .courses__item.shine__animate-item,
.courses-area .courses__item {
    background: #fff !important;
    border-radius: 14px !important;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.2s, transform 0.2s;
    border: none !important;
}
.courses-area .courses__item.shine__animate-item:hover,
.courses-area .courses__item:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.13) !important;
    transform: translateY(-4px) !important;
}
.courses-area .courses__item-thumb {
    position: relative !important;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0D2118;
    flex-shrink: 0;
}
.courses-area .courses__item-thumb .shine__animate-link,
.courses-area .courses__item-thumb a:first-child {
    display: block;
    width: 100%;
    height: 100%;
}
.courses-area .courses__item-thumb img:not([class*="wishlist"]) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.55;
    transition: opacity 0.3s;
}
.courses-area .courses__item:hover .courses__item-thumb img:not([class*="wishlist"]) {
    opacity: 0.45;
}
.courses-area .courses__item-content {
    padding: 14px 16px !important;
}
.courses-area .courses__item-tag a {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #1B7A47 !important;
    background: #F0FAF4 !important;
    border: 1px solid #B8DFC9 !important;
    border-radius: 100px !important;
    padding: 3px 10px !important;
    line-height: 1 !important;
}
.courses-area .courses__item-tag a:hover {
    background: #E0F5EA !important;
    color: #1B3A2D !important;
}
.courses-area .courses__item-content h3.title {
    font-size: 14.5px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    color: #111827 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 6px 0 4px !important;
}
.courses-area .courses__item-content h3.title a {
    color: #111827 !important;
}
.courses-area .courses__item-content h3.title a:hover {
    color: #1B7A47 !important;
}
.courses-area .courses__item-content .author {
    font-size: 12.5px;
    color: #6B7280;
    margin-bottom: 4px;
}
.courses-area .courses__item-content .author a {
    color: #1B7A47 !important;
    font-weight: 600;
}
.courses-area .courses__item-content .author a:hover {
    color: #1B3A2D !important;
}
.courses-area .avg-rating {
    font-size: 12px;
    color: #6B7280;
}
.courses-area .courses__item-bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-top: 1px solid #F3F4F6 !important;
    padding-top: 10px !important;
    margin-top: 6px !important;
}

/* ============================================================
   Footer: all text → white
   ============================================================ */
.footer__widget-title,
.footer__content p,
.footer__content ul li,
.footer__link ul li a,
.footer__contact-content p,
.copy-right-text p,
.footer__bottom-menu ul li a,
.footer__area .footer__top p,
.footer__area address {
    color: #fff !important;
}
.footer__link ul li a:hover,
.footer__bottom-menu ul li a:hover {
    color: #2FBF71 !important;
}

/* ============================================================
   App store / Google Play buttons → add border so white bg visible
   ============================================================ */
.app-download a {
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    overflow: hidden;
    display: inline-block;
    margin: 4px 4px 4px 0;
}

/* --- Header search button --- */
.header__search-btn,
.tgmobile__search-btn {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.header__search-btn:hover,
.tgmobile__search-btn:hover {
    background: #1B7A47 !important;
}

/* --- Category carousel navigation arrows --- */
.categories__nav button,
.categories-button-prev,
.categories-button-next {
    background: #1B3A2D !important;
    border-color: #1B3A2D !important;
}
.categories__nav button svg path,
.categories-button-prev svg path,
.categories-button-next svg path {
    stroke: #fff !important;
}

/* --- Active category item --- */
.categories__item a:hover .icon,
.categories__item.active a .icon {
    background: #1B3A2D !important;
}

/* ============================================================
   REVISI — 2026-06-10
   1. Banner → dark green hero
   2. Header nav → brand green
   3. Category section → green icons & title
   4. Section h2.title → brand green (all light-bg sections)
   5. Features icons+text → white
   6. Blog card titles → green
   ============================================================ */

/* --- 1. Banner → dark green hero (SkillCuan Hero design) --- */
.banner-area.banner-bg,
.banner-area {
    background-image: none !important;
    background: #1B3A2D !important;
}
.banner__content h3.title,
.banner__content .title {
    color: #fff !important;
}
.banner__content p {
    color: rgba(255, 255, 255, 0.85) !important;
}
.banner__btn-two .btn.arrow-btn {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
    color: #fff !important;
}
.banner__btn-two .btn.arrow-btn:hover {
    background: #1B7A47 !important;
    border-color: #1B7A47 !important;
}
.banner__btn-two .play-btn.popup-video {
    color: #2FBF71 !important;
    border-color: #2FBF71 !important;
}
.banner__btn-two .play-btn.popup-video:hover {
    background: #2FBF71 !important;
    color: #fff !important;
}
/* Floating cards on banner */
.banner__images .about__enrolled,
.banner__area .about__enrolled {
    background: #fff !important;
    border-radius: 14px !important;
}
.banner__images .about__enrolled .title,
.banner__images .about__enrolled p {
    color: #111827 !important;
}
.banner__images .about__enrolled .title span {
    color: #1B3A2D !important;
}
.banner__student.instructor {
    background: #fff !important;
    border-radius: 14px !important;
}
.banner__student.instructor .icon {
    background: #E8F5EE !important;
}
.banner__student.instructor .content span {
    color: #6B7280 !important;
}
.banner__student.instructor .content h4.title {
    color: #1B3A2D !important;
}

/* --- 2. Header nav text → brand dark green --- */
.tgmenu__nav .navigation > li > a {
    color: #1B3A2D !important;
}
.tgmenu__nav .navigation > li > a:hover,
.tgmenu__nav .navigation > li.active > a {
    color: #1B7A47 !important;
}
.tgmenu__nav .navigation > li > ul.sub-menu a {
    color: #374151 !important;
}
.tgmenu__nav .navigation > li > ul.sub-menu a:hover {
    color: #1B7A47 !important;
}

/* --- 3. Category section → green title + green icons --- */
.categories-area .section__title h2.title {
    color: #1B3A2D !important;
}
.categories-area .section__title p.desc {
    color: #1B7A47 !important;
}
.categories__item .icon {
    background: #E8F5EE !important;
    border-color: #B8DFC9 !important;
}
.categories__item .icon img {
    filter: invert(43%) sepia(52%) saturate(530%) hue-rotate(108deg) brightness(82%) contrast(95%) !important;
}
.categories__item a:hover .icon {
    background: #1B7A47 !important;
}
.categories__item a:hover .icon img {
    filter: brightness(0) invert(1) !important;
}
.categories__item .name {
    color: #1B3A2D !important;
}
.categories__item .courses {
    color: #1B7A47 !important;
}

/* --- 4. Section h2.title → brand dark green (all sections) --- */
.section__title h2.title {
    color: #1B3A2D !important;
}
.section__title p.desc {
    color: #1B7A47 !important;
}
/* Instructor-two card titles (Jadilah Instruktur / Jadilah Siswa) */
.instructor__content-two h3.title a {
    color: #1B3A2D !important;
}
.instructor__content-two h3.title a:hover {
    color: #2FBF71 !important;
}
/* Protect dark-bg sections — keep white (higher specificity wins) */
.features__area .section__title h2.title,
.features__area .section__title p {
    color: #fff !important;
}
.newsletter__area .section__title h2.title,
.newsletter__area .section__title p {
    color: #fff !important;
}

/* --- 5. Features icons + content text → white --- */
.features__area .features__icon img {
    filter: brightness(0) invert(1) !important;
}
.features__area .features__content p.title {
    color: #fff !important;
}
.features__area .features__content p {
    color: rgba(255, 255, 255, 0.82) !important;
}

/* --- 6. Blog card titles → brand green --- */
.blog__post-content h3.title,
.blog__post-content h3.title a {
    color: #1B3A2D !important;
}
.blog__post-content h3.title a:hover {
    color: #2FBF71 !important;
}
/* Blog tag pill */
.blog__post-thumb .post-tag {
    background: #2FBF71 !important;
    border-color: #2FBF71 !important;
}