/* laptop */

@media (max-width:1024px) {
    .projects-grid{
        gap: 20px;
    }
    
    .visit-btn{
        padding: 8px 20px;
    }
    .about-me, .projects {
        padding: 50px 40px ;

    }
}

/* Tablet */

@media (max-width:768px) {
    .hero-page{
        padding: 100px 30px 0 30px;
    }
    .projects-grid{
        grid-template-columns: 1fr 1fr;
    }
    .about-me{
    flex-direction: column;
    padding: 50px 100px;
    }
    .about-me div {
        width: 100%;
    }
    .about-me h1{
        padding: 8px 20px;
    }
    
    

}

/* custom for hamburger menu */

@media (max-width:550px) {
      /* hamburger */

    .ham-menu{
        display: block;
    }
    .nav-links{
        display: none;
    }
}
/* Mobile L */

@media (max-width:425px) {
  
    .hero-page img{
        width: 90%;
        /* height: 90%; */
    }
    .hero-page h2{
        font-size: 24px;
    }
    .about-me{
        padding: 50px 30px;
    }
    .skills_list{
        gap: 10px;
    }
    .skills_list div{
        width: 120px;
        height: 150px;
    }
    .skills_list img {
        width: 60px;
    }
    .projects-grid{
        grid-template-columns: 1fr;
    }
    .contact-info {
        flex-direction: column;
    }
    .contact-info div:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        border-right: 0;
    }
    .contact-title,.projects-title{
        padding: 10px 30px 10px 10px;
    }
    .contact-title h1,.projects-title h1{
        font-size: 30px;
    }
    .contact-form .input-row{
        flex-direction: column;
    }
    
}
/* Mobile M */

@media (max-width:375px) {
    .hero-page h1{
        font-size: 30;
    }

    .about-me, .projects{
        padding: 25px 20px ;

    }
    .hero-page{
        padding: 100px 15px 0 15px;
    }
    .contact-title,.projects-title{
        padding: 5px 20px 5px 5px;
    }
    .contact-title h1,.projects-title h1{
        font-size: 20px;
    }
}