.urdu {
    font-family: 'Noto Nastaliq Urdu', serif;
    line-height: 1.8
}

.hero-heading-urdu {
    line-height: 2.5 !important;
    letter-spacing: .5px
}

.hero-text-urdu {
    line-height: 2.5 !important;
    letter-spacing: .5px
}

.glass-card {
    background: rgba(255, 255, 255, .15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .1)
}

.dark .glass-card {
    background: rgba(30, 30, 30, .15);
    border: 1px solid rgba(255, 255, 255, .08)
}

.traffic-sign {
    transition: all .3s ease
}

.traffic-sign:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)
}

.traffic-sign .description {
    opacity: 0;
    max-height: 0;
    transition: all .3s ease;
    overflow: hidden
}

.traffic-sign:hover .description {
    opacity: 1;
    max-height: 200px
}

@keyframes trafficLight {

    0%,
    100% {
        color: #D32F2F
    }

    33% {
        color: #FFC107
    }

    66% {
        color: #2E7D32
    }
}

.animate-traffic-light {
    animation: trafficLight 6s infinite
}

.signal-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.signal-light {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    transition: all .5s ease;
    background-color: #888
}

.signal-red.active {
    background-color: #D32F2F;
    box-shadow: 0 0 10px #D32F2F
}

.signal-yellow.active {
    background-color: #FFC107;
    box-shadow: 0 0 10px #FFC107
}

.signal-green.active {
    background-color: #2E7D32;
    box-shadow: 0 0 10px #2E7D32
}

.count-up {
    transition: all .5s ease
}

.fun-fact-card {
    transition: all .3s ease;
    position: relative;
    overflow: hidden
}

.fun-fact-card:hover {
    transform: translateY(-10px)
}

.fun-fact-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
    z-index: 0;
    border-radius: inherit;
    pointer-events: none
}

@keyframes marquee {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translateX(-100%)
    }
}

.animate-marquee {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 30s linear infinite
}

.animate-marquee:hover {
    animation-play-state: paused
}