.scroll-down{
    position: absolute;
    top: 93%;
    left: 50%;
    bottom: 100px;
    display: block;
    text-align: center;
    font-size: 20px;
    z-index: 1000;
    text-decoration: none;
    text-shadow: 0;
    width: 13px;
    height: 13px;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    -webkit-transform: translate(-50%, 0) rotate(45deg);
    animation: fade_move_down 3s cubic-bezier(0.19,1,0.22,1) infinite;
}

@keyframes fade_move_down{
    0%{
        transform: translate(0, -20px) rotate(45deg);
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: translate(0, 20px) rotate(45deg);
        opacity: 0;
    }
}

body{
    border-bottom: 20px solid black;
    background-color: white;
}

.content{
    position: relative;
    margin-top: 60%;
    margin-bottom: 15%;
}

.blank h4{
    display: none;
}

/*********************************************Loader*****************************************************/

.loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    overflow: hidden;
    background: #000 url('../images/aryangif3.gif') no-repeat center center;
    background-size: 500px;
}

/* .social-card{
        position: fixed;
    } */

/***************************************Responsiveness*********************************************/

@media(max-width: 1025px){
    body{
        background-image: url(../images/bg5.png);
    }
    .social-card{
        position: fixed;
        top: 43% !important;
    }
}

@media(max-width: 769px){
    .social-card{
        top: 10%;
    }
    .toggle, .overlay{
        right: 5%;
    }
    html, body {
        overflow-x: hidden;
    }
    body {
        position: relative
    }
    .mypic img{
        position: absolute;
        top: 6% !important;
        zoom: 1;
        left: 23%
    }
    .my-border{
        zoom: 1;
        top: 7.2%;
        left: 28%;
    }
    .sound-wave{
        zoom: 1;
        top: 7%;
        left: 19%;
    }
    .about h4{
        top: 2%;
        zoom: 1;
        left: 8%;
    }
    .me h4{
        top: 13%;
        zoom: 1;
        left: 60%;
    }
    .scroll-down{
        top: 24%;
    }
    .content{
        margin-top: 150% !important;
        margin-bottom: 60%;
    }
    .official{
        margin-bottom: auto;
    }
    .content h4{
        zoom: 0.8;
    }
    .blank h4{
        display: none !important;
    }
}

@media(max-width: 415px){
    .social-card{
        top: 15%;
    }
    .mypic img{
        position: absolute;
        top: 10.05% !important;
        zoom: 0.6;
        left: 20%
    }
    .my-border{
        zoom: 0.6;
        top: 11.45%;
        left: 26%;
    }
    .sound-wave{
        zoom: 0.6;
        top: 11%;
        left: 15.5%;
    }
    .about h4{
        top: 6%;
        zoom: 0.6;
        left: 2%;
    }
    .me h4{
        top: 18%;
        zoom: 0.6;
        left: 60%;
    }
    .scroll-down{
        top: 30%;
    }
    .content{
        margin-top: 190% !important;
        margin-bottom: 60%;
    }
    .official{
        margin-bottom: auto;
    }
    .content h4{
        zoom: 0.4;
    }
    .blank h4{
        display: none !important;
    }
}

@media(max-width: 394px){
    .social-card{
        top: 15%;
    }
}

@media(max-width: 376px){
    .social-card{
        top: 15%;
    }
    .mypic img{
        position: absolute;
        top: 10.05% !important;
        zoom: 0.6;
        left: 20%
    }
    .my-border{
        zoom: 0.6;
        top: 11.28%;
        left: 26%;
    }
    .sound-wave{
        zoom: 0.6;
        top: 11%;
        left: 15.5%;
    }
    .about h4{
        top: 6%;
        zoom: 0.6;
        left: 2%;
    }
    .me h4{
        top: 18%;
        zoom: 0.6;
        left: 60%;
    }
    .scroll-down{
        top: 32%;
    }
    .content{
        text-align: left;
        margin-top: 225% !important;
        margin-bottom: 90%;
    }
    .official{
        margin-bottom: auto;
    }
    .content h4{
        zoom: 0.4;
    }
}