@media (min-width:812px) {
    body {
        font-size: 1rem;
    }

    .text {
        font-size: 1rem;
    }

    .navbar {
        grid-template-columns: 1fr 2fr;
    }

    .head {
        font-size: 1.1rem;
    }

    .logo {
        margin: auto;
        margin-top: -10px;
        padding: 10px 10px;

    }

    .logo a img {
        width: 300px;

    }



    .navlinks li a {
        font-size: 1.4rem;
    }

    section>h3 {
        font-size: 1.4rem;
    }

    #ds-img {
        width: 70%;
    }

    #loginbtn button {
        font-size: 0.8rem;
        border-radius: 10px;
        padding: .8em 1em .8em 1em !important;
    }

    .tabletext td {
        font-size: 0.8rem;
    }

    .tablehead th {
        font-size: 1.1rem;
    }

    .sticky_button {
        padding: -10px;
        border-radius: 10px;
        bottom: 40%;
        margin-right: -68px;
    }

    footer {
        display: none;
    }
}


@media (max-width: 812px) and (min-width: 470px) {

    body {
        font-size: 1rem;
    }

    .text {
        font-size: 1rem;
    }

    .navbar {
        grid-template-areas:
            'nav';
    }

    .navbar::before {
        grid-template-areas:
            'nav';
    }

    .head {
        font-size: 1.1rem;
    }

    .logo {
        display: flex;
        justify-content: center;
        /* Center items horizontally */
        align-items: center;
        margin-bottom: 0px;
        text-align: center;

    }

    .logo a img {
        width: 270px;
        margin-bottom: 0px;
        text-align: center;
    }

    .navlinks {
        margin-top: -30px;

        padding: 0px;
    }

    .navlinks li a {
        font-size: 1.4rem;
    }

    section>h3 {
        font-size: 1.3rem;
    }

    #ds-img {
        width: 80%;
    }

    #loginbtn button {
        font-size: 0.8rem;
        border-radius: 10px;
        padding: .3em 0.8em .3em 0.8em !important;
    }

    .tabletext td {
        font-size: 0.8rem;
    }

    .tablehead th {
        font-size: 1.1rem;
    }

    .sticky_button {
        padding: -10px;
        border-radius: 10px;
        bottom: 50%;
        font-size: smaller;
        margin-right: -65px;
        z-index: 100;

    }

    footer {
        display: none;
    }

    section {
        margin: 10px;
    }
}

@media (max-width: 470px) {

    body {
        font-size: 0.7rem;
    }

    .text {
        font-size: 0.8rem;
    }

    .navbar {
        display: flex;
        flex-direction: column;
        /* Stack the elements vertically */
        align-items: center;
    }



    .head {
        font-size: 0.8rem;
    }

    .logo {
        display: flex;
        justify-content: center;
        /* Center items horizontally */
        align-items: center;
        margin-bottom: 0px;
        text-align: center;


    }

    .logo a img {
        width: 250px;
        margin-bottom: 0px;
        text-align: center;

    }

    .navlinks {
        margin-top: -30px;
        width: 100%;
        display: flex;
        justify-content: center;


    }

    .navlinks ul {
        text-align: left;
        padding: 0;
        display: flex;
        /* Create a flex container for the navigation links */
        justify-content: center;
    }

    .navlinks li {
        padding: 0px 6px;
    }

    .navlinks li a {
        font-size: 1.1rem;

    }

    section>h3 {
        font-size: 0.9rem;
    }

    #ds-img {
        width: 90%;
    }

    #loginbtn button {
        font-size: 0.8rem;
        border-radius: 6px;
        padding: .2em 0.6em .2em 0.6em !important;
        font-weight: 400;
        letter-spacing: 0em;
    }


    table {
        width: 100%;
    }

    .table {
        width: 100%;
    }

    .tabletext td {
        font-size: 0.6rem;
        padding: 8px;
    }

    .tablehead th {
        font-size: 0.8rem;
        padding: 10px;
    }

    .sticky_button {
        padding: -10px;
        border-radius: 10px;
        bottom: 50%;
        font-size: smaller;
        margin-right: -50px;
        z-index: 100;
    }

    footer {
        display: none;
    }

    section {
        margin: 5px;
    }
}