/* ----------setting media query for mobile--------------- */
@media only screen and (max-width:480px) {

    #wrapper{
        position: relative;
    }
    body {
        margin: 0;
        padding: 0;

        box-sizing: border-box;
        overflow-x: clip;
        background-color: black;
        overflow-y: scroll;




    }

    
#up-arrow {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 50px;
    animation: uparrow 1s infinite;
    z-index: 3;
}

    #home {
        background-image: url("../assets/a1\ \(1\).jpg");
        background-size: cover;
        background-repeat: no-repeat;

        overflow-x: clip;
        height: 100vh;
        width: 100vw;
        box-sizing: border-box;
        background-attachment: fixed;
        /* border: 2px solid red; */





    }

    /* #home::after {
        content: "";
        position: absolute;
        width: 300px;

        bottom: 0px;
        left: 0px;

        background-color: rgb(126, 151, 154);
        box-shadow: 10px 30px 30px 60px rgb(126, 151, 154);

    } */


    #mountain {
        position: absolute;
        left: 0px;
        right: 0px;
        bottom: -55px;
        width: 100vw;
        height: 400px;
        mix-blend-mode: normal;



    }

    #head-container {

        position: absolute;
        top: 260px;
        left: 20px;
        color: white;
        width: 350px;
       
        text-align: center;
        /* border: 1px solid white; */
        z-index: 2;
        backdrop-filter: blur(2px);
        

    }

    #head-text {
        font-size: 40px;
        font-family: 'Press Start 2P';
        padding: 0;
        text-shadow: 0 0 5px #fff700, 0 0 10px #078aee, 0 0 15px #0073e6, 0 0 20px #06ffd5, 0 0 25px #0073e6, 0 0 30px #01d5ff, 0 0 35px #00d5ff;
    }

    #head-year {
        font-size: 18px;
        font-weight: 600;
        margin-top: 0;
        font-family: 'Press Start 2P';
    }

    #head-desc {

        font-size: 12px;
        font-family: 'Press Start 2P';
        /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */

    }

    #moon {
        height: 320px;
        position: absolute;
        top: 60px;
        right: 30px;


        animation: rotateMoon 20s infinite linear;
        mix-blend-mode: luminosity;

    }

    @keyframes rotateMoon {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }

    }




    #drop-down {
        position: absolute;
        bottom: 20px;
        height: 70px;
        left: 35%;
        animation: dropdown 1s infinite; 
        z-index: 2;
    }






    /*----------------------------------  Events -----------------------------------*/



    #events {
        height: 1000px;
        width: 100vw;
        background-image: url("../assets/universe-1566159.jpg");
        background-size: cover;
        position: relative;
        overflow: hidden;

        color: white;
        overflow-x: clip;
        box-sizing: border-box;
        /* border: 2px solid white; */
        text-align: center;





    }

    /* #events::after {
        content: "";
        position: absolute;
        width: 300px;

        top: 0px;
        left: 0;

        background-color: rgb(126, 151, 154);
        box-shadow: 5px 5px 50px 50px rgb(126, 151, 154);
        margin-bottom: 90px;
    } */




    #earth {
        position: absolute;
        top: 100px;

        left: 10px;

        height: 350px;
        width: 350px;
        z-index: 1;

        animation: earthRotate 18s infinite linear;
        mix-blend-mode: lighten;

    }

    @keyframes earthRotate {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }

    }

    #satellite {
        height: 200px;
        width: 200px;
        position: absolute;
        left: 10px;
        top: -80px;
        offset: path("M 3.1914894,273.40426 C 26.36753,239.36417 59.742569,212.36413 97.87234,196.80851 c 43.4814,-17.7389 92.95598,-20.38379 138.08078,-7.38173 45.1248,13.00207 85.60682,41.56665 112.98305,79.72216");
        /* animation: move 8s linear infinite; */
        display: none;
        
    }

    /* @keyframes move {
        0% {
            offset-distance: 1%;
        }

        100% {
            offset-distance: 80%;
        }

    } */

    svg {
        position: absolute;
        height: 100vh;
        width: 100vw;
        left: 0;
        top: 50px;
    }


    #event-cont {
        position: absolute;
        /* border: 1px solid white; */
        text-align: center;
        left: 0px;
        top: 470px;
        width: 350px;
        text-align: center;
        margin: 0 auto;
        margin-left: 15px;
       
    }

    #event-head {
        font-size: 40px;
        margin-top: 30px;

        font-family: 'Press Start 2P';
        text-shadow: 0 0 5px #fff700, 0 0 10px #01c8ff, 0 0 15px #0073e6, 0 0 20px #0073e6, 0 0 25px #0073e6, 0 0 30px #01d5ff, 0 0 35px #0173ff;
    }

    #event-desc {
        font-size: 15px;
        width: 340px;
        margin-top: 40px;
        font-family: 'Press Start 2P';
    }

    #lunar {
        position: absolute;
        bottom: 0px;
        left: 0;
        height: 300px;
        width: 100vw;

    }

    /*----------------------------------  tyro team -----------------------------------*/
    #tyro-container {
        height: auto;
        width: 100vw;
        background-color: pink;
        padding-bottom: 100px;
        background-image: url("../assets/stars-1654074_1920.jpg");
        overflow-x: clip;
        position: relative;

    }

     /* #tyro-container::after {
        content: "";
        position: absolute;
        width: auto;
        top: 0px;
        left: 0;

        background-color: rgb(0, 0, 0);
        box-shadow: 5px 5px 50px 50px rgb(45, 25, 20);
        margin-bottom: 90px;
    }  */

    #tyro {

        display: grid;
        grid-template-columns: auto;
        /* border: 1px solid yellow; */


    }

    #tyro-head {
        font-size: 35px;
        margin-top: 100px;
        font-family: 'Press Start 2P';
        color: white;
        text-shadow: 0 0 5px #fff700, 0 0 10px #eeee07, 0 0 15px #fe2c02, 0 0 20px #ff7a06, 0 0 25px #fe0000, 0 0 30px #ff0101, 0 0 35px #fa0c0c;
    }

    #tyro-desc {
        font-size: 15px;
        margin-top: 30px;

        font-family: 'Press Start 2P';
        color: white;
    }

    #tyro-cont {
        text-align: center;
        /* border: 1px solid rgb(9, 82, 250); */
        width: 98vw;


    }

    #sub-left {
        display: grid;
        grid-template-columns: auto auto;
    }

    #tyro-cont1 {

        /* border: 1px solid red; */
        width: 180px;
        height: 200px;
        margin-top: 30px;
        position: relative;
        background-size: cover;
    }

    #stone {
        position: absolute;
        left: 0;

        width: 180px;

    }

    #tyro-photo {
        position: absolute;
        left: 55px;
        top: 30px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        /* mix-blend-mode: luminosity; */

    }

    #tyro-content1 {
        position: absolute;
        bottom: 0px;
        width: 200px;
        color: white;
        text-align: center;

    }

    #tyro-name {
        font-size: 20px;
        font-weight: 600;
        font-family: Arial, Helvetica, sans-serif;
    }

    #tyro-desc1 {
        font-size: 15px;
        font-family: Arial, Helvetica, sans-serif;
    }


    #sub-left1 {
        display: grid;
        grid-template-columns: auto auto;
    }



    #tyro-bottom {
        display: grid;
        grid-template-columns: auto auto;
        margin-bottom: 100px;
        z-index: 2;


    }


    #tyro-left {
        /* border: 1px solid red; */
        width: 100vw;
        z-index: 2;

    }

    /* tyro right with booster */
    

    #booster {
        height: 500px;
        width: 300pX;
        z-index: 1;
        position: absolute;
        top: -580px;
        right: -200px;
        /* border: 2px solid red; */

        animation: boost 2s infinite alternate;
        opacity: 0.6;

        /* mix-blend-mode: luminosity; */
    }



    /*----------------------------------  faculty members -----------------------------------*/
    /* #faculty::after {
        content: "";
        position: absolute;
        width: 300px;
        top: 0px;
        left: 0;

        background-color: black;
        box-shadow: 5px 5px 50px 50px rgb(72, 78, 89);
        margin-bottom: 90px;
    } */

    #faculty {
        height: auto;


        background-image: url("../assets/astronomy-1866822_1920.jpg");
        background-size: cover;
        position: relative;
        overflow-x: clip;
    }


    #faculty-content {
        padding-top: 60px;
    }

    #faculty-head {
        color: rgb(246, 35, 35);
        font-size: 40px;
        font-weight: 700;
        font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
        padding-top: 30px;
        margin-left: 30px;
        padding-bottom: 30px;

    }

    #faculty-desc {
        font-size: 15px;
       
    margin-left: 20px;
    padding-right: 20px;
    font-family: Arial, Helvetica, sans-serif;
    color: white
    }


    #faculty-container {
        display: grid;
        margin-top: 50px;
        grid-template-columns: auto auto;
        grid-row-gap: 40px;


    }

    #box-cont {
        width: 150px;
        border-radius: 10px;
        margin-left: 30px;
        position: relative;
        transition: transform .3s ease;
        backface-visibility: hidden;




    }

    #prabhakar-box {
        width: 150px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        height: 160px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/prabhakar_gupta.jpg");
        background-size: cover;
    }


    #kapil-box {
        width: 150px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/KAPIL\ BHUSHAN\ -\ EC.jpg");
        background-size: cover;
    }

    #dev-box {
        width: 150px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        background-position: center;
        height: 160px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/Chairman\ Sir\ new.jpg");
        background-size: cover;

    }


    #aditya-box {
        width: 150px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;

        height: 160px;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/ADITYA\ SIR.\ \(2\)\ new.jpg");
        background-size: cover;
    }

    #desc1 {
        color: white;
        text-align: center;
        width: 150px;
        background-color: black;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        transition: transform 1s ease;

    }


    #name {
        font-size: 17px;
        font-weight: 600;
    }


    #box-cont::after {
        content: "";

        right: -10px;
        bottom: -10px;
        height: 0;
        width: 0;
        position: absolute;
        border-bottom: 5px solid rgba(255, 0, 0, 0);

        border-right: 5px solid rgba(0, 0, 255, 0);
        transition: all .3s ease-out;
        border-radius: 10px;


    }

    #box-cont::before {
        content: "";

        left: -10px;
        top: -10px;
        height: 0;
        width: 0;
        position: absolute;
        border-top: 5px solid rgba(255, 0, 0, 0);

        border-left: 5px solid rgba(0, 0, 255, 0);
        transition: all.3s ease-in;
        border-radius: 10px;
    }

    #box-cont:hover::before {
        height: 90%;
        width: 90%;
        border-top-color: white;
        border-left-color: white;



    }


    /* ------faculty incharge------------------ */
    #faculty-incharge-container {
        margin-top: 40px;
        padding-bottom: 100px;
        display: grid;
        grid-template-columns: auto auto;
        grid-row-gap: 30px;
    }

    #faculty-incharge-head {
        margin-top: 120px;
        margin-bottom: 90px;
        text-align: center;
        font-size: 28px;
        color: wheat;
        font-family: 'Press Start 2P';
        font-stretch: extra-condensed;
    }


    #box-cont1 {
        width: 150px;
        border-radius: 10px;
        margin-left: 30px;
        position: relative;
        transition: transform .3s ease;
        backface-visibility: hidden;

    }

    #desc2 {

        color: white;
        text-align: center;
        width: 150px;
        background-color: black;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;



    }

    #name_ankit {
        font-size: 17px;
        font-weight: 600;
    }


    #shailesh-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/Dr.\ Shailesh\ Saxena.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }

    #rajesh-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ RAJESH\ KUMAR.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }

    #shipra-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MS.\ SHIPRA\ SHARMA.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }

    #ankit-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ ANKIT\ KHANDELWAL.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }

    #arvind-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ ARVIND\ MISHRA.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }


    #deepak-box {
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0)90%, rgba(0, 0, 0, 1)), url("../assets/MR.\ DEEPAK\ BATRA.jpg");
        background-size: cover;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        height: 160px;
        width: 150px;
    }



    



   



}