@font-face{
    font-family: 'Font';
    src: url(NotoNastaliqUrdu-Regular.ttf);
}
body{
    margin: 0%;
    overflow: hidden;
    font-family: 'Font';
}
.section-main{
    width: 100vw;
    height: 100vh;
}
.section-main video{
    position: absolute;
    width: 100vw;
    height: 100vh;    
    object-fit: cover;
    z-index: 0;
}
.one{
    position: relative;
    width: 100vw;
    height: 100vh;
    background: no-repeat center;
    background-position: center;
    background-size: contain;
    color: white;
    z-index: 3;
    animation-duration: 20s;
    animation-delay: 3.3s;
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-name: pic-24-1-2;
}
@keyframes pic-24-1-2 {
    0% {opacity: 0%; transform: scale(3.25);  background-image: url(24-1-dalle-use.png)}
    /* 10% {opacity: 100%; background-image: url(24-1-dalle-use.png)} */
    15% {transform: scale(1); opacity: 100%; background-image: url(24-1-dalle-use.png)}
    40% {opacity: 100%; transform: scale(1); background-image: url(24-1-dalle-use.png)}
    50% {opacity: 0%; transform: scale(2); background-image: url(24-1-dalle-use.png)}
    50.01% {opacity: 0%; transform: scale(6.5); background-image: url(24-2-dalle-use.png)}
    60% {opacity: 100%; background-image: url(24-2-dalle-use.png)}
    70%{transform: scale(1); opacity: 100%; background-image: url(24-2-dalle-use.png);}
    85%{transform: scale(1); opacity: 100%; background-image: url(24-2-dalle-use.png);}
    /* 90% {opacity: 100%; background-image: url(24-2-dalle-use.png)} */
    100% {opacity: 0%; transform: scale(5); background-image: url(24-2-dalle-use.png)}
}
.two{
    position: relative;
    width: 100vw;
    height: 100vh;
    animation-duration: 10s;
    animation-delay: 5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-name: bg-color;
}
@keyframes bg-color {
    0%{background-image: linear-gradient(to bottom left, #9a8106, #540000, #000000, #0a43a5); background-size: 800% 800%; background-position:96% 0%}
    50%{background-image: linear-gradient(to bottom left, #9a8106, #540000, #000000, #0a43a5); background-size: 800% 800%; background-position:5% 100%}
    100%{background-image: linear-gradient(to bottom left, #9a8106, #540000, #000000, #0a43a5); background-size: 800% 800%; background-position:96% 0%}
}
.three{
    position: absolute;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-shadow: 3px 3px 3px black;
    opacity: 0%;
    bottom: 12%;
    left: 0%;
    right: 0%;
    font-size: 2rem;
    animation-duration: 20s;
    animation-delay: 3.3s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
    animation-name: fa;
}
@keyframes fa {
    0% {opacity: 0%; bottom: 0%; z-index: 4;}
    15% {opacity: 100%; bottom: 83%; z-index: 4;}
    40% {opacity: 100%; bottom: 83%; z-index: 2;}
    50% {opacity: 0%; bottom: 0%; z-index: 2;}
    50.01% {opacity: 0%; bottom: 100%; z-index: 4;}
    70%{opacity: 100%; bottom: 25%; z-index: 4;}
    85%{opacity: 100%; bottom: 25%; z-index: 2;}
    100% {opacity: 0%; bottom: 100%; z-index: 2;}
}