@media (max-width: 599px) {
    
    #Navbar {
        padding: 10px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    #Navbar img {
        width: 30%;
    }
    
    #Navbar ul {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        left: 0%;
        width: 100%;
        top: 0%;
        background: #fff;
        opacity: 0;
        padding: 20px;
    }

    #Navbar ul.view {
        top: 11%;
        opacity: 1;
        transition: 0.5s;
    }
    
    #Navbar ul li {
        padding: 10px;
        list-style: none;
    }
    
    #Navbar ul li a {
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        padding: 10px;
        transition: all .3s;
    }
    
    .menu {
        display: initial;
    }

    #Hero {
        padding: 40px 20px;
        min-height: 40vh;
        text-align: center;
    }

    #Hero_about {
        padding: 40px 20px;
        text-align: center;
    }
    
    #Hero h1 {
        font-size: 32px;
        width: 100%;
    }

    #Hero_about h1 {
        font-size: 32px;
        width: 100%;
    }
    
    #Hero p {
        width: 100%;
        font-size: 16px;
    }
    #Hero a {
        font-size: 20px;
        padding: 10px;
    }

    .btn {
        justify-content: center;
        gap: 1em;
    }

    #About {
        padding: 20px 20px;
        flex-direction: column;
        gap: 1em;
    }

    .container {
        flex-direction: column;
        gap: 1em;
    }
    
    #About img {
        width: 100%;
    }

    .about_info p {
        font-size: 18px;
    }

    .about_plumbing {
        flex-direction: column;
    }

    #Plumbing {
        padding: 20px 20px;
    }

    .plumbing_goal {
        flex-direction: column;
    }
    
    #Services {
        padding: 20px 20px;
    }

    #Services  h2 {
        font-size: 32px;
    }

    .services h3 {
        color: #29abe2;
        font-size: 26px;
    }

    .services {
        text-align: center;
        width: 100%;
    }

    #services {
        padding: 20px 20px;
    }

    .group {
        flex-direction: column;
    }

    .services-card {
        width: 100%;
    }

    .services-card img {
        width: 100%;
    }

    .plumbing {
        flex-direction: column;
    }

    .plumbing img {
        width: 100%;
        min-height: 20vh;
    }

    #Banner {
        padding: 40px 20px;
        line-height: 1.2;
    }
    
    #Banner h3 {
        font-size: 27px;
    }

    #Why_us {
        padding: 20px 20px;
    }

    .why_us img {
        width: 100%;
    }

    .why_us {
        flex-direction: column;
    }

    .us_info h3 {
        width: 100%;
    }

    #Reviews {
        padding: 20px 20px;
    }

    .review_group {
        flex-direction: column;
    }

    #Contact {
        padding: 20px 20px;
    }

    .contact {
        flex-direction: column;
    }

    iframe {
        height: 350px;
    }

    #footer {
        padding: 20px 20px;
    }

    #footer img {
        width: 60%;
    }
    
    .footer {
        flex-direction: column;
        align-items: start;
    }

    footer {
        padding: 20px 20px;
    }


}