@font-face {
    font-family: 'Alvi Nastaleeq';
    src: url(/fonts/AlviNastaleeq.woff);
}

.font-urdu {
    font-family: 'Alvi Nastaleeq';
}

.font-125 {
    font-size: 1.3rem;
}

.font-200 {
    font-size: 2.2rem;
}

.b-top {
    border-top: 1px solid #111;
}

.video-border {
    width: 400px;
}

.fade-in-image:hover {
    opacity: 70%;
    transition: opacity .5s;
}

/* Container needed to position the overlay. Adjust the width as needed */
.cont {
    position: relative;
}

/* Make the image to responsive */
.image {
    display: block;
    width: 100%;
    height: auto;
}
/* The overlay effect - lays on top of the container and over the image */
.overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(75, 15, 215, 0.9); /* Black see-through */
    width: 60px;
    height: 60px;
    transition: .5s ease;
    opacity:1;
    color: white;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    line-height: 26px;
    padding: 3px 0 0 0;
}

/* When you mouse over the container, fade in the overlay title */
.cont:hover .overlay {
    opacity: 1;
}

.grad {
    background: rgb(7,1,21);
    background: linear-gradient(0deg, rgba(7,1,21,1) 0%, rgba(7,1,21,0) 75%);
}