@media (min-width:992px) {
    #test-sc{
        bottom: -300px;
    }
    .cont{
        top: 30%;
        transform: translateY(-50%);
        text-align: right;
        right: 80px;
        
    }
    .cont .h1, .cont .h3{
        padding-right: 15px;
    }
    .logo{
        left: auto;
        right: 10px;
    }

    
}
@media (max-width: 991px) and (min-width: 769px){
    #test-sc{
            bottom: 0;
    }
    .cont{
        right: 0;
        left: 0;
    }
    .logo{
        left: 10px;
        right: 10px;
    }
}

@media (max-width: 767px){
    #test-sc{
     bottom: -14%;
    }
        .cont{
        right: 0;
        left: 0;
        text-align: center;
    }
    .logo{
        left: 10px;
        right: 10px;
    }
    .logo img{
        margin: 2px auto;
        display: block;
    }

}

 @-webkit-keyframes mymovefcl {
    0% {transform: translateX(-220px)}
    100% {transform: translateX(20px)}
} 

    /* Standard syntax */ 
    @keyframes mymovefcl {
     0% {transform: translateX(-220px)}
    100% {transform: translateX(20px)}
    }
 @-webkit-keyframes mymovebcl {
    0% {transform: translateX(220px)}
    100% {transform: translateX(-0)}
} 

    /* Standard syntax */ 
    @keyframes mymovebcl {
    0% {transform: translateX(220px)}
    100% {transform: translateX(-0)}
    }
@-webkit-keyframes plane {
    0% {transform: translateX(150px)}
    100% {transform: translateX(-3000px)}
} 

    /* Standard syntax */ 
    @keyframes plane {
    0% {transform: translateX(150px)}
    100% {transform: translateX(-3000px)}
    }
@-webkit-keyframes bus {
    0% {transform: translateX(0)}
    25% {transform: translateX(200px)}
    50% {transform: translateX(400px)}
    75% {transform: translateX(600px)}
    100% {transform: translateX(3000px)}
} 

    /* Standard syntax */ 
    @keyframes bus {
    0% {transform: translateX(0)}
    25% {transform: translateX(200px)}
    50% {transform: translateX(400px)}
    75% {transform: translateX(600px)}
    100% {transform: translateX(3000px)}
    }
@-webkit-keyframes sun {
    0% {opacity: 0.5}
    100% {opacity: 1}
} 

    /* Standard syntax */ 
    @keyframes sun {
    0% {opacity: 0.5}
    100% {opacity: 1}
    }
@-webkit-keyframes baw {
    0% {transform: translate(-10px,10px)}
    25% {transform: translate(100px,-100px)}
    50% {transform: translate(-50px,-50px)}
    75% {transform: translate(0px,-250px)}
    100% {transform: translate(0,-50px)}
} 

    /* Standard syntax */ 
    @keyframes baw {
    0% {transform: translate(-10px,10px)}
    25% {transform: translate(100px,-100px)}
    50% {transform: translate(-50px,-50px)}
    75% {transform: translate(0px,-250px)}
    100% {transform: translate(0,-50px)}
    }
@font-face {
    font-family: 'noor';
    src: url('../fonts/AGCRegular.ttf');
}
@font-face {
    font-family: 'noor';
    src: url('../fonts/AGCBold.ttf');
    font-weight: bold;
}
body{
    font-family: 'noor';
        overflow-x: hidden;
    background-color: #f5f5f5;
/*    background-color: #38629c; */
    min-height: 100vh;
    color: #555;
}
 #test-sc{
           position: fixed;
    right: -120px;
    left: -100px;
     overflow: hidden;
 }    
        .front-cl{
            animation-name: mymovefcl;
            animation-delay: 0.5s;
            animation-duration: 28s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate-reverse; 
        }
    .back-cl {
            animation-name: mymovebcl;
            animation-delay: 0.5s;
            animation-duration: 38s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate-reverse; 
        }
    .plane {
        animation-name: plane;
            
            animation-delay: 3s;
            animation-duration: 20s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
    .sun , #stars1, #stars2{
        animation-name: sun;
            animation-delay: 0.5s;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate-reverse; 
        }
    #stars1{
            animation-delay: 0.5s;
            animation-duration: 0.5s;
        }
    #stars2{
            animation-delay: 1s;
            animation-duration: 1s;
        }
    #stars2,#stars1{
        visibility: hidden;
    }
    .baw {
            animation-name: baw;
            animation-delay: 0s;
            animation-duration: 35s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
            animation-direction: alternate-reverse; 
        }
    .bus {
            animation-name: bus;
            animation-delay: 15s;
            animation-duration: 26s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }
.cont{
        position: absolute;
    display: block;
    z-index: 9999;
    font-weight: bold;
    transform: translateY(-50%);
    top:45%;
    
}
.ti span{
        font-size: 30px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    display: block;
}
.cont .h1 span{
    color: #2764AD;
}
.dy{
    color: #E43C34;
}
.hr{
    color: #01B5D5;
}
.mn{
    color: #67BD58;
}
.sc{
    color: #5D3092;
}
.logo{
        position: relative;
    display: block;
    top: 10px;
}
.logo img{
    height: 100px;
}
.ti .title{
    
}