/* =========================================================
   VEIL O - Bottom Government / DHA / FTA Moving Logo Carousel
   Added for all public pages. Uses existing images:
   pics/GOD.png, pics/DHA.png, pics/FTA.png
   ========================================================= */
body.veilo-page-with-logo-ticker {
    overflow-x: hidden;
}

body.veilo-auth-logo-page {
    overflow-y: auto;
}

.veilo-logo-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: linear-gradient(180deg, #fffaf2 0%, #f7ead1 100%);
    border-top: 1px solid rgba(217, 181, 109, 0.35);
    border-bottom: 1px solid rgba(217, 181, 109, 0.18);
    padding: 22px 0;
    z-index: 2;
}

.veilo-logo-ticker::before,
.veilo-logo-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    width: min(120px, 18vw);
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.veilo-logo-ticker::before {
    left: 0;
    background: linear-gradient(90deg, #fffaf2 0%, rgba(255, 250, 242, 0) 100%);
}

.veilo-logo-ticker::after {
    right: 0;
    background: linear-gradient(270deg, #fffaf2 0%, rgba(255, 250, 242, 0) 100%);
}

.veilo-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: veiloLogoScroll 24s linear infinite;
    will-change: transform;
}

.veilo-logo-group {
    display: flex;
    align-items: center;
    gap: clamp(42px, 7vw, 95px);
    padding-right: clamp(42px, 7vw, 95px);
    flex-shrink: 0;
}

.veilo-logo-item {
    min-width: clamp(118px, 14vw, 175px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.veilo-logo-item img {
    height: clamp(38px, 5.5vw, 58px);
    max-width: 175px;
    width: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(55, 38, 18, 0.12));
    transition: transform 0.3s ease, filter 0.3s ease;
}

.veilo-logo-item img:hover {
    transform: scale(1.06);
    filter: drop-shadow(0 10px 20px rgba(55, 38, 18, 0.18));
}

@keyframes veiloLogoScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .veilo-logo-ticker {
        padding: 16px 0;
    }

    .veilo-logo-track {
        animation-duration: 18s;
    }

    .veilo-logo-group {
        gap: 34px;
        padding-right: 34px;
    }

    .veilo-logo-item {
        min-width: 104px;
    }

    .veilo-logo-item img {
        height: 34px;
        max-width: 125px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .veilo-logo-track {
        animation: none;
        transform: none;
    }

    .veilo-logo-ticker {
        overflow-x: auto;
    }
}