﻿.judicial-header {
    font-family: 'Noto Kufi Arabic','Cairo',sans-serif;

}

.header-logo {
    width: 125px;
    height: auto;
}

.header-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #0c3873;
}

    .header-title span {
        color: #1a58b0;
    }

.header-nav {
    background-color: #f8f9fa;
}

    .header-nav .nav-link {
        color: #0c3873;
        font-weight: 600;
    }

        .header-nav .nav-link:hover,
        .header-nav .nav-link.active {
            color: #0b5ed7;
            border-bottom: 2px solid #0b5ed7;
        }

/* Mobile */
@media (max-width: 992px) {
    .header-logo {
        width: 64px;
    }

    .header-title {
        font-size: 1.25rem;
        line-height: 1.6;
    }
    /* Keep long menus scrollable inside collapse on small screens */
    #mainNav {
        max-height: 70vh;
        overflow: auto;
    }
}

/*@keyframes shine {
    0% {
        background-position: -200%;
    }

    100% {
        background-position: 200%;
    }
}

.shine-text {
    background: linear-gradient(90deg, #002b5c 20%, #ffffff 50%, #002b5c 80%);
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    animation: shine 5s linear infinite;
}*/
.header-center-img {
    max-width: 100%;
    height: clamp(45px, 6vw, 90px);
    object-fit: contain;
    display: block;
}

/* wrapper that can host ::after */
.shine-wrap {
    position: relative;
    display: inline-block; /* important */
    overflow: hidden; /* important */
}

    /* the moving light */
    .shine-wrap::after {
        content: "";
        position: absolute;
        top: 0;
        right: -150%; /* start from right */
        width: 50%;
        height: 100%;
        background: linear-gradient( 240deg, /* reversed angle */
        transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100% );
        animation: shineMoveRTL 3s infinite;
        pointer-events: none;
    }

@keyframes shineMoveRTL {
    0% {
        right: -150%;
    }

    60% {
        right: 150%;
    }

    100% {
        right: 150%;
    }
}
