@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,500;1,400&display=swap');

* {margin: 0; padding: 0;  box-sizing: border-box;}
html {font-size: 62.5%; font-family: 'Roboto', sans-serif; height:100%}
li { list-style: none; }
a {text-decoration: none;}
.header{ background: #65DDEF; border-bottom: 1px solid #E2E8F0; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; }

.container {
    min-height: 100%;
    overflow: auto;
}
.mainbox {
    display: flex;
    justify-content: center;
    margin: auto;
    /*gap : 3%;*/
    flex-wrap: wrap;
    padding: 2%;
}
.box1 { 
    width: 20%;
    height: 5%;
    text-align: center;
    align-items: center;

}
.box1 a{ 
    font-size: 2vh;
}

.box1 a img{ 
    width:75%;
}
.adder{
        padding-bottom: 2%;
}

.nav-menu { display: flex; justify-content: space-between; align-items: center; }
.nav-item { margin-left: 5rem; }
.nav-link{ font-size: 1.6rem; font-weight: 400; color: #475569; }
.nav-link:hover{ color: #482ff7; }
.nav-logo {margin: auto; width: 100%; font-size: 2.1rem; font-weight: 500; color: #482ff7; }
.head2 {font-size:2vw; text-align: center; padding : 0 20px 0 20px} /* Globe International.... */
.head3 {font-size:1vw; text-align: center; padding : 30px 20px 0 20px} /* Welcome ... portal */
.logger {font-size:2vw; text-align: center; padding : 20px}

.dHeader { font-size:1vw; font-weight: 100; margin-left: auto; margin-right: auto; 
    align-content: center; width: 60%;}
.tab1  { border-collapse: collapse; margin-left: auto; margin-right: auto; 
    width: 70%; font-size: 1vw; align-content: space-between;} 

footer {bottom: 0; left: 0; right: 0; position: absolute; background:  #65DDEF; color: #111; font-size: 12px; font-weight: bolder;
    height:auto; width:100%; padding-top: 20px; display: flex; justify-content: center; margin-top: auto; clear: both;}

footer  { font-family: “Poppins”, sans-serif; box-sizing: border-box; border: none; outline: none; }


@media only screen and (max-width: 768px) {
    .nav-logo {margin: auto; width: 100%;}
    .head2 {font-size:3vw}
    .head3 {font-size:2vw}
    .container {
        min-height: 100%;
        overflow: auto;
    }
    .mainbox {
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        padding: 4%;
    }

    .box1 { 
        width: 80%;
        height: 5%;
        text-align: center;
        align-items: center;
    }

    .box1 a{ 
        font-size: 2vh;
    }
    .box1 a img{ 
        width:100%;
    }
    .adder{
        padding-bottom: 2%;
    }

    /*footer {display: none;}*/
    footer {bottom: 0; left: 0; right: 0; position: relative; background:  #65DDEF; color: #111; font-size: 1.1vh; text-align: center; font-weight: bolder;
    height:auto; width:100%; padding-top: 20px; display: flex; justify-content: center; margin-top: auto; clear: both;}
}


@media only screen and (min-width: 769px) and (max-width: 1023px) {
    .nav-logo {margin: auto; width: 80%;}
    .head2 {font-size:3vw}
    .head3 {font-size:2vw}
    .logger {font-size:2vw; text-align: center; padding : 20px}

    .container {
        min-height: 100%;
        overflow: auto;
    }

    .mainbox {
        display: flex;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
        flex-wrap: wrap;
        align-items: center;
        align-content: center;
        padding: 4%;
    }

    .box1 { 
        height: 30%;
        width: 30%;
        text-align: center;        
    }

    .box1 a{ 
        font-size: 2vh;
        text-align: center;        
    }
    .box1 a img{ 
        width:75%;
    }
    .adder{
        padding-bottom: 2%;
    }
    
    /*footer {display: none;}*/
     footer {bottom: 0; left: 0; right: 0; position: relative; background:  #65DDEF; color: #111; font-size: 2vh; text-align: center; font-weight: bolder;
    height:auto; width:100%; padding-top: 20px; display: flex; justify-content: center; margin-top: auto; clear: both;}
}