@media (min-width: 500px) {
    header .header-content h3 {
        width: 100%;
        margin-bottom: 1.1rem;
        line-height: 1.9rem;
    }

    nav h2 {font-size: .79rem !important; padding-right: 5px;}


    nav ul li {font-size: .87rem !important; padding: 17px;}

    .w-need {height: 85vh !important;}

    .w-need h2 {font-size: 1.5rem; margin-bottom: 1rem;}


    
    .w-need p {line-height: 1.9rem; font-size: 1.1rem;}

    .service .service-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 25px;
        flex-direction: column;
    }

    .service .service-items .item {width: 95% !important;}

    .service .service-items .item:hover {
        box-shadow: #333 5px 5px 5px;
    }


    .contact p {width: 95%;}

    .contact input,
    .contact textarea,
    .contact input[type=submit] {width: 95%;}

    .contact input, .contact textarea, .contact input[type=submit] {width: 85% !important;}
    
    .contact hr,
    .w-need hr,
    .service hr,
    header .header-content hr
    {width: 15%; height: 5px}
}


/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px)  {
    header .header-content h3 {
        width: 100%;
        margin-bottom: 1.1rem;
        line-height: 1.9rem;
    }

    nav h2 {font-size: .79rem !important; padding-right: 5px;}

    nav ul li {font-size: .87rem !important; padding: 17px;}

    .w-need {height: 69vh}

    .w-need h2 {font-size: 1.5rem; margin-bottom: 1rem;}


    
    .w-need p {line-height: 1.9rem; font-size: 1.1rem;}

    .service .service-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 25px;
        flex-direction: column;
    }

    .service .service-items .item {width: 95% !important;}

    .service .service-items .item:hover {box-shadow: #333 5px 5px 5px;}

    .project .project-items .item {width: 100% !important;}

    .contact p {width: 95%;}

    .contact input,
    .contact textarea,
    .contact input[type=submit] {width: 95%;}
    
    .contact hr,
    .w-need hr,
    .service hr,
    header .header-content hr
    {width: 15%; height: 5px}

    .contact input, .contact textarea, .contact input[type=submit] {width: 85% !important;}
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    header .header-content h3 {
        width: 100%;
        margin-bottom: 1.1rem;
        line-height: 1.9rem;
    }


    nav ul li {font-size: .87rem !important; padding: 15px;}

    .w-need {height: 69vh}

    .w-need h2 {font-size: 1.5rem; margin-bottom: 1rem;}


    
    .w-need p {line-height: 1.9rem; font-size: 1.1rem;}

    .service .service-items {
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 25px;
        flex-wrap: wrap;
    }

    .service .service-items .item:hover {
        box-shadow: #333 5px 5px 5px;
    }

    .project .project-items .item {width: 50%;}

    .contact p {width: 95%;}

    .contact input,
    .contact textarea,
    .contact input[type=submit] {width: 95%;}
    
    .contact hr,
    .w-need hr,
    .service hr,
    header .header-content hr
    {width: 15%; height: 5px}

    .contact input, .contact textarea, .contact input[type=submit] {
        width: 55%;
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    nav h2 {font-size: 1.3rem !important; padding-top: 11px !important;}

    .contact input, .contact textarea, .contact input[type=submit] {width: 50% !important}

    .service .service-items .item {width: 25% !important}

    .service .service-items {flex-direction: row;}

    .w-need {height: 55vh !important}

    header .header-content {width: 65%; margin: 0 auto;}
}