@media( max-width:500px){
    section{
        padding: 00px 10px;
    }
    .flex-reverse{
        flex-direction: column-reverse;
    }
    .responsive-width{
        width: 100%;
    }
    .about-card{
        margin-top: 20px;
    }
    .project-card{
        margin-top: 20px;
    }
    footer{
        padding: 10px 20px;
    }
    .text-cen{
        text-align: center;
    }
    .contact-height{
        height: auto;
        padding: 10px 10px;
    }
    .top-bar p{
      font-size: 14px;  
      color: var(--color1);
    }
    .top-bar i{
      font-size: 14px; 
      margin-right: 0px; 
      color: var(--color1);

    }
    .top-bar{
        display:flex;
        flex-direction:column;
    }
    .button2{
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: #075E54;
        color: white!important;
        padding: 15px 20px;
        border: 1px solid white;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }
    .nav-cont{
        padding: 50px 30px!important;

    }
    .img-re{
        width: 250px;
    }
    .topProducts{
        padding: 30px!important;
    }
    .productCard p{
        font-size: 20px!important;
    }
    .productCard{
        border-radius: 10px;
        padding: 20px 10px!important;
        background-color: rgba(239, 239, 239, 0.378);
    }
   
}