@media (min-width: 320px) and (max-width: 480px) { 

    #nav-btn{
        display: none !important;
        background-color: red!;
      
    }

    .navbar-collapse{
        background-color: white;
    }

    #hero-main-container{
        padding-left: 1rem;

    }

    #logo{
        width: 8rem;
    }

    #hero-text-col h1{
        font-size: 2.5rem;
        margin-top: 3rem;
    }

    #hero-text-col p{
        font-size: 0.8rem;
    }

    #services-container{
        margin-top: 2rem;
    }

    #services-container .text-secondary{
        font-size: 0.7rem !important;
    }

    #services-image, #why-choose-image{
        width: 85%;
        display: block;
        margin: auto;
    }

    #services-text-div, #why-choose-text-div{
        padding: 1rem 2.5rem;

    }

    #why-choose-text-div p{
        font-size: 0.9rem !important; 
        margin-bottom: 0.6rem;  
    }

    #blog-section{
 
        padding: 1.5rem;
    }
}