@media only screen and (max-width: 796px) 
{
    .menu_list{
        width: 80%;
        text-align: right;
        display: none;
    }
    .topnav {
        /* background-color: #333; */
        overflow: hidden;
        display: block;
        width: 80%;
    }
    .header_content h1{
        margin-top: 10px;
    }

}
@media only screen and (max-width: 730px) 
{
    .edu .college{
        display: flex;
        flex-direction: column;                     
        align-items: flex-start;
        flex-wrap: nowrap;
        width: 100%;
        transition: all 1s;
        transition-delay: 1s;
        /* width: inherit; */
    }
}
@media only screen and (max-width: 650px) 
{
    .value{
        float: right;
        margin: -17px 80px 0 0;
        font-size: 14px;
    }
}
/******************************************************Footer - Responsive****************************************/
@media only screen and (max-width: 767px)  
{
    .footer-col{
        width: 50%;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 574px)  
{
    .footer-col{
        width: 100%;
    }
}

@media only screen and (max-width: 700px) 
{
    .projects .blocks{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    .projects .blocks .block{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        width: 300px;
        min-width: 25%;
        height: 320px;
        text-align: center;
        background-color: #ffd1a5;
        padding: 20px;
        border-radius: 10px;
    }
    .projects {
        scroll-margin-top: 30px;
        width: 100%;
        height: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}
@media only screen and (max-width: 550px) 
{
    .header_content h1
    {
        margin-top: 10px;
    }

}

@media only screen and (max-width: 540px) 
{
    .myresume .edu .aloy{
        margin-top: 10px;
        margin-left: 20px;
        float: left;
        height: 100px;
        width: 100px;
        background-image: url('/Images/aloysius.png');
        background-size: cover;
        background-position: center;
        border-radius: 100px;
        box-shadow: 0px 0px 10px #888888;
    }
}

@media only screen and (max-width: 625px)  
{
    .header_content h1 {
        font-size: 40px;
        letter-spacing: 0.2em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Viga', sans-serif;
    }
    .header_content h2 {
        margin-top: 30px;
        font-size: 15px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
}
@media only screen and (max-width: 475px)  
{
    .header_content h1 {
        font-size: 37px;
        letter-spacing: 0.2em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Viga', sans-serif;
    }
    .header_content h2 {
        margin-top: 30px;
        font-size: 12px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
}
@media only screen and (max-width: 450px)  
{
    .popbox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        text-align: center;
        background-color: #ff8b1d;
        width: 370px;
        height: 300px;
        z-index: 1;
        border-radius: 20px;
        color: white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        align-items: center;
    }
}
@media only screen and (max-width: 425px)  
{
    .header_content h1 {
        font-size: 37px;
        letter-spacing: 0.2em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Viga', sans-serif;
    }
    .header_content h2 {
        margin-top: 30px;
        font-size: 10px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
}
@media only screen and (max-width: 400px)  
{
    .popbox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        text-align: center;
        background-color: #ff8b1d;
        width: 360px;
        height: 300px;
        z-index: 1;
        border-radius: 20px;
        color: white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        align-items: center;
    }
}
@media only screen and (max-width: 370px)  
{
    .header_content h2 {
        margin-top: 30px;
        font-size: 9px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
    .popbox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        text-align: center;
        background-color: #ff8b1d;
        width: 340px;
        height: 300px;
        z-index: 1;
        border-radius: 20px;
        color: white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        align-items: center;
    }
}
@media only screen and (max-width: 360px)  /*************************Realme 6 Pro***********************/
{
    .header_content h2 {
        margin-top: 30px;
        font-size: 9px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
    .popbox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        text-align: center;
        background-color: #ff8b1d;
        width: 330px;
        height: 320px;
        z-index: 1;
        border-radius: 20px;
        color: white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        align-items: center;
    }
}
@media only screen and (max-width: 340px) 
{
    .projects .blocks{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 90%;
        height: 300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 30px;
    }
    .projects .blocks .block{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 20px;
        width: 260px;
        min-width: 25%;
        height: 320px;
        text-align: center;
        background-color: #ffd1a5;
        padding: 20px;
        border-radius: 10px;
    }
    .popbox {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%) scale(0);
        text-align: center;
        background-color: #ff8b1d;
        width: 300px;
        height: 300px;
        z-index: 1;
        border-radius: 20px;
        color: white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        padding-left: 5px;
        padding-right: 5px;
        align-items: center;
    }
    .popbox h2{
        color: #fff;
        font-size: 25px;
        font-family: 'Viga', sans-serif;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        margin-top: 20px;
    }
}
@media only screen and (max-width: 320px)  /*************************Final - S Mobile***********************/
{
    .header_content h2 {
        margin-top: 30px;
        font-size: 8px;
        letter-spacing: 0.3em;
        word-spacing: 0.1em;
        color: whitesmoke;
        font-family: 'Roboto Mono', monospace;
    }
}