/* Media query for responsive design */
@media (max-width:1023px)
{   /* hamburger menu */

    .menu-icon-div
    {
        margin-right: 5%;
        display: block;
    }
    
    .navbar
    {
        position:fixed;
        top:0;
        padding-top: 70px;
        right:-100%;
        height: 100vh;
        width:35%;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        border-radius: 10px;
        transition: all .50s ease;
        margin: 0;
        gap:0;
        z-index: -2;
        background-color: #00000010;
        backdrop-filter: blur(20px);
    }

    
    .navbar ul
    {
        flex-direction: column;
        gap:0;
    }

    .navbar a 
    {
        display: block;
        margin: 11px 0;
        padding: 0px 25px;
        transition: all .50s ease;
    }

    .navbar a:hover
    {
        color: var(--primary-bg-color) !important;
        font-weight: 600;
    }

    .nav-item
    {
        width: 100%;
        text-align: left;
    }
    
    .nav-item:hover
    {
       background-color: var(--primary-color);
    }

    .nav-item:hover a 
    {
        color: var(--primary-bg-color);
        font-weight: 600;
    }

    .navbar a::after
    {
        display: none;    
    }

    .navbar.open
    {
        right: 0%;
    }


    /* hamburger menu */

    /*intro*/
    .home
    {
        width:100%;
        margin-top: 0px;
        flex-direction: column;      
        gap:60px;
    }
    .largescreen
    {
        display: none;
    }
    .smallscreen
    {
        display: block;
    }
    .soc-handles
    {
        justify-content: center;  
    }

    /* about */ 
    .about
    {
        margin-top: 100px;
        
    }
    .about>div>h1
    {
        margin-top: 20px;
    }


    /* education */
    .main-education
    {
        margin-top: 100px;
    }

    .edubox>div>:not(.timeline)
    {
        width: 30%;
    }

    /* skills */

    .skill-section
    {
        margin-top: 150px;
    }
    .skill-icons
    {
        display:flex;
        align-items: center;
        justify-content:center;
        width:70%;
        margin-top: 40px;
        gap: 20px;
        flex-wrap: wrap;
    }
   
    /* certificates */
    .certi
    {
        margin-top: 200px;
    }
       
    /* projects */
    .proj
    {
        margin-top: 200px;
    }

    /* contact */
    .contact
    {
        margin-top: 200px;
    }
    


    /* footer */

    .foot
    {
        margin-top: 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content:space-around;
        flex-direction: column;
        height:250px;
    }
}


@media (max-width:767px)
{
    .about
    {
        width:87%;
    }
    p
    {
        letter-spacing: 0;
        word-spacing: 2px;
        font-size: 1rem;
    }
    .navbar
    {
        width: 55%;
    }
    .name-mail
    {
        flex-direction: column;
    }
    .buttons
    {
        margin: 20px 0px;
    }
}