/* Fix for footer in detail content page */
footer,
html body footer,
html body .content-area footer,
html body .content-area footer.bg-purple,
html body footer.bg-purple {
    background-color: #6f42c1 !important; /* Using the color-purple value from Bootstrap */
    color: white !important;
    border-top: 4px solid #541c9c !important;
}

html body .content-area footer p,
html body .content-area footer.bg-purple p,
html body footer.bg-purple p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
    color: white !important;
}

/* Specific rule for SDIT ISTIQOMAH text */
html body .content-area footer .col-md-6:nth-child(2) > p:first-child,
html body .content-area footer.bg-purple .col-md-6:nth-child(2) > p:first-child,
html body footer.bg-purple .col-md-6:nth-child(2) > p:first-child {
    color: #FFA500 !important;
    font-weight: normal !important;
}

html body .content-area footer .brand-footer p,
html body .content-area footer.bg-purple .brand-footer p,
html body footer.bg-purple .brand-footer p {
    margin-top: 15px !important;
}

html body .content-area footer .list-footer li a,
html body .content-area footer.bg-purple .list-footer li a,
html body footer.bg-purple .list-footer li a {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

html body .content-area footer .list-footer li a:hover,
html body .content-area footer.bg-purple .list-footer li a:hover,
html body footer.bg-purple .list-footer li a:hover {
    color: #FFA500 !important; /* Orange color for hover state */
}

html body .content-area footer .second-footer,
html body .content-area footer.bg-purple .second-footer,
html body footer.bg-purple .second-footer {
    color: rgba(255, 255, 255, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px 0 !important;
}

html body .content-area footer .second-footer p,
html body .content-area footer.bg-purple .second-footer p,
html body footer.bg-purple .second-footer p {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    color: rgba(255, 255, 255, 0.8) !important;
}

html body .content-area footer .group-footer h2,
html body .content-area footer.bg-purple .group-footer h2,
html body footer.bg-purple .group-footer h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: white !important;
}

@media (max-width: 768px) {
    html body .content-area footer p,
    html body .content-area footer.bg-purple p,
    html body footer.bg-purple p {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }

    html body .content-area footer .btn,
    html body .content-area footer.bg-purple .btn,
    html body footer.bg-purple .btn {
        padding: 6px !important;
        font-size: 14px !important;
    }

    html body .content-area footer .ms-2,
    html body .content-area footer.bg-purple .ms-2,
    html body footer.bg-purple .ms-2 {
        font-size: 12px !important;
    }

    html body .content-area footer .brand-footer img,
    html body .content-area footer.bg-purple .brand-footer img,
    html body footer.bg-purple .brand-footer img {
        max-width: 200px !important;
    }

    html body .content-area footer .group-footer h2,
    html body .content-area footer.bg-purple .group-footer h2,
    html body footer.bg-purple .group-footer h2 {
        font-size: 14px !important;
    }

    html body .content-area footer .list-footer li a,
    html body .content-area footer.bg-purple .list-footer li a,
    html body footer.bg-purple .list-footer li a {
        font-size: 12px !important;
    }
}