/* Tablet and larger screens */
@media screen and (max-width: 520px) {
    body {
        margin: 0px;
        padding: 0px;
        background-color: olivedrab;
        max-width: 100%;
        font-size: .6em; /* Slightly larger font for tablets */
    }

    .startPageTopDIV {
        display: flex;
        align-items: center; /* Vertically centers children */
        /* justify-content: center; */ /* Optional: Horizontally centers children */
        height: 5vh; /* Example height for the div */
        border: 1px solid black;
        width: 100%;
        height: 3.8vh;
        top: 0px;
        border-bottom: 2px solid purple;
        background-color: black;
    }

    #Image36 {
        visibility:hidden;
    }

    .headingImg {
        display: inline-block;
        width: 13%;
        height: 40%;
        margin-left: -10%;
        margin-top: .5%;
    }

    .headWrapper {
        width: 35%;
        margin-left: 1%;
    }

    .headWrapper3 {
        display: inline-block;
        vertical-align: top;
        width: 50%;
        height: 40%;
        margin-left: 5%;
        padding-left: 2%;
    }

    .userLbl {
        display: inline-block;
        vertical-align: top;
        color: white;
        font-family: Arial;
        margin-right: 10px;
        width: auto;
        text-align: right;
        font-size: .7em;
    }

    .userLbl2 {
        display: inline-block;
        vertical-align: top;
        color: white;
        font-family: Arial;
        font-weight: bold;
        width: 65%;
        text-align: left;
        border: 1px solid white;
    }

    .centerDiv1 {
        position: relative;
        display: block;
        width: 75%;
        height: 110%;
        margin-top: 0%;
        margin-left: 12%;
        margin-right: 12%;
        padding-bottom: 50px;
        background-color: white;
        z-index: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .banner {
        position: relative;
        background-color: black;
        width: 100%;
        max-height: 7vh;
        z-index: 0;
    }

    .imageOnBanner {
        position: relative;
        width: 90%;
        height: 55%;
        margin-top: 2%;
        margin-left: 5%;
        z-index: 0;
    }

    .submitBtn {
        border: 1px solid white;
        background-color: black;
        color: white;
        border-radius: 5px;
        width: 10vw;
        height: 1.8vh;
        font-size: .8em;
    }

    .innerDiv {
        position:relative;
        padding-left: 2vw;
        padding-right: 2vw;
        padding-bottom: 5%;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 100%;
    }

    .bottomPageDiv {
        position: fixed;
        bottom: 0px;
        height: 9%;
        width: 100%;
        background-color: black;
        color: white;
        z-index: 20;
        padding: 3%;
    }

    .bottomPageLblTitle {
        font-weight: bold;
        color: black;
        /*font-size: 1em;*/
        width: 100%;
        margin: 5px;
        margin-bottom: -20px;
    }
}

/*--------------------------------------------------------------------------------------------------*/


/* Desktop and larger screens */
@media screen and (min-width: 525px) {
    body {
        margin: 0px;
        padding: 0px;
        background-color: olivedrab;
        max-width: 100%;
        font-size: .7em; /* Larger font for desktop */
    }

    .startPageTopDIV {
        display: flex;
        align-items: center; /* Vertically centers children */
        /* justify-content: center; */ /* Optional: Horizontally centers children */
        height: 100px; /* Example height for the div */
        border: 1px solid black;
        width: 100%;
        height: 4.6vh;
        top: 0px;
        border-bottom: 5px solid purple;
        background-color: black;
    }

    .headWrapper {
        width: 10%;
        margin-left: 20%;
    }

    .headingImg {
        display: inline-block;
        width: 10%; height: 65%;
        margin-left: 3%; 
        margin-top: .5%;
    }

    .headWrapper3 {
        display: inline-block;
        vertical-align: top;
        width: 425px;
        height: 50%;
        margin-left: 20%;
        margin-top: 2px;
    }

    .userLbl {
        display: inline-block;
        color: white;
        font-family: Arial;
        margin-right: 10px; margin-top: 4px;
        width: auto;
        text-align: right;
    }

    .userLbl2 {
        display: inline-block;
        vertical-align: top;
        color: white;
        font-family: Arial;
        font-weight: bold;
        width: 55%;
        text-align: left;
        border: 1px solid white;
        padding: 3px;
    }

    .centerDiv1 {
        /*position: relative;*/
        display: block;
        width: 75%;
        height: 110%;
        margin-top: 0%;
        margin-left: 12%;
        margin-right: 12%;
        padding-bottom: 50px;
        background-color: white;
        z-index: 0;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .banner {
        position: relative;
        background-color: black;
        width: 100%;
        height: auto;
        z-index: 0;
    }

    .imageOnBanner {
        position: relative;
        width: 40%;
        max-height: 10%;
        margin-top: 0%;
        margin-left: 35%;
        z-index: 0;
    }

    .submitBtn {
        border: 1px solid white;
        background-color: black;
        color: white;
        border-radius: 5px;
        width: 20%;
        height: 85%;
        font-size: 1.2em;
    }

    .innerDiv {
        padding-left: 15px;
        padding-right: 15px;
        padding-bottom: 5%;
        overflow-x: hidden;
        overflow-y: hidden;
        height: 150%;
    }

    .bottomPageDiv {
        position: fixed;
        bottom: 0px;
        height: 7%;
        width: 100%;
        background-color: black;
        color: white;
        z-index: 20;
        padding: 10px;
    }

    .bottomPageLblTitle {
        font-weight: bold;
        color: black;
        /*font-size: 1em;*/
        width: 100%;
        margin: 5px;
        margin-bottom: -20px;
    }

}

/*------------------------------------------------------------*/