body,
div {
    margin: 0;
    padding: 0;
}


.banner {
    position: relative;
}


.banner img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 100vh;
    flex-direction: row;
}

@media screen and (max-width: 500px) and (min-width: 300px) {

  /* Back Button  Start*/

  .fa-arrow-left-long {
    color: #050505;
    position: absolute;
    left: 4vw;
    top: 12vh;
    font-size: 5vw;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
  }
  .fa-house {
    color: #050505;
    position: absolute;
    left: 4vw;
    top: 7vh;
    font-size: 4vw;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}



  /* Back Button End */

  /* Designed By Start */

  .design {
    color: #000000;
    font-family: "Jua";
    position: absolute;
    right: 2vw;
    top: 7vh;
    border: black;
    border-radius: 3vw;
    border: 0.2vw solid #000;
    font-size: 4vw;
    cursor: pointer;
    text-decoration: none;
    width: 22vw;
    height: auto;
    text-align: center;
  }

  .design:hover {
    box-shadow: 0.46875vw 0.15625vw 0.3125vw #ff7f0a;
  }

  /* Designed By End */
    .road {
        position: absolute;
        left: 27vw;
        top: 72vh;
        transform: rotate(90deg);
        height: -2vw;
        width: 30vw;
        border: 0.1vw black solid;
    }

    /*ARCHIVE START*/
    .Archive {
        position: absolute;
        color: #000000;
        font-family: "Jua";
        font-size: 12vw;
        text-shadow: 0.13020833333333334vw 0.13020833333333334vw 0.2604166666666667vw #ff7f0a;
        width: -120vw;
        height: 43.52vh;
        top: 10vh;
        left: 21vw;
        margin-right: 15vw;
    }

    /* archive end */
    /* archivecard start */
    .archivecard {
        display: block;
        justify-content: space-between;
        background-color: #ffffff;
        border: 0.2vw solid #000;
        border-radius: 3vh;
        position: absolute;
        box-shadow: 0.7vw 0.7vw 1vw #ff7f0a;
        top: 22vh;
        height: 60vw;
        right: 20vw;
        width: 60vw;
        overflow: hidden;
    }

    /* archive card end */
    /* 2022-23 start */
    .number span {
        -webkit-text-stroke: 0.2vw #fb6816;
        color: transparent;
        font-family: "Oswald-Bold", Helvetica;
        font-size: 8vw;
        right: 6vw;
        letter-spacing: 0.065vw;
        line-height: 19.8vw;
        position: absolute;
        top: 14vh;
        white-space: nowrap;
    }

    .reports ul {
        font-family: "Jua";
        display: block;
        font-size: 4vw;
        justify-content: space-between;
        position: absolute;
        width: 50vw;
        top:25vh;
        left: 18vw;
    }

    .reports a {
        color: #000;
        text-decoration: none;
    }

    .reports a:hover {
        color: #ff7f0a
    }
}

@media screen and (max-width: 1921px) and (min-width: 501px) {

    /* Back Button  Start*/

    .fa-arrow-left-long {
        color: #ffffff;
        background-color: #000000;
        position: absolute;
        left: 0.5vw;
        top: 35.5vh;
        padding: 1.11vh 1.39vw;
        border: none;
        border-radius: 1vw;
        font-size: 1.8vw;
        cursor: pointer;
        text-decoration: none;
        width: 2vw;
        height: 1.6vw;
        text-align: center;
    }

    .fa-arrow-left-long:hover {
        box-shadow: 0.46875vw 0.15625vw 0.3125vw #ff7f0a;
    }
    .fa-house {
        color: #ffffff;
        background-color: #000000;
        position: absolute;
        left: 0.5vw;
        top: 26.5vh;
        padding: 1.11vh 1.39vw;
        border: none;
        border-radius: 1vw;
        font-size: 1.8vw;
        cursor: pointer;
        text-decoration: none;
        width: 2vw;
        height: 1.6vw;
        text-align: center;
    }

    .fa-house:hover {
        box-shadow: 0.46875vw 0.15625vw 0.3125vw #ff7f0a;
    }

    /* Back Button End */

    /* Designed By Start */
    .design {
        color: #ffffff;
        background-color: #000000;
        font-family: "Jua";
        position: absolute;
        right: 0.5vw;
        top: 26.5vh;
        border: none;
        border-radius: 1vw;
        font-size: 1.9vw;
        cursor: pointer;
        text-decoration: none;
        width: 12vw;
        height: 2.6vw;
        text-align: center;
    }

    .design:hover {
        box-shadow: 0.46875vw 0.15625vw 0.3125vw #ff7f0a;
    }

    /* Designed By End */
    .road {
        position: absolute;
        left: 27vw;
        top: 72vh;
        transform: rotate(90deg);
        height: -2vw;
        width: 30vw;
        border: 0.1vw black solid;
    }

    /*ARCHIVE START*/
    .Archive {
        position: absolute;
        color: #000000;
        font-family: "Jua";
        font-size: 7vw;
        text-shadow: 0.13020833333333334vw 0.13020833333333334vw 0.2604166666666667vw #ff7f0a;
        width: -120vw;
        height: 43.52vh;
        top: 24vh;
        left: 35vw;
        margin-right: 15vw;
    }

    /* archive end */
    /* archivecard start */
    .archivecard {
        display: block;
        justify-content: space-between;
        background-color: #ffffff;
        border: 0.2vw solid #000;
        border-radius: 5vh;
        position: absolute;
        box-shadow: 0.7vw 0.7vw 1vw #ff7f0a;
        top: 41vh;
        height: 26vw;
        right: 6vw;
        width: 40vw;
        overflow: hidden;
    }

    /* archive card end */
    /* 2022-23 start */
    .number {
        position: absolute;
        color: #000000;
        font-family: "Oswald";
        font-size: 7vw;
        width: -120vw;
        font-weight: 600;
        font-size: 11vw;
        height: 43.52vh;
        top: 45vh;
        left: 3vw;
        margin-right: 15vw;
    }


    .number span {
        -webkit-text-stroke: 0.2vw #fb6816;
        color: transparent;
        font-family: "Oswald-Bold", Helvetica;
        font-size: 11vw;
        left: 6vw;
        letter-spacing: 0.065vw;
        line-height: 19.8vw;
        position: fixed;
        top: 42.2vh;
        white-space: nowrap;
    }

    .reports ul {
        font-family: "Jua";
        display: block;
        font-size: 1.7vw;
        justify-content: space-between;
        position: absolute;
        width: 30vw;
        top: 50vh;
        right: 13vw;
    }

    .reports a {
        color: #000;
        text-decoration: none;
    }

    .reports a:hover {
        color: #ff7f0a
    }
}