/* Start Media Queries */

@media (max-width: 375px) {
    
    img {
        height: auto;
        width: 100%;
    }
    body {
        overflow-x: hidden;
    }
    /* Header Section */
    header {
        background-position: left;
    }
    header .header-content h1 {
        font-size: 24px;
    }
    header .header-content p {
        font-size: 16px;
    }
    header .header-content .btn {
        padding: 10px 45px;
        font-size: 16px;
        margin-right:20px;
    }
    
    /* About Section */
    #about .information h2 {
        font-size: 30px;
        margin: 15px 0;
    }
    #about {
        padding: 100px 0;
    }
    #about .social-links a {
        margin-right: 12px;
        margin-bottom: 12px;
    }
    
    /* Skills Section */
    .skills .part-text p {
        margin-bottom: 30px;
    }
    .skills .part-text .btn {
        margin-bottom: 60px;
    }
    
    /* Portfolio Section */
    .portfolio-filter .filter {
        margin-right: 10px;
        margin-bottom: 10px;
        display: block;
        width: auto;
    }

    /* NEW: only width, keep position from main.css */
    .modal-content {
        width: 90%;
        max-width: 100%;
    }

    /* Hire Me Section */
    .hire-me h2 {
        line-height: 30px;
        text-align: center;
    }
    .hire-me p {
        margin-bottom:30px;
    }

    /* Contact Section */
    #contact .row {
        padding-left: 0 !important;
        text-align: center;
    }

    .in {
        max-height: none;
        overflow: visible;
        margin-bottom:40px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        margin: 0 auto 20px;
    }

    input[type="submit"] {
        margin-top: 20px;
    }
    
    /* Footer */
    footer h3,
    footer p {
        margin-bottom: 20px;
    }
}

@media (max-width: 489px) {  
    
    img {
        height: auto;
        width: 100%;
    }
    body {
        overflow-x: hidden;
    }
    
    /* Header Section */
    header {
        background-position: left;
    }
    header .header-content h1 {
        font-size: 28px;
    }
    header .header-content p {
        font-size: 18px;
    }
    header .header-content .btn {
        padding: 10px 45px;
        font-size: 18px;
        margin-right:20px;
    }
    
    /* About Section */
    #about .information h2 {
        font-size: 30px;
        margin: 15px 0;
    }
    #about {
        padding: 100px 0;
    }
    #about .social-links a {
        margin-right: 12px;
        margin-bottom: 12px;
    }
    
    /* Skills Section */
    .skills .part-text p {
        margin-bottom: 30px;
    }
    .skills .part-text .btn {
        margin-bottom: 60px;
    }
    
    /* Portfolio Section */
    .portfolio-filter .filter {
        margin-right: 10px;
        margin-bottom: 10px;
        display: block;
        width: auto;
    }

    /* NEW: only width override */
    .modal-content {
        width: 90%;
        max-width: 100%;
    }
    
    /* Hire Me Section */
    .hire-me h2 {
        line-height: 30px;
        text-align: center;
    }
    .hire-me p {
        margin-bottom:30px;
    }

    /* Contact Section */
    #contact .row {
        padding-left: 0 !important;
        text-align: center;
    }

    .in {
        max-height: none;
        overflow: visible;
        margin-bottom:40px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        margin: 0 auto 20px;
    }

    input[type="submit"] {
        margin-top: 20px;
    }
    
    /* Footer */
    footer h3,
    footer p {
        margin-bottom: 20px;
    }
}

@media (max-width: 991px) { 

    /* Header Section */
    header {
        background-position: left;
    }
    header .header-content h1 {
        font-size: 34px;
    }
    header .header-content p {
        font-size: 20px;
    }
    header .header-content .btn {
        padding: 10px 45px;
        font-size: 18px;
        margin-right:20px;
    }
    
    /* About Section */
    #about {
        padding: 100px 0;
    }
    #about .social-links a {
        margin-right: 12px;
        margin-bottom: 12px;
    }
    
    /* Skills Section */
    .skills .part-text p {
        margin-bottom: 30px;
    }
    .skills .part-text .btn {
        margin-bottom: 60px;
    }

    /* Portfolio Section */
    .portfolio-filter .filter {
        margin-right: 10px;
        margin-bottom: 10px;
        display: block;
        width: auto;
    }
    
    /* NEW: only width override */
    .modal-content {
        width: 90%;
        max-width: 100%;
    }

    /* Hire Me Section */
    .hire-me h2 {
        line-height: 30px;
        text-align: center;
    }
    .hire-me p {
        margin-bottom:30px;
        text-align: center;
    }

    /* Contact Section */
    #contact .row {
        padding-left: 0 !important;
        text-align: center;
    }

    .in {
        max-height: none;
        overflow: visible;
        margin-bottom:40px;
    }

    input[type="text"],
    input[type="email"],
    textarea {
        margin: 0 auto 20px;
    }

    input[type="submit"] {
        margin-top: 20px;
    }

    /* Footer */
    footer h3,
    footer p {
        margin-bottom: 20px;
    }
}


/* End Media Queries */